SteamWar/Website
10
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

feat: Implement group management features with dialogs for editing and displaying group results, enhance event creation with a form, and update team and referee management UI
All checks were successful
SteamWarCI Build successful
Details

Browse Source
This commit is contained in:
Chaoscaot
2025-05-23 14:23:33 +02:00
parent b440456687
commit 2bf3beb044
10 changed files with 375 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/components/moderator/pages/event/EventFightList.svelte
View File

@@ -20,23 +20,25 @@
<script lang="ts">
import FightEditRow from "./FightEditRow.svelte";
import GroupEditRow from "./GroupEditRow.svelte";
import type { EventFightEdit, ExtendedEvent } from "@type/event";
import { createSvelteTable, FlexRender } from "@components/ui/data-table";
import { type ColumnFiltersState, getCoreRowModel, getFilteredRowModel, getGroupedRowModel, getSortedRowModel, type RowSelectionState, type SortingState } from "@tanstack/table-core";
import { columns } from "./columns";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@components/ui/table";
import { Checkbox } from "@components/ui/checkbox";
import { Menubar, MenubarContent, MenubarItem, MenubarGroup, MenubarGroupHeading, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@components/ui/menubar";
import { Menubar, MenubarContent, MenubarItem, MenubarGroup, MenubarGroupHeading, MenubarMenu, MenubarTrigger, MenubarSub, MenubarSubTrigger, MenubarSubContent } from "@components/ui/menubar";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
import FightEdit from "@components/moderator/components/FightEdit.svelte";
import { Button } from "@components/ui/button";
import { eventRepo } from "@components/repo/event";
import GroupEditDialog from "./GroupEditDialog.svelte";
import GroupResultsDialog from "./GroupResultsDialog.svelte";
import type { ResponseGroups } from "@type/event";
let { data = $bindable() }: { data: ExtendedEvent } = $props();
let fights = $state(data.fights);
let groups = $state(data.groups);
let sorting = $state<SortingState>([]);
let columnFilters = $state<ColumnFiltersState>([]);
@@ -94,6 +96,10 @@
});
let createOpen = $state(false);
let editGroupOpen = $state(false);
let selectedGroup: ResponseGroups | null = $state(null);
let groupResultsOpen = $state(false);
let selectedGroupForResults: ResponseGroups | null = $state(null);
async function handleSave(fight: EventFightEdit) {
await $eventRepo.createFight(data.event.id.toString(), {
@@ -102,48 +108,88 @@
redTeam: fight.redTeam.id,
});
fights = await $eventRepo.listFights(data.event.id.toString());
reload();
createOpen = false;
}
function openGroupEditDialog(group: ResponseGroups) {
selectedGroup = group;
editGroupOpen = true;
}
function openGroupResultsDialog(group: ResponseGroups) {
selectedGroupForResults = group;
groupResultsOpen = true;
}
async function reload() {
fights = await $eventRepo.listFights(data.event.id.toString());
}
</script>
<div class="w-fit">
<Dialog bind:open={createOpen}>
<Menubar>
<MenubarMenu>
<MenubarTrigger>Mehrfach Bearbeiten</MenubarTrigger>
<MenubarContent>
<MenubarItem disabled>Gruppe Ändern</MenubarItem>
<MenubarItem disabled>Startzeit Verschieben</MenubarItem>
<MenubarItem disabled>Spectate Port Ändern</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Erstellen</MenubarTrigger>
<MenubarContent>
<MenubarItem onclick={() => (createOpen = true)}>Fight Erstellen</MenubarItem>
<MenubarGroup>
<MenubarGroupHeading>Generatoren</MenubarGroupHeading>
<MenubarItem disabled>Gruppenphase</MenubarItem>
<MenubarItem disabled>K.O. Phase</MenubarItem>
</MenubarGroup>
</MenubarContent>
</MenubarMenu>
</Menubar>
<DialogContent>
<DialogHeader>
<DialogTitle>Fight Erstellen</DialogTitle>
<DialogDescription>Hier kannst du einen neuen Fight erstellen</DialogDescription>
</DialogHeader>
<FightEdit fight={null} teams={data.teams} event={data.event} groups={data.groups} onSave={handleSave}>
{#snippet actions(dirty, submit)}
<DialogFooter>
<Button disabled={!dirty} onclick={submit}>Speichern</Button>
</DialogFooter>
{/snippet}
</FightEdit>
</DialogContent>
</Dialog>
<Dialog bind:open={createOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Fight Erstellen</DialogTitle>
<DialogDescription>Hier kannst du einen neuen Fight erstellen</DialogDescription>
</DialogHeader>
<FightEdit fight={null} teams={data.teams} event={data.event} groups={data.groups} onSave={handleSave}>
{#snippet actions(dirty, submit)}
<DialogFooter>
<Button disabled={!dirty} onclick={submit}>Speichern</Button>
</DialogFooter>
{/snippet}
</FightEdit>
</DialogContent>
</Dialog>
{#if selectedGroup}
<GroupEditDialog bind:open={editGroupOpen} group={selectedGroup} event={data.event} bind:groups />
{/if}
{#if selectedGroupForResults}
<GroupResultsDialog bind:open={groupResultsOpen} group={selectedGroupForResults} teams={data.teams} {fights} />
{/if}
<div class="flex items-center justify-between">
<Menubar>
<MenubarMenu>
<MenubarTrigger>Mehrfach Bearbeiten</MenubarTrigger>
<MenubarContent>
<MenubarItem disabled>Gruppe Ändern</MenubarItem>
<MenubarItem disabled>Startzeit Verschieben</MenubarItem>
<MenubarItem disabled>Spectate Port Ändern</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Erstellen</MenubarTrigger>
<MenubarContent>
<MenubarItem onclick={() => (createOpen = true)}>Fight Erstellen</MenubarItem>
<MenubarGroup>
<MenubarGroupHeading>Generatoren</MenubarGroupHeading>
<MenubarItem disabled>Gruppenphase</MenubarItem>
<MenubarItem disabled>K.O. Phase</MenubarItem>
</MenubarGroup>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger disabled={!groups.length}>Gruppen</MenubarTrigger>
<MenubarContent>
{#each groups as group (group.id)}
<MenubarSub>
<MenubarSubTrigger>
{group.name}
</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem onclick={() => openGroupEditDialog(group)}>Bearbeiten</MenubarItem>
<MenubarItem onclick={() => openGroupResultsDialog(group)}>Gruppen Ergebnisse</MenubarItem>
</MenubarSubContent>
</MenubarSub>
{/each}
</MenubarContent>
</MenubarMenu>
</Menubar>
<Button variant="outline" class="ml-4" onclick={reload}>Neu laden</Button>
</div>
<Table>
@@ -163,6 +209,7 @@
<TableBody>
{#each table.getRowModel().rows as groupRow (groupRow.id)}
{#if groupRow.getIsGrouped()}
{@const group = groups.find((g) => g.id === groupRow.getValue("group"))}
<TableRow class="font-bold">
<TableCell colspan={columns.length - 1}>
<Checkbox
@@ -171,13 +218,9 @@
onCheckedChange={() => groupRow.toggleSelected()}
class="mr-4"
/>
{groupRow.getValue("group") ?? "Keine Gruppe"}
{group?.name ?? "Keine Gruppe"}
</TableCell>
{#if groupRow.original.group != null}
<TableCell class="text-right">
<GroupEditRow group={groupRow.original.group}></GroupEditRow>
</TableCell>
{/if}
<TableCell class="text-right"></TableCell>
</TableRow>
{#each groupRow.subRows as row (row.id)}
<TableRow data-state={row.getIsSelected() && "selected"}>
@@ -187,12 +230,7 @@
</TableCell>
{/each}
<TableCell class="text-right">
<FightEditRow
fight={row.original}
teams={data.teams}
groups={data.groups}
event={data.event}
onupdate={(update) => (fights = fights.map((v) => (v.id === update.id ? update : v)))}
<FightEditRow fight={row.original} teams={data.teams} bind:groups event={data.event} onupdate={(update) => (fights = fights.map((v) => (v.id === update.id ? update : v)))}
></FightEditRow>
</TableCell>
</TableRow>

4
src/components/moderator/pages/event/FightEditRow.svelte
View File

@@ -7,7 +7,7 @@
import type { Team } from "@components/types/team";
import { fightRepo } from "@components/repo/fight";
let { fight, teams, groups, event, onupdate }: { fight: EventFight; teams: Team[]; groups: ResponseGroups[]; event: SWEvent; onupdate: (update: EventFight) => void } = $props();
let { fight, teams, groups = $bindable(), event, onupdate }: { fight: EventFight; teams: Team[]; groups: ResponseGroups[]; event: SWEvent; onupdate: (update: EventFight) => void } = $props();
let editOpen = $state(false);
@@ -37,7 +37,7 @@
<DialogTitle>Fight bearbeiten</DialogTitle>
<DialogDescription>Hier kannst du die Daten des Kampfes bearbeiten.</DialogDescription>
</DialogHeader>
<FightEdit {fight} {teams} {groups} {event} onSave={handleSave}>
<FightEdit {fight} {teams} bind:groups {event} onSave={handleSave}>
{#snippet actions(dirty, submit)}
<DialogFooter>
<Button disabled={!dirty} onclick={submit}>Speichern</Button>

45
src/components/moderator/pages/event/GroupEditDialog.svelte Normal file
View File

@@ -0,0 +1,45 @@
<script lang="ts">
import type { GroupUpdateEdit, ResponseGroups, SWEvent } from "@type/event";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
import GroupEdit from "@components/moderator/components/GroupEdit.svelte";
import { Button } from "@components/ui/button";
import { eventRepo } from "@repo/event";
let { group, groups = $bindable(), open = $bindable(), event }: { group: ResponseGroups; groups: ResponseGroups[]; open?: boolean; event: SWEvent } = $props();
async function handleSave(groupData: GroupUpdateEdit) {
if (!group) return;
const updatedGroup = await $eventRepo.updateGroup(event.id.toString(), group.id.toString(), groupData);
groups = groups.map((g) => (g.id === updatedGroup.id ? updatedGroup : g));
open = false;
}
async function handleDelete() {
if (!group) return;
await $eventRepo.deleteGroup(event.id.toString(), group.id.toString());
groups = groups.filter((g) => g.id !== group.id);
open = false;
}
</script>
{#if group}
<Dialog bind:open>
<DialogContent>
<DialogHeader>
<DialogTitle>Gruppe Bearbeiten: {group.name}</DialogTitle>
<DialogDescription>Hier kannst du die Gruppendetails bearbeiten.</DialogDescription>
</DialogHeader>
<GroupEdit {group} onSave={handleSave}>
{#snippet actions(dirty, submit)}
<DialogFooter class="flex justify-between">
<Button variant="destructive" onclick={handleDelete}>Löschen</Button>
<div class="flex gap-2">
<Button variant="outline" onclick={() => (open = false)}>Abbrechen</Button>
<Button disabled={!dirty} onclick={submit}>Speichern</Button>
</div>
</DialogFooter>
{/snippet}
</GroupEdit>
</DialogContent>
</Dialog>
{/if}

16
src/components/moderator/pages/event/GroupEditRow.svelte
View File

@@ -1,16 +0,0 @@
<script lang="ts">
import type { ResponseGroups } from "@type/event";
import { Button } from "@components/ui/button";
import { MenuIcon } from "lucide-svelte";
let { group }: { group: ResponseGroups } = $props();
</script>
<div>
<Button variant="ghost" size="icon">
<MenuIcon />
</Button>
<Button variant="ghost" size="icon">
<MenuIcon />
</Button>
</div>

48
src/components/moderator/pages/event/GroupResultsDialog.svelte Normal file
View File

@@ -0,0 +1,48 @@
<script lang="ts">
import type { EventFight, ExtendedEvent, ResponseGroups, ResponseTeam } from "@type/event";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@components/ui/table";
import { Button } from "@components/ui/button";
import type { Team } from "@components/types/team";
let { open = $bindable(), group, teams, fights }: { open?: boolean; group: ResponseGroups; teams: Team[]; fights: EventFight[] } = $props();
</script>
<Dialog bind:open>
<DialogContent class="sm:max-w-[600px]">
<DialogHeader>
<DialogTitle>Ergebnisse: {group?.name}</DialogTitle>
<DialogDescription>
Punkte: Sieg: {group?.pointsPerWin}, Unentschieden: {group?.pointsPerDraw}, Niederlage: {group?.pointsPerLoss}
</DialogDescription>
</DialogHeader>
{#if group.points !== null}
<Table>
<TableHeader>
<TableRow>
<TableHead>Team</TableHead>
<TableHead class="text-right">Spiele</TableHead>
<TableHead class="text-right">Punkte</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#each Object.entries(group.points).toSorted((a, b) => b[1] - a[1]) as [teamIdString, points] (teamIdString)}
{@const teamId = Number(teamIdString)}
{@const team = teams.find((t) => t.id === teamId) as ResponseTeam}
{@const playedGames = fights.filter((f) => f.start > Date.now() && f.group?.id === group.id && (f.blueTeam.id === teamId || f.redTeam.id === teamId)).length}
<TableRow>
<TableCell>{team.name} ({team.kuerzel})</TableCell>
<TableCell class="text-right">{playedGames}</TableCell>
<TableCell class="text-right font-bold">{points}</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
{:else}
<p class="text-center py-4">Noch keine Ergebnisse für diese Gruppe vorhanden oder keine Spiele zugeordnet.</p>
{/if}
<DialogFooter>
<Button variant="outline" onclick={() => (open = false)}>Schließen</Button>
</DialogFooter>
</DialogContent>
</Dialog>

4
src/components/moderator/pages/event/RefereesList.svelte
View File

@@ -55,7 +55,7 @@
<TableRow>
<TableCell>{referee.name}</TableCell>
<TableCell>
<Button onclick={() => removeReferee(referee.uuid)}>Remove</Button>
<Button onclick={() => removeReferee(referee.uuid)} variant="outline" size="sm">{referee.name} entfernen</Button>
</TableCell>
</TableRow>
{/each}
@@ -63,7 +63,7 @@
<Popover>
<TableCaption>
<PopoverTrigger>
<Button>Add</Button>
<Button>Hinzufügen</Button>
</PopoverTrigger>
</TableCaption>
<PopoverContent class="p-0">

4
src/components/moderator/pages/event/TeamTable.svelte
View File

@@ -59,7 +59,7 @@
<TableCell>{t.kuerzel}</TableCell>
<TableCell>{t.name}</TableCell>
<TableCell>
<Button onclick={() => removeTeam(t.id)}>Remove</Button>
<Button onclick={() => removeTeam(t.id)} variant="outline" size="sm">{t.name} abmelden</Button>
</TableCell>
</TableRow>
{/each}
@@ -72,7 +72,7 @@
<Popover>
<TableCaption>
<PopoverTrigger>
<Button>Add Team</Button>
<Button>Team Anmelden</Button>
</PopoverTrigger>
</TableCaption>
<PopoverContent class="p-0">

2
src/components/moderator/pages/event/columns.ts
View File

@@ -63,7 +63,7 @@ export const columns: ColumnDef<EventFight> = [
},
{
header: "Gruppe",
accessorKey: "group.name",
accessorKey: "group.id",
id: "group",
},
{