root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restore admin sound management UI in web app

Browse source
This commit is contained in:
Bot 2026-03-01 16:14:46 +01:00
parent f90401a009
commit e200087a73
2 changed files with 429 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

237
web/src/App.tsx
View file

@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
import {
fetchChannels, fetchSounds, playSound, setVolumeLive, getVolume,
adminStatus, adminLogin, adminLogout, adminDelete,
adminStatus, adminLogin, adminLogout, adminDelete, adminRename,
fetchCategories, partyStart, partyStop, subscribeEvents,
getSelectedChannels, setSelectedChannel,
} from './api';
@ -60,6 +60,12 @@ export default function App() {
const [isAdmin, setIsAdmin] = useState(false);
const [showAdmin, setShowAdmin] = useState(false);
const [adminPwd, setAdminPwd] = useState('');
const [adminSounds, setAdminSounds] = useState<Sound[]>([]);
const [adminLoading, setAdminLoading] = useState(false);
const [adminQuery, setAdminQuery] = useState('');
const [adminSelection, setAdminSelection] = useState<Record<string, boolean>>({});
const [renameTarget, setRenameTarget] = useState('');
const [renameValue, setRenameValue] = useState('');
/* ── UI ── */
const [notification, setNotification] = useState<{ msg: string; type: 'info' | 'error' } | null>(null);
@ -76,6 +82,7 @@ export default function App() {
setNotification({ msg, type });
setTimeout(() => setNotification(null), 3000);
}, []);
const soundKey = useCallback((s: Sound) => s.relativePath ?? s.fileName, []);
const guildId = selected ? selected.split(':')[0] : '';
const channelId = selected ? selected.split(':')[1] : '';
@ -218,6 +225,12 @@ export default function App() {
return () => document.removeEventListener('click', handler);
}, []);
useEffect(() => {
if (showAdmin && isAdmin) {
void loadAdminSounds();
}
}, [showAdmin, isAdmin]);
/* ── Actions ── */
async function handlePlay(s: Sound) {
if (!selected) return notify('Bitte einen Voice-Channel auswählen', 'error');
@ -260,16 +273,84 @@ export default function App() {
setFavs(prev => ({ ...prev, [key]: !prev[key] }));
}
async function loadAdminSounds() {
setAdminLoading(true);
try {
const data = await fetchSounds('', '__all__', undefined, false);
setAdminSounds(data.items || []);
} catch (e: any) {
notify(e?.message || 'Admin-Sounds konnten nicht geladen werden', 'error');
} finally {
setAdminLoading(false);
}
}
function toggleAdminSelection(path: string) {
setAdminSelection(prev => ({ ...prev, [path]: !prev[path] }));
}
function startRename(sound: Sound) {
setRenameTarget(soundKey(sound));
setRenameValue(sound.name);
}
function cancelRename() {
setRenameTarget('');
setRenameValue('');
}
async function submitRename() {
if (!renameTarget) return;
const baseName = renameValue.trim().replace(/\.(mp3|wav)$/i, '');
if (!baseName) {
notify('Bitte einen gültigen Namen eingeben', 'error');
return;
}
try {
await adminRename(renameTarget, baseName);
notify('Sound umbenannt');
cancelRename();
setRefreshKey(k => k + 1);
if (showAdmin) await loadAdminSounds();
} catch (e: any) {
notify(e?.message || 'Umbenennen fehlgeschlagen', 'error');
}
}
async function deleteAdminPaths(paths: string[]) {
if (paths.length === 0) return;
try {
await adminDelete(paths);
notify(paths.length === 1 ? 'Sound gelöscht' : `${paths.length} Sounds gelöscht`);
setAdminSelection({});
cancelRename();
setRefreshKey(k => k + 1);
if (showAdmin) await loadAdminSounds();
} catch (e: any) {
notify(e?.message || 'Löschen fehlgeschlagen', 'error');
}
}
async function handleAdminLogin() {
try {
const ok = await adminLogin(adminPwd);
if (ok) { setIsAdmin(true); setAdminPwd(''); notify('Admin eingeloggt'); }
if (ok) {
setIsAdmin(true);
setAdminPwd('');
notify('Admin eingeloggt');
}
else notify('Falsches Passwort', 'error');
} catch { notify('Login fehlgeschlagen', 'error'); }
}
async function handleAdminLogout() {
try { await adminLogout(); setIsAdmin(false); notify('Ausgeloggt'); } catch { }
try {
await adminLogout();
setIsAdmin(false);
setAdminSelection({});
cancelRename();
notify('Ausgeloggt');
} catch { }
}
/* ── Computed ── */
@ -309,6 +390,27 @@ export default function App() {
return groups;
}, [channels]);
const adminFilteredSounds = useMemo(() => {
const q = adminQuery.trim().toLowerCase();
if (!q) return adminSounds;
return adminSounds.filter(s => {
const key = soundKey(s).toLowerCase();
return s.name.toLowerCase().includes(q)
|| (s.folder || '').toLowerCase().includes(q)
|| key.includes(q);
});
}, [adminQuery, adminSounds, soundKey]);
const selectedAdminPaths = useMemo(() =>
Object.keys(adminSelection).filter(k => adminSelection[k]),
[adminSelection]);
const selectedVisibleCount = useMemo(() =>
adminFilteredSounds.filter(s => !!adminSelection[soundKey(s)]).length,
[adminFilteredSounds, adminSelection, soundKey]);
const allVisibleSelected = adminFilteredSounds.length > 0 && selectedVisibleCount === adminFilteredSounds.length;
const clockMain = clock.slice(0, 5);
const clockSec = clock.slice(5);
@ -636,11 +738,7 @@ export default function App() {
<div className="ctx-sep" />
<div className="ctx-item danger" onClick={async () => {
const path = ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName;
try {
await adminDelete([path]);
notify('Sound gelöscht');
setRefreshKey(k => k + 1);
} catch { notify('Löschen fehlgeschlagen', 'error'); }
await deleteAdminPaths([path]);
setCtxMenu(null);
}}>
<span className="material-icons ctx-icon">delete</span>
@ -686,10 +784,129 @@ export default function App() {
<button className="admin-btn-action primary" onClick={handleAdminLogin}>Login</button>
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
<p style={{ fontSize: 13, color: 'var(--text-muted)' }}>Eingeloggt als Admin</p>
<div className="admin-shell">
<div className="admin-header-row">
<p className="admin-status">Eingeloggt als Admin</p>
<div className="admin-actions-inline">
<button
className="admin-btn-action outline"
onClick={() => { void loadAdminSounds(); }}
disabled={adminLoading}
>
Aktualisieren
</button>
<button className="admin-btn-action outline" onClick={handleAdminLogout}>Logout</button>
</div>
</div>
<div className="admin-field admin-search-field">
<label>Sounds verwalten</label>
<input
type="text"
value={adminQuery}
onChange={e => setAdminQuery(e.target.value)}
placeholder="Nach Name, Ordner oder Pfad filtern..."
/>
</div>
<div className="admin-bulk-row">
<label className="admin-select-all">
<input
type="checkbox"
checked={allVisibleSelected}
onChange={e => {
const checked = e.target.checked;
const next = { ...adminSelection };
adminFilteredSounds.forEach(s => { next[soundKey(s)] = checked; });
setAdminSelection(next);
}}
/>
<span>Alle sichtbaren auswählen ({selectedVisibleCount}/{adminFilteredSounds.length})</span>
</label>
<button
className="admin-btn-action danger"
disabled={selectedAdminPaths.length === 0}
onClick={async () => {
if (!window.confirm(`Wirklich ${selectedAdminPaths.length} Sound(s) löschen?`)) return;
await deleteAdminPaths(selectedAdminPaths);
}}
>
Ausgewählte löschen
</button>
</div>
<div className="admin-list-wrap">
{adminLoading ? (
<div className="admin-empty">Lade Sounds...</div>
) : adminFilteredSounds.length === 0 ? (
<div className="admin-empty">Keine Sounds gefunden.</div>
) : (
<div className="admin-list">
{adminFilteredSounds.map(sound => {
const key = soundKey(sound);
const editing = renameTarget === key;
return (
<div className="admin-item" key={key}>
<label className="admin-item-check">
<input
type="checkbox"
checked={!!adminSelection[key]}
onChange={() => toggleAdminSelection(key)}
/>
</label>
<div className="admin-item-main">
<div className="admin-item-name">{sound.name}</div>
<div className="admin-item-meta">
{sound.folder ? `Ordner: ${sound.folder}` : 'Root'}
{' · '}
{key}
</div>
{editing && (
<div className="admin-rename-row">
<input
value={renameValue}
onChange={e => setRenameValue(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter') void submitRename();
if (e.key === 'Escape') cancelRename();
}}
placeholder="Neuer Name..."
/>
<button className="admin-btn-action primary" onClick={() => { void submitRename(); }}>
Speichern
</button>
<button className="admin-btn-action outline" onClick={cancelRename}>
Abbrechen
</button>
</div>
)}
</div>
{!editing && (
<div className="admin-item-actions">
<button className="admin-btn-action outline" onClick={() => startRename(sound)}>
Umbenennen
</button>
<button
className="admin-btn-action danger ghost"
onClick={async () => {
if (!window.confirm(`Sound "${sound.name}" löschen?`)) return;
await deleteAdminPaths([key]);
}}
>
Löschen
</button>
</div>
)}
</div>
);
})}
</div>
)}
</div>
</div>
)}
</div>
</div>

