62 lines
2 KiB
Svelte
62 lines
2 KiB
Svelte
<script>
|
||
import { liveQuery } from 'dexie'
|
||
import { db } from '../db.js'
|
||
|
||
let { session } = $props()
|
||
|
||
const attendees = liveQuery(() => db.attendees.toArray())
|
||
const event = liveQuery(() => db.event.get(1))
|
||
|
||
const total = $derived(($attendees ?? []).length)
|
||
const checkedIn = $derived(($attendees ?? []).filter(a => a.checked_in).length)
|
||
const remaining = $derived(total - checkedIn)
|
||
const pct = $derived(total > 0 ? Math.round((checkedIn / total) * 100) : 0)
|
||
</script>
|
||
|
||
<div class="page">
|
||
<div class="page-header">
|
||
<h1 class="page-title">{$event?.name ?? 'Event'}</h1>
|
||
{#if $event?.venue}
|
||
<span class="text-muted">{$event.venue}</span>
|
||
{/if}
|
||
</div>
|
||
|
||
{#if $event?.start_date}
|
||
<p class="text-muted" style="margin-bottom:1.5rem">
|
||
{$event.start_date}{$event.end_date !== $event.start_date ? ` – ${$event.end_date}` : ''}
|
||
{#if $event.timezone} · {$event.timezone}{/if}
|
||
</p>
|
||
{/if}
|
||
|
||
<div class="stats">
|
||
<div class="stat">
|
||
<div class="stat-label">Total</div>
|
||
<div class="stat-value">{total}</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Checked in</div>
|
||
<div class="stat-value" style="color:var(--c-success)">{checkedIn}</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Remaining</div>
|
||
<div class="stat-value">{remaining}</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Progress</div>
|
||
<div class="stat-value">{pct}%</div>
|
||
</div>
|
||
</div>
|
||
|
||
{#if total > 0}
|
||
<div class="card" style="margin-bottom:1rem">
|
||
<div style="height:8px;background:var(--c-border);border-radius:99px;overflow:hidden">
|
||
<div style="height:100%;width:{pct}%;background:var(--c-success);border-radius:99px;transition:width 0.4s ease"></div>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
|
||
<p class="text-muted" style="font-size:0.85rem">
|
||
Welcome, <strong style="color:var(--c-text)">{session?.user?.username}</strong>
|
||
· <span class="badge badge-role">{session?.user?.role}</span>
|
||
</p>
|
||
</div>
|