96 lines
3.1 KiB
Svelte
96 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
let { data } = $props();
|
|
|
|
const scannedCount = data.participants.filter((p) => p.scanned).length;
|
|
const notScannedCount = data.participants.length - scannedCount;
|
|
|
|
</script>
|
|
|
|
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1>
|
|
|
|
<div class="mb-2 rounded border border-gray-300 bg-white p-4">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-black-700 text-lg font-semibold">{data.event_data.name}</span>
|
|
<span class="text-black-500 text-sm">{data.event_data.date}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2 flex items-center rounded border border-gray-300 bg-white p-4">
|
|
<div class="flex flex-1 items-center justify-center gap-2">
|
|
<svg
|
|
class="inline h-4 w-4 text-green-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
|
|
</div>
|
|
<div class="mx-4 h-8 w-px bg-gray-300"></div>
|
|
<div class="flex flex-1 items-center justify-center gap-2">
|
|
<svg
|
|
class="inline h-4 w-4 text-red-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
|
|
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
|
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
|
</svg>
|
|
<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded border border-gray-300 bg-white p-4">
|
|
<h2 class="mb-2 rounded text-xl font-bold">Participants ({data.participants.length})</h2>
|
|
<ul class="space-y-1">
|
|
{#each data.participants as p}
|
|
<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
|
|
{#if p.scanned}
|
|
<svg
|
|
title="Scanned"
|
|
class="mr-2 inline h-4 w-4 text-green-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
{:else}
|
|
<svg
|
|
title="Not scanned"
|
|
class="mr-2 inline h-4 w-4 text-red-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
|
|
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
|
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
|
</svg>
|
|
{/if}
|
|
<span class="font-semibold">{p.name} {p.surname}</span>
|
|
<span class="flex-1"></span>
|
|
{#if p.scanned_by}
|
|
<div class="flex flex-row items-end ml-2">
|
|
<span class="mr-1 text-xs text-gray-500">
|
|
{new Date(p.scanned_at).toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false
|
|
})}
|
|
</span>
|
|
<span class="text-xs text-gray-500">by {p.scanned_by.display_name}</span>
|
|
</div>
|
|
{/if}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|