133 lines
3.6 KiB
Svelte
133 lines
3.6 KiB
Svelte
<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';
|
|
|
|
let { data } = $props();
|
|
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) {
|
|
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>
|
|
|
|
<h1 class="text-2xl font-bold mb-4 mt-2 text-center">Code Scanner</h1>
|
|
|
|
<!-- Event Selector -->
|
|
<div class="mb-4 rounded-lg border border-gray-300 p-4">
|
|
<h2 class="mb-3 text-lg font-semibold">Select Event</h2>
|
|
{#if isLoadingEvents}
|
|
<div class="flex h-10 items-center justify-center">
|
|
<div
|
|
class="h-5 w-5 animate-spin rounded-full border-2 border-gray-500 border-t-transparent"
|
|
></div>
|
|
</div>
|
|
{:else if eventsError}
|
|
<div class="py-2 text-center text-red-600">
|
|
{eventsError}
|
|
<button onclick={loadEvents} class="ml-2 text-blue-600 underline"> Try again </button>
|
|
</div>
|
|
{:else if events.length === 0}
|
|
<p class="py-2 text-center text-gray-500">No events found</p>
|
|
{:else}
|
|
<select
|
|
bind:value={selectedEventId}
|
|
class="w-full rounded border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
>
|
|
{#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="mb-2 text-lg font-semibold">Ticket Information</h2>
|
|
<TicketDisplay {ticket_data} {scan_state} />
|