Restore admin sound management UI in web app
This commit is contained in:
Bot
parent
f90401a009
commit
e200087a73
2 changed files with 429 additions and 14 deletions
239
web/src/App.tsx
239
web/src/App.tsx
|
|
@ -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,9 +784,128 @@ 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>
|
||||
<button className="admin-btn-action outline" onClick={handleAdminLogout}>Logout</button>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue