mrcwlnd/volleyball-dev-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added scoreboard functionality
Some checks failed
Deploy Volleyball CMS / deploy (push) Failing after 13s
Details

Browse Source
This commit is contained in:
Marc Wieland 2025-06-05 23:51:50 +02:00
parent 7bdc8629c2
commit 44740bd30e
1 changed files with 96 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/pages/TeamDetailPage.tsx
View File

@ -38,6 +38,8 @@ const TeamDetailPage = () => {
last_updated: string; last_updated: string;
} | null>(null); } | null>(null);
const [showGames, setShowGames] = useState(false);
useEffect(() => { useEffect(() => {
const fetchTeam = async () => { const fetchTeam = async () => {
try { try {
@ -152,72 +154,106 @@ const TeamDetailPage = () => {
</div> </div>
)} )}
{liveData && ( {liveData && Array.isArray(liveData.scoreboard) && liveData.scoreboard.length > 0 &&(
<div className="mt-12"> <div className="mt-12">
<h2 className="text-2xl font-bold text-frog-600 dark:text-frog-400 mb-4">🏆 Aktuelle Tabelle</h2> {liveData && (
<div className="overflow-x-auto"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
<table className="min-w-full bg-white dark:bg-neutral-800 rounded shadow">
{/* 🏆 Tabelle als Card */}
<div className="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
<h2 className="text-xl font-bold text-frog-600 dark:text-frog-400 mb-4">
🏆 Aktuelle Tabelle
</h2>
<table className="w-full text-sm">
<thead> <thead>
<tr className="bg-frog-100 dark:bg-frog-700 text-left text-sm font-semibold text-gray-700 dark:text-white"> <tr className="text-left text-gray-700 dark:text-white border-b border-gray-200 dark:border-neutral-700">
<th className="p-2">Platz</th> <th className="py-2">Platz</th>
<th className="p-2">Team</th> <th className="py-2">Team</th>
<th className="p-2">Spiele</th> <th className="py-2">Sp</th>
<th className="p-2">Siege</th> <th className="py-2">S</th>
<th className="p-2">Sätze</th> <th className="py-2">Sätze</th>
<th className="p-2">Punkte</th> <th className="py-2">P</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{liveData.scoreboard.map((row, i) => { {liveData.scoreboard.map((row, i) => {
const isTop = row.platz === 1; const isTop = row.platz === 1;
const isBottom = row.platz === liveData.scoreboard.length; const isBottom = row.platz === liveData.scoreboard.length;
return ( return (
<tr key={i} className="border-t dark:border-neutral-700"> <tr key={i} className="border-t border-gray-100 dark:border-neutral-700">
<td className="p-2 font-medium flex items-center gap-1"> <td className="py-1 font-medium flex items-center gap-1">
{row.platz} {row.platz}
{isTop && <span className="text-green-600">▲</span>} {isTop && <span className="text-green-600">▲</span>}
{isBottom && <span className="text-red-600">▼</span>} {isBottom && <span className="text-red-600">▼</span>}
</td> </td>
<td className="p-2">{row.team}</td> <td className="py-1">{row.team}</td>
<td className="p-2">{row.spiele}</td> <td className="py-1">{row.spiele}</td>
<td className="p-2">{row.siege}</td> <td className="py-1">{row.siege}</td>
<td className="p-2">{row.saetze}</td> <td className="py-1">{row.saetze}</td>
<td className="p-2">{row.punkte}</td> <td className="py-1">{row.punkte}</td>
</tr> </tr>
); );
})} })}
</tbody> </tbody>
</table> </table>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
Zuletzt aktualisiert:{" "}
{new Date(liveData.last_updated).toLocaleString("de-DE")}
</p>
</div> </div>
<h2 className="text-2xl font-bold text-frog-600 dark:text-frog-400 mt-10 mb-4">📅 Spiele</h2> {/* 📅 Spiele als Card */}
<div className="overflow-x-auto"> {/* 📅 Spiele als Card */}
<table className="min-w-full bg-white dark:bg-neutral-800 rounded shadow"> <div className="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-bold text-frog-600 dark:text-frog-400">
📅 Spiele
</h2>
<button
onClick={() => setShowGames((prev) => !prev)}
className="text-sm text-frog-500 hover:underline focus:outline-none"
>
{showGames ? "Spiele ausblenden" : "Spiele anzeigen"}
</button>
</div>
{showGames && (
<table className="w-full text-sm">
<thead> <thead>
<tr className="bg-frog-100 dark:bg-frog-700 text-left text-sm font-semibold text-gray-700 dark:text-white"> <tr className="text-left text-gray-700 dark:text-white border-b border-gray-200 dark:border-neutral-700">
<th className="p-2">Datum</th> <th className="py-2">Datum</th>
<th className="p-2">Team 1</th> <th className="py-2">Team 1</th>
<th className="p-2">Team 2</th> <th className="py-2">Team 2</th>
<th className="p-2">Ergebnis</th> <th className="py-2">Ergebnis</th>
<th className="p-2">Satzverlauf</th> <th className="py-2">Sätze</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{liveData.spiele.map((spiel, i) => ( {liveData.spiele.map((spiel, i) => (
<tr key={i} className="border-t dark:border-neutral-700"> <tr key={i} className="border-t border-gray-100 dark:border-neutral-700">
<td className="p-2">{spiel.datum}</td> <td className="py-1">{spiel.datum}</td>
<td className="p-2">{spiel.team1}</td> <td className="py-1">{spiel.team1}</td>
<td className="p-2">{spiel.team2}</td> <td className="py-1">{spiel.team2}</td>
<td className="p-2">{spiel.ergebnis}</td> <td className="py-1">{spiel.ergebnis}</td>
<td className="p-2">{spiel.satzverlauf}</td> <td className="py-1">{spiel.satzverlauf}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
)}
{!showGames && (
<p className="text-sm text-gray-500 dark:text-gray-400">
Klicke oben auf „Spiele anzeigen“, um die Begegnungen einzublenden.
</p>
)}
</div> </div>
</div>
)}
<p className="text-sm text-gray-500 dark:text-gray-400 mt-4"> <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
Zuletzt aktualisiert: {new Date(liveData.last_updated).toLocaleString("de-DE")} Zuletzt aktualisiert: {new Date(liveData.last_updated).toLocaleString("de-DE")}
</p> </p>