feat: Ergebnis-Banner, Dev-Simulations-Panel & Spiele-Reset
- MatchCard: farbiger Ergebnis-Banner (Exakt/Tendenz/Falsch) ersetzt tipRow, passender Card-Glow je Ergebnis; Lucide-Icons (lucide-react) - MatchCard: Ändern-Button links, vertikal mittig zur Tipp-Box ausgerichtet - DevPanel: Simulationsmodus mit User-Switcher, Zeit- & Status-Presets - DevPanel: Reset-Section mit "Spiel zurücksetzen", "Alle Spiele" und "Tipps löschen" (3 Buttons, farblich differenziert) - Backend: dev.ts mit set-time, set-status, reset-tips, reset-match - reset-match stellt Original-Datum wieder her (original_utc_date Spalte) - set-time sichert Original-Datum per COALESCE beim ersten Aufruf - Supabase Migration: original_utc_date TIMESTAMPTZ zu matches hinzugefügt Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ronny
@@ -0,0 +1,248 @@
|
||||
import { useState } from 'react';
|
||||
import { api, Match } from '../api/client';
|
||||
import styles from './DevPanel.module.css';
|
||||
|
||||
const DEV_USERS = [
|
||||
{ id: 1, name: 'Ronny M.', role: 'Editor' },
|
||||
{ id: 2, name: 'Max M.', role: 'Viewer' },
|
||||
{ id: 3, name: 'Anna S.', role: 'Viewer' },
|
||||
];
|
||||
|
||||
const TIME_PRESETS = [
|
||||
{ label: 'In 2 Std.', minutes: 120 },
|
||||
{ label: 'In 10 Min.', minutes: 10 },
|
||||
{ label: 'Jetzt +1 Min.', minutes: 1 },
|
||||
{ label: 'Läuft (−30)', minutes: -30 },
|
||||
{ label: 'Beendet (−120)', minutes: -120 },
|
||||
];
|
||||
|
||||
const STATUS_PRESETS = [
|
||||
{ label: 'TIMED', status: 'TIMED', scoreHome: null, scoreAway: null },
|
||||
{ label: 'LIVE', status: 'IN_PLAY', scoreHome: 0, scoreAway: 0 },
|
||||
{ label: 'Pause', status: 'PAUSED', scoreHome: 1, scoreAway: 0 },
|
||||
{ label: '2:1 Fertig', status: 'FINISHED', scoreHome: 2, scoreAway: 1 },
|
||||
{ label: '0:0 Fertig', status: 'FINISHED', scoreHome: 0, scoreAway: 0 },
|
||||
];
|
||||
|
||||
interface Props {
|
||||
currentUser: number;
|
||||
onUserChange: (userId: number) => void;
|
||||
matches: Match[];
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
export default function DevPanel({ currentUser, onUserChange, matches, onRefresh }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedMatch, setSelectedMatch] = useState<number | ''>('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [log, setLog] = useState<string[]>([]);
|
||||
|
||||
function addLog(msg: string) {
|
||||
setLog(prev => [`${new Date().toLocaleTimeString('de-DE')} ${msg}`, ...prev].slice(0, 8));
|
||||
}
|
||||
|
||||
async function applyTime(minutes: number) {
|
||||
if (!selectedMatch) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await fetch(`/api/dev/match/${selectedMatch}/set-time`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ minutesFromNow: minutes }),
|
||||
});
|
||||
addLog(`✓ Spiel #${selectedMatch}: Zeit → ${minutes > 0 ? `+${minutes}` : minutes} Min.`);
|
||||
onRefresh();
|
||||
} catch (e) {
|
||||
addLog(`✗ Fehler: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function applyStatus(status: string, scoreHome: number | null, scoreAway: number | null) {
|
||||
if (!selectedMatch) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await fetch(`/api/dev/match/${selectedMatch}/set-status`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status, scoreHome, scoreAway }),
|
||||
});
|
||||
addLog(`✓ Spiel #${selectedMatch}: Status → ${status}`);
|
||||
onRefresh();
|
||||
} catch (e) {
|
||||
addLog(`✗ Fehler: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function resetTips() {
|
||||
setBusy(true);
|
||||
try {
|
||||
await fetch('/api/dev/reset-tips', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ userId: `dev-user-00${currentUser}` }),
|
||||
});
|
||||
addLog(`✓ Tipps von User ${currentUser} gelöscht`);
|
||||
onRefresh();
|
||||
} catch (e) {
|
||||
addLog(`✗ Fehler: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function resetMatch(all: boolean) {
|
||||
setBusy(true);
|
||||
try {
|
||||
const body = all ? {} : { matchId: selectedMatch };
|
||||
const res = await fetch('/api/dev/reset-match', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const data = await res.json() as { count?: number; matchId?: number };
|
||||
if (all) {
|
||||
addLog(`✓ ${data.count ?? 0} Spiele zurückgesetzt (TIMED)`);
|
||||
} else {
|
||||
addLog(`✓ Spiel #${selectedMatch} zurückgesetzt (TIMED)`);
|
||||
}
|
||||
onRefresh();
|
||||
} catch (e) {
|
||||
addLog(`✗ Fehler: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Nur erste 20 Spiele zur Auswahl anbieten
|
||||
const selectableMatches = matches.slice(0, 20);
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
{/* Toggle Button */}
|
||||
<button className={styles.toggleBtn} onClick={() => setOpen(o => !o)}>
|
||||
{open ? '✕' : '🧪'} {!open && <span className={styles.toggleLabel}>Dev</span>}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className={styles.panel}>
|
||||
<div className={styles.panelHeader}>
|
||||
<span className={styles.panelTitle}>🧪 Simulations-Modus</span>
|
||||
</div>
|
||||
|
||||
{/* User Switcher */}
|
||||
<section className={styles.section}>
|
||||
<div className={styles.sectionLabel}>Aktiver User</div>
|
||||
<div className={styles.userButtons}>
|
||||
{DEV_USERS.map(u => (
|
||||
<button
|
||||
key={u.id}
|
||||
className={`${styles.userBtn} ${currentUser === u.id ? styles.userBtnActive : ''}`}
|
||||
onClick={() => {
|
||||
onUserChange(u.id);
|
||||
addLog(`→ Wechsel zu User ${u.id}: ${u.name}`);
|
||||
}}
|
||||
>
|
||||
<span className={styles.userInitial}>{u.name.charAt(0)}</span>
|
||||
<span className={styles.userName}>{u.name}</span>
|
||||
<span className={styles.userRole}>{u.role}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Match Selector */}
|
||||
<section className={styles.section}>
|
||||
<div className={styles.sectionLabel}>Spiel auswählen</div>
|
||||
<select
|
||||
className={styles.select}
|
||||
value={selectedMatch}
|
||||
onChange={e => setSelectedMatch(e.target.value ? parseInt(e.target.value) : '')}
|
||||
>
|
||||
<option value="">— Spiel wählen —</option>
|
||||
{selectableMatches.map(m => (
|
||||
<option key={m.id} value={m.id}>
|
||||
#{m.id} {m.homeTeam.shortName} vs {m.awayTeam.shortName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</section>
|
||||
|
||||
{/* Zeit-Manipulation */}
|
||||
<section className={`${styles.section} ${!selectedMatch ? styles.sectionDisabled : ''}`}>
|
||||
<div className={styles.sectionLabel}>Anstoßzeit setzen</div>
|
||||
<div className={styles.presetGrid}>
|
||||
{TIME_PRESETS.map(p => (
|
||||
<button
|
||||
key={p.label}
|
||||
className={styles.presetBtn}
|
||||
onClick={() => applyTime(p.minutes)}
|
||||
disabled={!selectedMatch || busy}
|
||||
>
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Status-Manipulation */}
|
||||
<section className={`${styles.section} ${!selectedMatch ? styles.sectionDisabled : ''}`}>
|
||||
<div className={styles.sectionLabel}>Status setzen</div>
|
||||
<div className={styles.presetGrid}>
|
||||
{STATUS_PRESETS.map(p => (
|
||||
<button
|
||||
key={p.label}
|
||||
className={`${styles.presetBtn} ${p.status === 'FINISHED' ? styles.presetBtnDanger : p.status === 'IN_PLAY' ? styles.presetBtnLive : ''}`}
|
||||
onClick={() => applyStatus(p.status, p.scoreHome, p.scoreAway)}
|
||||
disabled={!selectedMatch || busy}
|
||||
>
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Reset */}
|
||||
<section className={styles.section}>
|
||||
<div className={styles.sectionLabel}>Zurücksetzen</div>
|
||||
<div className={styles.resetGrid}>
|
||||
<button
|
||||
className={styles.resetBtn}
|
||||
onClick={() => resetMatch(false)}
|
||||
disabled={!selectedMatch || busy}
|
||||
title="Ausgewähltes Spiel auf TIMED zurücksetzen"
|
||||
>
|
||||
↺ Spiel zurücksetzen
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.resetBtn} ${styles.resetBtnAll}`}
|
||||
onClick={() => resetMatch(true)}
|
||||
disabled={busy}
|
||||
title="Alle laufenden/beendeten Spiele zurücksetzen"
|
||||
>
|
||||
↺ Alle Spiele
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.resetBtn} ${styles.resetBtnTips}`}
|
||||
onClick={resetTips}
|
||||
disabled={busy}
|
||||
>
|
||||
🗑 Tipps löschen
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Log */}
|
||||
{log.length > 0 && (
|
||||
<div className={styles.log}>
|
||||
{log.map((l, i) => <div key={i} className={styles.logLine}>{l}</div>)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user