`; timelineContainer.appendChild(item); }); }; const renderConfigForm = () => { dataConfigForm.innerHTML = ''; timelineData.forEach((event, index) => { const row = document.createElement('div'); row.className = 'grid grid-cols-1 md:grid-cols-12 gap-4 items-start p-4 bg-gray-50 rounded-lg'; row.innerHTML = ` `; dataConfigForm.appendChild(row); }); }; const renderAll = () => { renderTimeline(); renderConfigForm(); }; // --- GLOBAL FUNCTIONS FOR DATA MANIPULATION --- window.updateData = (index, field, value) => { timelineData[index][field] = value; renderTimeline(); }; window.deleteData = (index) => { timelineData.splice(index, 1); renderAll(); }; // --- TAB NAVIGATION LOGIC --- const switchTab = (tabIndex) => { currentTab = tabIndex; tabButtons.forEach((button, index) => button.classList.toggle('active', index === tabIndex)); tabContents.forEach((content, index) => content.classList.toggle('hidden', index !== tabIndex)); updateNavControls(); }; const updateNavControls = () => { tabIndicator.textContent = `Tab ${currentTab + 1} of ${totalTabs}`; prevBtn.disabled = currentTab === 0; nextBtn.disabled = currentTab === totalTabs - 1; prevBtn.classList.toggle('opacity-50', currentTab === 0); nextBtn.classList.toggle('opacity-50', currentTab === totalTabs - 1); }; // --- PDF DOWNLOAD LOGIC --- const handlePdfDownload = async () => { const { jsPDF } = window.jspdf; const pdfContainer = document.getElementById('dashboard-for-pdf'); downloadPdfBtn.textContent = 'Generating PDF...'; downloadPdfBtn.disabled = true; const canvas = await html2canvas(pdfContainer, { scale: 2, backgroundColor: '#f9fafb' }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgHeight = canvas.height * pdfWidth / canvas.width; pdf.setFontSize(24); pdf.text('Project Timeline Report', 20, 40); pdf.addImage(imgData, 'PNG', 0, 60, pdfWidth, imgHeight); pdf.save('Timeline-Visualisation.pdf'); downloadPdfBtn.innerHTML = ` Download PDF`; downloadPdfBtn.disabled = false; }; // --- EVENT LISTENERS --- tabButtons.forEach((btn, i) => btn.addEventListener('click', () => switchTab(i))); nextBtn.addEventListener('click', () => currentTab < totalTabs - 1 && switchTab(currentTab + 1)); prevBtn.addEventListener('click', () => currentTab > 0 && switchTab(currentTab - 1)); addEventBtn.addEventListener('click', () => { const today = new Date().toISOString().split('T')[0]; timelineData.push({ date: today, title: 'New Event', description: 'Details about the new event.' }); renderAll(); }); downloadPdfBtn.addEventListener('click', handlePdfDownload); // --- INITIALIZATION --- renderAll(); updateNavControls(); });