73 lines
3.0 KiB
JavaScript
73 lines
3.0 KiB
JavaScript
function generateJobAds(activeCount, inactiveCount) {
|
|
const container = document.getElementById('extra-job-ads-content');
|
|
container.innerHTML = ''; // Clear existing content
|
|
|
|
// Update the tab text with the total number of job ads
|
|
const totalJobAds = activeCount + inactiveCount;
|
|
const extraJobAdsTab = document.getElementById('extra-job-ads-tab');
|
|
extraJobAdsTab.textContent = `Extra job ads (${totalJobAds})`;
|
|
|
|
// Generate active job ads
|
|
for (let i = 1; i <= activeCount; i++) {
|
|
const activeAdContainer = document.createElement('div');
|
|
activeAdContainer.className = 'job-ad-container mb-4';
|
|
|
|
const activeAdTitle = document.createElement('p');
|
|
activeAdTitle.className = 'job-ad-title text-gray-800';
|
|
activeAdTitle.textContent = `Extra job ad #${i} (currently in use)`;
|
|
|
|
const activeAd = document.createElement('div');
|
|
activeAd.className = 'job-ad-detail active-job-ad p-4 bg-white rounded-lg shadow';
|
|
activeAd.innerHTML = `
|
|
<p class="text-green-500 status">Currently active</p>
|
|
<p class="text-gray-800 job-title"><Job ad title></p>
|
|
<p class="text-gray-600 expiry-label">Expiry Date</p>
|
|
<p class="text-gray-800 expiry-date">DD month YYYY (X days remaining)</p>
|
|
`;
|
|
|
|
activeAdContainer.appendChild(activeAdTitle);
|
|
activeAdContainer.appendChild(activeAd);
|
|
container.appendChild(activeAdContainer);
|
|
}
|
|
|
|
// Generate inactive job ads
|
|
for (let i = 1; i <= inactiveCount; i++) {
|
|
const inactiveAdContainer = document.createElement('div');
|
|
inactiveAdContainer.className = 'job-ad-container mb-4';
|
|
|
|
const inactiveAdTitle = document.createElement('p');
|
|
inactiveAdTitle.className = 'job-ad-title text-gray-800';
|
|
inactiveAdTitle.textContent = `Extra job ad #${i + activeCount}`;
|
|
|
|
const inactiveAd = document.createElement('div');
|
|
inactiveAd.className = 'job-ad-detail inactive-job-ad p-4 bg-white rounded-lg shadow';
|
|
inactiveAd.innerHTML = `
|
|
<p class="text-gray-500 status">Ready to be used / Not active</p>
|
|
`;
|
|
|
|
inactiveAdContainer.appendChild(inactiveAdTitle);
|
|
inactiveAdContainer.appendChild(inactiveAd);
|
|
container.appendChild(inactiveAdContainer);
|
|
}
|
|
}
|
|
|
|
function showExtraJobAdsTab() {
|
|
document.getElementById('extra-job-ads-content').classList.remove('hidden');
|
|
document.getElementById('extra-job-ads-tab').classList.add('custom-tab-active');
|
|
document.getElementById('extra-job-ads-tab').classList.remove('custom-tab-inactive');
|
|
|
|
loadComponent('buttons-container', 'components/Button.html', () => {
|
|
document.getElementById('button-text').innerText = 'GET EXTRA JOB ADS';
|
|
const buttonElement = document.getElementById('button-element');
|
|
buttonElement.classList.add('bg-black', 'text-white');
|
|
buttonElement.innerHTML += `
|
|
<svg class="h-6 w-6 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
`;
|
|
});
|
|
|
|
// Generate job ads dynamically
|
|
generateJobAds(2, 1);
|
|
}
|