60 lines
2 KiB
Svelte
60 lines
2 KiB
Svelte
<script lang="ts">
|
|
import { FormControl } from '$ui/form';
|
|
import FormDescription from '$ui/form/form-description.svelte';
|
|
import FormFieldErrors from '$ui/form/form-field-errors.svelte';
|
|
import FormField from '$ui/form/form-field.svelte';
|
|
import FormLabel from '$ui/form/form-label.svelte';
|
|
import RadioGroup from '$ui/radio-group/radio-group.svelte';
|
|
import RadioGroupItem from '$ui/radio-group/radio-group-item.svelte';
|
|
import { SchedulingMode } from '@/types';
|
|
import { cn } from '@/lib/utils';
|
|
import Label from '$ui/label/label.svelte';
|
|
import Card from '$ui/card/card.svelte';
|
|
import CardContent from '$ui/card/card-content.svelte';
|
|
import CardHeader from '$ui/card/card-header.svelte';
|
|
import { _ } from 'svelte-i18n';
|
|
import Button from '$ui/button/button.svelte';
|
|
import { ArrowRightIcon } from 'lucide-svelte';
|
|
|
|
let { competitionId }: { competitionId: number } = $props();
|
|
|
|
let schedulingMode: SchedulingMode = $state(SchedulingMode.single);
|
|
|
|
async function submit() {
|
|
const response = await fetch(`/api/competitions/${competitionId}`, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
body: JSON.stringify({ scheduling_mode: schedulingMode })
|
|
});
|
|
console.log("response", response)
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<RadioGroup
|
|
required
|
|
bind:value={() => schedulingMode, (t: SchedulingMode) => {}}
|
|
name="scheduling_mode"
|
|
>
|
|
{#each Object.values(SchedulingMode) as mode}
|
|
<button
|
|
class=
|
|
'flex h-full w-full items-center gap-4 rounded-xl'
|
|
onclick={() => (schedulingMode = mode)}
|
|
>
|
|
<Card class={cn("w-full", schedulingMode === mode && ' border-green-500')}>
|
|
<CardHeader class="flex justify-between">
|
|
<Label class="text-start">{$_(mode)}</Label>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RadioGroupItem hidden value={mode} />
|
|
<Label class="text-start">{$_(`${mode}.description`)}</Label>
|
|
</CardContent>
|
|
</Card>
|
|
</button>
|
|
{/each}
|
|
</RadioGroup>
|
|
<div class="flex w-full justify-end">
|
|
<Button onclick={submit}>Add Round<ArrowRightIcon /></Button>
|
|
</div>
|
|
</div>
|