change scheduling mode to enum in rounds, change appreance of scheduling

mode picker in competition

src/routes/+layout.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { ModeWatcher } from 'mode-watcher';
-	import '../app.css';
-	import { setContext } from 'svelte';
-	import type { PageProps } from './$types';
 	import { Toaster } from '$lib/components/ui/sonner';
+	import { ModeWatcher } from 'mode-watcher';
+	import { setContext, type Snippet } from 'svelte';
+	import '../app.css';
+	import type { LayoutData } from './$types';
 
 	let {
-		children,
-		data
+		data,
+		children
 	}: {
-		children: any;
-		data: PageProps['data'];
+		data: LayoutData;
+		children: Snippet;
 	} = $props();
 
 	setContext('user', data.user);

src/routes/+page.server.ts

@@ -1,4 +1,4 @@
-import { getCompetitionsWithAll } from '$lib/server/db/schema/competitions';
+import { getCompetitionsWithAll } from '@/lib/server/db/queries/competitions';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals }) => {

src/routes/api/competitions/[id]/+server.ts

@@ -1,3 +1,41 @@
-import type { RequestHandler } from '../../../competitions/[id]/$types';
+import { insertRound } from '@/lib/server/db/queries/rounds';
+import type { RequestHandler } from './$types';
+import type { RoundInsert } from '@/lib/server/db/schema/rounds';
+import { SchedulingMode } from '@/types';
 
-export const POST: RequestHandler = () => {};
+export const POST: RequestHandler = async ({ request, params }) => {
+	// get body from request
+	// get competition id from url
+	const body = await request.json();
+	let competitionId;
+	try {
+		competitionId = Number.parseInt(params.id, 10);
+	} catch {
+		throw new Error('Invalid competition id');
+	}
+	if (competitionId === -1) {
+		throw new Error('Invalid competition id');
+	}
+
+	console.log('body', body);
+	console.log('competitionId', competitionId);
+
+	let schedulingMode: SchedulingMode;
+
+	try {
+		schedulingMode = SchedulingMode[body.scheduling_mode as keyof typeof SchedulingMode];
+	} catch {
+		throw new Error('Invalid scheduling mode');
+	}
+
+	// create round
+	const roundInsert: RoundInsert = {
+		nb_matches: 0,
+		competition_id: competitionId,
+		scheduling_mode: schedulingMode
+	};
+
+	const round = await insertRound(competitionId, roundInsert);
+
+	return new Response(JSON.stringify(round));
+};

src/routes/competitions/[id]/+page.server.ts

@@ -1,6 +1,6 @@
 import { db } from '$lib/server/db';
 import type { Actions, PageServerLoad } from './$types';
-import { competitions, getCompetitionWithAll } from '$lib/server/db/schema/competitions';
+import { competitions } from '$lib/server/db/schema/competitions';
 import { error, redirect } from '@sveltejs/kit';
 import { eq } from 'drizzle-orm';
 import { and } from 'drizzle-orm';
@@ -8,6 +8,7 @@ import { teams } from '$lib/server/db/schema/teams';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 import { formSchema } from '$lib/components/rounds/create-schema';
+import { getCompetitionWithAll } from '@/lib/server/db/queries/competitions';
 
 export const load: PageServerLoad = async ({ params, locals }) => {
 	try {

src/routes/competitions/[id]/+page.svelte

@@ -1,29 +1,34 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
+	import Round from '$lib/components/rounds/round.svelte';
 	import Badge from '$lib/components/ui/badge/badge.svelte';
-	import type { PageProps } from './$types';
-	import { CalendarDays, MapPin, Users, Trophy, Clock, Trash2Icon } from 'lucide-svelte';
-	import { formatDate } from '$lib/utils';
 	import Button from '$lib/components/ui/button/button.svelte';
-	import Card from '$lib/components/ui/card/card.svelte';
-	import CardHeader from '$lib/components/ui/card/card-header.svelte';
 	import CardContent from '$lib/components/ui/card/card-content.svelte';
 	import CardFooter from '$lib/components/ui/card/card-footer.svelte';
+	import CardHeader from '$lib/components/ui/card/card-header.svelte';
+	import Card from '$lib/components/ui/card/card.svelte';
 	import Input from '$lib/components/ui/input/input.svelte';
-	import { enhance } from '$app/forms';
-	import Textarea from '$lib/components/ui/textarea/textarea.svelte';
-	import Tabs from '$lib/components/ui/tabs/tabs.svelte';
+	import TabsContent from '$lib/components/ui/tabs/tabs-content.svelte';
 	import TabsList from '$lib/components/ui/tabs/tabs-list.svelte';
 	import TabsTrigger from '$lib/components/ui/tabs/tabs-trigger.svelte';
-	import TabsContent from '$lib/components/ui/tabs/tabs-content.svelte';
+	import Tabs from '$lib/components/ui/tabs/tabs.svelte';
+	import Textarea from '$lib/components/ui/textarea/textarea.svelte';
+	import { formatDate } from '$lib/utils';
+	import { CalendarDays, Clock, MapPin, PlusIcon, Trash2Icon, Trophy, Users } from 'lucide-svelte';
 	import { Svelvet } from 'svelvet';
-	import Rounds from '$lib/components/rounds/rounds.svelte';
+	import type { PageProps } from './$types';
+	import CreateRound from '@/lib/components/rounds/create-round.svelte';
 
 	let { data }: PageProps = $props();
 
+	let tabValue = $state('rounds');
+
 	let showInputTeam = $state(false);
 	let showInputDescription = $state(false);
 	let description = $state(data.competition.description);
 
+	let showAddRound = $state(false);
+
 	function clearAndCloseDescription() {
 		showInputDescription = false;
 	}
@@ -59,11 +64,19 @@
 		</div>
 	</div>
 
-	<Tabs value="rounds">
-		<TabsList>
-			<TabsTrigger value="general">General</TabsTrigger>
-			<TabsTrigger value="rounds">Rounds</TabsTrigger>
-		</TabsList>
+	<Tabs bind:value={tabValue}>
+		<div class="flex justify-between">
+			<TabsList>
+				<TabsTrigger value="general">General</TabsTrigger>
+				<TabsTrigger value="rounds">Rounds</TabsTrigger>
+			</TabsList>
+			<Button
+				hidden={tabValue !== 'rounds' ||
+					!data.competition.rounds ||
+					data.competition.rounds.length === 0}
+				onclick={() => (showAddRound = !showAddRound)}>Add Round<PlusIcon /></Button
+			>
+		</div>
 		<TabsContent value="general">
 			<div class="grid gap-6 md:grid-cols-3">
 				<Card class=" md:col-span-2">
@@ -166,8 +179,12 @@
 		</TabsContent>
 
 		<TabsContent value="rounds">
-			{#if !data.competition.rounds || data.competition.rounds.length === 0}
-				<Rounds createForm={data.createForm} rounds={data.competition.rounds} />
+			{#if showAddRound || !data.competition.rounds || data.competition.rounds.length === 0}
+				<CreateRound competitionId={data.competition.id} />
+			{:else}
+				{#each data.competition.rounds as round (round.id)}
+					<Round {round} />
+				{/each}
 			{/if}
 		</TabsContent>
 	</Tabs>