Fix QR code generation, new scanner styling and ability to choose events.

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import QRScanner from './QRScanner.svelte';
 	import TicketDisplay from './TicketDisplay.svelte';
+	import { onMount } from 'svelte';
 
 	import type { TicketData } from '$lib/types/types';
 	import { ScanState, defaultTicketData } from '$lib/types/types';
@@ -9,28 +10,144 @@
 	let scanned_id = $state<string>("");
 	let ticket_data = $state<TicketData>(defaultTicketData);
 	let scan_state = $state<ScanState>(ScanState.scanning);
+	
+	// Events related state
+	interface Event {
+		id: string;
+		name: string;
+		date: string;
+	}
+	
+	let events = $state<Event[]>([]);
+	let selectedEventId = $state<string>("");
+	let isLoadingEvents = $state(true);
+	let eventsError = $state("");
 
+	onMount(async () => {
+		await loadEvents();
+	});
+
+	async function loadEvents() {
+		isLoadingEvents = true;
+		eventsError = '';
+		
+		try {
+			const { data: eventsData, error } = await data.supabase
+				.from('events')
+				.select('id, name, date')
+				.order('date', { ascending: false });
+
+			if (error) throw error;
+			events = eventsData || [];
+			
+			// If there are events, select the first one by default
+			if (events.length > 0) {
+				selectedEventId = events[0].id;
+			}
+		} catch (err) {
+			console.error('Error loading events:', err);
+			eventsError = 'Failed to load events';
+		} finally {
+			isLoadingEvents = false;
+		}
+	}
+
+	// Process a scanned QR code
 	$effect(() => {
 		if (scanned_id === "") return;
 		scan_state = ScanState.scanning;
 
+		console.log("Scanned ID:", scanned_id);
+
 		data.supabase
 			.from('participants')
 			.select(`*, event ( id, name ), scanned_by ( id, display_name )`)
 			.eq('id', scanned_id)
-			.then( response => {
-			if (response.data && response.data.length > 0) {
-				ticket_data = response.data[0];
-				scan_state = ScanState.scan_successful;
-				data.supabase.rpc('scan_ticket', { _ticket_id: scanned_id}).then();
-			} else {
-				ticket_data = defaultTicketData;
-				scan_state = ScanState.scan_failed;
-			}
-		})
+			.then(response => {
+				if (response.data && response.data.length > 0) {
+					const participant = response.data[0];
+					ticket_data = participant;
+					
+					// Check if the participant belongs to the selected event
+					if (selectedEventId && participant.event.id !== selectedEventId) {
+						scan_state = ScanState.wrong_event;
+					} else if (participant.scanned) {
+						scan_state = ScanState.already_scanned; // Already scanned
+					} else {
+						scan_state = ScanState.scan_successful;
+						data.supabase.rpc('scan_ticket', { _ticket_id: scanned_id }).then();
+					}
+				} else {
+					ticket_data = defaultTicketData;
+					scan_state = ScanState.scan_failed;
+				}
+				
+				// Reset the scanned_id after 3 seconds to allow for a new scan
+				setTimeout(() => {
+					scanned_id = "";
+				}, 3000);
+			});
 	});
 </script>
 
-<QRScanner bind:message={scanned_id} />
+<div class="mx-auto p-4">
+	<h1 class="text-2xl font-bold mb-6 text-center">Code Scanner</h1>
 
-<TicketDisplay {ticket_data} {scan_state}/>
+	<!-- Event Selector -->
+	<div class="rounded-lg border border-gray-300 p-4 mb-4">
+		<h2 class="text-lg font-semibold mb-3">Select Event</h2>
+		{#if isLoadingEvents}
+			<div class="flex items-center justify-center h-10">
+				<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
+			</div>
+		{:else if eventsError}
+			<div class="text-red-600 text-center py-2">
+				{eventsError}
+				<button 
+					onclick={loadEvents}
+					class="ml-2 text-blue-600 underline"
+				>
+					Try again
+				</button>
+			</div>
+		{:else if events.length === 0}
+			<p class="text-gray-500 text-center py-2">No events found</p>
+		{:else}
+			<select 
+				bind:value={selectedEventId}
+				class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+			>
+				{#each events as event}
+					<option value={event.id}>
+						{event.name} ({new Date(event.date).toLocaleDateString('en-GB')})
+					</option>
+				{/each}
+			</select>
+		{/if}
+	</div>
+
+	<!-- Scanner Section -->
+	<div class="mb-4">
+		<QRScanner bind:message={scanned_id} />
+	</div>
+
+	<!-- Ticket Display Section -->
+	<h2 class="text-lg font-semibold mb-4">Ticket Information</h2>
+	<TicketDisplay {ticket_data} {scan_state} />
+	
+	<!-- Reset button -->
+	{#if scan_state !== ScanState.scanning}
+		<div class="flex justify-center mt-6 mb-4">
+			<button 
+				onclick={() => {
+					scanned_id = "";
+					scan_state = ScanState.scanning;
+				}}
+				class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-6 rounded-lg transition"
+				aria-label="Reset scanner"
+			>
+				Reset Scanner
+			</button>
+		</div>
+	{/if}
+</div>