lvs/brackets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Typscript final

Browse Source
This commit is contained in:
WilliamSoderberg
2026-03-11 16:44:09 +01:00 Verified
parent 42b28350de
commit edd9b064ec
24 changed files with 486 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Bracket/BracketView.tsx
+4 -5
View File
@@ -1,7 +1,7 @@
// frontend/src/components/Bracket/BracketView.tsx
import React, { useEffect, useRef, useState } from 'react';
import { MatchData } from '../../types';
import { type MatchData } from '../../types';
import Podium from "../Tournament/Podium";
import MatchCard from "./MatchCard";
@@ -80,7 +80,7 @@ export default function BracketView({ matches, onMatchClick }: BracketViewProps)
const roundKeys = Object.keys(rounds).map(Number).sort((a, b) => a - b);
return roundKeys.map((r) => {
let matchesInRound = rounds[r];
const matchesInRound = rounds[r];
matchesInRound.sort((a, b) => a.number - b.number);
return (
<div key={r} className="flex flex-col gap-10 z-10 w-64 shrink-0 justify-around">
@@ -95,8 +95,8 @@ export default function BracketView({ matches, onMatchClick }: BracketViewProps)
const lb = matches.filter(m => m.bracket === 'Loser');
const finals = matches.filter(m => m.bracket === 'Finals');
let displayWb = [...wb];
let displayFinals = [...finals];
const displayWb = [...wb];
const displayFinals = [...finals];
if (!isDoubleElim && displayWb.length > 0) {
const maxRound = Math.max(...displayWb.map(m => m.round));
@@ -146,7 +146,6 @@ export default function BracketView({ matches, onMatchClick }: BracketViewProps)
)}
</div>
<div className="flex flex-col justify-center gap-6 z-10">
{/* @ts-ignore - Assuming Podium was typed earlier or needs its own MatchData import */}
<Podium matches={matches} />
</div>
</div>
frontend/src/components/Bracket/MatchCard.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
// frontend/src/components/Bracket/MatchCard.tsx
import { Check } from 'lucide-react';
import { MatchData } from '../../types';
import { type MatchData } from '../../types';
import { printName, stringToColor } from '../../utils/helpers';
interface MatchCardProps {
@@ -48,7 +48,7 @@ export default function MatchCard({ match, onClick }: MatchCardProps) {
{ n: match.p1, s: match.p1_sets, win: match.winner_team_id !== null && match.winner_team_id === match.p1_team_id, real: match.p1_is_real },
{ n: match.p2, s: match.p2_sets, win: match.winner_team_id !== null && match.winner_team_id === match.p2_team_id, real: match.p2_is_real }
].map((p, i) => (
<div key={i} className={`flex justify-between items-center ${p.win ? 'text-zinc-800 dark:text-zinc-50 print:text-black! font-black' : p.real ? 'text-zinc-500 dark:text-zinc-400 print:text-black!' : 'text-zinc-400 print:text-zinc-600! italic'}`}>
<div key={i} className={`flex justify-between items-center ${p.win ? 'text-zinc-800 dark:text-zinc-50 print:text-black! font-black' : p.real ? 'text-zinc-600 dark:text-zinc-400 print:text-black!' : 'text-zinc-400 dark:text-zinc-600 print:text-zinc-600! italic'}`}>
<span className={`truncate text-xs tracking-tight pr-2 print:hidden ${p.win ? ' font-black text-orange-500' : 'font-bold'}`}>{p.n}</span>
frontend/src/components/Forms/TournamentForm.tsx
+7 -6
View File
@@ -11,8 +11,8 @@ interface TournamentSettings {
type: string;
timestamp: string;
duration: number;
courts: any[];
teams: any[];
courts: { name?: string }[];
teams: { name?: string }[];
}
interface TournamentFormProps {
@@ -106,12 +106,13 @@ export default function TournamentForm({ tournamentId, onSuccess, onDelete }: To
await api.post('/tournaments', fullPayload);
}
onSuccess();
} catch (err: any) {
} catch (err: unknown) {
console.error(err);
if (Array.isArray(err.detail)) {
setError(err.detail.map((e: any) => `${e.loc.join('.')}: ${e.msg}`).join(', '));
const error = err as { detail?: string | Array<{ loc: string[]; msg: string }> };
if (Array.isArray(error.detail)) {
setError(error.detail.map((e) => `${e.loc.join('.')}: ${e.msg}`).join(', '));
} else {
setError(typeof err.detail === 'string' ? err.detail : "Error saving tournament");
setError(typeof error.detail === 'string' ? error.detail : "Error saving tournament");
}
} finally {
setIsSubmitting(false);
frontend/src/components/Layout/Layout.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export interface OutletContextType {
}
export default function Layout({ darkMode, setDarkMode }: LayoutProps) {
const [isAdmin, setIsAdmin] = useState<boolean>(!!getToken());
const [isAdmin] = useState<boolean>(!!getToken());
const [navTitle, setNavTitle] = useState<string>('');
const [navSubtitle, setNavSubtitle] = useState<string>('');
const [showSettings, setShowSettings] = useState<boolean>(false);
frontend/src/components/Schedule/ScheduleRow.tsx
+1 -1
View File
@@ -2,7 +2,7 @@
import { CheckCircle, Pencil, Plus, Trophy } from 'lucide-react';
import React from 'react';
import { MatchData } from '../../types';
import { type MatchData } from '../../types';
import { printName, stringToColor } from '../../utils/helpers';
interface ScheduleRowProps {
frontend/src/components/Schedule/ScheduleView.tsx
+1 -1
View File
@@ -2,7 +2,7 @@
import { Search } from 'lucide-react';
import { useState } from 'react';
import { MatchData } from '../../types';
import { type MatchData } from '../../types';
import ScheduleRow from './ScheduleRow';
interface ScheduleViewProps {
frontend/src/components/Tournament/ScoreModal.tsx
+4 -6
View File
@@ -1,13 +1,10 @@
// frontend/src/components/Tournament/ScoreModal.tsx
import { type SetData } from '../../types';
import { Clock, Eraser, MapPin, Trophy } from 'lucide-react';
import { useState } from 'react';
import Modal from '../UI/Modal';
interface SetData {
p1: number | string;
p2: number | string;
}
interface MatchData {
id: string | number;
@@ -37,8 +34,9 @@ const ScoreForm = ({ match, isAdmin, onSubmit, onClear }: ScoreFormProps) => {
const handleSubmit = async () => {
try {
await onSubmit(match.id, sets, code);
} catch (err: any) {
setError(typeof err?.detail === 'string' ? err.detail : "Check code or scores");
} catch (err: unknown) {
const error = err as { detail?: string };
setError(typeof error?.detail === 'string' ? error.detail : "Check code or scores");
}
};
frontend/src/components/UI/Modal.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
// frontend/src/components/UI/Modal.tsx
import { LucideIcon, X } from 'lucide-react';
import { type LucideIcon, X } from 'lucide-react';
import React from 'react';
interface ModalProps {
@@ -19,7 +19,7 @@ export default function Modal({ isOpen, onClose, title, icon: Icon, children }:
<div className="p-6">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-black text-zinc-900 dark:text-white flex items-start gap-2">
{/* @ts-ignore - 'weight' is a specific prop if using Phosphor icons, but Lucide doesn't natively use it. Kept for compatibility. */}
{/* @ts-expect-error - 'weight' is a specific prop if using Phosphor icons, but Lucide doesn't natively use it. */}
{Icon && <Icon weight="duotone" className="text-orange-500 mt-1 shrink-0" size={24} />}
<span>{title}</span>
</h2>
frontend/src/pages/Dashboard.tsx
+17 -12
View File
@@ -1,7 +1,7 @@
// frontend/src/pages/Dashboard.tsx
import { Calendar, ChevronDown, ChevronUp, History, Plus, PlusCircle, SlidersHorizontal } from 'lucide-react';
import React, { useEffect, useState } from 'react';
import { useEffect, useState, useCallback } from 'react';
import { useNavigate, useOutletContext } from 'react-router-dom';
import DashCard from '../components/Dashboard/DashCard';
import TournamentForm from '../components/Forms/TournamentForm';
@@ -11,8 +11,11 @@ import api, { WS_URL } from '../services/api';
export interface TournamentType {
id: string | number;
name: string;
timestamp: string;
[key: string]: any;
type: string;
team_count: number;
court_count: number;
}
interface OutletContextType {
@@ -32,20 +35,22 @@ export default function Dashboard() {
const [showAllFuture, setShowAllFuture] = useState<boolean>(false);
const navigate = useNavigate();
const loadDashboard = async () => {
const loadDashboard = useCallback(async () => {
try {
const res: any = await api.get('/tournaments');
const list = Array.isArray(res) ? res : (res.items || []);
setTournaments(list);
const res = await api.get<{ items?: TournamentType[] } | TournamentType[]>('/tournaments');
const list = Array.isArray(res) ? res : (res?.items || []);
setTournaments(list as TournamentType[]);
} catch (e) {
console.error(e);
}
};
}, []);
useEffect(() => {
setNavTitle('Dashboard');
setNavSubtitle('');
loadDashboard();
// eslint-disable-next-line react-hooks/set-state-in-effect
void loadDashboard();
localStorage.removeItem('volley_view');
let ws: WebSocket;
@@ -63,7 +68,7 @@ export default function Dashboard() {
connect();
return () => { if (ws) ws.close(); };
}, [setNavTitle, setNavSubtitle]);
}, [setNavTitle, setNavSubtitle, loadDashboard]);
const handleEdit = (t: TournamentType) => {
setEditTarget(t);
@@ -126,7 +131,7 @@ export default function Dashboard() {
</span> Live Events
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{groups.live.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id: string) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
{groups.live.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
</div>
</section>
)}
@@ -138,7 +143,7 @@ export default function Dashboard() {
{groups.future.length > 0 ? (
<>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{futureShow.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id: string) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
{futureShow.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
</div>
{groups.future.length > 4 && (
<div className="mt-8 text-center">
@@ -160,7 +165,7 @@ export default function Dashboard() {
</button>
{showPast && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 opacity-75 hover:opacity-100 transition-opacity">
{groups.past.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id: string) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
{groups.past.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
</div>
)}
</section>
frontend/src/pages/Login.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export default function Login() {
const res = await api.postForm<TokenResponse>('/auth/token', formData);
localStorage.setItem('volleyToken', res.access_token);
navigate('/');
} catch (err) {
} catch {
setError('Invalid credentials.');
} finally {
setLoading(false);
frontend/src/pages/Tournament.tsx
+10 -10
View File
@@ -1,5 +1,6 @@
// frontend/src/pages/Tournament.tsx
import { type SetData } from '../types';
import { CalendarDays, Loader2, Network, SlidersHorizontal } from 'lucide-react';
import React, { useEffect, useRef, useState } from 'react';
import { useOutletContext, useParams } from 'react-router-dom';
@@ -134,9 +135,9 @@ export default function Tournament() {
});
};
const fetchData = async () => {
const fetchData = React.useCallback(async () => {
try {
const res: any = await api.get(`/tournaments/${id}`);
const res = await api.get<{ name: string, timestamp: string, matches: RawMatch[], courts: Court[], teams: Team[] }>(`/tournaments/${id}`);
setNavTitle(res.name);
setNavSubtitle(new Date(res.timestamp).toLocaleDateString());
setMatches(processMatches(res.matches, res.courts, res.teams));
@@ -145,10 +146,10 @@ export default function Tournament() {
} finally {
setLoading(false);
}
};
}, [id, setNavTitle, setNavSubtitle]);
useEffect(() => {
fetchData();
void fetchData();
if (wsRef.current) return;
const connect = () => {
@@ -156,7 +157,7 @@ export default function Tournament() {
wsRef.current = ws;
ws.onmessage = (e: MessageEvent) => {
const msg = JSON.parse(e.data);
if (msg.type === 'tournament_update' && msg.id === id) fetchData();
if (msg.type === 'tournament_update' && msg.id === id) void fetchData();
};
ws.onclose = () => { wsRef.current = null; };
};
@@ -167,7 +168,7 @@ export default function Tournament() {
if (wsRef.current?.readyState === 1) wsRef.current.close();
wsRef.current = null;
};
}, [id, setNavTitle, setNavSubtitle]);
}, [id, fetchData]);
const handleDeleteTournament = async (tId: string | number) => {
if (window.confirm("Purge this tournament?")) {
@@ -194,8 +195,8 @@ export default function Tournament() {
<div className="flex-1 overflow-hidden relative print:overflow-visible print:h-auto print:block">
{view === 'bracket'
? <BracketView matches={matches} onMatchClick={setScoreMatch} />
: <ScheduleView schedule={matches} onMatchClick={setScoreMatch} />
? <BracketView matches={matches} onMatchClick={(m) => setScoreMatch(m as ProcessedMatch)} />
: <ScheduleView schedule={matches} onMatchClick={(m) => setScoreMatch(m as ProcessedMatch)} />
}
</div>
@@ -209,9 +210,8 @@ export default function Tournament() {
await api.delete(`/tournaments/${id}/matches/${mid}/score?code=${encodeURIComponent(c || '')}`);
setScoreMatch(null);
}}
onSubmit={async (mid: string | number, s: any, c: string) => {
onSubmit={async (mid: string | number, s: SetData[], c: string) => {
const method = scoreMatch.isFinished ? 'patch' : 'post';
// @ts-ignore - Indexing api dynamically
await api[method](`/tournaments/${id}/matches/${mid}/score`, { sets: s, code: c });
setScoreMatch(null);
}}
frontend/src/services/api.ts
+5 -10
View File
@@ -16,7 +16,7 @@ const api = {
request: async <T>(
method: HttpMethod,
url: string,
data: any = null,
data: unknown = null,
isFormData: boolean = false
): Promise<T> => {
const headers: Record<string, string> = {};
@@ -31,7 +31,7 @@ const api = {
};
if (data) {
opts.body = isFormData ? data : JSON.stringify(data);
opts.body = isFormData ? (data as FormData) : JSON.stringify(data);
}
// Ensure clean URL concatenation
@@ -56,15 +56,10 @@ const api = {
},
get: <T>(url: string) => api.request<T>('GET', url),
post: <T>(url: string, data?: any) => api.request<T>('POST', url, data),
post: <T>(url: string, data?: unknown) => api.request<T>('POST', url, data),
postForm: <T>(url: string, data: FormData) => api.request<T>('POST', url, data, true),
put: <T>(url: string, data?: any) => api.request<T>('PUT', url, data),
patch: <T>(url: string, data?: any) => api.request<T>('PATCH', url, data),
put: <T>(url: string, data?: unknown) => api.request<T>('PUT', url, data),
patch: <T>(url: string, data?: unknown) => api.request<T>('PATCH', url, data),
delete: <T>(url: string) => api.request<T>('DELETE', url)
};
frontend/src/types.ts
+11
View File
@@ -18,6 +18,12 @@ export interface MatchData {
p1_is_real: boolean;
p2_is_real: boolean;
winnerName: string | null;
bracket_type?: string;
round_number?: number;
match_number?: number;
court_id?: string | number;
winner_team_id?: string | number | null;
p1_team_id?: string | number | null;
p2_team_id?: string | number | null;
@@ -25,4 +31,9 @@ export interface MatchData {
loser_next_match_id?: string | number | null;
timestamp?: string;
start_time?: string;
}
export interface SetData {
p1: number | string;
p2: number | string;
}