From 20f8a71f756ca10095fd3f587e76698e2214b8f8 Mon Sep 17 00:00:00 2001 From: "Joseph.Rawlings" Date: Sun, 1 Mar 2026 05:20:32 -0500 Subject: [PATCH] fix: remove duplicate click handlers that cancelled Graph button toggle Three separate click handlers were all firing on the same Graph button click, each calling classList.toggle('open'). Multiple toggles cancel out (on->off or on->off->on), making the button appear broken. Removed redundant per-button listeners from poll() and livewire:navigated. The document-level event delegation handles all clicks correctly for dynamically created elements. --- .../Servers/Proxmox/views/overview.blade.php | 118 +----------------- 1 file changed, 2 insertions(+), 116 deletions(-) diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php index ce3dbfd31..3ce2a8170 100644 --- a/extensions/Servers/Proxmox/views/overview.blade.php +++ b/extensions/Servers/Proxmox/views/overview.blade.php @@ -1863,63 +1863,7 @@ } else { // Update existing interfaces immediately (just numbers, no re-render) data.interfaces.forEach(updateInterfaceData); - - // After tab switch, ensure chart toggle listeners are attached even if interfaces exist - // This handles the case where DOM was replaced but interfaces were re-rendered - const toggleButtons = container.querySelectorAll('.chart-toggle'); - if (toggleButtons.length > 0) { - toggleButtons.forEach(button => { - // Check if button already has a data-listener attribute - if (!button.dataset.listenerAttached) { - button.dataset.listenerAttached = 'true'; - const interfaceId = button.dataset.interface; - - button.addEventListener('click', (e) => { - const interfaceId = e.currentTarget.dataset.interface; - const container = document.querySelector(`[data-chart-container="${interfaceId}"]`); - - if (container) { - container.classList.toggle('open'); - - // Create chart on first open - if (container.classList.contains('open') && !charts[interfaceId]) { - const attemptCreateChart = (retries = 5, delay = 200) => { - const interfaceData = networkData?.interfaces?.find(i => - i.id.replace(/[^a-z0-9]/gi, '-') === interfaceId - ); - - const canvas = document.getElementById(`chart-${interfaceId}`); - - if (canvas && interfaceData && interfaceData.history) { - const historyLength = Math.max( - interfaceData.history.download?.length || 0, - interfaceData.history.upload?.length || 0 - ); - - if (historyLength > 0) { - requestAnimationFrame(() => { - setTimeout(() => { - if (!charts[interfaceId]) { - createChart(interfaceId, interfaceData); - } - }, 50); - }); - return; - } - } - - if (retries > 0) { - setTimeout(() => attemptCreateChart(retries - 1, delay), delay); - } - }; - - attemptCreateChart(); - } - } - }); - } - }); - } + // Chart toggle clicks handled by document-level event delegation } } } else { @@ -2045,65 +1989,7 @@ // Re-initialize after a short delay to ensure DOM is ready setTimeout(() => { tryBootstrap(); - // Also ensure event listeners are re-attached if interfaces are already rendered - if (networkData && networkData.interfaces && networkData.interfaces.length > 0) { - const container = document.getElementById('network-traffic-container'); - if (container && container.querySelectorAll('.chart-toggle').length > 0) { - // Re-attach chart toggle listeners - document.querySelectorAll('.chart-toggle').forEach(button => { - // Remove any existing listeners by cloning the button - const newButton = button.cloneNode(true); - button.parentNode.replaceChild(newButton, button); - - // Add fresh event listener - newButton.addEventListener('click', (e) => { - const interfaceId = e.currentTarget.dataset.interface; - const container = document.querySelector(`[data-chart-container="${interfaceId}"]`); - - if (container) { - container.classList.toggle('open'); - - // Create chart on first open - if (container.classList.contains('open') && !charts[interfaceId]) { - const attemptCreateChart = (retries = 5, delay = 200) => { - const interfaceData = networkData?.interfaces?.find(i => - i.id.replace(/[^a-z0-9]/gi, '-') === interfaceId - ); - - const canvas = document.getElementById(`chart-${interfaceId}`); - - if (canvas && interfaceData && interfaceData.history) { - const historyLength = Math.max( - interfaceData.history.download?.length || 0, - interfaceData.history.upload?.length || 0 - ); - - if (historyLength > 0) { - requestAnimationFrame(() => { - setTimeout(() => { - if (!charts[interfaceId]) { - createChart(interfaceId, interfaceData); - } - }, 50); - }); - return; - } - } - - if (retries > 0) { - setTimeout(() => attemptCreateChart(retries - 1, delay), delay); - } else { - console.warn('Failed to create chart for', interfaceId, 'after multiple attempts'); - } - }; - - attemptCreateChart(); - } - } - }); - }); - } - } + // Chart toggle clicks handled by document-level event delegation }, 100); });