274 lines
9.2 KiB
Svelte
274 lines
9.2 KiB
Svelte
<script>
|
||
import { liveQuery } from 'dexie'
|
||
import { db } from '../db.js'
|
||
import { api } from '../api.js'
|
||
import CheckInButton from '../components/CheckInButton.svelte'
|
||
|
||
let { session } = $props()
|
||
|
||
let search = $state('')
|
||
let filterType = $state('')
|
||
let filterChecked = $state('')
|
||
let error = $state('')
|
||
let success = $state('')
|
||
let showAdd = $state(false)
|
||
let newName = $state('')
|
||
let newEmail = $state('')
|
||
let newPhone = $state('')
|
||
let newTicketID = $state('')
|
||
let newTicketType = $state('')
|
||
let newNote = $state('')
|
||
let adding = $state(false)
|
||
let generating = $state(false)
|
||
let emailing = $state(false)
|
||
|
||
const role = $derived(session?.user?.role ?? '')
|
||
const canManage = $derived(['admin', 'ticketing'].includes(role))
|
||
const canCheckIn = $derived(['admin', 'ticketing', 'gate'].includes(role))
|
||
|
||
const allAttendees = liveQuery(() => db.attendees.toArray())
|
||
const ticketTypes = liveQuery(() =>
|
||
db.attendees.orderBy('ticket_type').uniqueKeys()
|
||
)
|
||
|
||
const filtered = $derived.by(() => {
|
||
const list = $allAttendees ?? []
|
||
const s = search.toLowerCase()
|
||
return list
|
||
.filter(a => {
|
||
if (filterType && a.ticket_type !== filterType) return false
|
||
if (filterChecked === 'true' && !a.checked_in) return false
|
||
if (filterChecked === 'false' && a.checked_in) return false
|
||
if (s && !a.name.toLowerCase().includes(s) &&
|
||
!a.email.toLowerCase().includes(s) &&
|
||
!a.ticket_id.toLowerCase().includes(s)) return false
|
||
return true
|
||
})
|
||
.sort((a, b) => a.name.localeCompare(b.name))
|
||
})
|
||
|
||
async function checkIn(attendee) {
|
||
try {
|
||
const result = await api.attendees.checkIn(attendee.id)
|
||
if (result.attendee) await db.attendees.put(result.attendee)
|
||
} catch (err) {
|
||
error = err.message
|
||
}
|
||
}
|
||
|
||
async function addAttendee(e) {
|
||
e.preventDefault()
|
||
adding = true
|
||
error = ''
|
||
try {
|
||
const a = await api.attendees.create({
|
||
name: newName, email: newEmail, phone: newPhone,
|
||
ticket_id: newTicketID, ticket_type: newTicketType, note: newNote,
|
||
})
|
||
await db.attendees.put(a)
|
||
showAdd = false
|
||
newName = newEmail = newPhone = newTicketID = newTicketType = newNote = ''
|
||
} catch (err) {
|
||
error = err.message
|
||
} finally {
|
||
adding = false
|
||
}
|
||
}
|
||
|
||
async function generateTokens() {
|
||
generating = true
|
||
error = ''
|
||
success = ''
|
||
try {
|
||
const result = await api.attendees.generateTokens()
|
||
success = `Generated ${result.generated} token${result.generated !== 1 ? 's' : ''}.`
|
||
} catch (err) {
|
||
error = err.message
|
||
} finally {
|
||
generating = false
|
||
}
|
||
}
|
||
|
||
async function emailAll() {
|
||
if (!confirm('Send token emails to all attendees with a token and email address?')) return
|
||
emailing = true
|
||
error = ''
|
||
success = ''
|
||
try {
|
||
const result = await api.attendees.emailAllTokens()
|
||
success = `Sent ${result.sent} email${result.sent !== 1 ? 's' : ''}${result.skipped ? `, skipped ${result.skipped}` : ''}.`
|
||
if (result.errors?.length) error = result.errors.join('; ')
|
||
} catch (err) {
|
||
error = err.message
|
||
} finally {
|
||
emailing = false
|
||
}
|
||
}
|
||
|
||
async function emailToken(attendee) {
|
||
error = ''
|
||
success = ''
|
||
try {
|
||
await api.attendees.emailToken(attendee.id)
|
||
success = `Token email sent to ${attendee.name}.`
|
||
} catch (err) {
|
||
error = err.message
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<div class="page">
|
||
<div class="page-header">
|
||
<h1 class="page-title">Attendees</h1>
|
||
<div class="actions">
|
||
{#if canManage}
|
||
<button class="btn btn-primary btn-sm" onclick={() => showAdd = !showAdd}>+ Add</button>
|
||
<a href="/api/attendees/export" class="btn btn-ghost btn-sm">Export CSV</a>
|
||
<button class="btn btn-ghost btn-sm" onclick={generateTokens} disabled={generating}>
|
||
{generating ? '…' : '⚿ Tokens'}
|
||
</button>
|
||
<a href="/api/attendees/export-tokens" class="btn btn-ghost btn-sm">Export Links</a>
|
||
<button class="btn btn-ghost btn-sm" onclick={emailAll} disabled={emailing}>
|
||
{emailing ? '…' : '✉ Email All'}
|
||
</button>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
|
||
{#if error}
|
||
<div class="alert alert-error">{error}</div>
|
||
{/if}
|
||
{#if success}
|
||
<div class="alert alert-success">{success}</div>
|
||
{/if}
|
||
|
||
{#if showAdd && canManage}
|
||
<div class="card" style="margin-bottom:1.5rem">
|
||
<form onsubmit={addAttendee}>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
|
||
<div class="form-group">
|
||
<label for="new-name">Name *</label>
|
||
<input id="new-name" bind:value={newName} required placeholder="Full name" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="new-email">Email</label>
|
||
<input id="new-email" type="email" bind:value={newEmail} placeholder="email@example.com" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="new-ticket-id">Ticket ID</label>
|
||
<input id="new-ticket-id" bind:value={newTicketID} placeholder="From ticketing system" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="new-ticket-type">Ticket type</label>
|
||
<input id="new-ticket-type" bind:value={newTicketType} placeholder="e.g. General, VIP" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="new-note">Note</label>
|
||
<input id="new-note" bind:value={newNote} placeholder="Optional note" />
|
||
</div>
|
||
<div class="actions">
|
||
<button type="submit" class="btn btn-primary" disabled={adding}>
|
||
{adding ? 'Adding…' : 'Add attendee'}
|
||
</button>
|
||
<button type="button" class="btn btn-ghost" onclick={() => showAdd = false}>Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
{/if}
|
||
|
||
<div class="search-bar">
|
||
<input placeholder="Search name, email, ticket ID…" bind:value={search} />
|
||
{#if ($ticketTypes ?? []).length > 0}
|
||
<select bind:value={filterType} style="width:auto">
|
||
<option value="">All types</option>
|
||
{#each $ticketTypes ?? [] as t}
|
||
<option value={t}>{t}</option>
|
||
{/each}
|
||
</select>
|
||
{/if}
|
||
<select bind:value={filterChecked} style="width:auto">
|
||
<option value="">All</option>
|
||
<option value="false">Not checked in</option>
|
||
<option value="true">Checked in</option>
|
||
</select>
|
||
<span class="text-muted" style="font-size:0.85rem;white-space:nowrap">
|
||
{filtered.length} shown
|
||
</span>
|
||
</div>
|
||
|
||
{#if ($allAttendees ?? []).length === 0}
|
||
<div class="empty">
|
||
<strong>No attendees yet</strong>
|
||
<p>Import a CSV or add attendees manually.</p>
|
||
</div>
|
||
{:else}
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Ticket type</th>
|
||
<th>Email</th>
|
||
<th>Status</th>
|
||
{#if canCheckIn}<th></th>{/if}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{#each filtered as a (a.id)}
|
||
<tr>
|
||
<td>
|
||
<strong>{a.name}</strong>
|
||
{#if a.ticket_id}
|
||
<span class="text-muted" style="font-size:0.8rem"> · {a.ticket_id}</span>
|
||
{/if}
|
||
{#if (a.party_size ?? 1) > 1}
|
||
<span class="badge badge-lead" style="margin-left:0.3rem">×{a.party_size}</span>
|
||
{/if}
|
||
{#if a.note}
|
||
<div class="text-muted" style="font-size:0.78rem">{a.note}</div>
|
||
{/if}
|
||
</td>
|
||
<td class="text-muted">{a.ticket_type || '—'}</td>
|
||
<td>
|
||
<div>{a.email || '—'}</div>
|
||
{#if a.volunteer_token && canManage}
|
||
<div style="font-size:0.75rem;margin-top:0.15rem">
|
||
<code style="color:var(--c-accent-h)">{a.volunteer_token}</code>
|
||
{#if a.email}
|
||
<button class="btn btn-ghost btn-sm" style="padding:0.1rem 0.4rem;margin-left:0.25rem"
|
||
onclick={() => emailToken(a)}>✉</button>
|
||
{/if}
|
||
</div>
|
||
{/if}
|
||
</td>
|
||
<td>
|
||
{#if (a.party_size ?? 1) > 1}
|
||
<span class="badge {a.checked_in ? 'badge-checked' : 'badge-unchecked'}">
|
||
{a.checked_in_count ?? 0}/{a.party_size} in
|
||
</span>
|
||
{:else}
|
||
<span class="badge {a.checked_in ? 'badge-checked' : 'badge-unchecked'}">
|
||
{a.checked_in ? 'Checked in' : 'Pending'}
|
||
</span>
|
||
{/if}
|
||
{#if a.checked_in_at}
|
||
<div class="text-muted" style="font-size:0.75rem">
|
||
{new Date(a.checked_in_at).toLocaleTimeString()}
|
||
</div>
|
||
{/if}
|
||
</td>
|
||
{#if canCheckIn}
|
||
<td>
|
||
{#if (a.checked_in_count ?? 0) < (a.party_size ?? 1)}
|
||
<CheckInButton onclick={() => checkIn(a)} />
|
||
{/if}
|
||
</td>
|
||
{/if}
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{/if}
|
||
</div>
|