88 lines
4.4 KiB
Svelte
88 lines
4.4 KiB
Svelte
<script lang="ts">
|
|
import type { TicketData } from '$lib/types/types';
|
|
import { ScanState } from '$lib/types/types';
|
|
|
|
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');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
return `${day}.${month}. ${hours}:${minutes}`;
|
|
}
|
|
</script>
|
|
|
|
<div class="border border-gray-300 rounded-lg overflow-hidden h-[200px] mb-4">
|
|
<div class="h-full flex flex-col">
|
|
{#if scan_state === ScanState.scanning}
|
|
<div class="bg-gray-50 p-4 flex-1 flex flex-col justify-center items-center">
|
|
<div class="animate-spin h-8 w-8 border-2 border-gray-500 rounded-full border-t-transparent mb-3"></div>
|
|
<p class="text-gray-700 text-center">Waiting for QR code...</p>
|
|
</div>
|
|
{:else if scan_state === ScanState.scan_failed}
|
|
<div class="bg-red-50 p-4 flex-1 flex flex-col">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<svg class="h-6 w-6 text-red-600 flex-shrink-0" 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 flex-grow">This QR code is not a valid ticket or doesn't exist in our system.</p>
|
|
<div class="mt-auto pt-2 opacity-0">
|
|
<!-- Spacer to maintain consistent height -->
|
|
<p class="font-medium invisible">Placeholder</p>
|
|
<p class="invisible">Placeholder</p>
|
|
</div>
|
|
</div>
|
|
{:else if scan_state === ScanState.wrong_event}
|
|
<div class="bg-amber-50 p-4 flex-1 flex flex-col">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<svg class="h-6 w-6 text-amber-600 flex-shrink-0" 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 mt-auto">
|
|
<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 flex-1 flex flex-col">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<svg class="h-6 w-6 text-amber-600 flex-shrink-0" 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">
|
|
This ticket was already scanned by: <br/> {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-auto">
|
|
<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}
|
|
<div class="bg-green-50 p-4 flex-1 flex flex-col">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<svg class="h-6 w-6 text-green-600 flex-shrink-0" 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>
|
|
<p class="text-green-700">Ticket successfully validated.</p>
|
|
<div class="bg-white rounded p-3 border border-green-200 mt-auto">
|
|
<p class="font-medium">{ticket_data.event?.name || ''}</p>
|
|
<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|