n8r/mumbullet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved dashboard and music queue

Browse Source
This commit is contained in:
Nate Anderson
2025-06-21 11:47:06 -06:00
parent 0745a4eb75
commit 71f535be27
16 changed files with 1386 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+131
View File
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MumBullet Dashboard</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1>MumBullet Dashboard</h1>
<nav>
<button id="queueTab" class="tab-button active">Queue</button>
<button id="usersTab" class="tab-button">Users</button>
<button id="cacheTab" class="tab-button">Cache</button>
<button id="logoutButton">Logout</button>
</nav>
</header>
<main>
<section id="queueSection" class="tab-content active">
<h2>Music Queue</h2>
<div class="card">
<div class="card-header">
<h3>Now Playing</h3>
</div>
<div class="card-content" id="nowPlaying">
<p>Nothing playing</p>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Queue</h3>
<button id="clearQueueButton" class="danger-button">Clear Queue</button>
</div>
<div class="card-content">
<ul id="queueList" class="queue-list">
<li class="empty-message">Queue is empty</li>
</ul>
</div>
</div>
</section>
<section id="usersSection" class="tab-content">
<h2>User Management</h2>
<div class="card">
<div class="card-header">
<h3>Users</h3>
<button id="addUserButton">Add User</button>
</div>
<div class="card-content">
<table id="usersTable" class="data-table">
<thead>
<tr>
<th>Username</th>
<th>Permission Level</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr class="empty-message">
<td colspan="3">No users found</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="addUserModal" class="modal">
<div class="modal-content">
<h3>Add User</h3>
<form id="addUserForm">
<div class="form-group">
<label for="newUsername">Username</label>
<input type="text" id="newUsername" name="username" required>
</div>
<div class="form-group">
<label for="newPermissionLevel">Permission Level</label>
<select id="newPermissionLevel" name="permissionLevel" required>
<option value="0">None</option>
<option value="1">View Only</option>
<option value="2">Read/Write</option>
<option value="3">Admin</option>
</select>
</div>
<div class="form-actions">
<button type="button" id="cancelAddUser">Cancel</button>
<button type="submit">Add User</button>
</div>
</form>
</div>
</div>
</section>
<section id="cacheSection" class="tab-content">
<h2>Cache Management</h2>
<div class="card">
<div class="card-header">
<h3>Cache Statistics</h3>
<button id="clearCacheButton" class="danger-button">Clear Cache</button>
</div>
<div class="card-content">
<div id="cacheStats" class="stats-grid">
<div class="stat-item">
<span class="stat-label">Songs</span>
<span class="stat-value" id="cacheSongCount">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Size</span>
<span class="stat-value" id="cacheSize">0 MB</span>
</div>
<div class="stat-item">
<span class="stat-label">Max Size</span>
<span class="stat-value" id="cacheMaxSize">0 MB</span>
</div>
<div class="stat-item">
<span class="stat-label">Usage</span>
<div class="progress-bar">
<div id="cacheUsage" class="progress-value" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="/script.js"></script>
</body>
</html>