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

Looking better

Browse Source
This commit is contained in:
Roman Krček
2025-06-21 21:35:52 +02:00
parent a135c5ac36
commit b6d9b8df44
6 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,23 +2,43 @@
import type { TicketData } from '$lib/types';
import { ScanState } from '$lib/types';
let { ticket_data, scan_state }: { ticket_data: TicketData, scan_state: ScanState } = $props();
let { ticket_data, scan_state }: { ticket_data: TicketData; scan_state: ScanState } = $props();
function formatScannedAt(dateString: string): string {
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>
{#if scan_state === ScanState.scanning}
<p>Waiting for data...</p>
{: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>
<div class="py-3">
{#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>
{:else if scan_state === ScanState.scan_failed}
<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
<p>Scan failed. Please try again.</p>
</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>
</div>
{:else}
<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
<ol>
<li>{ticket_data.event.name}</li>
<li>{ticket_data.name} {ticket_data.surname}</li>
</ol>
</div>
{/if}
{/if}
{/if}
</div>