diff options
| -rw-r--r-- | static/js/main.js | 126 |
1 files changed, 78 insertions, 48 deletions
diff --git a/static/js/main.js b/static/js/main.js index 55de443..74cdd10 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -796,23 +796,19 @@ function handleMetricsVisibilityChange() { } } -// Chart expansion functionality +// --- Chart expansion functionality --- function expandChart(metricName, displayName) { - // Safety check - if DOM is not ready, we can't expand the chart yet - if (!domReady) { - console.warn("Cannot expand chart, DOM not ready yet"); - return; - } + // Always try to get references to modal elements when function is called + // This ensures we have the most up-to-date references + const chartModal = document.getElementById('chart-modal'); + const chartModalTitle = document.getElementById('chart-modal-title'); + const closeChartModalBtn = document.querySelector('#chart-modal .close-button'); + const closeChartBtn = document.getElementById('close-chart-modal'); - // Make sure the modal elements are initialized - if (!chartModal) chartModal = document.getElementById('chart-modal'); - if (!chartModalTitle) chartModalTitle = document.getElementById('chart-modal-title'); - if (!closeChartModalBtn) closeChartModalBtn = document.querySelector('#chart-modal .close-button'); - if (!closeChartBtn) closeChartBtn = document.getElementById('close-chart-modal'); - - // Safety check - if elements still not found, exit + // Safety check - if elements not found, show error and exit if (!chartModal || !chartModalTitle) { console.error("Chart modal elements not found"); + alert("Unable to display expanded chart. Please refresh the page and try again."); return; } @@ -830,6 +826,15 @@ function expandChart(metricName, displayName) { return; } + // Set up close button event listeners if they exist + if (closeChartModalBtn) { + closeChartModalBtn.addEventListener('click', () => closeChartModal(chartModal)); + } + + if (closeChartBtn) { + closeChartBtn.addEventListener('click', () => closeChartModal(chartModal)); + } + const ctx = expandedChartCanvas.getContext('2d'); if (!ctx) { console.error("Could not get canvas context"); @@ -837,9 +842,9 @@ function expandChart(metricName, displayName) { } // If there's already an expanded chart, destroy it first - if (expandedChart) { + if (window.expandedChart) { try { - expandedChart.destroy(); + window.expandedChart.destroy(); } catch (error) { console.warn("Error destroying previous chart:", error); } @@ -869,7 +874,7 @@ function expandChart(metricName, displayName) { })) }; - expandedChart = new Chart(ctx, { + window.expandedChart = new Chart(ctx, { type: 'line', data: chartData, options: chartOptions @@ -880,24 +885,20 @@ function expandChart(metricName, displayName) { } // Close modal events -function closeChartModal() { - if (!domReady) { - console.warn("Cannot close chart modal, DOM not ready yet"); - return; - } +function closeChartModal(modalElement) { + // If called with a specific modal element, use that + // Otherwise try to get it from the DOM + const chartModal = modalElement || document.getElementById('chart-modal'); if (!chartModal) { - chartModal = document.getElementById('chart-modal'); - if (!chartModal) { - console.error("Chart modal element not found"); - return; - } + console.error("Chart modal element not found"); + return; } try { chartModal.classList.remove('show'); setTimeout(() => { - if (chartModal) chartModal.style.display = 'none'; + chartModal.style.display = 'none'; }, 300); } catch (error) { console.error("Error closing chart modal:", error); @@ -998,29 +999,32 @@ document.addEventListener('DOMContentLoaded', function() { observer.observe(metricsSection, { attributes: true, attributeFilter: ['style'] }); } - // Chart modal event listeners - if (closeChartModalBtn) { - closeChartModalBtn.addEventListener('click', closeChartModal); - } - - if (closeChartBtn) { - closeChartBtn.addEventListener('click', closeChartModal); - } - - // Close modal when clicking outside of it - if (chartModal) { - chartModal.addEventListener('click', (event) => { + // Set up chart modal event listeners if the elements exist + if (chartModal && closeChartModalBtn && closeChartBtn) { + // Close button in the top right + closeChartModalBtn.addEventListener('click', function() { + closeChartModal(chartModal); + }); + + // Close button at the bottom + closeChartBtn.addEventListener('click', function() { + closeChartModal(chartModal); + }); + + // Close modal when clicking outside of it + chartModal.addEventListener('click', function(event) { if (event.target === chartModal) { - closeChartModal(); + closeChartModal(chartModal); } }); } - // Close modal with Escape key - document.addEventListener('keydown', (event) => { + // Close modals with Escape key + document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { + const chartModal = document.getElementById('chart-modal'); if (chartModal && chartModal.classList.contains('show')) { - closeChartModal(); + closeChartModal(chartModal); } else if (passwordModal && passwordModal.style.display === 'block') { closePasswordModal(); } @@ -1030,11 +1034,21 @@ document.addEventListener('DOMContentLoaded', function() { // Ensure chart elements are initialized when DOM is fully ready document.addEventListener('dom-fully-ready', function() { - // Initialize chart elements again to be extra safe - chartModal = document.getElementById('chart-modal'); - chartModalTitle = document.getElementById('chart-modal-title'); - closeChartModalBtn = document.querySelector('#chart-modal .close-button'); - closeChartBtn = document.getElementById('close-chart-modal'); + // Get fresh references to chart elements + const chartModalEl = document.getElementById('chart-modal'); + const chartModalTitleEl = document.getElementById('chart-modal-title'); + const closeChartModalBtnEl = document.querySelector('#chart-modal .close-button'); + const closeChartBtnEl = document.getElementById('close-chart-modal'); + + // Store in global variables for access in other functions + if (chartModalEl) chartModal = chartModalEl; + if (chartModalTitleEl) chartModalTitle = chartModalTitleEl; + if (closeChartModalBtnEl) closeChartModalBtn = closeChartModalBtnEl; + if (closeChartBtnEl) closeChartBtn = closeChartBtnEl; + + // Verify modal elements were found + const allElementsFound = !!chartModal && !!chartModalTitle && + !!closeChartModalBtn && !!closeChartBtn; console.log("Chart elements initialized on dom-fully-ready event:", { chartModal: !!chartModal, @@ -1042,4 +1056,20 @@ document.addEventListener('dom-fully-ready', function() { closeChartModalBtn: !!closeChartModalBtn, closeChartBtn: !!closeChartBtn }); + + // Set up event listeners if they weren't set up properly before + if (allElementsFound) { + // Add event listeners for closing the chart modal + closeChartModalBtn.addEventListener('click', () => closeChartModal(chartModal)); + closeChartBtn.addEventListener('click', () => closeChartModal(chartModal)); + + // Close modal when clicking outside + chartModal.addEventListener('click', (event) => { + if (event.target === chartModal) { + closeChartModal(chartModal); + } + }); + } else { + console.error("Some chart modal elements are still missing after DOM is fully ready"); + } });
\ No newline at end of file |