diff options
Diffstat (limited to 'static/js/main.js')
| -rw-r--r-- | static/js/main.js | 255 |
1 files changed, 192 insertions, 63 deletions
diff --git a/static/js/main.js b/static/js/main.js index 74cdd10..d67493c 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -798,16 +798,17 @@ function handleMetricsVisibilityChange() { // --- Chart expansion functionality --- function expandChart(metricName, displayName) { - // Always try to get references to modal elements when function is called - // This ensures we have the most up-to-date references + // First ensure the chart modal exists (create it if needed) + ensureChartModalExists(); + + // After ensuring the chart modal exists, get fresh 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'); + const expandedChartCanvas = document.getElementById('expandedChart'); - // Safety check - if elements not found, show error and exit - if (!chartModal || !chartModalTitle) { - console.error("Chart modal elements not found"); + // Check that we have all required elements + if (!chartModal || !chartModalTitle || !expandedChartCanvas) { + console.error("Chart modal elements not found even after creation attempt"); alert("Unable to display expanded chart. Please refresh the page and try again."); return; } @@ -819,22 +820,6 @@ function expandChart(metricName, displayName) { chartModal.style.display = 'block'; setTimeout(() => chartModal.classList.add('show'), 10); - // Create an expanded version of the chart - const expandedChartCanvas = document.getElementById('expandedChart'); - if (!expandedChartCanvas) { - console.error("Expanded chart canvas not found"); - 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"); @@ -905,16 +890,192 @@ function closeChartModal(modalElement) { } } +// Ensure chart modal exists in the DOM +function ensureChartModalExists() { + let chartModalEl = document.getElementById('chart-modal'); + + // If the chart modal doesn't exist, create it programmatically + if (!chartModalEl) { + console.log("Chart modal not found in DOM, creating it dynamically"); + + // First, ensure we have the required CSS styles + ensureModalStyles(); + + // Create the modal elements + chartModalEl = document.createElement('div'); + chartModalEl.id = 'chart-modal'; + chartModalEl.className = 'modal'; + + const modalContent = document.createElement('div'); + modalContent.className = 'modal-content chart-modal-content'; + + const closeButton = document.createElement('span'); + closeButton.className = 'close-button'; + closeButton.innerHTML = '×'; + + const modalTitle = document.createElement('h3'); + modalTitle.id = 'chart-modal-title'; + modalTitle.textContent = 'Chart Details'; + + const chartContainer = document.createElement('div'); + chartContainer.className = 'expanded-chart-container'; + + const canvas = document.createElement('canvas'); + canvas.id = 'expandedChart'; + + const closeModalBtn = document.createElement('button'); + closeModalBtn.id = 'close-chart-modal'; + closeModalBtn.className = 'button'; + closeModalBtn.textContent = 'Close'; + + // Assemble the modal + chartContainer.appendChild(canvas); + modalContent.appendChild(closeButton); + modalContent.appendChild(modalTitle); + modalContent.appendChild(chartContainer); + modalContent.appendChild(closeModalBtn); + chartModalEl.appendChild(modalContent); + + // Add to document body + document.body.appendChild(chartModalEl); + + // Set up event listeners + closeButton.addEventListener('click', () => closeChartModal(chartModalEl)); + closeModalBtn.addEventListener('click', () => closeChartModal(chartModalEl)); + chartModalEl.addEventListener('click', (event) => { + if (event.target === chartModalEl) { + closeChartModal(chartModalEl); + } + }); + + // Update global references + chartModal = chartModalEl; + chartModalTitle = modalTitle; + closeChartModalBtn = closeButton; + closeChartBtn = closeModalBtn; + + console.log("Chart modal created dynamically", { + chartModal: !!chartModal, + chartModalTitle: !!chartModalTitle, + closeChartModalBtn: !!closeChartModalBtn, + closeChartBtn: !!closeChartBtn + }); + + return true; + } + + return false; +} + +// Ensure modal styles are added to the page +function ensureModalStyles() { + // Check if we already have a style tag with our styles + if (document.getElementById('dynamic-modal-styles')) { + return; + } + + // Create a style element + const styleEl = document.createElement('style'); + styleEl.id = 'dynamic-modal-styles'; + + // Define CSS for modals + const css = ` + .modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 1000; + opacity: 0; + transition: opacity 0.3s ease; + overflow-y: auto; + } + + .modal.show { + opacity: 1; + } + + .modal-content { + background-color: #111; + margin: 10% auto; + padding: 20px; + border: 1px solid #333; + width: 80%; + max-width: 500px; + border-radius: 8px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + transform: translateY(-20px); + transition: transform 0.3s ease; + animation: modalFadeIn 0.3s forwards; + } + + .modal.show .modal-content { + transform: translateY(0); + } + + @keyframes modalFadeIn { + from { opacity: 0; transform: translateY(-20px); } + to { opacity: 1; transform: translateY(0); } + } + + .close-button { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + margin-top: -10px; + cursor: pointer; + transition: color 0.3s ease; + } + + .close-button:hover { + color: #FDCFF3; + text-decoration: none; + cursor: pointer; + } + + .chart-modal-content { + max-width: 800px; + width: 90%; + } + + .expanded-chart-container { + width: 100%; + height: 400px; + margin: 20px 0; + } + `; + + // Add the styles to the page + styleEl.textContent = css; + document.head.appendChild(styleEl); + + console.log("Added dynamic modal styles to page"); +} + // --- Initialize everything when DOM is loaded --- document.addEventListener('DOMContentLoaded', function() { // Set DOM ready flag domReady = true; - // Initialize all DOM elements + // Try to find chart modal elements first chartModal = document.getElementById('chart-modal'); chartModalTitle = document.getElementById('chart-modal-title'); closeChartModalBtn = document.querySelector('#chart-modal .close-button'); closeChartBtn = document.getElementById('close-chart-modal'); + + // If chart modal doesn't exist, create it + if (!chartModal || !chartModalTitle || !closeChartModalBtn || !closeChartBtn) { + const created = ensureChartModalExists(); + if (created) { + console.log("Chart modal was created during initialization"); + } + } + + // Initialize other DOM elements metricsSection = document.getElementById('metrics-section'); viewMetricsBtn = document.getElementById('view-metrics-btn'); passwordModal = document.getElementById('password-modal'); @@ -923,12 +1084,6 @@ document.addEventListener('DOMContentLoaded', function() { passwordError = document.getElementById('password-error'); metricsControls = document.getElementById('metrics-controls'); - // Log any missing critical elements - if (!chartModal) console.warn("Chart modal element not found in DOM"); - if (!chartModalTitle) console.warn("Chart modal title element not found in DOM"); - if (!metricsSection) console.warn("Metrics section element not found in DOM"); - if (!passwordModal) console.warn("Password modal element not found in DOM"); - // For debugging - log all initialized elements console.log("DOM elements initialized:", { chartModal: !!chartModal, @@ -999,26 +1154,6 @@ document.addEventListener('DOMContentLoaded', function() { observer.observe(metricsSection, { attributes: true, attributeFilter: ['style'] }); } - // 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(chartModal); - } - }); - } - // Close modals with Escape key document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { @@ -1034,6 +1169,12 @@ document.addEventListener('DOMContentLoaded', function() { // Ensure chart elements are initialized when DOM is fully ready document.addEventListener('dom-fully-ready', function() { + // Ensure the chart modal exists + const created = ensureChartModalExists(); + if (created) { + console.log("Chart modal was created during dom-fully-ready event"); + } + // Get fresh references to chart elements const chartModalEl = document.getElementById('chart-modal'); const chartModalTitleEl = document.getElementById('chart-modal-title'); @@ -1057,19 +1198,7 @@ document.addEventListener('dom-fully-ready', function() { 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 { + if (!allElementsFound) { console.error("Some chart modal elements are still missing after DOM is fully ready"); } });
\ No newline at end of file |