Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

fix: remove duplicate click handlers that cancelled Graph button toggle

Browse Source 
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.
This commit is contained in:
Joseph.Rawlings
2026-03-01 05:20:32 -05:00
parent 9855d44185
commit 20f8a71f75
1 changed files with 2 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
extensions/Servers/Proxmox/views/overview.blade.php
View File

@@ -1863,63 +1863,7 @@
} else { } else {
// Update existing interfaces immediately (just numbers, no re-render) // Update existing interfaces immediately (just numbers, no re-render)
data.interfaces.forEach(updateInterfaceData); data.interfaces.forEach(updateInterfaceData);
// Chart toggle clicks handled by document-level event delegation
// 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();
}
}
});
}
});
}
} }
} }
} else { } else {
@@ -2045,65 +1989,7 @@
// Re-initialize after a short delay to ensure DOM is ready // Re-initialize after a short delay to ensure DOM is ready
setTimeout(() => { setTimeout(() => {
tryBootstrap(); tryBootstrap();
// Also ensure event listeners are re-attached if interfaces are already rendered // Chart toggle clicks handled by document-level event delegation
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();
}
}
});
});
}
}
}, 100); }, 100);
}); });