50 Zeilen
1.5 KiB
Svelte
50 Zeilen
1.5 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import {eventRepo} from "./repo/repo.ts";
|
||
|
|
import {astroI18n} from "astro-i18n";
|
||
|
|
import type {ExtendedEvent} from "./types/event.ts";
|
||
|
|
|
||
|
|
export let event: ExtendedEvent;
|
||
|
|
export let group: string;
|
||
|
|
export let rows: number = 1;
|
||
|
|
|
||
|
|
function window<T>(arr: T[], len: number): T[][] {
|
||
|
|
let result: T[][] = [];
|
||
|
|
for (let i = 0; i < arr.length; i += len) {
|
||
|
|
result.push(arr.slice(i, i + len));
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<table>
|
||
|
|
<tr class="font-bold border-b">
|
||
|
|
{#each Array(rows) as _}
|
||
|
|
<td>Time</td>
|
||
|
|
<td>Blue Team</td>
|
||
|
|
<td>Red Team</td>
|
||
|
|
{/each}
|
||
|
|
</tr>
|
||
|
|
{#each window(event.fights.filter(f => f.group === group), rows) as fights}
|
||
|
|
<tr>
|
||
|
|
{#each fights as fight}
|
||
|
|
<td>{Intl.DateTimeFormat(astroI18n.locale, {
|
||
|
|
hour: "numeric",
|
||
|
|
minute: "numeric",
|
||
|
|
}).format(new Date(fight.start))}</td>
|
||
|
|
<td class:font-bold={fight.ergebnis === 1} class:italic={fight.ergebnis === 3}>{fight.blueTeam.kuerzel}</td>
|
||
|
|
<td class:font-bold={fight.ergebnis === 2} class:italic={fight.ergebnis === 3}>{fight.redTeam.kuerzel}</td>
|
||
|
|
{/each}
|
||
|
|
</tr>
|
||
|
|
{/each}
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
table {
|
||
|
|
@apply w-full;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
@apply p-3 bg-gray-200 dark:bg-gray-800 rounded-2xl w-3/4 mx-auto;
|
||
|
|
}
|
||
|
|
</style>
|