use modal for editing match results

src/app.d.ts

@@ -27,19 +27,26 @@ declare global {
 		supabase: SupabaseClient<Database>;
 		getSession(): Promise<Session | null>;
 	}
+
 	interface PageData {
 		eventName?: string;
 		eventId?: string;
 		supabase: SupabaseClient<Database>;
 		session: Session | null;
 	}
+
 	namespace App {
 		// interface Error {}
 		interface Locals {
 			supabase: SupabaseClient;
 			getSession(): Promise<Session | null>;
 		}
 		// interface Platform {}
+
+		interface PageState {
+			matchId?: number;
+			showModal?: boolean;
+		}
 	}
 	type supabaseClient = SupabaseClient<Database>;
 }

src/components/EditMatch.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { Label, Input } from 'flowbite-svelte';
+	import type { HttpError } from '@sveltejs/kit';
+	import { error, success } from '$lib/toast';
+	import { Matches } from '$lib/matches';
+	import { pushState } from '$app/navigation';
+
+	export let matchId: number;
+	export let matches: Matches;
+
+	let match = matches?.matches?.find((m) => m.id === matchId);
+
+	async function updateMatch() {
+		if (match) {
+			try {
+				// Need to convert string inputs to numbers
+				match.team1_score = Number(match.team1_score);
+				match.team2_score = Number(match.team2_score);
+
+				match = await matches.put(match);
+				success(
+					`Match ${match.matches_team1_fkey.name} vs ${match.matches_team2_fkey.name} updated`
+				);
+			} catch (err) {
+				error((err as HttpError).toString());
+			}
+		}
+	}
+
+	function closeModal() {
+		pushState('', {
+			showModal: false
+		});
+	}
+</script>
+
+{#if match}
+	<div class="flex flex-col">
+		<Label for="team1-score-input">Team `{match.matches_team1_fkey.name}`:</Label>
+		<Input
+			id="team1-score-input"
+			size="md"
+			type="number"
+			bind:value={match.team1_score}
+			on:keydown={(e) => {
+				if (e?.key === 'Enter') {
+					updateMatch();
+				} else if (e?.key === 'Escape') {
+					closeModal();
+				}
+			}}
+		/>
+
+		<Label for="team2-score-input">Team `{match.matches_team2_fkey.name}`:</Label>
+		<Input
+			id="team2-score-input"
+			size="sm"
+			type="number"
+			bind:value={match.team2_score}
+			on:keydown={(e) => {
+				if (e?.key === 'Enter') {
+					updateMatch();
+				} else if (e?.key === 'Escape') {
+					closeModal();
+				}
+			}}
+		/>
+	</div>
+{/if}

src/components/Match.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Tooltip } from 'flowbite-svelte';
+	import { page } from '$app/stores';
+	import { pushState } from '$app/navigation';
+
+	export let match: MatchRow;
+	export let readOnly: boolean = false;
+
+	export let showWinLoss: boolean = true;
+	function showModal() {
+		pushState('', {
+			showModal: true,
+			matchId: match.id
+		});
+	}
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore missing-declaration -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class="flex justify-center place-items-center"
+	on:click={() => {
+		if (!readOnly && !$page.state.showModal) {
+			showModal();
+		}
+	}}
+>
+	<span
+		class="p-1 rounded"
+		class:bg-green-300={showWinLoss &&
+			match?.team1_score &&
+			match?.team2_score &&
+			match.team1_score > match.team2_score}
+		class:bg-red-300={showWinLoss &&
+			match?.team1_score &&
+			match?.team2_score &&
+			match.team2_score > match.team1_score}
+	>
+		{match?.matches_team1_fkey?.name}</span
+	>
+	vs
+	<span
+		class="p-1 rounded"
+		class:bg-green-300={showWinLoss &&
+			match?.team1_score &&
+			match?.team2_score &&
+			match?.team2_score > match?.team1_score}
+		class:bg-red-300={showWinLoss &&
+			match?.team1_score &&
+			match?.team2_score &&
+			match?.team1_score > match?.team2_score}>{match?.matches_team2_fkey?.name}</span
+	>
+</div>
+{#if match?.team1_score && match?.team2_score}
+	<Tooltip>{match?.team1_score} to {match?.team2_score}</Tooltip>
+{/if}

src/lib/components/tournament/Matches.svelte → src/components/Matches.svelte

@@ -105,7 +105,7 @@
 									: defaultTdClass + 'border-solid border-2 border-yellow-300 bg-yellow-200'
 								: defaultTdClass}
 						>
