erman/scan-wave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Roman Krček
2025-07-08 16:35:27 +02:00
parent 6f563bbf7e
commit af22543ec8
6 changed files with 191 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/routes/private/scanner/TicketDisplay.svelte
View File

@@ -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>