Unified Admin Panel: 3 Plugin-Settings in ein zentrales Modal
- Neues AdminPanel.tsx mit Sidebar-Navigation (Soundboard/Streaming/Game Library) - Lazy-Loading: Daten werden erst beim Tab-Wechsel geladen - Admin-Button im Header öffnet jetzt das zentrale Panel (Rechtsklick = Logout) - Admin-Code aus SoundboardTab, StreamingTab und GameLibraryTab entfernt - ~500 Zeilen Plugin-Code entfernt, durch ~620 Zeilen zentrales Panel ersetzt Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel
parent
4b23d013f9
commit
3f175ca02c
10 changed files with 6137 additions and 5320 deletions
|
|
@ -361,13 +361,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
|
||||
/* ── Admin ── */
|
||||
const isAdmin = isAdminProp ?? false;
|
||||
const [showAdmin, setShowAdmin] = useState(false);
|
||||
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('');
|
||||
|
||||
/* ── Drag & Drop Upload ── */
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
|
@ -636,13 +629,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
return () => document.removeEventListener('click', handler);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (showAdmin && isAdmin) {
|
||||
void loadAdminSounds();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [showAdmin, isAdmin]);
|
||||
|
||||
/* ── Actions ── */
|
||||
async function loadAnalytics() {
|
||||
try {
|
||||
|
|
@ -801,64 +787,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
setFavs(prev => ({ ...prev, [key]: !prev[key] }));
|
||||
}
|
||||
|
||||
async function loadAdminSounds() {
|
||||
setAdminLoading(true);
|
||||
try {
|
||||
const d = await fetchSounds('', '__all__', undefined, false);
|
||||
setAdminSounds(d.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 gueltigen Namen eingeben', 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await apiAdminRename(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 apiAdminDelete(paths);
|
||||
notify(paths.length === 1 ? 'Sound geloescht' : `${paths.length} Sounds geloescht`);
|
||||
setAdminSelection({});
|
||||
cancelRename();
|
||||
setRefreshKey(k => k + 1);
|
||||
if (showAdmin) await loadAdminSounds();
|
||||
} catch (e: any) {
|
||||
notify(e?.message || 'Loeschen fehlgeschlagen', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Computed ── */
|
||||
const displaySounds = useMemo(() => {
|
||||
if (activeTab === 'favorites') return sounds.filter(s => favs[s.relativePath ?? s.fileName]);
|
||||
|
|
@ -896,26 +824,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
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 analyticsTop = analytics.mostPlayed.slice(0, 10);
|
||||
const totalSoundsDisplay = analytics.totalSounds || total;
|
||||
|
||||
|
|
@ -998,15 +906,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button
|
||||
className="admin-btn-icon active"
|
||||
onClick={() => setShowAdmin(true)}
|
||||
title="Admin"
|
||||
>
|
||||
<span className="material-icons">settings</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -1316,7 +1215,14 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
<div className="ctx-sep" />
|
||||
<div className="ctx-item danger" onClick={async () => {
|
||||
const path = ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName;
|
||||
await deleteAdminPaths([path]);
|
||||
if (!window.confirm(`Sound "${ctxMenu.sound.name}" loeschen?`)) { setCtxMenu(null); return; }
|
||||
try {
|
||||
await apiAdminDelete([path]);
|
||||
notify('Sound geloescht');
|
||||
setRefreshKey(k => k + 1);
|
||||
} catch (e: any) {
|
||||
notify(e?.message || 'Loeschen fehlgeschlagen', 'error');
|
||||
}
|
||||
setCtxMenu(null);
|
||||
}}>
|
||||
<span className="material-icons ctx-icon">delete</span>
|
||||
|
|
@ -1397,142 +1303,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* ═══ ADMIN PANEL ═══ */}
|
||||
{showAdmin && (
|
||||
<div className="admin-overlay" onClick={e => { if (e.target === e.currentTarget) setShowAdmin(false); }}>
|
||||
<div className="admin-panel">
|
||||
<h3>
|
||||
Admin
|
||||
<button className="admin-close" onClick={() => setShowAdmin(false)}>
|
||||
<span className="material-icons" style={{ fontSize: 18 }}>close</span>
|
||||
</button>
|
||||
</h3>
|
||||
<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>
|
||||
</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 auswaehlen ({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) loeschen?`)) return;
|
||||
await deleteAdminPaths(selectedAdminPaths);
|
||||
}}
|
||||
>
|
||||
Ausgewaehlte loeschen
|
||||
</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'}
|
||||
{' \u00B7 '}
|
||||
{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}" loeschen?`)) return;
|
||||
await deleteAdminPaths([key]);
|
||||
}}
|
||||
>
|
||||
Loeschen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Drag & Drop Overlay ── */}
|
||||
{isDragging && (
|
||||
<div className="drop-overlay">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue