feat: add Ombi requests tab and webhook panel integration

- Add Ombi requests tab UI with movie/TV request display
- Add showAll parameter support for Ombi requests (API and SSE)
- Add Ombi webhook panel with enable/test functionality
- Add Ombi webhook status endpoint with metrics
- Add Ombi webhook test endpoint
- Change GET /api/ombi/requests to use OmbiRetriever instead of cache
- Add Ombi webhook state and API functions to frontend
- Update SSE payload to include Ombi baseUrl and requests
This commit is contained in:
2026-05-21 20:59:06 +01:00
parent 884fb5285f
commit 1dccda529a
13 changed files with 1186 additions and 54 deletions
+38
View File
@@ -129,6 +129,31 @@
</div>
</div>
</div>
<!-- Ombi Webhook -->
<div class="webhook-instance">
<h3>Ombi</h3>
<div class="webhook-status">
<span class="status-indicator" id="ombi-status">○ Disabled</span>
<button id="enable-ombi-webhook" class="enable-webhook-btn hidden">Enable Sofarr Webhooks</button>
<button id="test-ombi-webhook" class="test-webhook-btn hidden">Test</button>
</div>
<div class="webhook-triggers hidden" id="ombi-triggers">
<div class="trigger-item"><span class="trigger-label">Request Available</span><span class="trigger-value" id="ombi-requestAvailable"></span></div>
<div class="trigger-item"><span class="trigger-label">Request Approved</span><span class="trigger-value" id="ombi-requestApproved"></span></div>
<div class="trigger-item"><span class="trigger-label">Request Declined</span><span class="trigger-value" id="ombi-requestDeclined"></span></div>
<div class="trigger-item"><span class="trigger-label">Request Pending</span><span class="trigger-value" id="ombi-requestPending"></span></div>
<div class="trigger-item"><span class="trigger-label">Request Processing</span><span class="trigger-value" id="ombi-requestProcessing"></span></div>
</div>
<div class="webhook-stats hidden" id="ombi-stats">
<div class="webhook-stats-title">Statistics</div>
<div class="webhook-stats-grid">
<div class="webhook-stat"><span class="webhook-stat-label">Events Received</span><span class="webhook-stat-value" id="ombi-events">0</span></div>
<div class="webhook-stat"><span class="webhook-stat-label">Polls Skipped</span><span class="webhook-stat-value" id="ombi-polls">0</span></div>
<div class="webhook-stat"><span class="webhook-stat-label">Last Event</span><span class="webhook-stat-value" id="ombi-last">Never</span></div>
</div>
</div>
</div>
</div>
</div>
@@ -139,6 +164,7 @@
<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="requests">Requests</button>
<button class="tab-btn" data-tab="history">Recently Completed</button>
</div>
@@ -172,6 +198,18 @@
</div>
</div>
<div class="tab-panel hidden" id="tab-requests">
<div class="requests-container">
<div class="requests-header">
<h2>Ombi Requests</h2>
</div>
<div id="no-requests" class="no-requests hidden">
<p>No requests found.</p>
</div>
<div id="requests-list" class="requests-list"></div>
</div>
</div>
<div class="tab-panel hidden" id="tab-history">
<div class="history-container" id="history-container">
<div class="history-header">
+154
View File
@@ -2029,3 +2029,157 @@ body {
font-size: 0.9rem;
font-weight: 600;
}
/* ===== Requests Tab ===== */
.requests-container {
padding: 20px;
}
.requests-header {
margin-bottom: 20px;
}
.requests-header h2 {
margin: 0;
color: var(--text-primary);
font-size: 1.5rem;
}
.no-requests {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.requests-list {
display: grid;
gap: 12px;
}
.request-card {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.request-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-color: var(--accent);
}
.request-type-icon {
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--surface-alt);
border-radius: 8px;
flex-shrink: 0;
}
.request-content {
flex: 1;
min-width: 0;
}
.request-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.request-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--text-secondary);
}
.request-status-badge {
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.request-status-badge.available {
background: var(--success-bg);
color: var(--success);
}
.request-status-badge.approved {
background: var(--info-bg);
color: var(--info);
}
.request-status-badge.denied {
background: var(--danger-bg);
color: var(--danger);
}
.request-status-badge.pending {
background: var(--surface-alt);
color: var(--text-muted);
}
.request-status-badge.unknown {
background: var(--surface-alt);
color: var(--text-muted);
}
.request-year {
color: var(--text-muted);
}
.request-user {
color: var(--text-secondary);
}
.request-quality {
background: var(--accent-light);
color: var(--accent);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
.request-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.request-link {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
background: var(--surface-alt);
border-radius: 6px;
transition: background 0.2s ease;
}
.request-link:hover {
background: var(--accent-light);
}
.request-icon {
height: 20px;
width: 20px;
}