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}

src/routes/private/scanner/QRScanner.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import {
+        Html5QrcodeScanner,
+        type Html5QrcodeResult,
+        Html5QrcodeScanType,
+        Html5QrcodeSupportedFormats,
+        Html5QrcodeScannerState,
+    } from 'html5-qrcode';
+
+    let width: number = 300;
+    let height: number = 300;
+
+    let { message = $bindable() } = $props();
+
+    function onScanSuccess(decodedText: string, decodedResult: Html5QrcodeResult): void {
+        //console.log(`Code scanned = ${decodedText}`);
+        message = decodedText;
+    }
+
+    // usually better to ignore and keep scanning
+    function onScanFailure(message: string) {
+        //console.log(`Code scan error = ${message}`);
+    }
+
+    let scanner: Html5QrcodeScanner;
+    onMount(() => {
+        scanner = new Html5QrcodeScanner(
+            'qr-scanner',
+            {
+                fps: 5,
+                qrbox: { width, height },
+                aspectRatio: 1,
+                supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA],
+                formatsToSupport: [Html5QrcodeSupportedFormats.QR_CODE],
+            },
+            false // non-verbose
+        );
+        scanner.render(onScanSuccess, onScanFailure);
+    });
+</script>
+
+<div id="qr-scanner" class="w-full max-w-sm bg-slate-700 rounded-lg overflow-hidden"></div>
+
+<style>
+    /* Hide unwanted icons */
+    #qr-scanner :global(img[alt='Info icon']),
+    #qr-scanner :global(img[alt='Camera based scan']) {
+        display: none;
+    }
+
+    /* Change camera permission button text */
+    #qr-scanner :global(#html5-qrcode-button-camera-permission) {
+        visibility: hidden;
+    }
+    #qr-scanner :global(#html5-qrcode-button-camera-permission::after) {
+        position: absolute;
+        inset: auto 0 0;
+        display: block;
+        content: 'Allow camera access';
+        visibility: visible;
+        padding: 10px 0;
+    }
+</style>

src/routes/private/scanner/TicketDisplay.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { TicketData } from '$lib/types';
+
+	let { ticket_data }: { ticket_data: TicketData } = $props();
+</script>
+
+<p>{ticket_data.name}</p>
+<p>{ticket_data.surname}</p>