55 lines
1.7 KiB
Svelte
55 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import type { ExtendedEvent } from "@components/types/event";
|
|
import type { Team } from "@components/types/team";
|
|
import { eventRepo } from "@components/repo/event";
|
|
|
|
const {
|
|
event,
|
|
}: {
|
|
event: ExtendedEvent;
|
|
} = $props();
|
|
|
|
let teams: Team[] = $state(event.teams);
|
|
|
|
const colorMap: Record<string, string> = {
|
|
"0": "#000000",
|
|
"1": "#0000AA",
|
|
"2": "#00AA00",
|
|
"3": "#00AAAA",
|
|
"4": "#AA0000",
|
|
"5": "#AA00AA",
|
|
"6": "#FFAA00",
|
|
"7": "#AAAAAA",
|
|
"8": "#555555",
|
|
"9": "#5555FF",
|
|
a: "#55FF55",
|
|
b: "#55FFFF",
|
|
c: "#FF5555",
|
|
d: "#FF55FF",
|
|
e: "#FFFF55",
|
|
f: "#FFFFFF",
|
|
};
|
|
|
|
onMount(async () => {
|
|
teams = await $eventRepo.listTeams(event.event.id.toString());
|
|
});
|
|
</script>
|
|
|
|
<div class="py-2 border-t border-t-gray-600">
|
|
<h1 class="text-2xl font-bold mb-4">Angemeldete Teams</h1>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
|
|
{#each teams as team}
|
|
<div class="bg-neutral-800 p-2 rounded-md border border-neutral-700 border-l-4 flex flex-row items-center gap-2" style="border-left-color: {colorMap[team.color] || '#FFFFFF'}">
|
|
<span class="text-sm font-mono text-neutral-400 shrink-0 w-8 text-center">{team.kuerzel}</span>
|
|
<span class="font-bold truncate" title={team.name}>
|
|
{team.name}
|
|
</span>
|
|
</div>
|
|
{/each}
|
|
{#if teams.length === 0}
|
|
<p class="col-span-full text-center text-neutral-400">Keine Teams angemeldet.</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|