${event.description}

`; li.appendChild(contentDiv); container.appendChild(li); }); } function filterEvents(yearStart, yearEnd, searchTerm = "", participant = "ALL", significanceFilter = null) { let filtered = spaceRaceEventsData.filter(event => { const eventYear = new Date(event.date).getFullYear(); const matchesYear = eventYear >= yearStart && eventYear <= yearEnd; const matchesSearch = searchTerm ? (event.title.toLowerCase().includes(searchTerm) || event.description.toLowerCase().includes(searchTerm)) : true; const matchesParticipant = participant === "ALL" ? true : event.country.includes(participant); const matchesSignificance = significanceFilter ? event.significance === significanceFilter : true; return matchesYear && matchesSearch && matchesParticipant && matchesSignificance; }); return filtered; } // --- Tab Specific Logic --- const ftYearStart = document.getElementById('ft-year-start'); const ftYearEnd = document.getElementById('ft-year-end'); const ftSearch = document.getElementById('ft-search'); const bpYearStart = document.getElementById('bp-year-start'); const bpYearEnd = document.getElementById('bp-year-end'); const participantSelect = document.getElementById('participant-select'); function updateFullTimelineView() { const events = filterEvents( parseInt(ftYearStart.value), parseInt(ftYearEnd.value), ftSearch.value.toLowerCase() ); renderTimeline('sret-timeline-list-full', events); } function updateKeyMilestonesView() { // For milestones, we usually show all significant regardless of narrow year range, or adjust if needed // Here, let's keep it simple and show all major milestones from the dataset. const events = filterEvents(1950, 1980, "", "ALL", 1); // Significance 1 renderTimeline('sret-timeline-list-milestones', events); } function updateParticipantView() { const events = filterEvents( parseInt(bpYearStart.value), parseInt(bpYearEnd.value), "", participantSelect.value ); renderTimeline('sret-timeline-list-participant', events); } // Event listeners for controls [ftYearStart, ftYearEnd, ftSearch].forEach(el => el.addEventListener('input', updateFullTimelineView)); [bpYearStart, bpYearEnd, participantSelect].forEach(el => el.addEventListener('change', updateParticipantView)); // Use change for select // --- Tab Switching --- function switchTab(targetTabId) { tabs.forEach(t => t.classList.remove('active')); contents.forEach(c => c.classList.remove('active')); document.querySelector(`.sret-tab-button[data-tab="${targetTabId}"]`).classList.add('active'); document.getElementById(targetTabId).classList.add('active'); updateNavButtons(); // Update content for the newly active tab if (targetTabId === 'fullTimeline') updateFullTimelineView(); else if (targetTabId === 'keyMilestones') updateKeyMilestonesView(); else if (targetTabId === 'byParticipant') updateParticipantView(); } tabs.forEach(tab => tab.addEventListener('click', () => switchTab(tab.dataset.tab))); // Navigation buttons function updateNavButtons() { const activeTab = document.querySelector('.sret-tab-button.active'); const currentIndex = Array.from(tabs).indexOf(activeTab); prevTabBtn.disabled = currentIndex === 0; nextTabBtn.disabled = currentIndex === tabs.length - 1; } prevTabBtn.addEventListener('click', () => { const currentIndex = Array.from(tabs).indexOf(document.querySelector('.sret-tab-button.active')); if (currentIndex > 0) switchTab(tabs[currentIndex - 1].dataset.tab); }); nextTabBtn.addEventListener('click', () => { const currentIndex = Array.from(tabs).indexOf(document.querySelector('.sret-tab-button.active')); if (currentIndex < tabs.length - 1) switchTab(tabs[currentIndex + 1].dataset.tab); }); // --- PDF Download --- downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'pt', 'a4'); const timestamp = new Date().toLocaleString(); let title = "Space Race Events Timeline"; let eventsToPrint = []; const activeTabId = document.querySelector('.sret-tab-button.active').dataset.tab; if (activeTabId === 'fullTimeline') { title = `Space Race: Full Timeline (${ftYearStart.value}-${ftYearEnd.value})`; if (ftSearch.value) title += ` - Search: "${ftSearch.value}"`; eventsToPrint = filterEvents(parseInt(ftYearStart.value), parseInt(ftYearEnd.value), ftSearch.value.toLowerCase()); } else if (activeTabId === 'keyMilestones') { title = "Space Race: Key Milestones"; eventsToPrint = filterEvents(1950, 1980, "", "ALL", 1); } else if (activeTabId === 'byParticipant') { title = `Space Race: By Participant - ${participantSelect.options[participantSelect.selectedIndex].text} (${bpYearStart.value}-${bpYearEnd.value})`; eventsToPrint = filterEvents(parseInt(bpYearStart.value), parseInt(bpYearEnd.value), "", participantSelect.value); } doc.setFontSize(18); doc.text(title, doc.internal.pageSize.getWidth() / 2, 30, { align: 'center' }); doc.setFontSize(10); doc.text(`Generated: ${timestamp}`, doc.internal.pageSize.getWidth() / 2, 45, { align: 'center' }); const tableData = eventsToPrint.map(event => [ formatDate(event.date), event.title, event.country, event.description ]); if (tableData.length > 0) { doc.autoTable({ startY: 60, head: [['Date', 'Event', 'Country', 'Description']], body: tableData, theme: 'grid', headStyles: { fillColor: [26, 43, 60] }, // --primary-bg styles: { fontSize: 8, cellPadding: 3 }, columnStyles: { 0: { cellWidth: 70 }, // Date 1: { cellWidth: 120 }, // Event 2: { cellWidth: 50 }, // Country 3: { cellWidth: 'auto' } // Description }, didDrawPage: function (data) { // Add footer to each page doc.setFontSize(8); doc.text('Space Race Timeline', data.settings.margin.left, doc.internal.pageSize.getHeight() - 10); } }); } else { doc.setFontSize(12); doc.text("No events to display for the current selection.", 14, 70); } doc.save(`SpaceRace_Timeline_${activeTabId}_${new Date().toISOString().slice(0,10)}.pdf`); }); // Initial setup updateNavButtons(); switchTab('fullTimeline'); // Initialize with the full timeline view });