Working nice, looks like shit

src/app.css

@@ -1,5 +1 @@
 @import 'tailwindcss';
-
-body {
-    font-family: "Roboto", sans-serif;
-}

src/app.html

@@ -10,3 +10,11 @@
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
+
+
+<style>
+	body {
+    font-family: "Roboto", sans-serif;
+}
+
+</style>

src/routes/auth/+page.server.ts

@@ -7,8 +7,17 @@ export const actions: Actions = {
     const formData = await request.formData()
     const email = formData.get('email') as string
     const password = formData.get('password') as string
+    const display_name = formData.get('display_name') as string
 
-    const { error } = await supabase.auth.signUp({ email, password })
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        data: {
+          display_name: display_name
+        }
+      }
+    });
     if (error) {
       console.error(error)
       redirect(303, '/auth/error')

src/routes/auth/+page.svelte

@@ -7,6 +7,10 @@
     Password
     <input name="password" type="password" />
   </label>
+  <label>
+    Display name
+    <input name="display_name" type="text" />
+  </label>
   <button>Login</button>
   <button formaction="?/signup">Sign up</button>
 </form>

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

@@ -15,10 +15,17 @@
 		console.log('New QR code found:', scanned_id);
 		scan_state = ScanState.scanning;
 
-		data.supabase.from('qrcodes').select().eq('id', scanned_id).then( response => {
+		data.supabase
+			.from('qrcodes')
+			.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})
+				console.log(scanned_id)
+				console.log(response.data[0]);
 			} else {
 				ticket_data = defaultTicketData;
 				scan_state = ScanState.scan_failed;
@@ -27,22 +34,6 @@
 	});
 </script>
 
-<style>
-.robo {
-	font-family: "Roboto", sans-serif;
-}
-</style>
-
 <QRScanner bind:message={scanned_id} />
 
-{#if scan_state === ScanState.scan_successful}
-	<TicketDisplay {ticket_data} />
-{/if}
-
-{#if scan_state === ScanState.scan_failed}
-	<p class="robo">Scan failed. Please try again.</p>
-{/if}
-
-{#if scan_state === ScanState.scanning}
-	<p class="robo">Fetching data...</p>
-{/if}
+<TicketDisplay {ticket_data} {scan_state}/>

src/routes/private/scanner/TicketDisplay.svelte

@@ -1,14 +1,24 @@
 <script lang="ts">
 	import type { TicketData } from '$lib/types';
+	import { ScanState } from '$lib/types';
 
-	let { ticket_data }: { ticket_data: TicketData } = $props();
+	let { ticket_data, scan_state }: { ticket_data: TicketData, scan_state: ScanState } = $props();
 </script>
 
-<p class="robo">{ticket_data.name}</p>
-<p>{ticket_data.surname}</p>
+{#if scan_state === ScanState.scanning}
+	<p>Waiting for data...</p>
 
-<style>
-.robo {
-	font-family: var(--font-display);
-}
-</style>
+{:else if scan_state === ScanState.scan_failed}
+	<p>Scan failed. Please try again.</p>
+
+{:else if scan_state === ScanState.scan_successful}
+	{#if ticket_data.scanned}
+		<p>Ticket already scanned!</p>
+		<p>By {ticket_data.scanned_by} at {ticket_data.scanned_at}</p>
+	{:else}
+		<p>Scan successful!</p>
+		<ol>
+			<li>{ticket_data.name} {ticket_data.surname}</li>
+		</ol>
+	{/if}
+{/if}