refactor(webhooks): Integrate webhooks panel into status card
All checks were successful
All checks were successful
- 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
This commit is contained in:
@@ -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; }
|
||||
}
|
||||
|
||||
|
||||
@@ -70,51 +70,7 @@
|
||||
|
||||
<div id="status-panel" class="status-panel" style="display: none;"></div>
|
||||
|
||||
<div id="error-message" class="error-message" style="display: none;"></div>
|
||||
|
||||
<div id="loading" class="loading" style="display: none;">Loading downloads...</div>
|
||||
|
||||
<div class="main-tabs">
|
||||
<div class="tab-bar">
|
||||
<button class="tab-btn active" data-tab="downloads">Active Downloads</button>
|
||||
<button class="tab-btn" data-tab="history">Recently Completed</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-downloads">
|
||||
<div class="downloads-container">
|
||||
<div id="no-downloads" class="no-downloads" style="display: none;">
|
||||
<p>No downloads found for your user.</p>
|
||||
<p>Make sure your shows and movies are tagged with your username in Sonarr/Radarr.</p>
|
||||
</div>
|
||||
<div id="downloads-list" class="downloads-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-history" style="display: none;">
|
||||
<div class="history-container" id="history-container">
|
||||
<div class="history-header">
|
||||
<div class="history-controls">
|
||||
<label class="history-days-label" for="history-days">Last</label>
|
||||
<input type="number" id="history-days" class="history-days-input" value="7" min="1" max="90">
|
||||
<span class="history-days-label">days</span>
|
||||
<button id="history-refresh-btn" class="history-refresh-btn" title="Refresh history">↻</button>
|
||||
<label class="history-toggle-label" id="ignore-available-label" data-tooltip="Hide failed downloads where the item is already available on disk (i.e. a failed upgrade attempt)">
|
||||
<input type="checkbox" id="ignore-available-toggle">
|
||||
<span>Hide upgrade failures</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="history-loading" class="history-loading" style="display: none;">Loading history...</div>
|
||||
<div id="history-error" class="history-error" style="display: none;"></div>
|
||||
<div id="no-history" class="no-history" style="display: none;">
|
||||
<p>No completed downloads found in this period.</p>
|
||||
</div>
|
||||
<div id="history-list" class="history-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Webhooks Configuration Panel -->
|
||||
<!-- Webhooks Configuration Panel (inline with status) -->
|
||||
<div class="webhooks-section" id="webhooks-section" style="display: none;">
|
||||
<div class="webhooks-header" id="webhooks-header">
|
||||
<h2>⚡ Webhooks Configuration</h2>
|
||||
@@ -173,6 +129,50 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="error-message" class="error-message" style="display: none;"></div>
|
||||
|
||||
<div id="loading" class="loading" style="display: none;">Loading downloads...</div>
|
||||
|
||||
<div class="main-tabs">
|
||||
<div class="tab-bar">
|
||||
<button class="tab-btn active" data-tab="downloads">Active Downloads</button>
|
||||
<button class="tab-btn" data-tab="history">Recently Completed</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-downloads">
|
||||
<div class="downloads-container">
|
||||
<div id="no-downloads" class="no-downloads" style="display: none;">
|
||||
<p>No downloads found for your user.</p>
|
||||
<p>Make sure your shows and movies are tagged with your username in Sonarr/Radarr.</p>
|
||||
</div>
|
||||
<div id="downloads-list" class="downloads-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-history" style="display: none;">
|
||||
<div class="history-container" id="history-container">
|
||||
<div class="history-header">
|
||||
<div class="history-controls">
|
||||
<label class="history-days-label" for="history-days">Last</label>
|
||||
<input type="number" id="history-days" class="history-days-input" value="7" min="1" max="90">
|
||||
<span class="history-days-label">days</span>
|
||||
<button id="history-refresh-btn" class="history-refresh-btn" title="Refresh history">↻</button>
|
||||
<label class="history-toggle-label" id="ignore-available-label" data-tooltip="Hide failed downloads where the item is already available on disk (i.e. a failed upgrade attempt)">
|
||||
<input type="checkbox" id="ignore-available-toggle">
|
||||
<span>Hide upgrade failures</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="history-loading" class="history-loading" style="display: none;">Loading history...</div>
|
||||
<div id="history-error" class="history-error" style="display: none;"></div>
|
||||
<div id="no-history" class="no-history" style="display: none;">
|
||||
<p>No completed downloads found in this period.</p>
|
||||
</div>
|
||||
<div id="history-list" class="history-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
<p>Ensure your media is tagged with your username in Sonarr/Radarr to match downloads to users.</p>
|
||||
<a href="https://git.i3omb.com/Gandalf/sofarr" target="_blank" rel="noopener noreferrer" class="app-version" id="app-version"></a>
|
||||
|
||||
@@ -1520,9 +1520,11 @@ body {
|
||||
/* ===== Webhooks Configuration ===== */
|
||||
.webhooks-section {
|
||||
background: var(--surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px var(--shadow);
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 0;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 4px var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -1548,6 +1550,15 @@ body {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Webhooks metrics styling to match status cards */
|
||||
.webhook-stats {
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.webhooks-toggle {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
@@ -1690,13 +1701,6 @@ body {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.webhook-stats {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: var(--surface-alt);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.webhook-stats-title {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
|
||||
Reference in New Issue
Block a user