From 063638d01665e3b29124fc4dcef742b865e635b6 Mon Sep 17 00:00:00 2001
From: Chaoscaot <chaos@chaoscaot.de>
Date: Mon, 14 Apr 2025 23:31:19 +0200
Subject: [PATCH] Add TeamTable component and improve EventView layout

---
 .../moderator/pages/event/EventView.svelte    | 15 +++--
 .../moderator/pages/event/TeamTable.svelte    | 55 +++++++++++++++++++
 2 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 src/components/moderator/pages/event/TeamTable.svelte

diff --git a/src/components/moderator/pages/event/EventView.svelte b/src/components/moderator/pages/event/EventView.svelte
index c1ba5de..223a4f5 100644
--- a/src/components/moderator/pages/event/EventView.svelte
+++ b/src/components/moderator/pages/event/EventView.svelte
@@ -18,14 +18,13 @@
   -->
 
 <script lang="ts">
-    import type {ExtendedEvent} from "@type/event.ts";
+    import type { ExtendedEvent } from "@type/event.ts";
     import EventEdit from "@components/moderator/pages/event/EventEdit.svelte";
     import EventFightList from "@components/moderator/pages/event/EventFightList.svelte";
     import RefereesList from "@components/moderator/pages/event/RefereesList.svelte";
+    import TeamTable from "@components/moderator/pages/event/TeamTable.svelte";
 
-    const {
-        event
-    }: { event: ExtendedEvent } = $props();
+    const { event }: { event: ExtendedEvent } = $props();
 </script>
 
 <div class="flex flex-col m-4 p-4 rounded-md border gap-4">
@@ -35,12 +34,12 @@
             <EventEdit event={event.event} />
         </div>
         <div class="md:ml-4 md:pl-4 md:border-l md:w-1/3">
-            <h2>Teams</h2>
-
+            <h2 class="text-xl font-bold mb-4">Teams</h2>
+            <TeamTable {event} />
         </div>
         <div class="md:ml-4 md:pl-4 md:border-l md:w-1/3">
-            <h2>Referees</h2>
-            <RefereesList event={event} />
+            <h2 class="text-xl font-bold mb-4">Referees</h2>
+            <RefereesList {event} />
         </div>
     </div>
     <EventFightList data={event} />
diff --git a/src/components/moderator/pages/event/TeamTable.svelte b/src/components/moderator/pages/event/TeamTable.svelte
new file mode 100644
index 0000000..111be01
--- /dev/null
+++ b/src/components/moderator/pages/event/TeamTable.svelte
@@ -0,0 +1,55 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import { Button } from "@components/ui/button";
+    import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell, TableCaption } from "@components/ui/table";
+    import type { ExtendedEvent } from "@type/event.ts";
+
+    const { event }: { event: ExtendedEvent } = $props();
+</script>
+
+<Table>
+    <TableCaption>
+        <Button disabled>Add Team</Button>
+    </TableCaption>
+    <TableHeader>
+        <TableRow>
+            <TableHead>Team</TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>Action</TableHead>
+        </TableRow>
+    </TableHeader>
+    <TableBody>
+        {#each event.teams as team (team.id)}
+            <TableRow>
+                <TableCell>{team.kuerzel}</TableCell>
+                <TableCell>{team.name}</TableCell>
+                <TableCell>
+                    <Button disabled>Remove</Button>
+                </TableCell>
+            </TableRow>
+        {/each}
+        {#if event.teams.length === 0}
+            <TableRow>
+                <TableCell class="text-center col-span-3">No teams available</TableCell>
+            </TableRow>
+        {/if}
+    </TableBody>
+</Table>