50 lines
1.6 KiB
Svelte
50 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { TicketData } from '$lib/types';
|
|
import { ScanState } from '$lib/types';
|
|
|
|
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>
|
|
|
|
<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>
|
|
<hr class="my-2 border-t border-red-300" />
|
|
<ol>
|
|
<li>{ticket_data.event.name}</li>
|
|
<li>{ticket_data.name} {ticket_data.surname}</li>
|
|
</ol>
|
|
</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}
|
|
</div>
|