89 lines
2.7 KiB
Svelte
89 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { page } from '$app/state';
|
|
|
|
let { data } = $props();
|
|
|
|
// Types
|
|
interface ArchivedEvent {
|
|
id: string;
|
|
name: string;
|
|
date: string;
|
|
total_participants: number;
|
|
scanned_participants: number;
|
|
}
|
|
|
|
let event_data = $state<ArchivedEvent | null>(null);
|
|
let loading = $state(true);
|
|
|
|
onMount(async () => {
|
|
const event_id = page.url.searchParams.get('id');
|
|
|
|
if (!event_id) {
|
|
loading = false;
|
|
return;
|
|
}
|
|
|
|
const { data: event } = await data.supabase
|
|
.from('events_archived')
|
|
.select('*')
|
|
.eq('id', event_id)
|
|
.single();
|
|
|
|
event_data = event;
|
|
loading = false;
|
|
});
|
|
</script>
|
|
|
|
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Archived Event Overview</h1>
|
|
|
|
<div class="mb-2 rounded border border-gray-300 bg-white p-4">
|
|
<div class="flex flex-col gap-1">
|
|
{#if loading}
|
|
<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
|
|
<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
|
|
{:else}
|
|
<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
|
|
<span class="text-black-500 text-sm">{event_data?.date}</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2 rounded border border-gray-300 bg-white p-4">
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<svg
|
|
class="inline h-4 w-4 text-blue-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" />
|
|
</svg>
|
|
{#if loading}
|
|
<div class="h-4 w-20 bg-gray-200 rounded animate-pulse"></div>
|
|
{:else}
|
|
<span class="text-sm text-gray-700">Total participants ({event_data?.total_participants})</span>
|
|
{/if}
|
|
</div>
|
|
<div class="hidden sm:block h-8 w-px bg-gray-300"></div>
|
|
<div class="flex 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-28 bg-gray-200 rounded animate-pulse"></div>
|
|
{:else}
|
|
<span class="text-sm text-gray-700">Scanned participants ({event_data?.scanned_participants})</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|