Gronod
abdd0da306
Server: - poller.js: add pollSubscribers Set with onPollComplete/offPollComplete; notify all SSE callbacks immediately after every successful poll - dashboard.js: add GET /api/dashboard/stream endpoint (text/event-stream) - requireAuth enforced via cookie (no CSRF needed — GET is a safe method) - X-Accel-Buffering: no for nginx proxy compatibility - 25s heartbeat comments to survive proxy idle timeouts - initial payload sent immediately on connect - cleanup on req.close: deregister callback, stop heartbeat, remove client - active client tracking updated: type='sse', connectedAt, no refreshRateMs Frontend: - app.js: replace setInterval/fetchUserDownloads with EventSource - startSSE() opens /api/dashboard/stream; stopSSE() closes it - first incoming message hides loading spinner - showAll toggle re-opens stream with ?showAll=true param - logout calls stopSSE() before POST /api/auth/logout - status panel: fixed 5s refresh, shows SSE clients + connect duration - statusRefreshHandle now always 5s, not tied to old refresh-rate selector - index.html: remove now-unused refresh-rate <select> element Docs: - ARCHITECTURE.md §4.3: update poller description - ARCHITECTURE.md §5: rename to SSE Stream (§5.2) + Download Matching (§5.3) - ARCHITECTURE.md §7: update active client tracking description - ARCHITECTURE.md §9: add /stream endpoint, update /status clients schema - ARCHITECTURE.md §10: update key functions table; replace Auto-Refresh section with Live Push via SSE - class-server.puml: add /stream to dashboard routes; update ClientInfo - component.puml: annotate dashboard with SSE note; update label
95 lines
4.3 KiB
HTML
95 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>sofarr - Your Downloads Dashboard</title>
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
|
|
<link rel="apple-touch-icon" sizes="192x192" href="favicon-192.png">
|
|
<meta name="theme-color" content="#1a1a2e">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Splash Screen -->
|
|
<div id="splash-screen" class="splash-screen">
|
|
<img src="images/sofarr-flashscreen.png" alt="sofarr" class="splash-logo">
|
|
</div>
|
|
|
|
<div class="app">
|
|
<!-- Login Form -->
|
|
<div id="login-container" class="login-container" style="display: none;">
|
|
<div class="login-box">
|
|
<img src="images/sofarr-flashscreen.png" alt="sofarr" class="login-logo">
|
|
<p class="login-subtitle">Login with your Emby credentials</p>
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label for="username">Username:</label>
|
|
<input type="text" id="username" name="username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password:</label>
|
|
<input type="password" id="password" name="password" required>
|
|
</div>
|
|
<div class="form-group form-group--checkbox">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="remember-me" name="rememberMe">
|
|
<span>Keep me logged in</span>
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="login-btn">Login</button>
|
|
</form>
|
|
<div id="login-error" class="error-message" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard -->
|
|
<div id="dashboard-container" class="dashboard-container" style="display: none;">
|
|
<header class="app-header">
|
|
<h1>sofarr</h1>
|
|
<div class="header-controls">
|
|
<div class="theme-switcher">
|
|
<button class="theme-btn active" data-theme="light">Light</button>
|
|
<button class="theme-btn" data-theme="dark">Dark</button>
|
|
<button class="theme-btn" data-theme="mono">Mono</button>
|
|
</div>
|
|
<div id="admin-controls" class="admin-controls" style="display: none;">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="show-all-toggle">
|
|
<span>Show all users</span>
|
|
</label>
|
|
<button id="status-btn" class="status-btn">Status</button>
|
|
</div>
|
|
<div class="user-info">
|
|
<span class="user-label">Current User:</span>
|
|
<span class="user-name" id="currentUser">-</span>
|
|
<button id="logout-btn" class="logout-btn">Logout</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<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="downloads-container">
|
|
<h2>Your Downloads</h2>
|
|
<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>
|
|
|
|
<footer class="app-footer">
|
|
<p>Ensure your media is tagged with your username in Sonarr/Radarr to match downloads to users.</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|