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

Fixed problems with changing height

Browse Source
This commit is contained in:
Roman Krček
2025-07-12 14:10:50 +02:00
parent 8247cd33a6
commit 0e5d39b149
1 changed files with 64 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,65 +15,73 @@
} }
</script> </script>
<div class="border border-gray-300 rounded-lg overflow-hidden"> <div class="border border-gray-300 rounded-lg overflow-hidden h-[200px]">
<div class="h-full flex flex-col">
{#if scan_state === ScanState.scanning} {#if scan_state === ScanState.scanning}
<div class="bg-gray-50 p-4 flex items-center justify-center gap-3"> <div class="bg-gray-50 p-4 flex-1 flex flex-col justify-center items-center">
<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div> <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">Waiting for QR code...</p> <p class="text-gray-700 text-center">Waiting for QR code...</p>
</div> </div>
{:else if scan_state === ScanState.scan_failed} {:else if scan_state === ScanState.scan_failed}
<div class="bg-red-50 p-4"> <div class="bg-red-50 p-4 flex-1 flex flex-col">
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-3">
<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
<h3 class="font-semibold text-red-800">Invalid Code</h3> <h3 class="font-semibold text-red-800">Invalid Code</h3>
</div> </div>
<p class="text-red-700">This QR code is not a valid ticket or doesn't exist in our system.</p> <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> </div>
{:else if scan_state === ScanState.wrong_event} {:else if scan_state === ScanState.wrong_event}
<div class="bg-amber-50 p-4"> <div class="bg-amber-50 p-4 flex-1 flex flex-col">
<div class="flex items-center gap-2 mb-2"> <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"> <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" /> <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> </svg>
<h3 class="font-semibold text-amber-800">Wrong Event</h3> <h3 class="font-semibold text-amber-800">Wrong Event</h3>
</div> </div>
<p class="text-amber-700 mb-2">This ticket belongs to a different event:</p> <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"> <div class="bg-white rounded p-3 border border-amber-200 mt-auto">
<p class="font-medium">{ticket_data.event.name}</p> <p class="font-medium">{ticket_data.event?.name || ''}</p>
<p>{ticket_data.name} {ticket_data.surname}</p> <p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
</div> </div>
</div> </div>
{:else if scan_state === ScanState.already_scanned} {:else if scan_state === ScanState.already_scanned}
<div class="bg-amber-50 p-4"> <div class="bg-amber-50 p-4 flex-1 flex flex-col">
<div class="flex items-center gap-2 mb-2"> <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"> <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" /> <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> </svg>
<h3 class="font-semibold text-amber-800">Already Scanned</h3> <h3 class="font-semibold text-amber-800">Already Scanned</h3>
</div> </div>
<p class="text-amber-700 mb-1"> <p class="text-amber-700">
This ticket was already scanned by {ticket_data.scanned_by?.display_name || 'someone'} This ticket was already scanned by: <br/> {ticket_data.scanned_by?.display_name || 'someone'}
{ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''} {ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''}
</p> </p>
<div class="bg-white rounded p-3 border border-amber-200 mt-2"> <div class="bg-white rounded p-3 border border-amber-200 mt-auto">
<p class="font-medium">{ticket_data.event.name}</p> <p class="font-medium">{ticket_data.event?.name || ''}</p>
<p>{ticket_data.name} {ticket_data.surname}</p> <p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
</div> </div>
</div> </div>
{:else if scan_state === ScanState.scan_successful} {:else if scan_state === ScanState.scan_successful}
<div class="bg-green-50 p-4"> <div class="bg-green-50 p-4 flex-1 flex flex-col">
<div class="flex items-center gap-2 mb-2"> <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"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
<h3 class="font-semibold text-green-800">Valid Ticket</h3> <h3 class="font-semibold text-green-800">Valid Ticket</h3>
</div> </div>
<div class="bg-white rounded p-3 border border-green-200"> <p class="text-green-700">Ticket successfully validated.</p>
<p class="font-medium">{ticket_data.event.name}</p> <div class="bg-white rounded p-3 border border-green-200 mt-auto">
<p>{ticket_data.name} {ticket_data.surname}</p> <p class="font-medium">{ticket_data.event?.name || ''}</p>
<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
</div> </div>
</div> </div>
{/if} {/if}
</div>
</div> </div>