scan-wave/src/routes/private/events/event/+page.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { page } from '$app/state';

	let { data } = $props();

	let event_data: any = $state(null);
	let participants: any[] = $state([]);
	let loading = $state(true);
	let scannedCount: number = $state(0);
	let notScannedCount: number = $state(0);

	onMount(async () => {
		const event_id = page.url.searchParams.get('id');

		if (!event_id) {
			loading = false;
			return;
		}

		const { data: event } = await data.supabase
			.from('events')
			.select('*')
			.eq('id', event_id)
			.single();
		event_data = event;

		const { data: parts } = await data.supabase
			.from('participants')
			.select('*, scanned_by:profiles (id, display_name)')
			.eq('event', event_id);
		participants = parts || [];
		scannedCount = participants.filter((p) => p.scanned).length;
		notScannedCount = participants.length - scannedCount;
		loading = false;
	});
</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 items-center justify-between gap-4">
		<div class="flex flex-col gap-1">
			{#if loading}
				<div class="mb-2 h-6 w-40 animate-pulse rounded bg-gray-200"></div>
				<div class="h-4 w-24 animate-pulse rounded bg-gray-100"></div>
			{:else}
				<span class="text-gray-700 text-lg font-semibold">{event_data?.name}</span>
				<span class="text-gray-500 text-sm">{event_data?.date}</span>
			{/if}
		</div>
		{#if loading}
			<div class="h-10 w-32 animate-pulse rounded bg-gray-200"></div>
		{:else if event_data}
			<a
				href={`/private/events/creator?eventId=${event_data.id}`}
				class="rounded border border-gray-300 bg-blue-600 px-6 py-2 font-semibold text-white transition hover:bg-blue-700"
			>
				Add Participants
			</a>
		{/if}
	</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>
		{#if loading}
			<div class="h-4 w-16 animate-pulse rounded bg-gray-200"></div>
		{:else}
			<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
		{/if}
	</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>
		{#if loading}
			<div class="h-4 w-24 animate-pulse rounded bg-gray-200"></div>
		{:else}
			<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
		{/if}
	</div>
</div>

<div class="rounded border border-gray-300 bg-white p-4">
	<h2 class="mb-2 rounded text-xl font-bold">
		{#if loading}
			<div class="h-6 w-32 animate-pulse rounded bg-gray-200"></div>
		{:else}
			Participants ({participants.length})
		{/if}
	</h2>
	<ul class="space-y-1">
		{#if loading}
			<li>
				<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
			</li>
		{:else}
			{#each participants as p}
				<li class="flex items-center gap-2 border-b border-gray-300 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="ml-2 flex flex-row items-end">
							<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}
		{/if}
	</ul>
</div>