Slightly working

src/routes/private/scanner/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import QRScanner from './QRScanner.svelte';
+	import TicketDisplay from './TicketDisplay.svelte';
+
+	import type { TicketData } from '$lib/types';
+	import { ScanState, defaultTicketData } from '$lib/types';
+
+	let { data } = $props();
+	let scanned_id = $state<string>("");
+	let ticket_data = $state<TicketData>(defaultTicketData);
+	let scan_state = $state<ScanState>(ScanState.scanning);
+
+	$effect(() => {
+		if (scanned_id === "") return;
+		console.log('New QR code found:', scanned_id);
+		scan_state = ScanState.scanning;
+
+		data.supabase.from('qrcodes').select().eq('id', scanned_id).then( response => {
+			if (response.data && response.data.length > 0) {
+				ticket_data = response.data[0];
+				scan_state = ScanState.scan_successful;
+			} else {
+				ticket_data = defaultTicketData;
+				scan_state = ScanState.scan_failed;
+			}
+		})
+	});
+</script>
+
+<QRScanner bind:message={scanned_id} />
+
+{#if scan_state === ScanState.scan_successful}
+	<TicketDisplay {ticket_data} />
+{/if}
+
+{#if scan_state === ScanState.scan_failed}
+	<p>Scan failed. Please try again.</p>
+{/if}
+
+{#if scan_state === ScanState.scanning}
+	<p>Fetching data...</p>
+{/if}