357 lines
11 KiB
Svelte
357 lines
11 KiB
Svelte
|
<script>
|
|||
|
|
import { onMount } from 'svelte'
|
|||
|
|
import { api } from '../api.js'
|
|||
|
|
|
|||
|
|
// Token comes from the URL hash: /#/v/TOKEN
|
|||
|
|
const token = $derived(window.location.hash.match(/^#\/v\/([A-Z0-9]+)/i)?.[1] ?? '')
|
|||
|
|
|
|||
|
|
let state = $state(null) // { volunteer, shifts, available }
|
|||
|
|
let loading = $state(true)
|
|||
|
|
let error = $state('')
|
|||
|
|
|
|||
|
|
// Conflict dialog state
|
|||
|
|
let conflictShift = $state(null)
|
|||
|
|
let conflictingShifts = $state([])
|
|||
|
|
let claiming = $state(false)
|
|||
|
|
|
|||
|
|
$effect(() => {
|
|||
|
|
if (token) loadState()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
async function loadState() {
|
|||
|
|
loading = true
|
|||
|
|
error = ''
|
|||
|
|
try {
|
|||
|
|
state = await api.kiosk.get(token)
|
|||
|
|
} catch (err) {
|
|||
|
|
error = err.message
|
|||
|
|
} finally {
|
|||
|
|
loading = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function claim(shift) {
|
|||
|
|
claiming = true
|
|||
|
|
error = ''
|
|||
|
|
try {
|
|||
|
|
const result = await api.kiosk.claim(token, shift.id)
|
|||
|
|
if (result.conflict) {
|
|||
|
|
conflictShift = shift
|
|||
|
|
conflictingShifts = result.conflicting_shifts ?? []
|
|||
|
|
claiming = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
state = result
|
|||
|
|
} catch (err) {
|
|||
|
|
error = err.message
|
|||
|
|
} finally {
|
|||
|
|
claiming = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function claimForce() {
|
|||
|
|
if (!conflictShift) return
|
|||
|
|
claiming = true
|
|||
|
|
error = ''
|
|||
|
|
try {
|
|||
|
|
const result = await api.kiosk.claim(token, conflictShift.id, true)
|
|||
|
|
if (!result.conflict) {
|
|||
|
|
state = result
|
|||
|
|
conflictShift = null
|
|||
|
|
conflictingShifts = []
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
error = err.message
|
|||
|
|
} finally {
|
|||
|
|
claiming = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function unclaim(shiftId) {
|
|||
|
|
error = ''
|
|||
|
|
try {
|
|||
|
|
state = await api.kiosk.unclaim(token, shiftId)
|
|||
|
|
} catch (err) {
|
|||
|
|
error = err.message
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fmt(t) {
|
|||
|
|
if (!t) return ''
|
|||
|
|
const [h, m] = t.split(':').map(Number)
|
|||
|
|
const ampm = h < 12 ? 'am' : 'pm'
|
|||
|
|
return `${h % 12 || 12}:${String(m).padStart(2, '0')}${ampm}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function groupByDay(shifts) {
|
|||
|
|
const days = {}
|
|||
|
|
for (const s of shifts) {
|
|||
|
|
if (!days[s.day]) days[s.day] = []
|
|||
|
|
days[s.day].push(s)
|
|||
|
|
}
|
|||
|
|
return Object.entries(days).sort(([a], [b]) => a.localeCompare(b))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const isAssigned = $derived((shiftId) =>
|
|||
|
|
state?.shifts?.some(s => s.id === shiftId) ?? false
|
|||
|
|
)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<div class="kiosk">
|
|||
|
|
<div class="kiosk-header">
|
|||
|
|
<div class="kiosk-brand">Turn<span>pike</span> <span class="kiosk-role">Volunteer Portal</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{#if !token}
|
|||
|
|
<div class="kiosk-body">
|
|||
|
|
<div class="kiosk-error">No volunteer token found in URL.<br>Check the link you were sent.</div>
|
|||
|
|
</div>
|
|||
|
|
{:else if loading}
|
|||
|
|
<div class="kiosk-body kiosk-center">Loading…</div>
|
|||
|
|
{:else if error && !state}
|
|||
|
|
<div class="kiosk-body">
|
|||
|
|
<div class="kiosk-error">{error}</div>
|
|||
|
|
</div>
|
|||
|
|
{:else if state}
|
|||
|
|
<div class="kiosk-body">
|
|||
|
|
{#if error}
|
|||
|
|
<div class="kiosk-alert">{error}</div>
|
|||
|
|
{/if}
|
|||
|
|
|
|||
|
|
<!-- Conflict dialog -->
|
|||
|
|
{#if conflictShift}
|
|||
|
|
<div class="kiosk-overlay">
|
|||
|
|
<div class="kiosk-dialog">
|
|||
|
|
<h3>Scheduling Conflict</h3>
|
|||
|
|
<p>
|
|||
|
|
<strong>{conflictShift.name}</strong> ({fmt(conflictShift.start_time)}–{fmt(conflictShift.end_time)})
|
|||
|
|
overlaps with:
|
|||
|
|
</p>
|
|||
|
|
<ul>
|
|||
|
|
{#each conflictingShifts as s}
|
|||
|
|
<li>{s.name} — {fmt(s.start_time)}–{fmt(s.end_time)}</li>
|
|||
|
|
{/each}
|
|||
|
|
</ul>
|
|||
|
|
<p class="kiosk-muted">You can still sign up — just confirm you're aware of the overlap.</p>
|
|||
|
|
<div class="kiosk-actions">
|
|||
|
|
<button class="kbtn kbtn-primary" onclick={claimForce} disabled={claiming}>
|
|||
|
|
{claiming ? '…' : 'Sign up anyway'}
|
|||
|
|
</button>
|
|||
|
|
<button class="kbtn kbtn-ghost" onclick={() => { conflictShift = null; conflictingShifts = [] }}>
|
|||
|
|
Cancel
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
|
|||
|
|
<!-- Volunteer header -->
|
|||
|
|
<div class="kiosk-card">
|
|||
|
|
<div class="kiosk-vol-name">{state.volunteer.name}</div>
|
|||
|
|
<div class="kiosk-vol-meta">
|
|||
|
|
{state.volunteer.email || ''}
|
|||
|
|
{state.volunteer.is_lead ? ' · Department Lead' : ''}
|
|||
|
|
</div>
|
|||
|
|
<div class="kiosk-token">Token: <code>{token}</code></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Assigned shifts -->
|
|||
|
|
{#if state.shifts.length > 0}
|
|||
|
|
<section>
|
|||
|
|
<h2 class="kiosk-section-title">My Shifts</h2>
|
|||
|
|
{#each groupByDay(state.shifts) as [day, shifts]}
|
|||
|
|
<div class="kiosk-day-label">{day}</div>
|
|||
|
|
{#each shifts as s}
|
|||
|
|
<div class="kiosk-shift-card kiosk-shift-assigned">
|
|||
|
|
<div class="kiosk-shift-info">
|
|||
|
|
<strong>{s.name}</strong>
|
|||
|
|
<span class="kiosk-time">{fmt(s.start_time)} – {fmt(s.end_time)}</span>
|
|||
|
|
</div>
|
|||
|
|
<button class="kbtn kbtn-ghost kbtn-sm" onclick={() => unclaim(s.id)}>Remove</button>
|
|||
|
|
</div>
|
|||
|
|
{/each}
|
|||
|
|
{/each}
|
|||
|
|
</section>
|
|||
|
|
{:else}
|
|||
|
|
<div class="kiosk-empty">You haven't signed up for any shifts yet.</div>
|
|||
|
|
{/if}
|
|||
|
|
|
|||
|
|
<!-- Available shifts -->
|
|||
|
|
{#if state.available.length > 0}
|
|||
|
|
<section>
|
|||
|
|
<h2 class="kiosk-section-title">Available Shifts</h2>
|
|||
|
|
{#each groupByDay(state.available) as [day, shifts]}
|
|||
|
|
<div class="kiosk-day-label">{day}</div>
|
|||
|
|
{#each shifts as s}
|
|||
|
|
{@const assigned = isAssigned(s.id)}
|
|||
|
|
{#if !assigned}
|
|||
|
|
<div class="kiosk-shift-card">
|
|||
|
|
<div class="kiosk-shift-info">
|
|||
|
|
<strong>{s.name}</strong>
|
|||
|
|
<span class="kiosk-time">{fmt(s.start_time)} – {fmt(s.end_time)}</span>
|
|||
|
|
{#if s.capacity > 0}
|
|||
|
|
<span class="kiosk-cap">
|
|||
|
|
{s.capacity} spots
|
|||
|
|
</span>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
<button class="kbtn kbtn-primary kbtn-sm" onclick={() => claim(s)} disabled={claiming}>
|
|||
|
|
Sign up
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
{/each}
|
|||
|
|
{/each}
|
|||
|
|
</section>
|
|||
|
|
{:else if state.shifts.length === 0}
|
|||
|
|
<div class="kiosk-empty">No shifts are currently available in your department.</div>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.kiosk {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: var(--c-bg);
|
|||
|
|
color: var(--c-text);
|
|||
|
|
font-family: var(--font);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.kiosk-header {
|
|||
|
|
background: var(--c-surface);
|
|||
|
|
border-bottom: 1px solid var(--c-border);
|
|||
|
|
padding: 1rem 1.5rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.kiosk-brand {
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
letter-spacing: -0.02em;
|
|||
|
|
color: var(--c-text);
|
|||
|
|
}
|
|||
|
|
.kiosk-brand span:first-of-type { color: var(--c-accent); }
|
|||
|
|
.kiosk-role {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: var(--c-muted);
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
}
|
|||
|
|
.kiosk-body {
|
|||
|
|
max-width: 640px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 1.5rem 1rem;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.kiosk-center { display: flex; align-items: center; justify-content: center; }
|
|||
|
|
.kiosk-error {
|
|||
|
|
background: rgba(239,68,68,0.12);
|
|||
|
|
border: 1px solid rgba(239,68,68,0.3);
|
|||
|
|
color: #fca5a5;
|
|||
|
|
padding: 1rem;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin: 2rem 0;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 1.7;
|
|||
|
|
}
|
|||
|
|
.kiosk-alert {
|
|||
|
|
background: rgba(239,68,68,0.1);
|
|||
|
|
border: 1px solid rgba(239,68,68,0.25);
|
|||
|
|
color: #fca5a5;
|
|||
|
|
padding: 0.75rem 1rem;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
.kiosk-card {
|
|||
|
|
background: var(--c-surface);
|
|||
|
|
border: 1px solid var(--c-border);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 1.25rem;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
.kiosk-vol-name { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.2rem; }
|
|||
|
|
.kiosk-vol-meta { color: var(--c-muted); font-size: 0.875rem; margin-bottom: 0.5rem; }
|
|||
|
|
.kiosk-token { font-size: 0.78rem; color: var(--c-muted); }
|
|||
|
|
.kiosk-token code {
|
|||
|
|
background: rgba(99,102,241,0.15);
|
|||
|
|
color: var(--c-accent-h);
|
|||
|
|
padding: 0.1rem 0.4rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 0.85em;
|
|||
|
|
letter-spacing: 0.08em;
|
|||
|
|
}
|
|||
|
|
.kiosk-section-title {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.07em;
|
|||
|
|
color: var(--c-muted);
|
|||
|
|
margin: 1.25rem 0 0.5rem;
|
|||
|
|
}
|
|||
|
|
.kiosk-day-label {
|
|||
|
|
font-size: 0.78rem;
|
|||
|
|
color: var(--c-muted);
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
margin: 0.75rem 0 0.35rem;
|
|||
|
|
}
|
|||
|
|
.kiosk-shift-card {
|
|||
|
|
background: var(--c-surface);
|
|||
|
|
border: 1px solid var(--c-border);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 0.9rem 1rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.kiosk-shift-assigned { border-color: rgba(99,102,241,0.35); }
|
|||
|
|
.kiosk-shift-info { display: flex; flex-direction: column; gap: 0.2rem; }
|
|||
|
|
.kiosk-shift-info strong { font-size: 0.9rem; }
|
|||
|
|
.kiosk-time { font-size: 0.8rem; color: var(--c-muted); }
|
|||
|
|
.kiosk-cap { font-size: 0.75rem; color: var(--c-muted); }
|
|||
|
|
.kiosk-empty { color: var(--c-muted); font-size: 0.875rem; padding: 1rem 0; }
|
|||
|
|
|
|||
|
|
.kbtn {
|
|||
|
|
display: inline-flex; align-items: center;
|
|||
|
|
padding: 0.45rem 1rem; border-radius: 6px;
|
|||
|
|
border: 1px solid transparent;
|
|||
|
|
font-size: 0.875rem; font-weight: 500; cursor: pointer;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
font-family: var(--font);
|
|||
|
|
transition: background 150ms, border-color 150ms;
|
|||
|
|
}
|
|||
|
|
.kbtn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|||
|
|
.kbtn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
|
|||
|
|
.kbtn-primary { background: var(--c-accent); color: #fff; }
|
|||
|
|
.kbtn-primary:hover:not(:disabled) { background: var(--c-accent-h); }
|
|||
|
|
.kbtn-ghost { background: transparent; color: var(--c-muted); border-color: var(--c-border); }
|
|||
|
|
.kbtn-ghost:hover:not(:disabled) { color: var(--c-text); border-color: var(--c-text); }
|
|||
|
|
|
|||
|
|
.kiosk-overlay {
|
|||
|
|
position: fixed; inset: 0;
|
|||
|
|
background: rgba(0,0,0,0.6);
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
z-index: 100;
|
|||
|
|
padding: 1rem;
|
|||
|
|
}
|
|||
|
|
.kiosk-dialog {
|
|||
|
|
background: var(--c-surface);
|
|||
|
|
border: 1px solid var(--c-border);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
max-width: 440px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.kiosk-dialog h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; }
|
|||
|
|
.kiosk-dialog p { font-size: 0.875rem; margin-bottom: 0.75rem; line-height: 1.6; }
|
|||
|
|
.kiosk-dialog ul { margin: 0.5rem 0 0.75rem 1.25rem; font-size: 0.875rem; line-height: 1.7; color: var(--c-muted); }
|
|||
|
|
.kiosk-muted { color: var(--c-muted) !important; }
|
|||
|
|
.kiosk-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
|
|||
|
|
</style>
|