204
web/src/styles.css
View file

@ -1248,18 +1248,22 @@ input, select {
border: 1px solid rgba(255, 255, 255, .08);
border-radius: var(--radius-lg);
padding: 28px;
width: 90%;
max-width: 400px;
width: 92%;
max-width: 920px;
max-height: min(88vh, 860px);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-high);
}
.admin-panel h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.admin-close {
@ -1318,6 +1322,7 @@ input, select {
font-family: var(--font);
cursor: pointer;
transition: all var(--transition);
line-height: 1;
}
.admin-btn-action.primary {
@ -1341,6 +1346,180 @@ input, select {
color: var(--text-normal);
}
.admin-btn-action.danger {
background: var(--red);
color: var(--white);
border: 1px solid var(--red);
}
.admin-btn-action.danger:hover {
filter: brightness(1.06);
}
.admin-btn-action.danger.ghost {
background: transparent;
color: var(--red);
border: 1px solid rgba(242, 63, 66, .5);
}
.admin-btn-action.danger.ghost:hover {
background: rgba(242, 63, 66, .14);
}
.admin-btn-action:disabled {
opacity: .5;
pointer-events: none;
}
.admin-shell {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
.admin-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.admin-status {
font-size: 13px;
color: var(--text-muted);
}
.admin-actions-inline {
display: flex;
align-items: center;
gap: 8px;
}
.admin-search-field {
margin-bottom: 0;
}
.admin-bulk-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: var(--bg-tertiary);
border: 1px solid rgba(255, 255, 255, .08);
flex-wrap: wrap;
}
.admin-select-all {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-muted);
}
.admin-select-all input,
.admin-item-check input {
accent-color: var(--accent);
}
.admin-list-wrap {
min-height: 260px;
max-height: 52vh;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 10px;
background: var(--bg-primary);
}
.admin-list {
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
}
.admin-empty {
padding: 24px 12px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
.admin-item {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px;
border-radius: 8px;
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, .06);
}
.admin-item-main {
min-width: 0;
}
.admin-item-name {
font-size: 14px;
font-weight: 600;
color: var(--text-normal);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-item-meta {
margin-top: 3px;
font-size: 11px;
color: var(--text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-item-actions {
display: flex;
align-items: center;
gap: 6px;
}
.admin-item-actions .admin-btn-action,
.admin-rename-row .admin-btn-action {
padding: 8px 12px;
font-size: 12px;
}
.admin-rename-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
}
.admin-rename-row input {
flex: 1;
min-width: 120px;
background: var(--bg-tertiary);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
color: var(--text-normal);
font-family: var(--font);
transition: all var(--transition);
}
.admin-rename-row input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-glow);
}
/* ────────────────────────────────────────────
Responsive
──────────────────────────────────────────── */
@ -1396,6 +1575,25 @@ input, select {
.tb-btn span:not(.tb-icon) {
display: none;
}
.admin-panel {
width: 96%;
padding: 16px;
max-height: 92vh;
}
.admin-item {
grid-template-columns: 24px minmax(0, 1fr);
}
.admin-item-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
.admin-rename-row {
flex-wrap: wrap;
}
}
@media (max-width: 480px) {