Event view impovements

This commit is contained in:
Roman Krček
2025-07-12 15:03:23 +02:00
parent d945209465
commit 48e2944eba
7 changed files with 357 additions and 56 deletions

View File

@@ -1,6 +1,8 @@
<script lang="ts">
import { onMount } from 'svelte';
import { page } from '$app/state';
import { page } from '$app/state';
import EventInformation from './components/EventInformation.svelte';
import Statistics from './components/Statistics.svelte';
let { data } = $props();
@@ -37,52 +39,16 @@
<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>
<EventInformation
event={event_data}
loading={loading}
/>
<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 class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
<h2 class="mb-4 text-lg font-semibold text-gray-900">Event Statistics</h2>
<Statistics
loading={loading}
totalParticipants={event_data?.total_participants ?? 0}
scannedParticipants={event_data?.scanned_participants ?? 0}
/>
</div>