80 lines
3.1 KiB
Svelte
80 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { dataRepo } from "@components/repo/data";
|
|
import type { ExtendedEvent, ResponseTeam } from "@components/types/event";
|
|
import EventFightChip from "./EventFightChip.svelte";
|
|
import SheetHeader from "@components/ui/sheet/sheet-header.svelte";
|
|
import { SheetDescription, SheetTitle } from "@components/ui/sheet";
|
|
|
|
const { event, team }: { event: ExtendedEvent; team: ResponseTeam } = $props();
|
|
|
|
let members = $derived.by(() => {
|
|
return fetchMembers(team.id);
|
|
});
|
|
let recentFights = $derived.by(() => {
|
|
return event.fights
|
|
.filter((f) => f.hasFinished && (f.blueTeam.id === team.id || f.redTeam.id === team.id))
|
|
.sort((a, b) => b.start - a.start)
|
|
.slice(0, 5);
|
|
});
|
|
|
|
async function fetchMembers(teamId: number) {
|
|
return await $dataRepo.queryPlayers(undefined, undefined, [teamId], 50, 0, false, false);
|
|
}
|
|
</script>
|
|
|
|
<SheetHeader>
|
|
<SheetTitle
|
|
>{team.name}
|
|
<span class="text-sm text-gray-400">{team.kuerzel}</span></SheetTitle
|
|
>
|
|
<SheetDescription>Statistiken des Teams</SheetDescription>
|
|
</SheetHeader>
|
|
|
|
<div class="mt-8 space-y-8">
|
|
<section>
|
|
<h3 class="text-lg font-semibold mb-4 border-b border-slate-800 pb-2 text-blue-400">Teammitglieder</h3>
|
|
{#await members}
|
|
<p class="text-slate-500 italic text-sm">Lade Mitglieder...</p>
|
|
{:then member}
|
|
<div class="grid grid-cols-2 gap-2">
|
|
{#each member.entries as p (p.uuid)}
|
|
<div class="bg-slate-800/50 p-2 rounded border border-slate-700 flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-[10px]">
|
|
{p.name.charAt(0)}
|
|
</div>
|
|
<span class="truncate text-sm">{p.name}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/await}
|
|
</section>
|
|
|
|
<section>
|
|
<h3 class="text-lg font-semibold mb-4 border-b border-slate-800 pb-2 text-green-400">Letzte 5 Kämpfe</h3>
|
|
{#if recentFights.length > 0}
|
|
<div class="space-y-3">
|
|
{#each recentFights as fight}
|
|
<div class="scale-90 origin-left">
|
|
<EventFightChip
|
|
{event}
|
|
disabled={true}
|
|
{fight}
|
|
group={fight.group ?? {
|
|
id: -1,
|
|
name: "Event",
|
|
pointsPerWin: 0,
|
|
pointsPerLoss: 0,
|
|
pointsPerDraw: 0,
|
|
type: "GROUP_STAGE",
|
|
points: null,
|
|
}}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<p class="text-slate-500 italic text-sm">Keine beendeten Kämpfe in diesem Event.</p>
|
|
{/if}
|
|
</section>
|
|
</div>
|