Admin: Suche, Filter und Archiv in der Matchliste, Fehler direkt in der Karte
This commit is contained in:
mregosar committed
1 parent
c50741e49c
commit
7ae3efef60
9 files changed
+206
-12
No files matched your search
@@ -5,8 +5,40 @@ import { FORMAT_LABEL, serverLabel } from '../lib/labels.js';
|
||||
import CopyField from '../components/CopyField.jsx';
|
||||
|
||||
const KEY = 'cs2mv:admin';
|
||||
const FILTER_KEY = 'cs2mv:admin:filter';
|
||||
const REFRESH_MS = 3000;
|
||||
|
||||
const RUNNING = ['lobby', 'veto', 'server_setup', 'live'];
|
||||
const CLOSED = ['finished', 'cancelled'];
|
||||
const SERVER_ERRORS = ['start_failed', 'failed', 'config_failed'];
|
||||
const hasError = (m) => SERVER_ERRORS.includes(m.server?.status);
|
||||
|
||||
/** Filter der Matchliste. "archive" lädt eine eigene Liste vom Server. */
|
||||
const FILTERS = [
|
||||
{ key: 'all', label: 'Alle', test: () => true },
|
||||
{ key: 'running', label: 'Laufend', test: (m) => RUNNING.includes(m.status) },
|
||||
{ key: 'errors', label: 'Fehler', test: hasError },
|
||||
{ key: 'closed', label: 'Abgeschlossen', test: (m) => CLOSED.includes(m.status) },
|
||||
{ key: 'archive', label: 'Archiv', test: () => true },
|
||||
];
|
||||
|
||||
const readFilter = () => {
|
||||
try {
|
||||
const f = localStorage.getItem(FILTER_KEY);
|
||||
return FILTERS.some((x) => x.key === f) ? f : 'all';
|
||||
} catch {
|
||||
return 'all';
|
||||
}
|
||||
};
|
||||
|
||||
/** Suche nach Teamnamen, Spielern und Match-ID, ohne Groß-/Kleinschreibung. */
|
||||
function matchesSearch(m, query) {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return true;
|
||||
const hay = [m.id, m.teams.A.name, m.teams.B.name, ...['A', 'B'].flatMap((t) => m.teams[t].players.map((p) => p.nickname))];
|
||||
return hay.some((x) => String(x ?? '').toLowerCase().includes(q));
|
||||
}
|
||||
|
||||
const getToken = () => {
|
||||
try {
|
||||
return sessionStorage.getItem(KEY);
|
||||
@@ -31,6 +63,19 @@ export default function AdminPage() {
|
||||
const [notice, setNotice] = useState(null);
|
||||
const [busy, setBusy] = useState(null);
|
||||
const [tab, setTab] = useState('matches');
|
||||
const [filter, setFilterState] = useState(readFilter);
|
||||
const [query, setQuery] = useState('');
|
||||
const [archivedCount, setArchivedCount] = useState(0);
|
||||
const setFilter = (f) => {
|
||||
setFilterState(f);
|
||||
// Beim Wechsel zwischen Archiv und normaler Liste neu laden
|
||||
if ((f === 'archive') !== (filter === 'archive')) setMatches(null);
|
||||
try {
|
||||
localStorage.setItem(FILTER_KEY, f);
|
||||
} catch {
|
||||
/* ignorieren */
|
||||
}
|
||||
};
|
||||
|
||||
const logout = useCallback(() => {
|
||||
api('/admin/logout', { method: 'POST', token }).catch(() => {});
|
||||
@@ -41,8 +86,9 @@ export default function AdminPage() {
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const res = await api('/admin/matches', { token });
|
||||
const res = await api(`/admin/matches${filter === 'archive' ? '?archived=1' : ''}`, { token });
|
||||
setMatches(res.matches);
|
||||
setArchivedCount(res.archivedCount ?? 0);
|
||||
setHosts(res.hosts ?? []);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
@@ -53,7 +99,7 @@ export default function AdminPage() {
|
||||
setError(err.message);
|
||||
}
|
||||
}
|
||||
}, [token]);
|
||||
}, [token, filter]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) return undefined;
|
||||
@@ -107,13 +153,31 @@ export default function AdminPage() {
|
||||
{error && <div className="alert alert-error">{error}</div>}
|
||||
{tab === 'matches' && <HostUsage hosts={hosts} />}
|
||||
{tab === 'matches' && matches === null && !error && <p className="muted">Lade Matches …</p>}
|
||||
{tab === 'matches' && matches && matches.length === 0 && <p className="muted">Noch keine Matches.</p>}
|
||||
|
||||
{tab === 'matches' && <div className="admin-list">
|
||||
{matches?.map((m) => (
|
||||
<MatchAdminCard key={m.id} m={m} run={run} busy={busy} token={token} reload={load} setNotice={setNotice} />
|
||||
))}
|
||||
</div>}
|
||||
{tab === 'matches' && (
|
||||
<MatchToolbar
|
||||
matches={filter === 'archive' ? [] : matches ?? []}
|
||||
archivedCount={archivedCount}
|
||||
filter={filter}
|
||||
setFilter={setFilter}
|
||||
query={query}
|
||||
setQuery={setQuery}
|
||||
/>
|
||||
)}
|
||||
{tab === 'matches' && matches && (() => {
|
||||
const active = FILTERS.find((f) => f.key === filter);
|
||||
const shown = matches.filter((m) => active.test(m) && matchesSearch(m, query));
|
||||
if (matches.length === 0) {
|
||||
return <p className="muted">{filter === 'archive' ? 'Das Archiv ist leer.' : 'Noch keine Matches.'}</p>;
|
||||
}
|
||||
if (shown.length === 0) return <p className="muted">Keine Matches für diesen Filter{query ? ` und „${query}“` : ''}.</p>;
|
||||
return (
|
||||
<div className="admin-list">
|
||||
{shown.map((m) => (
|
||||
<MatchAdminCard key={m.id} m={m} run={run} busy={busy} token={token} reload={load} setNotice={setNotice} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -313,6 +377,10 @@ function MatchAdminCard({ m, run, busy, token, reload, setNotice }) {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{hasError(m) && m.server.message && (
|
||||
<p className="admin-error small" role="alert">{m.server.message}</p>
|
||||
)}
|
||||
{m.archivedAt && <span className="admin-badge is-archived">Archiviert {formatDateTime(m.archivedAt)}</span>}
|
||||
{paused && <span className="admin-badge is-paused">Pausiert</span>}
|
||||
</div>
|
||||
<button className="link-btn" onClick={() => setOpen(!open)}>{open ? 'Weniger' : 'Details'}</button>
|
||||
@@ -330,6 +398,8 @@ function MatchAdminCard({ m, run, busy, token, reload, setNotice }) {
|
||||
{m.server && !['stopped'].includes(m.server.status) && btn('Server stoppen', { path: '/server/stop', confirm: 'Server stoppen?' })}
|
||||
{!closed && btn('Match abschließen', { path: '/finish', confirm: 'Match als abgeschlossen markieren?' })}
|
||||
{!closed && btn('Match abbrechen', { path: '/cancel', confirm: 'Match abbrechen?' }, 'btn-ghost danger')}
|
||||
{closed && !m.archivedAt && btn('Archivieren', { path: '/archive', success: 'Match archiviert' })}
|
||||
{m.archivedAt && btn('Aus dem Archiv holen', { path: '/unarchive', success: 'Match ist wieder in der Liste' })}
|
||||
{btn('Löschen', { method: 'DELETE', path: '', confirm: `Match ${m.teams.A.name} vs. ${m.teams.B.name} endgültig löschen?`, success: 'Match gelöscht' }, 'btn-ghost danger')}
|
||||
</div>
|
||||
|
||||
@@ -699,3 +769,32 @@ function DockerHostsPanel({ token, setNotice }) {
|
||||
function formatDateTime(ms) {
|
||||
return `${new Date(ms).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })} Uhr`;
|
||||
}
|
||||
/** Suche und Filter über der Matchliste, mit Anzahl pro Filter. */
|
||||
function MatchToolbar({ matches, archivedCount, filter, setFilter, query, setQuery }) {
|
||||
const count = (f) => (f.key === 'archive' ? archivedCount : matches.filter(f.test).length);
|
||||
return (
|
||||
<div className="admin-toolbar">
|
||||
<input
|
||||
type="search"
|
||||
className="admin-search"
|
||||
placeholder="Team, Spieler oder Match-ID suchen"
|
||||
aria-label="Matches durchsuchen"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
<div className="admin-filters" role="group" aria-label="Matches filtern">
|
||||
{FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.key}
|
||||
className={`admin-filter ${filter === f.key ? 'is-active' : ''} ${f.key === 'errors' && count(f) > 0 ? 'has-errors' : ''}`}
|
||||
aria-pressed={filter === f.key}
|
||||
onClick={() => setFilter(f.key)}
|
||||
>
|
||||
{f.label}
|
||||
{(f.key !== 'archive' || archivedCount > 0) && <span className="admin-filter-count">{count(f)}</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -589,3 +589,13 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
|
||||
.pull-running span { color: var(--pending); }
|
||||
.pull-ok span { color: var(--ok, #22c55e); }
|
||||
.pull-failed span { color: var(--error); }
|
||||
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 14px; }
|
||||
.admin-search { flex: 1 1 240px; min-width: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; }
|
||||
.admin-filters { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.admin-filter { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .875rem; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
|
||||
.admin-filter:hover { color: var(--text); }
|
||||
.admin-filter.is-active { color: var(--text); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); }
|
||||
.admin-filter-count { font-variant-numeric: tabular-nums; font-size: .75rem; opacity: .8; }
|
||||
.admin-filter.has-errors .admin-filter-count { color: var(--error); font-weight: 700; opacity: 1; }
|
||||
.admin-error { margin: 8px 0 0; color: var(--error); }
|
||||
.admin-badge.is-archived { background: transparent; color: var(--muted); border: 1px solid var(--line); }
|
||||
Reference in new issue
Block a user