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

156
src/pages/TeamDetailPage.tsx
View File

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