${alert.message}

${alert.timestamp}

`; alertsContainerEl.appendChild(alertEl); }); } function renderConfigOptions() { if (!incidentTypeConfigEl) return; incidentTypeConfigEl.innerHTML = 'Select Incident Type'; incidentTypes.forEach(type => { const option = document.createElement('option'); option.value = type; option.textContent = type; incidentTypeConfigEl.appendChild(option); }); } function renderAll() { renderIncidents(); renderResourceAllocation(); renderAlerts(); renderConfigOptions(); } // --- EVENT HANDLERS & LOGIC --- window.changeTab = (evt, tabName) => { const tabcontent = document.getElementsByClassName("tab-content"); for (let i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } const tablinks = document.getElementsByClassName("tab-button"); for (let i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; // Re-initialize map if dashboard tab is selected as it might not be visible initially if (tabName === 'dashboardTab') { // Use a timeout to ensure the container is visible and has dimensions setTimeout(() => map.invalidateSize(), 10); } }; window.navigateToTab = (tabName) => { const tabButton = Array.from(document.querySelectorAll('.tab-button')).find(btn => btn.getAttribute('onclick').includes(tabName)); if (tabButton) { tabButton.click(); } }; window.panToIncident = (id) => { const incident = incidents.find(inc => inc.id === id); if (incident && map) { map.panTo([incident.lat, incident.lon]); if(markers[id]) { markers[id].openPopup(); } } }; window.assignResource = (incidentId) => { const selectEl = document.getElementById(`assign-resource-${incidentId}`); if (!selectEl || !selectEl.value) return; const resourceId = parseInt(selectEl.value); const incident = incidents.find(inc => inc.id === incidentId); const resource = resources.find(res => res.id === resourceId); if (incident && resource) { incident.resources.push(resourceId); resource.status = 'Assigned'; console.log(`Assigned ${resource.name} to ${incident.name}`); renderAll(); } }; addIncidentForm.addEventListener('submit', (e) => { e.preventDefault(); const newIncident = { id: Date.now(), name: document.getElementById('incident-name').value, type: document.getElementById('incident-type-config').value, location: document.getElementById('incident-location').value, lat: parseFloat(document.getElementById('incident-lat').value), lon: parseFloat(document.getElementById('incident-lon').value), status: 'Active', resources: [] }; incidents.unshift(newIncident); renderAll(); addIncidentForm.reset(); alert('New incident added successfully!'); }); addResourceForm.addEventListener('submit', (e) => { e.preventDefault(); const newResource = { id: Date.now(), name: document.getElementById('resource-name').value, type: document.getElementById('resource-type-config').value, station: document.getElementById('resource-station').value, status: 'Available' }; resources.push(newResource); renderAll(); addResourceForm.reset(); alert('New resource unit added successfully!'); }); downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const dashboardContent = document.querySelector('.dashboard-container'); const originalTitle = dashboardContent.querySelector('h1').innerText; const pdfTitle = "Emergency Response Summary"; dashboardContent.querySelector('h1').innerText = pdfTitle; // Temporarily hide elements not needed in PDF const elementsToHide = dashboardContent.querySelectorAll('#tab-container, .nav-buttons, #download-pdf, form, .btn'); elementsToHide.forEach(el => el.style.visibility = 'hidden'); // Make all tabs visible for capture const allTabs = dashboardContent.querySelectorAll('.tab-content'); allTabs.forEach(tab => tab.style.display = 'block'); html2canvas(dashboardContent, { scale: 2, // Increase resolution useCORS: true, onclone: (doc) => { // Ensure map renders in the clone const mapContainer = doc.getElementById('map'); if (mapContainer) { mapContainer.style.height = '300px'; // Adjust height for PDF } } }).then(canvas => { // Restore visibility of elements elementsToHide.forEach(el => el.style.visibility = 'visible'); dashboardContent.querySelector('h1').innerText = originalTitle; // Restore original tab view const activeTabButton = document.querySelector('.tab-button.active'); if (activeTabButton) { activeTabButton.click(); } const imgData = canvas.toDataURL('image/png'); const imgProps = pdf.getImageProperties(imgData); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; let heightLeft = pdfHeight; let position = 0; pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight); heightLeft -= pdf.internal.pageSize.getHeight(); while (heightLeft >= 0) { position = heightLeft - pdfHeight; pdf.addPage(); pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight); heightLeft -= pdf.internal.pageSize.getHeight(); } pdf.save(`${pdfTitle} - ${new Date().toISOString().slice(0,10)}.pdf`); }).catch(err => { console.error("PDF generation failed:", err); alert("Could not generate PDF. Please try again."); // Restore visibility even on error elementsToHide.forEach(el => el.style.visibility = 'visible'); dashboardContent.querySelector('h1').innerText = originalTitle; const activeTabButton = document.querySelector('.tab-button.active'); if (activeTabButton) { activeTabButton.click(); } }); }); // --- INITIAL LOAD --- initializeMap(); renderAll(); });