Event view impovements
This commit is contained in:
Roman Krček
@@ -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>
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<script lang="ts">
|
||||
interface ArchivedEvent {
|
||||
name: string;
|
||||
date: string;
|
||||
}
|
||||
|
||||
let { event, loading } = $props<{
|
||||
event: ArchivedEvent | null;
|
||||
loading: boolean;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
|
||||
<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}
|
||||
<h2 class="mb-2 text-2xl font-semibold text-gray-900">{event?.name}</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
|
||||
<span class="text-sm text-gray-900">{event?.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,73 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
loading,
|
||||
totalParticipants,
|
||||
scannedParticipants
|
||||
} = $props<{
|
||||
loading: boolean;
|
||||
totalParticipants: number;
|
||||
scannedParticipants: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Category</th>
|
||||
<th class="px-4 py-2 text-right text-sm font-medium text-gray-700">Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Total participants -->
|
||||
<tr class="border-b border-gray-100">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-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>
|
||||
<span class="text-sm font-medium text-gray-700">Total participants</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
{#if loading}
|
||||
<div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
<span class="font-semibold text-gray-900">{totalParticipants}</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Scanned participants -->
|
||||
<tr class="border-b border-gray-100">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-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>
|
||||
<span class="text-sm font-medium text-gray-700">Scanned participants</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
{#if loading}
|
||||
<div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
<span class="font-semibold text-gray-900">{scannedParticipants}</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -10,6 +10,7 @@
|
||||
import EmailSending from './components/EmailSending.svelte';
|
||||
import EmailResults from './components/EmailResults.svelte';
|
||||
import ErrorMessage from './components/ErrorMessage.svelte';
|
||||
import Statistics from './components/Statistics.svelte';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
@@ -262,7 +263,6 @@
|
||||
<!-- Composable components -->
|
||||
<EventInformation {event} {loading} {error} />
|
||||
|
||||
<EmailTemplate {event} {loading} />
|
||||
<GoogleAuthentication
|
||||
{loading}
|
||||
onSuccess={handleGoogleAuthSuccess}
|
||||
@@ -270,14 +270,27 @@
|
||||
/>
|
||||
|
||||
<ParticipantsTable
|
||||
{event}
|
||||
{participants}
|
||||
{loading}
|
||||
participantsLoading={participantsLoading}
|
||||
syncingParticipants={syncingParticipants}
|
||||
onSyncParticipants={syncParticipants}
|
||||
{event}
|
||||
{participants}
|
||||
{loading}
|
||||
participantsLoading={participantsLoading}
|
||||
syncingParticipants={syncingParticipants}
|
||||
onSyncParticipants={syncParticipants}
|
||||
/>
|
||||
|
||||
<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
|
||||
<h2 class="mb-4 text-xl font-semibold text-gray-900">Statistics</h2>
|
||||
<Statistics
|
||||
loading={loading || participantsLoading}
|
||||
totalCount={participants.length}
|
||||
scannedCount={participants.filter(p => p.scanned).length}
|
||||
emailSentCount={participants.filter(p => p.email_sent).length}
|
||||
pendingCount={participants.filter(p => !p.email_sent).length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<EmailTemplate {event} {loading} />
|
||||
|
||||
<EmailSending
|
||||
{loading}
|
||||
{participants}
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
interface Participant {
|
||||
id: string;
|
||||
email_sent: boolean;
|
||||
}
|
||||
|
||||
interface EmailProgress {
|
||||
sent: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
let {
|
||||
loading,
|
||||
participants,
|
||||
sendingEmails,
|
||||
emailProgress,
|
||||
event,
|
||||
onSendEmails
|
||||
} = $props<{
|
||||
loading: boolean;
|
||||
participants: Participant[];
|
||||
sendingEmails: boolean;
|
||||
emailProgress: EmailProgress;
|
||||
event: any | null;
|
||||
onSendEmails: () => void;
|
||||
}>();
|
||||
|
||||
// Using the $derived rune to calculate uncontacted participants
|
||||
let uncontactedParticipantsCount = $derived(participants.filter(p => !p.email_sent).length);
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-xl font-semibold text-gray-900">Send Emails</h2>
|
||||
{#if !loading}
|
||||
<div class="text-sm text-gray-500">
|
||||
{uncontactedParticipantsCount} uncontacted participants
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-sm text-gray-500">
|
||||
Loading participants...
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="h-16 w-full animate-pulse rounded bg-gray-200"></div>
|
||||
{:else if sendingEmails}
|
||||
<div class="rounded-lg bg-blue-50 p-4 border border-blue-200">
|
||||
<div class="flex items-center justify-center">
|
||||
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span class="text-blue-800 font-medium">Sending {emailProgress.total} emails... Please wait.</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-4">
|
||||
{#if uncontactedParticipantsCount > 0}
|
||||
<div class="rounded-lg bg-yellow-50 p-4 border border-yellow-200">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-yellow-800 text-sm sm:text-base">
|
||||
<strong>Warning:</strong> Do not close this window while emails are being sent. The process may take several minutes.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<button
|
||||
onclick={onSendEmails}
|
||||
disabled={!event || uncontactedParticipantsCount === 0}
|
||||
class="rounded bg-green-600 px-4 py-2 text-white transition hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Send Emails
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-center py-4">
|
||||
<div class="flex items-center justify-center text-green-600 mb-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-green-700 font-medium">All participants have been contacted!</p>
|
||||
<p class="text-sm text-green-600">No pending emails to send.</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -30,7 +30,7 @@
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
|
||||
<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-xl font-semibold text-gray-900">Participants</h2>
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
loading,
|
||||
totalCount,
|
||||
scannedCount,
|
||||
emailSentCount,
|
||||
pendingCount
|
||||
} = $props<{
|
||||
loading: boolean;
|
||||
totalCount: number;
|
||||
scannedCount: number;
|
||||
emailSentCount: number;
|
||||
pendingCount: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Category</th>
|
||||
<th class="px-4 py-2 text-right text-sm font-medium text-gray-700">Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Total participants -->
|
||||
<tr class="border-b border-gray-100">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-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>
|
||||
<span class="text-sm font-medium text-gray-700">Total participants</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
{#if loading}
|
||||
<div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
<span class="font-semibold text-gray-900">{totalCount}</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Scanned participants -->
|
||||
<tr class="border-b border-gray-100">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-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>
|
||||
<span class="text-sm font-medium text-gray-700">Scanned participants</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
{#if loading}
|
||||
<div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
<span class="font-semibold text-gray-900">{scannedCount}</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Email sent participants -->
|
||||
<tr class="border-b border-gray-100">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-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"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-gray-700">Email sent</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
{#if loading}
|
||||
<div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
<span class="font-semibold text-gray-900">{emailSentCount}</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Pending participants -->
|
||||
<tr>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg
|
||||
class="inline h-4 w-4 text-amber-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-gray-700">Pending emails</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
{#if loading}
|
||||
<div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
<span class="font-semibold text-gray-900">{pendingCount}</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
Reference in New Issue
Block a user