From af22543ec84780ffca002c249ffe4212facb4d58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Tue, 8 Jul 2025 16:35:27 +0200
Subject: [PATCH] Fix QR code generation, new scanner styling and ability to
 choose events.

---
 src/lib/types/types.ts                        |   6 +-
 src/routes/private/api/gmail/+server.ts       |  13 +-
 .../private/events/event/view/+page.svelte    |   2 -
 src/routes/private/scanner/+page.svelte       | 141 ++++++++++++++++--
 src/routes/private/scanner/QRScanner.svelte   |   2 +-
 .../private/scanner/TicketDisplay.svelte      |  79 ++++++----
 6 files changed, 191 insertions(+), 52 deletions(-)

diff --git a/src/lib/types/types.ts b/src/lib/types/types.ts
index 36fb4ed..c93af06 100644
--- a/src/lib/types/types.ts
+++ b/src/lib/types/types.ts
@@ -1,7 +1,9 @@
 export enum ScanState {
     scanning,
     scan_successful,
-    scan_failed
+    already_scanned,
+    scan_failed,
+    wrong_event
 }
 
 export type TicketData = {
@@ -22,7 +24,7 @@ export const defaultTicketData: TicketData = {
   name: '',
   surname: '',
   email: '',
-  event: '',
+  event: { id: '', name: '' },
   created_at: new Date().toISOString(),
   created_by: null,
   scanned: false,
diff --git a/src/routes/private/api/gmail/+server.ts b/src/routes/private/api/gmail/+server.ts
index c34fec7..eea6c9b 100644
--- a/src/routes/private/api/gmail/+server.ts
+++ b/src/routes/private/api/gmail/+server.ts
@@ -16,15 +16,8 @@ interface EmailResult {
 	error?: string;
 }
 
-async function generateQRCode(participant: Participant, eventId: string): Promise<string> {
-	const qrCodeData = JSON.stringify({
-		participantId: participant.id,
-		eventId: eventId,
-		name: participant.name,
-		surname: participant.surname
-	});
-
-	const qrCodeBase64 = await QRCode.toDataURL(qrCodeData, {
+async function generateQRCode(participantId: string): Promise<string> {
+	const qrCodeBase64 = await QRCode.toDataURL(participantId, {
 		type: 'image/png',
 		margin: 2,
 		scale: 8
@@ -43,7 +36,7 @@ async function sendEmailToParticipant(
 	supabase: any
 ): Promise<EmailResult> {
 	try {
-		const qrCodeBase64Data = await generateQRCode(participant, eventId);
+		const qrCodeBase64Data = await generateQRCode(participant.id);
 
 		// Send email with QR code
 		await sendGmail(refreshToken, {
diff --git a/src/routes/private/events/event/view/+page.svelte b/src/routes/private/events/event/view/+page.svelte
index 4a96ac9..97ce1e3 100644
--- a/src/routes/private/events/event/view/+page.svelte
+++ b/src/routes/private/events/event/view/+page.svelte
@@ -162,8 +162,6 @@
 				p_emails: emails
 			});
 
-			console.log(syncError);
-
 			if (syncError) throw syncError;
 
 			// Reload participants
diff --git a/src/routes/private/scanner/+page.svelte b/src/routes/private/scanner/+page.svelte
index 0a098ca..8220dab 100644
--- a/src/routes/private/scanner/+page.svelte
+++ b/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>
diff --git a/src/routes/private/scanner/QRScanner.svelte b/src/routes/private/scanner/QRScanner.svelte
index d8a520f..fe8cd90 100644
--- a/src/routes/private/scanner/QRScanner.svelte
+++ b/src/routes/private/scanner/QRScanner.svelte
@@ -45,7 +45,7 @@
     });
 </script>
 
-<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-sm"></div>
+<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-lg border border-gray-300"></div>
 
 <style>
     /* Hide unwanted icons */
diff --git a/src/routes/private/scanner/TicketDisplay.svelte b/src/routes/private/scanner/TicketDisplay.svelte
index 44c45dd..053b66b 100644
--- a/src/routes/private/scanner/TicketDisplay.svelte
+++ b/src/routes/private/scanner/TicketDisplay.svelte
@@ -5,6 +5,7 @@
 	let { ticket_data, scan_state }: { ticket_data: TicketData; scan_state: ScanState } = $props();
 
 	function formatScannedAt(dateString: string): string {
+		if (!dateString) return '';
 		const date = new Date(dateString);
 		const day = String(date.getDate()).padStart(2, '0');
 		const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -14,37 +15,65 @@
 	}
 </script>
 
-<div class="py-3">
+<div class="border border-gray-300 rounded-lg overflow-hidden">
 	{#if scan_state === ScanState.scanning}
-		<div class="rounded border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700">
-			<p>Waiting for data...</p>
+		<div class="bg-gray-50 p-4 flex items-center justify-center gap-3">
+			<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
+			<p class="text-gray-700">Waiting for QR code...</p>
 		</div>
 	{:else if scan_state === ScanState.scan_failed}
-		<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700">
-			<p><strong>Scan failed!</strong></p>
-			<p>This is either not a valid ticket or this ticket has been purchased from a different section.</p>
+		<div class="bg-red-50 p-4">
+			<div class="flex items-center gap-2 mb-2">
+				<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+				<h3 class="font-semibold text-red-800">Invalid Code</h3>
+			</div>
+			<p class="text-red-700">This QR code is not a valid ticket or doesn't exist in our system.</p>
+		</div>
+	{:else if scan_state === ScanState.wrong_event}
+		<div class="bg-amber-50 p-4">
+			<div class="flex items-center gap-2 mb-2">
+				<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+				</svg>
+				<h3 class="font-semibold text-amber-800">Wrong Event</h3>
+			</div>
+			<p class="text-amber-700 mb-2">This ticket belongs to a different event:</p>
+			<div class="bg-white rounded p-3 border border-amber-200">
+				<p class="font-medium">{ticket_data.event.name}</p>
+				<p>{ticket_data.name} {ticket_data.surname}</p>
+			</div>
+		</div>
+	{:else if scan_state === ScanState.already_scanned}
+		<div class="bg-amber-50 p-4">
+			<div class="flex items-center gap-2 mb-2">
+				<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+				</svg>
+				<h3 class="font-semibold text-amber-800">Already Scanned</h3>
+			</div>
+			<p class="text-amber-700 mb-1">
+				This ticket was already scanned by {ticket_data.scanned_by?.display_name || 'someone'} 
+				{ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''}
+			</p>
+			<div class="bg-white rounded p-3 border border-amber-200 mt-2">
+				<p class="font-medium">{ticket_data.event.name}</p>
+				<p>{ticket_data.name} {ticket_data.surname}</p>
+			</div>
 		</div>
 	{:else if scan_state === ScanState.scan_successful}
-		{#if ticket_data.scanned}
-			<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700">
-				<p>Ticket already scanned!</p>
-				<p>
-					By {ticket_data.scanned_by?.display_name} on
-					{formatScannedAt(ticket_data.scanned_at)}
-				</p>
-				<hr class="my-2 border-t border-red-300" />
-				<ol>
-					<li><strong>{ticket_data.event.name}</strong></li>
-					<li>{ticket_data.name} {ticket_data.surname}</li>
-				</ol>
+		<div class="bg-green-50 p-4">
+			<div class="flex items-center gap-2 mb-2">
+				<svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+				</svg>
+				<h3 class="font-semibold text-green-800">Valid Ticket</h3>
 			</div>
-		{:else}
-			<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
-				<ol>
-					<li><strong>{ticket_data.event.name}</strong></li>
-					<li>{ticket_data.name} {ticket_data.surname}</li>
-				</ol>
+			<div class="bg-white rounded p-3 border border-green-200">
+				<p class="font-medium">{ticket_data.event.name}</p>
+				<p>{ticket_data.name} {ticket_data.surname}</p>
 			</div>
-		{/if}
+		</div>
 	{/if}
 </div>