-							<ViewMatch {matches} {match} {readOnly} showWinLoss={!hasDefaultTeam} />
+							<ViewMatch {match} {readOnly} showWinLoss={!hasDefaultTeam} />
 						</TableBodyCell>
 					{/each}
 					{#if tournament.refs === 'teams'}

src/routes/+layout.svelte

@@ -2,8 +2,8 @@
 
 <script lang="ts">
 	import '../app.postcss';
-	import Header from '$lib/components/Header.svelte';
-	import Footer from '$lib/components/Footer.svelte';
+	import Header from '$components/Header.svelte';
+	import Footer from '$components/Footer.svelte';
 	import { invalidate } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import type { LayoutData } from './$types';

src/routes/events/[slug]/+page.svelte

@@ -3,13 +3,13 @@
 	import { Event } from '$lib/event';
 	import { Matches as MatchesInstance } from '$lib/matches';
 	import { Teams } from '$lib/teams';
-	import Matches from '$lib/components/tournament/Matches.svelte';
-	import Bracket from '$lib/components/tournament/Bracket.svelte';
+	import Matches from '$components/Matches.svelte';
+	import Bracket from '$components/Bracket.svelte';
 	import { EventSupabaseDatabaseService } from '$lib/database/event';
 	import { MatchesSupabaseDatabaseService } from '$lib/database/matches';
 	import { TeamsSupabaseDatabaseService } from '$lib/database/teams';
 	import { loadInitialData } from '$lib/helper';
-	import Standings from '$lib/components/tournament/Standings.svelte';
+	import Standings from '$components/Standings.svelte';
 	import { Tabs, TabItem, Label, Select, Spinner } from 'flowbite-svelte';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';

src/routes/protected-routes/events/[slug]/+page.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
 	import type { PageData } from '$types';
 	import { Event as EventInstance } from '$lib/event';
-	import Settings from '$lib/components/tournament/Settings.svelte';
-	import Bracket from '$lib/components/tournament/Bracket.svelte';
+	import Settings from '$components/Settings.svelte';
+	import Bracket from '$components/Bracket.svelte';
 	import { Matches as MatchesInstance } from '$lib/matches';
 	import { Teams as TeamsInstance } from '$lib/teams';
 	import { EventSupabaseDatabaseService } from '$lib/database/event';
 	import { MatchesSupabaseDatabaseService } from '$lib/database/matches';
 	import { TeamsSupabaseDatabaseService } from '$lib/database/teams';
-	import Standings from '$lib/components/tournament/Standings.svelte';
-	import Matches from '$lib/components/tournament/Matches.svelte';
-	import Teams from '$lib/components/tournament/Teams.svelte';
+	import Standings from '$components/Standings.svelte';
+	import Matches from '$components/Matches.svelte';
+	import Teams from '$components/Teams.svelte';
 	import { loadInitialData } from '$lib/helper';
 	import { Tabs, TabItem, Spinner } from 'flowbite-svelte';
+	import EditMatch from '$components/EditMatch.svelte';
+	import { page } from '$app/stores';
+	import { Modal } from 'flowbite-svelte';
 
 	export let data: PageData;
 	const eventSupabaseDatabaseService = new EventSupabaseDatabaseService(data?.supabase);
@@ -27,6 +30,12 @@
 	const loadingInitialDataPromise = loadInitialData(tournament, $matches, teams);
 </script>
 
+{#if $page.state.showModal}
+	<Modal size="xs" on:close={() => history.back()} open={true} outsideclose autoclose>
+		<EditMatch matchId={$page?.state?.matchId} bind:matches />
+	</Modal>
+{/if}
+
 <div class="flex flex-col items-center">
 	{#await loadingInitialDataPromise}
 		<Spinner />

svelte.config.js

@@ -17,6 +17,7 @@ const config = {
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
 		alias: {
+			$components: path.resolve('src/components'),
 			$supabaseTypes: path.resolve('src/types/supabase')
 		}
 	}

tsconfig.json

@@ -9,7 +9,15 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"types": ["vitest/importMeta"]
+		"types": ["vitest/importMeta"],
+		"paths": {
+			"$src": ["./src"],
+			"$src/*": ["./src/*"],
+			"$lib": ["./src/lib"],
+			"$lib/*": ["./src/lib/*"],
+			"$components": ["./src/lib"],
+			"$components/*": ["./src/lib/*"]
+		}
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//