test(frontend): add vitest test suite and apply code formatting
This commit is contained in:
zwitschi committed
1 parent
e4ffa0b356
commit
6632df0bc7
23 files changed
+2209
-815
No files matched your search
@@ -1,53 +1,53 @@
|
||||
<div class="panel-header-row">
|
||||
<div>
|
||||
<h1>Analytics</h1>
|
||||
<p>Basic activity counters from chat history and moderation audit logs.</p>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<select id="analytics-range" class="text-input" style="width:auto">
|
||||
<option value="1h">Last hour</option>
|
||||
<option value="6h">Last 6 hours</option>
|
||||
<option value="24h" selected>Last 24 hours</option>
|
||||
<option value="7d">Last 7 days</option>
|
||||
</select>
|
||||
<button id="reload-analytics-btn" type="button" class="btn btn-secondary">Reload analytics</button>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Analytics</h1>
|
||||
<p>Basic activity counters from chat history and moderation audit logs.</p>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<select id="analytics-range" class="text-input" style="width: auto">
|
||||
<option value="1h">Last hour</option>
|
||||
<option value="6h">Last 6 hours</option>
|
||||
<option value="24h" selected>Last 24 hours</option>
|
||||
<option value="7d">Last 7 days</option>
|
||||
</select>
|
||||
<button id="reload-analytics-btn" type="button" class="btn btn-secondary">Reload analytics</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-grid">
|
||||
<article class="stat-card">
|
||||
<h2>Total Messages</h2>
|
||||
<p id="analytics-total-messages" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Last 24 Hours</h2>
|
||||
<p id="analytics-messages-24h" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Distinct Rooms</h2>
|
||||
<p id="analytics-distinct-rooms" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Moderation Actions</h2>
|
||||
<p id="analytics-moderation-actions" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Total Messages</h2>
|
||||
<p id="analytics-total-messages" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Last 24 Hours</h2>
|
||||
<p id="analytics-messages-24h" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Distinct Rooms</h2>
|
||||
<p id="analytics-distinct-rooms" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Moderation Actions</h2>
|
||||
<p id="analytics-moderation-actions" class="stat-value">0</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<div class="panel-header-row">
|
||||
<h2>Top Rooms</h2>
|
||||
<p id="analytics-generated-at" class="small-muted">loading...</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Room</th>
|
||||
<th>Messages</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="analytics-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="analytics-status" class="status-line" aria-live="polite">Loading analytics...</p>
|
||||
<div class="panel-header-row">
|
||||
<h2>Top Rooms</h2>
|
||||
<p id="analytics-generated-at" class="small-muted">loading...</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Room</th>
|
||||
<th>Messages</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="analytics-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="analytics-status" class="status-line" aria-live="polite">Loading analytics...</p>
|
||||
</div>
|
||||
@@ -1,46 +1,46 @@
|
||||
<div class="panel-header-row">
|
||||
<div>
|
||||
<h1>Chat Log</h1>
|
||||
<p>Browse and manage stored chat messages.</p>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="reload-chat-log-btn" type="button" class="btn btn-secondary">Reload</button>
|
||||
<button id="bulk-delete-chat-log-btn" type="button" class="btn btn-danger" disabled>Delete Selected</button>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Chat Log</h1>
|
||||
<p>Browse and manage stored chat messages.</p>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="reload-chat-log-btn" type="button" class="btn btn-secondary">Reload</button>
|
||||
<button id="bulk-delete-chat-log-btn" type="button" class="btn btn-danger" disabled>Delete Selected</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<div class="chat-log-filters">
|
||||
<input id="chat-log-filter-room" class="text-input" type="text" placeholder="Room" />
|
||||
<input id="chat-log-filter-username" class="text-input" type="text" placeholder="Username" />
|
||||
<input id="chat-log-filter-text" class="text-input" type="text" placeholder="Message text" />
|
||||
<button id="chat-log-filter-btn" type="button" class="btn btn-secondary">Filter</button>
|
||||
<button id="chat-log-clear-filter-btn" type="button" class="btn btn-secondary">Clear</button>
|
||||
</div>
|
||||
<div class="chat-log-filters">
|
||||
<input id="chat-log-filter-room" class="text-input" type="text" placeholder="Room" />
|
||||
<input id="chat-log-filter-username" class="text-input" type="text" placeholder="Username" />
|
||||
<input id="chat-log-filter-text" class="text-input" type="text" placeholder="Message text" />
|
||||
<button id="chat-log-filter-btn" type="button" class="btn btn-secondary">Filter</button>
|
||||
<button id="chat-log-clear-filter-btn" type="button" class="btn btn-secondary">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" id="chat-log-select-all" title="Select all" /></th>
|
||||
<th>ID</th>
|
||||
<th>Room</th>
|
||||
<th>Username</th>
|
||||
<th>Message</th>
|
||||
<th>Type</th>
|
||||
<th>Timestamp</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="chat-log-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="chat-log-pagination">
|
||||
<button id="chat-log-prev-btn" type="button" class="btn btn-secondary" disabled>Previous</button>
|
||||
<span id="chat-log-page-info" class="small-muted">Page 1</span>
|
||||
<button id="chat-log-next-btn" type="button" class="btn btn-secondary" disabled>Next</button>
|
||||
</div>
|
||||
<p id="chat-log-status" class="status-line" aria-live="polite">Loading chat log...</p>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" id="chat-log-select-all" title="Select all" /></th>
|
||||
<th>ID</th>
|
||||
<th>Room</th>
|
||||
<th>Username</th>
|
||||
<th>Message</th>
|
||||
<th>Type</th>
|
||||
<th>Timestamp</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="chat-log-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="chat-log-pagination">
|
||||
<button id="chat-log-prev-btn" type="button" class="btn btn-secondary" disabled>Previous</button>
|
||||
<span id="chat-log-page-info" class="small-muted">Page 1</span>
|
||||
<button id="chat-log-next-btn" type="button" class="btn btn-secondary" disabled>Next</button>
|
||||
</div>
|
||||
<p id="chat-log-status" class="status-line" aria-live="polite">Loading chat log...</p>
|
||||
</div>
|
||||
@@ -1,21 +1,21 @@
|
||||
<h1>Dashboard</h1>
|
||||
<div class="stat-grid">
|
||||
<article class="stat-card">
|
||||
<h2>Concurrent Viewers</h2>
|
||||
<p id="stat-viewers" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Stored Messages</h2>
|
||||
<p id="stat-stored-messages" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Moderation Actions</h2>
|
||||
<p id="stat-moderation-actions" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Media Runtime</h2>
|
||||
<p id="stat-media-runtime" class="stat-value">00:00:00</p>
|
||||
<p id="stat-media-count" class="stat-caption">0 files</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Concurrent Viewers</h2>
|
||||
<p id="stat-viewers" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Stored Messages</h2>
|
||||
<p id="stat-stored-messages" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Moderation Actions</h2>
|
||||
<p id="stat-moderation-actions" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h2>Media Runtime</h2>
|
||||
<p id="stat-media-runtime" class="stat-value">00:00:00</p>
|
||||
<p id="stat-media-count" class="stat-caption">0 files</p>
|
||||
</article>
|
||||
</div>
|
||||
<p id="overview-status" class="status-line" aria-live="polite">Loading live admin overview...</p>
|
||||
<p id="overview-status" class="status-line" aria-live="polite">Loading live admin overview...</p>
|
||||
@@ -1,61 +1,71 @@
|
||||
<div class="panel-header-row">
|
||||
<div>
|
||||
<h1>Moderation</h1>
|
||||
<p>Create moderation actions and review the recent immutable audit log.</p>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="reload-moderation-btn" type="button" class="btn btn-secondary">Reload logs</button>
|
||||
<button id="export-chat-log-btn" type="button" class="btn btn-secondary">Export CSV</button>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Moderation</h1>
|
||||
<p>Create moderation actions and review the recent immutable audit log.</p>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="reload-moderation-btn" type="button" class="btn btn-secondary">Reload logs</button>
|
||||
<button id="export-chat-log-btn" type="button" class="btn btn-secondary">Export CSV</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="moderation-grid">
|
||||
<section class="panel-card">
|
||||
<h2>New Action</h2>
|
||||
<form id="moderation-form" class="form-stack">
|
||||
<label>Action
|
||||
<select id="mod-action" class="text-input">
|
||||
<option value="mute">mute</option>
|
||||
<option value="ban">ban</option>
|
||||
<option value="delete">delete</option>
|
||||
<option value="timeout">timeout</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Target
|
||||
<input id="mod-target" class="text-input" type="text" placeholder="username or message id" required />
|
||||
</label>
|
||||
<label>Moderator
|
||||
<input id="mod-moderator" class="text-input" type="text" placeholder="admin" />
|
||||
</label>
|
||||
<label>Room
|
||||
<input id="mod-room" class="text-input" type="text" placeholder="main" />
|
||||
</label>
|
||||
<label>Reason
|
||||
<textarea id="mod-reason" class="text-input text-area" placeholder="Explain why this action is needed" required></textarea>
|
||||
</label>
|
||||
<button id="mod-submit" type="submit" class="btn btn-primary">Submit action</button>
|
||||
<p id="moderation-status" class="status-line" aria-live="polite">Loading moderation logs...</p>
|
||||
</form>
|
||||
</section>
|
||||
<section class="panel-card">
|
||||
<h2>New Action</h2>
|
||||
<form id="moderation-form" class="form-stack">
|
||||
<label
|
||||
>Action
|
||||
<select id="mod-action" class="text-input">
|
||||
<option value="mute">mute</option>
|
||||
<option value="ban">ban</option>
|
||||
<option value="delete">delete</option>
|
||||
<option value="timeout">timeout</option>
|
||||
</select>
|
||||
</label>
|
||||
<label
|
||||
>Target
|
||||
<input id="mod-target" class="text-input" type="text" placeholder="username or message id" required />
|
||||
</label>
|
||||
<label
|
||||
>Moderator
|
||||
<input id="mod-moderator" class="text-input" type="text" placeholder="admin" />
|
||||
</label>
|
||||
<label
|
||||
>Room
|
||||
<input id="mod-room" class="text-input" type="text" placeholder="main" />
|
||||
</label>
|
||||
<label
|
||||
>Reason
|
||||
<textarea
|
||||
id="mod-reason"
|
||||
class="text-input text-area"
|
||||
placeholder="Explain why this action is needed"
|
||||
required
|
||||
></textarea>
|
||||
</label>
|
||||
<button id="mod-submit" type="submit" class="btn btn-primary">Submit action</button>
|
||||
<p id="moderation-status" class="status-line" aria-live="polite">Loading moderation logs...</p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="panel-card">
|
||||
<div class="panel-header-row">
|
||||
<h2>Recent Audit Log</h2>
|
||||
<p class="small-muted">Latest entries</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>When</th>
|
||||
<th>Action</th>
|
||||
<th>Target</th>
|
||||
<th>Moderator</th>
|
||||
<th>Reason</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="moderation-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="panel-card">
|
||||
<div class="panel-header-row">
|
||||
<h2>Recent Audit Log</h2>
|
||||
<p class="small-muted">Latest entries</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>When</th>
|
||||
<th>Action</th>
|
||||
<th>Target</th>
|
||||
<th>Moderator</th>
|
||||
<th>Reason</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="moderation-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -1,18 +1,18 @@
|
||||
<div class="panel-header-row">
|
||||
<div>
|
||||
<h1>Playlist</h1>
|
||||
<p>Edit the active concat playlist. Drag entries to reorder.</p>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="reload-playlist-btn" type="button" class="btn btn-secondary">Reload</button>
|
||||
<button id="save-playlist-btn" type="button" class="btn btn-primary">Save playlist</button>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Playlist</h1>
|
||||
<p>Edit the active concat playlist. Drag entries to reorder.</p>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="reload-playlist-btn" type="button" class="btn btn-secondary">Reload</button>
|
||||
<button id="save-playlist-btn" type="button" class="btn btn-primary">Save playlist</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<div id="playlist-warnings" class="status-warnings" hidden></div>
|
||||
<ul id="playlist-sortable" class="sortable-list" aria-label="Playlist entries"></ul>
|
||||
<label for="playlist-content" class="sr-only">Playlist content (raw)</label>
|
||||
<textarea id="playlist-content" class="text-input text-area" spellcheck="false" rows="6"></textarea>
|
||||
<p id="playlist-status" class="status-line" aria-live="polite">Loading playlist...</p>
|
||||
</div>
|
||||
<div id="playlist-warnings" class="status-warnings" hidden></div>
|
||||
<ul id="playlist-sortable" class="sortable-list" aria-label="Playlist entries"></ul>
|
||||
<label for="playlist-content" class="sr-only">Playlist content (raw)</label>
|
||||
<textarea id="playlist-content" class="text-input text-area" spellcheck="false" rows="6"></textarea>
|
||||
<p id="playlist-status" class="status-line" aria-live="polite">Loading playlist...</p>
|
||||
</div>
|
||||
@@ -1,53 +1,56 @@
|
||||
<div class="panel-header-row">
|
||||
<div>
|
||||
<h1>Schedule</h1>
|
||||
<p>Read-only view of the currently configured playout order.</p>
|
||||
</div>
|
||||
<button id="reload-schedule-btn" type="button" class="btn btn-secondary">Reload schedule</button>
|
||||
<div>
|
||||
<h1>Schedule</h1>
|
||||
<p>Read-only view of the currently configured playout order.</p>
|
||||
</div>
|
||||
<button id="reload-schedule-btn" type="button" class="btn btn-secondary">Reload schedule</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<p class="small-muted"><span id="schedule-matched-entries">0</span>/<span id="schedule-total-entries">0</span> matched • total runtime <span id="schedule-total-runtime">00:00:00</span></p>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Label</th>
|
||||
<th>Runtime</th>
|
||||
<th>Status</th>
|
||||
<th>Path</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="schedule-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="schedule-status" class="status-line" aria-live="polite">Loading schedule...</p>
|
||||
<p class="small-muted">
|
||||
<span id="schedule-matched-entries">0</span>/<span id="schedule-total-entries">0</span> matched • total runtime
|
||||
<span id="schedule-total-runtime">00:00:00</span>
|
||||
</p>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Label</th>
|
||||
<th>Runtime</th>
|
||||
<th>Status</th>
|
||||
<th>Path</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="schedule-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="schedule-status" class="status-line" aria-live="polite">Loading schedule...</p>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<h2>Schedule Overrides</h2>
|
||||
<p>Insert scheduled overrides to play specific videos at specific times.</p>
|
||||
<form id="override-form" class="form-stack" style="max-width:500px">
|
||||
<label>Media ID <input id="override-media-id" type="number" class="text-input" required /></label>
|
||||
<label>Start Time <input id="override-start" type="datetime-local" class="text-input" required /></label>
|
||||
<label>End Time <input id="override-end" type="datetime-local" class="text-input" required /></label>
|
||||
<label>Reason <input id="override-reason" type="text" class="text-input" placeholder="e.g. special event" /></label>
|
||||
<button type="submit" class="btn btn-primary">Add Override</button>
|
||||
</form>
|
||||
<p id="override-status" class="status-line" aria-live="polite"></p>
|
||||
<div class="table-wrap" style="margin-top:1rem">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Media ID</th>
|
||||
<th>Start</th>
|
||||
<th>End</th>
|
||||
<th>Reason</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="override-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Schedule Overrides</h2>
|
||||
<p>Insert scheduled overrides to play specific videos at specific times.</p>
|
||||
<form id="override-form" class="form-stack" style="max-width: 500px">
|
||||
<label>Media ID <input id="override-media-id" type="number" class="text-input" required /></label>
|
||||
<label>Start Time <input id="override-start" type="datetime-local" class="text-input" required /></label>
|
||||
<label>End Time <input id="override-end" type="datetime-local" class="text-input" required /></label>
|
||||
<label>Reason <input id="override-reason" type="text" class="text-input" placeholder="e.g. special event" /></label>
|
||||
<button type="submit" class="btn btn-primary">Add Override</button>
|
||||
</form>
|
||||
<p id="override-status" class="status-line" aria-live="polite"></p>
|
||||
<div class="table-wrap" style="margin-top: 1rem">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Media ID</th>
|
||||
<th>Start</th>
|
||||
<th>End</th>
|
||||
<th>Reason</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="override-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,75 +1,75 @@
|
||||
<h1>System Configuration</h1>
|
||||
<div class="panel-card split-grid">
|
||||
<section>
|
||||
<h2>Redis Stats</h2>
|
||||
<dl class="kv-list">
|
||||
<div>
|
||||
<dt>Memory Used</dt>
|
||||
<dd id="system-redis-memory">loading...</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Connected Clients</dt>
|
||||
<dd id="system-redis-clients">0</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Redis Enabled</dt>
|
||||
<dd id="system-redis-enabled">no</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Storage</h2>
|
||||
<dl class="kv-list">
|
||||
<div>
|
||||
<dt>Database Driver</dt>
|
||||
<dd id="system-db-driver">loading...</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Stored Messages</dt>
|
||||
<dd id="system-stored-messages">0</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Last Refresh</dt>
|
||||
<dd id="system-generated-at">loading...</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Playlist Path</dt>
|
||||
<dd id="system-playlist-path">loading...</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Playlist Present</dt>
|
||||
<dd id="system-playlist-present">no</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Redis Stats</h2>
|
||||
<dl class="kv-list">
|
||||
<div>
|
||||
<dt>Memory Used</dt>
|
||||
<dd id="system-redis-memory">loading...</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Connected Clients</dt>
|
||||
<dd id="system-redis-clients">0</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Redis Enabled</dt>
|
||||
<dd id="system-redis-enabled">no</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Storage</h2>
|
||||
<dl class="kv-list">
|
||||
<div>
|
||||
<dt>Database Driver</dt>
|
||||
<dd id="system-db-driver">loading...</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Stored Messages</dt>
|
||||
<dd id="system-stored-messages">0</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Last Refresh</dt>
|
||||
<dd id="system-generated-at">loading...</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Playlist Path</dt>
|
||||
<dd id="system-playlist-path">loading...</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Playlist Present</dt>
|
||||
<dd id="system-playlist-present">no</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<div class="panel-header-row">
|
||||
<h2>Service Health</h2>
|
||||
<button id="reload-system-btn" type="button" class="btn btn-secondary">Reload health</button>
|
||||
</div>
|
||||
<div id="system-services" class="service-list"></div>
|
||||
<p id="system-status" class="status-line" aria-live="polite">Loading system summary...</p>
|
||||
<div class="panel-header-row">
|
||||
<h2>Service Health</h2>
|
||||
<button id="reload-system-btn" type="button" class="btn btn-secondary">Reload health</button>
|
||||
</div>
|
||||
<div id="system-services" class="service-list"></div>
|
||||
<p id="system-status" class="status-line" aria-live="polite">Loading system summary...</p>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<h2>Runtime Configuration</h2>
|
||||
<form id="config-form" class="form-stack" style="max-width:400px">
|
||||
<label>Rate Limit Max <input id="config-rate-max" type="number" class="text-input" /></label>
|
||||
<label>Rate Limit Window (seconds) <input id="config-rate-window" type="number" class="text-input" /></label>
|
||||
<button type="submit" class="btn btn-primary">Save Config</button>
|
||||
</form>
|
||||
<p id="config-status" class="status-line" aria-live="polite"></p>
|
||||
<h2>Runtime Configuration</h2>
|
||||
<form id="config-form" class="form-stack" style="max-width: 400px">
|
||||
<label>Rate Limit Max <input id="config-rate-max" type="number" class="text-input" /></label>
|
||||
<label>Rate Limit Window (seconds) <input id="config-rate-window" type="number" class="text-input" /></label>
|
||||
<button type="submit" class="btn btn-primary">Save Config</button>
|
||||
</form>
|
||||
<p id="config-status" class="status-line" aria-live="polite"></p>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<h2>Service Control</h2>
|
||||
<p class="small-muted">Restart individual services (manual — container restart commands returned by API).</p>
|
||||
<div class="button-row">
|
||||
<button class="btn btn-secondary restart-btn" data-service="playout">Restart Playout</button>
|
||||
<button class="btn btn-secondary restart-btn" data-service="chat">Restart Chat</button>
|
||||
<button class="btn btn-secondary restart-btn" data-service="nginx">Restart Nginx</button>
|
||||
</div>
|
||||
<p id="restart-status" class="status-line" aria-live="polite"></p>
|
||||
</div>
|
||||
<h2>Service Control</h2>
|
||||
<p class="small-muted">Restart individual services (manual — container restart commands returned by API).</p>
|
||||
<div class="button-row">
|
||||
<button class="btn btn-secondary restart-btn" data-service="playout">Restart Playout</button>
|
||||
<button class="btn btn-secondary restart-btn" data-service="chat">Restart Chat</button>
|
||||
<button class="btn btn-secondary restart-btn" data-service="nginx">Restart Nginx</button>
|
||||
</div>
|
||||
<p id="restart-status" class="status-line" aria-live="polite"></p>
|
||||
</div>
|
||||
@@ -1,41 +1,43 @@
|
||||
<div class="panel-header-row">
|
||||
<div>
|
||||
<h1>Upload Video</h1>
|
||||
<p>Upload media files into the local media library mounted for playout.</p>
|
||||
</div>
|
||||
<button id="reload-media-btn" type="button" class="btn btn-secondary">Reload library</button>
|
||||
<div>
|
||||
<h1>Upload Video</h1>
|
||||
<p>Upload media files into the local media library mounted for playout.</p>
|
||||
</div>
|
||||
<button id="reload-media-btn" type="button" class="btn btn-secondary">Reload library</button>
|
||||
</div>
|
||||
|
||||
<div id="upload-dropzone" class="upload-dropzone">
|
||||
<input type="file" id="video-upload" accept="video/*,.mp4,.mov,.mkv,.webm" hidden />
|
||||
<button id="upload-trigger-btn" type="button" class="btn btn-primary btn-large">Drag and Drop or Click to Upload</button>
|
||||
<p class="small-muted">Resumable chunk upload enabled • up to 2GB per file.</p>
|
||||
<div id="media-upload-progress-wrap" class="upload-progress" hidden>
|
||||
<progress id="media-upload-progress" value="0" max="100"></progress>
|
||||
<p id="media-upload-progress-text" class="small-muted">Uploading (0%)</p>
|
||||
</div>
|
||||
<p id="media-status" class="status-line" aria-live="polite">Loading media library...</p>
|
||||
<input type="file" id="video-upload" accept="video/*,.mp4,.mov,.mkv,.webm" hidden />
|
||||
<button id="upload-trigger-btn" type="button" class="btn btn-primary btn-large">
|
||||
Drag and Drop or Click to Upload
|
||||
</button>
|
||||
<p class="small-muted">Resumable chunk upload enabled • up to 2GB per file.</p>
|
||||
<div id="media-upload-progress-wrap" class="upload-progress" hidden>
|
||||
<progress id="media-upload-progress" value="0" max="100"></progress>
|
||||
<p id="media-upload-progress-text" class="small-muted">Uploading (0%)</p>
|
||||
</div>
|
||||
<p id="media-status" class="status-line" aria-live="polite">Loading media library...</p>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<div class="panel-header-row">
|
||||
<h2>Media Library</h2>
|
||||
<p id="media-generated-at" class="small-muted">loading...</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<th>Title</th>
|
||||
<th>Runtime</th>
|
||||
<th>Status</th>
|
||||
<th>Size</th>
|
||||
<th>Modified</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="media-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-header-row">
|
||||
<h2>Media Library</h2>
|
||||
<p id="media-generated-at" class="small-muted">loading...</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<th>Title</th>
|
||||
<th>Runtime</th>
|
||||
<th>Status</th>
|
||||
<th>Size</th>
|
||||
<th>Modified</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="media-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,24 +1,24 @@
|
||||
<div class="panel-header-row">
|
||||
<div>
|
||||
<h1>Users</h1>
|
||||
<p>Current room presence derived from Redis presence keys.</p>
|
||||
</div>
|
||||
<button id="reload-users-btn" type="button" class="btn btn-secondary">Reload users</button>
|
||||
<div>
|
||||
<h1>Users</h1>
|
||||
<p>Current room presence derived from Redis presence keys.</p>
|
||||
</div>
|
||||
<button id="reload-users-btn" type="button" class="btn btn-secondary">Reload users</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Room</th>
|
||||
<th>Online</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="users-status" class="status-line" aria-live="polite">Loading active users...</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Room</th>
|
||||
<th>Online</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="users-status" class="status-line" aria-live="polite">Loading active users...</p>
|
||||
</div>
|
||||
Reference in new issue
Block a user