From aeacadbe68c23d757f4ccd7f31e4b0fa47dcfc04 Mon Sep 17 00:00:00 2001 From: Gronod Date: Tue, 19 May 2026 21:20:34 +0100 Subject: [PATCH] refactor(webhooks): Integrate webhooks panel into status card - Moved webhooks-section to be inline with status-panel in HTML - Updated toggleStatusPanel() to show/hide webhooks section for admin users - Updated closeStatusPanel() to also hide webhooks section - Removed webhooks visibility from showDashboard() - now tied to status panel - Updated CSS to make webhooks section styling consistent with status panel: - Same border, border-radius, margin, box-shadow - Updated webhook-stats to use status-card styling (background, border) - Webhooks metrics now display inline with status panel for admin users --- public/app.js | 13 +++++-- public/index.html | 90 +++++++++++++++++++++++------------------------ public/style.css | 24 +++++++------ 3 files changed, 69 insertions(+), 58 deletions(-) diff --git a/public/app.js b/public/app.js index 2aaa750..0b19aed 100644 --- a/public/app.js +++ b/public/app.js @@ -302,9 +302,7 @@ function showDashboard() { sp.style.display = 'none'; sp.innerHTML = ''; document.getElementById('admin-controls').style.display = isAdmin ? 'flex' : 'none'; - // Show webhooks section for admin users - const webhooksSection = document.getElementById('webhooks-section'); - if (webhooksSection) webhooksSection.style.display = isAdmin ? '' : 'none'; + // Note: webhooks-section visibility is controlled by toggleStatusPanel() // Initialise days input from saved value const daysInput = document.getElementById('history-days'); if (daysInput) daysInput.value = historyDays; @@ -772,12 +770,19 @@ const STATUS_REFRESH_MS = 5000; async function toggleStatusPanel() { const panel = document.getElementById('status-panel'); + const webhooksSection = document.getElementById('webhooks-section'); if (panel.style.display !== 'none') { panel.style.display = 'none'; + if (webhooksSection) webhooksSection.style.display = 'none'; if (statusRefreshHandle) { clearInterval(statusRefreshHandle); statusRefreshHandle = null; } return; } panel.style.display = 'block'; + // Show webhooks section for admin users + if (webhooksSection && isAdmin) { + webhooksSection.style.display = ''; + await fetchWebhookStatus(); + } await refreshStatusPanel(); if (statusRefreshHandle) clearInterval(statusRefreshHandle); statusRefreshHandle = setInterval(refreshStatusPanel, STATUS_REFRESH_MS); @@ -785,6 +790,8 @@ async function toggleStatusPanel() { function closeStatusPanel() { document.getElementById('status-panel').style.display = 'none'; + const webhooksSection = document.getElementById('webhooks-section'); + if (webhooksSection) webhooksSection.style.display = 'none'; if (statusRefreshHandle) { clearInterval(statusRefreshHandle); statusRefreshHandle = null; } } diff --git a/public/index.html b/public/index.html index 6c86399..93c89ff 100644 --- a/public/index.html +++ b/public/index.html @@ -70,51 +70,7 @@ - - - - -
-
- - -
- -
-
- -
-
-
- - -
- - + + + + + +
+
+ + +
+ +
+
+ +
+
+
+ + +
+