Merge pull request 'supabase-local' (#16) from supabase-local into main
Reviewed-on: #16
This commit is contained in:
10
.github/copilot-instructions.md
vendored
10
.github/copilot-instructions.md
vendored
@@ -1,9 +1,11 @@
|
||||
GitHub Copilot Instructions for This Repository
|
||||
Use Svelte 5 runes exclusively
|
||||
|
||||
Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc.
|
||||
svelte.dev
|
||||
svelte.dev
|
||||
Basics:
|
||||
- If you have any questions, always ask me first!
|
||||
- Use Svelte 5 runes exclusively
|
||||
- Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc.
|
||||
- When doing client-side loading, always implement placeholders and loaders, so the UI remains responsive and layout shifts are minimized.
|
||||
- Don't use placeholders and loaders for static data like heading etc.
|
||||
|
||||
Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!
|
||||
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import { json } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { getOAuthClient } from '$lib/google/auth/server.js';
|
||||
|
||||
export const POST: RequestHandler = async ({ request }) => {
|
||||
try {
|
||||
const { refreshToken } = await request.json();
|
||||
|
||||
if (!refreshToken) {
|
||||
return json({ error: 'Refresh token is required' }, { status: 400 });
|
||||
}
|
||||
|
||||
const oauth = getOAuthClient();
|
||||
oauth.setCredentials({ refresh_token: refreshToken });
|
||||
|
||||
const { credentials } = await oauth.refreshAccessToken();
|
||||
|
||||
if (!credentials.access_token) {
|
||||
return json({ error: 'Failed to refresh token' }, { status: 500 });
|
||||
}
|
||||
|
||||
return json({
|
||||
accessToken: credentials.access_token,
|
||||
expiresIn: credentials.expiry_date
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error refreshing access token:', error);
|
||||
return json({ error: 'Failed to refresh access token' }, { status: 500 });
|
||||
}
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
import { json } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { googleSheetsServer } from '$lib/google/sheets/server';
|
||||
|
||||
export const GET: RequestHandler = async ({ params, request }) => {
|
||||
try {
|
||||
const { sheetId } = params;
|
||||
const authHeader = request.headers.get('authorization');
|
||||
|
||||
if (!authHeader?.startsWith('Bearer ')) {
|
||||
return json({ error: 'Missing or invalid authorization header' }, { status: 401 });
|
||||
}
|
||||
|
||||
const refreshToken = authHeader.slice(7);
|
||||
const sheetData = await googleSheetsServer.getSpreadsheetData(refreshToken, sheetId, 'A1:Z10');
|
||||
|
||||
return json(sheetData);
|
||||
} catch (error) {
|
||||
console.error('Error fetching spreadsheet data:', error);
|
||||
return json({ error: 'Failed to fetch spreadsheet data' }, { status: 500 });
|
||||
}
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
import { json } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { googleSheetsServer } from '$lib/google/sheets/server';
|
||||
|
||||
export const GET: RequestHandler = async ({ request }) => {
|
||||
try {
|
||||
const authHeader = request.headers.get('authorization');
|
||||
if (!authHeader?.startsWith('Bearer ')) {
|
||||
return json({ error: 'Missing or invalid authorization header' }, { status: 401 });
|
||||
}
|
||||
|
||||
const refreshToken = authHeader.slice(7);
|
||||
const spreadsheets = await googleSheetsServer.getRecentSpreadsheets(refreshToken, 20);
|
||||
|
||||
return json(spreadsheets);
|
||||
} catch (error) {
|
||||
console.error('Error fetching recent spreadsheets:', error);
|
||||
return json({ error: 'Failed to fetch spreadsheets' }, { status: 500 });
|
||||
}
|
||||
};
|
||||
@@ -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>
|
||||
@@ -1,7 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import GoogleAuthButton from '$lib/components/GoogleAuthButton.svelte';
|
||||
import { page } from '$app/state';
|
||||
|
||||
// Import components
|
||||
import EventInformation from './components/EventInformation.svelte';
|
||||
import EmailTemplate from './components/EmailTemplate.svelte';
|
||||
import GoogleAuthentication from './components/GoogleAuthentication.svelte';
|
||||
import ParticipantsTable from './components/ParticipantsTable.svelte';
|
||||
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();
|
||||
|
||||
@@ -31,7 +40,7 @@
|
||||
email_sent: boolean;
|
||||
}
|
||||
|
||||
// State
|
||||
// State management with Svelte 5 runes
|
||||
let event = $state<Event | null>(null);
|
||||
let participants = $state<Participant[]>([]);
|
||||
let loading = $state(true);
|
||||
@@ -43,7 +52,7 @@
|
||||
let error = $state('');
|
||||
|
||||
// Get event ID from URL params
|
||||
let eventId = $derived($page.url.searchParams.get('id'));
|
||||
let eventId = $derived(page.url.searchParams.get('id'));
|
||||
|
||||
onMount(async () => {
|
||||
if (eventId) {
|
||||
@@ -197,7 +206,7 @@
|
||||
|
||||
try {
|
||||
// Send all emails in batch
|
||||
const response = await fetch('/private/api/gmail', {
|
||||
const response = await fetch('/private/api/google/gmail', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -209,7 +218,9 @@
|
||||
eventId: event.id,
|
||||
refreshToken: refreshToken
|
||||
})
|
||||
}); if (response.ok) {
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
emailProgress.sent = result.summary.success;
|
||||
emailResults = result;
|
||||
@@ -235,12 +246,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateString: string) {
|
||||
return new Date(dateString).toLocaleDateString('en-GB', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
function handleGoogleAuthSuccess() {
|
||||
error = '';
|
||||
}
|
||||
|
||||
function handleGoogleAuthError(errorMsg: string) {
|
||||
error = errorMsg;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -249,360 +260,50 @@
|
||||
<h1 class="text-center text-2xl font-bold">Event Overview</h1>
|
||||
</div>
|
||||
|
||||
<!-- Event Information -->
|
||||
<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
|
||||
{#if loading}
|
||||
<!-- Loading placeholder -->
|
||||
<div class="space-y-4">
|
||||
<div class="h-8 w-1/2 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
{:else if event}
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h2 class="mb-4 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">{formatDate(event.date)}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
|
||||
<span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
|
||||
<a
|
||||
href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-1 h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
Open in Google Sheets
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-lg font-medium text-gray-900">Email Details</h3>
|
||||
<div class="space-y-2">
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-500">Subject:</span>
|
||||
<p class="text-sm text-gray-900">{event.email_subject}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-500">Body:</span>
|
||||
<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="py-8 text-center">
|
||||
<p class="text-red-600">{error}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Composable components -->
|
||||
<EventInformation {event} {loading} {error} />
|
||||
|
||||
<!-- Google Authentication Section -->
|
||||
<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">Google Account</h2>
|
||||
<p class="text-sm text-gray-500">Required for syncing participants and sending emails</p>
|
||||
</div>
|
||||
<GoogleAuthButton
|
||||
size="small"
|
||||
variant="secondary"
|
||||
onSuccess={() => {
|
||||
// Refresh the page or update UI state as needed
|
||||
error = '';
|
||||
}}
|
||||
onError={(errorMsg) => {
|
||||
error = errorMsg;
|
||||
}}
|
||||
<GoogleAuthentication
|
||||
{loading}
|
||||
onSuccess={handleGoogleAuthSuccess}
|
||||
onError={handleGoogleAuthError}
|
||||
/>
|
||||
|
||||
<ParticipantsTable
|
||||
{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>
|
||||
|
||||
<!-- Participants Section -->
|
||||
<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">Participants</h2>
|
||||
<button
|
||||
onclick={syncParticipants}
|
||||
disabled={syncingParticipants || !event}
|
||||
class="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{#if syncingParticipants}
|
||||
Syncing...
|
||||
{:else}
|
||||
Sync Participants
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<EmailTemplate {event} {loading} />
|
||||
|
||||
{#if participantsLoading}
|
||||
<!-- Loading placeholder for participants -->
|
||||
<div class="space-y-3">
|
||||
{#each Array(5) as _}
|
||||
<div class="grid grid-cols-5 gap-4 border-b border-gray-200 py-3">
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if participants.length > 0}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Surname</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Scanned</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email Sent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each participants as participant}
|
||||
<tr class="border-b border-gray-200 hover:bg-gray-50">
|
||||
<td class="px-4 py-3 text-sm text-gray-900">{participant.name}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-900">{participant.surname}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-900">{participant.email}</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{#if participant.scanned}
|
||||
<div class="flex items-center text-green-600">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
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>
|
||||
{:else}
|
||||
<div class="flex items-center text-gray-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{#if participant.email_sent}
|
||||
<div class="flex items-center text-blue-600">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
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>
|
||||
{:else}
|
||||
<div class="flex items-center text-gray-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="py-8 text-center">
|
||||
<p class="text-gray-500">
|
||||
No participants found. Click "Sync Participants" to load from Google Sheets.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<EmailSending
|
||||
{loading}
|
||||
{participants}
|
||||
{sendingEmails}
|
||||
{emailProgress}
|
||||
{event}
|
||||
onSendEmails={sendEmailsToUncontacted}
|
||||
/>
|
||||
|
||||
<!-- Email Sending Section -->
|
||||
<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>
|
||||
<div class="text-sm text-gray-500">
|
||||
{participants.filter(p => !p.email_sent).length} uncontacted participants
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#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 participants.filter(p => !p.email_sent).length > 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={sendEmailsToUncontacted}
|
||||
disabled={!event || participants.filter(p => !p.email_sent).length === 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>
|
||||
|
||||
<!-- Email Results Section -->
|
||||
{#if emailResults}
|
||||
<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">Email Results</h2>
|
||||
<div class="text-sm text-gray-500">
|
||||
{emailResults.summary.success} successful, {emailResults.summary.errors} failed
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<span class="text-sm font-medium">Sent: {emailResults.summary.success}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<span class="text-sm font-medium">Failed: {emailResults.summary.errors}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-blue-500"></div>
|
||||
<span class="text-sm font-medium">Total: {emailResults.summary.total}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if emailResults.results.length > 0}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each emailResults.results as result}
|
||||
<tr class="border-b border-gray-200 hover:bg-gray-50">
|
||||
<td class="px-4 py-3 text-sm text-gray-900">
|
||||
{result.participant.name} {result.participant.surname}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-900">{result.participant.email}</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{#if result.success}
|
||||
<div class="flex items-center text-green-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" 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>
|
||||
<span class="text-sm font-medium">Sent</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center text-red-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<span class="text-sm font-medium">Failed</span>
|
||||
{#if result.error}
|
||||
<span class="text-xs text-red-500 ml-2">({result.error})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<EmailResults {emailResults} />
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="mt-4 rounded border border-red-200 bg-red-50 p-3">
|
||||
<p class="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
<ErrorMessage {error} />
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
<script lang="ts">
|
||||
interface EmailResultItem {
|
||||
participant: {
|
||||
id: string;
|
||||
name: string;
|
||||
surname: string;
|
||||
email: string;
|
||||
};
|
||||
success: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface EmailResultsSummary {
|
||||
success: number;
|
||||
errors: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
interface EmailResultsData {
|
||||
success: boolean;
|
||||
results: EmailResultItem[];
|
||||
summary: EmailResultsSummary;
|
||||
}
|
||||
|
||||
let { emailResults } = $props<{
|
||||
emailResults: EmailResultsData | null;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
{#if emailResults}
|
||||
<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">Email Results</h2>
|
||||
<div class="text-sm text-gray-500">
|
||||
{emailResults.summary.success} successful, {emailResults.summary.errors} failed
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<span class="text-sm font-medium">Sent: {emailResults.summary.success}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<span class="text-sm font-medium">Failed: {emailResults.summary.errors}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-blue-500"></div>
|
||||
<span class="text-sm font-medium">Total: {emailResults.summary.total}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if emailResults.results.length > 0}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each emailResults.results as result}
|
||||
<tr class="border-b border-gray-200 hover:bg-gray-50">
|
||||
<td class="px-4 py-3 text-sm text-gray-900">
|
||||
{result.participant.name} {result.participant.surname}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-900">{result.participant.email}</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{#if result.success}
|
||||
<div class="flex items-center text-green-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" 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>
|
||||
<span class="text-sm font-medium">Sent</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center text-red-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<span class="text-sm font-medium">Failed</span>
|
||||
{#if result.error}
|
||||
<span class="text-xs text-red-500 ml-2">({result.error})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
interface Event {
|
||||
email_subject: string;
|
||||
email_body: string;
|
||||
}
|
||||
|
||||
let { event, loading } = $props<{
|
||||
event: Event | null;
|
||||
loading: boolean;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl font-semibold text-gray-900">Email Template</h2>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<!-- Loading placeholder for email template content -->
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
|
||||
<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
|
||||
<div class="h-28 w-full animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if event}
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
|
||||
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
|
||||
<p class="text-sm text-gray-900">{event.email_subject}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
|
||||
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200 max-h-48 overflow-y-auto">
|
||||
<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
let { error } = $props<{
|
||||
error: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
{#if error}
|
||||
<div class="mt-4 rounded border border-red-200 bg-red-50 p-3">
|
||||
<p class="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
interface Event {
|
||||
name: string;
|
||||
date: string;
|
||||
created_at: string;
|
||||
sheet_id: string;
|
||||
}
|
||||
|
||||
let { event, loading, error } = $props<{
|
||||
event: Event | null;
|
||||
loading: boolean;
|
||||
error: string;
|
||||
}>();
|
||||
|
||||
function formatDate(dateString: string) {
|
||||
return new Date(dateString).toLocaleDateString('en-GB', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
|
||||
{#if loading}
|
||||
<!-- Loading placeholder with header -->
|
||||
<div>
|
||||
<h2 class="mb-4 text-2xl font-semibold text-gray-900">Event Information</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
|
||||
<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
|
||||
<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
|
||||
<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if event}
|
||||
<div>
|
||||
<h2 class="mb-4 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">{formatDate(event.date)}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
|
||||
<span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
|
||||
<a
|
||||
href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-1 h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
Open in Google Sheets
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="py-8 text-center">
|
||||
<p class="text-red-600">{error}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
import GoogleAuthButton from '$lib/components/GoogleAuthButton.svelte';
|
||||
|
||||
let { loading, onSuccess, onError } = $props<{
|
||||
loading: boolean;
|
||||
onSuccess: () => void;
|
||||
onError: (message: string) => void;
|
||||
}>();
|
||||
</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">Google Account</h2>
|
||||
<p class="text-sm text-gray-500">Required for syncing participants and sending emails</p>
|
||||
</div>
|
||||
{#if loading}
|
||||
<div class="h-10 w-48 animate-pulse rounded bg-gray-200"></div>
|
||||
{:else}
|
||||
<GoogleAuthButton
|
||||
size="small"
|
||||
variant="secondary"
|
||||
onSuccess={onSuccess}
|
||||
onError={onError}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,162 @@
|
||||
<script lang="ts">
|
||||
interface Participant {
|
||||
id: string;
|
||||
name: string;
|
||||
surname: string;
|
||||
email: string;
|
||||
scanned: boolean;
|
||||
email_sent: boolean;
|
||||
}
|
||||
|
||||
interface Event {
|
||||
id: string;
|
||||
sheet_id: string;
|
||||
}
|
||||
|
||||
let {
|
||||
event,
|
||||
participants,
|
||||
loading,
|
||||
participantsLoading,
|
||||
syncingParticipants,
|
||||
onSyncParticipants
|
||||
} = $props<{
|
||||
event: Event | null;
|
||||
participants: Participant[];
|
||||
loading: boolean;
|
||||
participantsLoading: boolean;
|
||||
syncingParticipants: boolean;
|
||||
onSyncParticipants: () => void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<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
|
||||
onclick={onSyncParticipants}
|
||||
disabled={syncingParticipants || !event || loading}
|
||||
class="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{#if syncingParticipants}
|
||||
Syncing...
|
||||
{:else}
|
||||
Sync Participants
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if participantsLoading || loading}
|
||||
<!-- Loading placeholder for participants -->
|
||||
<div class="space-y-3">
|
||||
{#each Array(5) as _}
|
||||
<div class="grid grid-cols-5 gap-4 border-b border-gray-200 py-3">
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if participants.length > 0}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Surname</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Scanned</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email Sent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each participants as participant}
|
||||
<tr class="border-b border-gray-200 hover:bg-gray-50">
|
||||
<td class="px-4 py-3 text-sm text-gray-900">{participant.name}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-900">{participant.surname}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-900">{participant.email}</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{#if participant.scanned}
|
||||
<div class="flex items-center text-green-600">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
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>
|
||||
{:else}
|
||||
<div class="flex items-center text-gray-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{#if participant.email_sent}
|
||||
<div class="flex items-center text-blue-600">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
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>
|
||||
{:else}
|
||||
<div class="flex items-center text-gray-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="py-8 text-center">
|
||||
<p class="text-gray-500">
|
||||
No participants found. Click "Sync Participants" to load from Google Sheets.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -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>
|
||||
@@ -7,21 +7,21 @@
|
||||
import { ScanState, defaultTicketData } from '$lib/types/types';
|
||||
|
||||
let { data } = $props();
|
||||
let scanned_id = $state<string>("");
|
||||
let scanned_id = $state<string>('');
|
||||
let ticket_data = $state<TicketData>(defaultTicketData);
|
||||
let scan_state = $state<ScanState>(ScanState.scanning);
|
||||
|
||||
|
||||
// Events related state
|
||||
interface Event {
|
||||
id: string;
|
||||
name: string;
|
||||
date: string;
|
||||
}
|
||||
|
||||
|
||||
let events = $state<Event[]>([]);
|
||||
let selectedEventId = $state<string>("");
|
||||
let selectedEventId = $state<string>('');
|
||||
let isLoadingEvents = $state(true);
|
||||
let eventsError = $state("");
|
||||
let eventsError = $state('');
|
||||
|
||||
onMount(async () => {
|
||||
await loadEvents();
|
||||
@@ -30,7 +30,7 @@
|
||||
async function loadEvents() {
|
||||
isLoadingEvents = true;
|
||||
eventsError = '';
|
||||
|
||||
|
||||
try {
|
||||
const { data: eventsData, error } = await data.supabase
|
||||
.from('events')
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
if (error) throw error;
|
||||
events = eventsData || [];
|
||||
|
||||
|
||||
// If there are events, select the first one by default
|
||||
if (events.length > 0) {
|
||||
selectedEventId = events[0].id;
|
||||
@@ -54,20 +54,20 @@
|
||||
|
||||
// Process a scanned QR code
|
||||
$effect(() => {
|
||||
if (scanned_id === "") return;
|
||||
if (scanned_id === '') return;
|
||||
scan_state = ScanState.scanning;
|
||||
|
||||
console.log("Scanned ID:", scanned_id);
|
||||
console.log('Scanned ID:', scanned_id);
|
||||
|
||||
data.supabase
|
||||
.from('participants')
|
||||
.select(`*, event ( id, name ), scanned_by ( id, display_name )`)
|
||||
.eq('id', scanned_id)
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
if (response.data && response.data.length > 0) {
|
||||
const participant = response.data[0];
|
||||
ticket_data = participant;
|
||||
|
||||
|
||||
// Check if the participant belongs to the selected event
|
||||
if (selectedEventId && participant.event.id !== selectedEventId) {
|
||||
scan_state = ScanState.wrong_event;
|
||||
@@ -81,73 +81,52 @@
|
||||
ticket_data = defaultTicketData;
|
||||
scan_state = ScanState.scan_failed;
|
||||
}
|
||||
|
||||
|
||||
// Reset the scanned_id after 3 seconds to allow for a new scan
|
||||
setTimeout(() => {
|
||||
scanned_id = "";
|
||||
scanned_id = '';
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="mx-auto p-4">
|
||||
<h1 class="text-2xl font-bold mb-6 text-center">Code Scanner</h1>
|
||||
<h1 class="text-2xl font-bold mb-4 mt-2 text-center">Code Scanner</h1>
|
||||
|
||||
<!-- Event Selector -->
|
||||
<div class="rounded-lg border border-gray-300 p-4 mb-4">
|
||||
<h2 class="text-lg font-semibold mb-3">Select Event</h2>
|
||||
{#if isLoadingEvents}
|
||||
<div class="flex items-center justify-center h-10">
|
||||
<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
|
||||
</div>
|
||||
{:else if eventsError}
|
||||
<div class="text-red-600 text-center py-2">
|
||||
{eventsError}
|
||||
<button
|
||||
onclick={loadEvents}
|
||||
class="ml-2 text-blue-600 underline"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
{:else if events.length === 0}
|
||||
<p class="text-gray-500 text-center py-2">No events found</p>
|
||||
{:else}
|
||||
<select
|
||||
bind:value={selectedEventId}
|
||||
class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{#each events as event}
|
||||
<option value={event.id}>
|
||||
{event.name} ({new Date(event.date).toLocaleDateString('en-GB')})
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Scanner Section -->
|
||||
<div class="mb-4">
|
||||
<QRScanner bind:message={scanned_id} />
|
||||
</div>
|
||||
|
||||
<!-- Ticket Display Section -->
|
||||
<h2 class="text-lg font-semibold mb-4">Ticket Information</h2>
|
||||
<TicketDisplay {ticket_data} {scan_state} />
|
||||
|
||||
<!-- Reset button -->
|
||||
{#if scan_state !== ScanState.scanning}
|
||||
<div class="flex justify-center mt-6 mb-4">
|
||||
<button
|
||||
onclick={() => {
|
||||
scanned_id = "";
|
||||
scan_state = ScanState.scanning;
|
||||
}}
|
||||
class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-6 rounded-lg transition"
|
||||
aria-label="Reset scanner"
|
||||
>
|
||||
Reset Scanner
|
||||
</button>
|
||||
<!-- Event Selector -->
|
||||
<div class="mb-4 rounded-lg border border-gray-300 p-4">
|
||||
<h2 class="mb-3 text-lg font-semibold">Select Event</h2>
|
||||
{#if isLoadingEvents}
|
||||
<div class="flex h-10 items-center justify-center">
|
||||
<div
|
||||
class="h-5 w-5 animate-spin rounded-full border-2 border-gray-500 border-t-transparent"
|
||||
></div>
|
||||
</div>
|
||||
{:else if eventsError}
|
||||
<div class="py-2 text-center text-red-600">
|
||||
{eventsError}
|
||||
<button onclick={loadEvents} class="ml-2 text-blue-600 underline"> Try again </button>
|
||||
</div>
|
||||
{:else if events.length === 0}
|
||||
<p class="py-2 text-center text-gray-500">No events found</p>
|
||||
{:else}
|
||||
<select
|
||||
bind:value={selectedEventId}
|
||||
class="w-full rounded border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
{#each events as event}
|
||||
<option value={event.id}>
|
||||
{event.name} ({new Date(event.date).toLocaleDateString('en-GB')})
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Scanner Section -->
|
||||
<div class="mb-4">
|
||||
<QRScanner bind:message={scanned_id} />
|
||||
</div>
|
||||
|
||||
<!-- Ticket Display Section -->
|
||||
<h2 class="mb-2 text-lg font-semibold">Ticket Information</h2>
|
||||
<TicketDisplay {ticket_data} {scan_state} />
|
||||
|
||||
@@ -15,65 +15,73 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg overflow-hidden">
|
||||
{#if scan_state === ScanState.scanning}
|
||||
<div class="bg-gray-50 p-4 flex items-center justify-center gap-3">
|
||||
<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
|
||||
<p class="text-gray-700">Waiting for QR code...</p>
|
||||
</div>
|
||||
{:else if scan_state === ScanState.scan_failed}
|
||||
<div class="bg-red-50 p-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<h3 class="font-semibold text-red-800">Invalid Code</h3>
|
||||
<div class="border border-gray-300 rounded-lg overflow-hidden h-[200px]">
|
||||
<div class="h-full flex flex-col">
|
||||
{#if scan_state === ScanState.scanning}
|
||||
<div class="bg-gray-50 p-4 flex-1 flex flex-col justify-center items-center">
|
||||
<div class="animate-spin h-8 w-8 border-2 border-gray-500 rounded-full border-t-transparent mb-3"></div>
|
||||
<p class="text-gray-700 text-center">Waiting for QR code...</p>
|
||||
</div>
|
||||
<p class="text-red-700">This QR code is not a valid ticket or doesn't exist in our system.</p>
|
||||
</div>
|
||||
{:else if scan_state === ScanState.wrong_event}
|
||||
<div class="bg-amber-50 p-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<h3 class="font-semibold text-amber-800">Wrong Event</h3>
|
||||
{:else if scan_state === ScanState.scan_failed}
|
||||
<div class="bg-red-50 p-4 flex-1 flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<svg class="h-6 w-6 text-red-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<h3 class="font-semibold text-red-800">Invalid Code</h3>
|
||||
</div>
|
||||
<p class="text-red-700 flex-grow">This QR code is not a valid ticket or doesn't exist in our system.</p>
|
||||
<div class="mt-auto pt-2 opacity-0">
|
||||
<!-- Spacer to maintain consistent height -->
|
||||
<p class="font-medium invisible">Placeholder</p>
|
||||
<p class="invisible">Placeholder</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-amber-700 mb-2">This ticket belongs to a different event:</p>
|
||||
<div class="bg-white rounded p-3 border border-amber-200">
|
||||
<p class="font-medium">{ticket_data.event.name}</p>
|
||||
<p>{ticket_data.name} {ticket_data.surname}</p>
|
||||
{:else if scan_state === ScanState.wrong_event}
|
||||
<div class="bg-amber-50 p-4 flex-1 flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<h3 class="font-semibold text-amber-800">Wrong Event</h3>
|
||||
</div>
|
||||
<p class="text-amber-700 mb-2">This ticket belongs to a different event:</p>
|
||||
<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
|
||||
<p class="font-medium">{ticket_data.event?.name || ''}</p>
|
||||
<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if scan_state === ScanState.already_scanned}
|
||||
<div class="bg-amber-50 p-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<h3 class="font-semibold text-amber-800">Already Scanned</h3>
|
||||
{:else if scan_state === ScanState.already_scanned}
|
||||
<div class="bg-amber-50 p-4 flex-1 flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<h3 class="font-semibold text-amber-800">Already Scanned</h3>
|
||||
</div>
|
||||
<p class="text-amber-700">
|
||||
This ticket was already scanned by: <br/> {ticket_data.scanned_by?.display_name || 'someone'}
|
||||
{ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''}
|
||||
</p>
|
||||
<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
|
||||
<p class="font-medium">{ticket_data.event?.name || ''}</p>
|
||||
<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-amber-700 mb-1">
|
||||
This ticket was already scanned by {ticket_data.scanned_by?.display_name || 'someone'}
|
||||
{ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''}
|
||||
</p>
|
||||
<div class="bg-white rounded p-3 border border-amber-200 mt-2">
|
||||
<p class="font-medium">{ticket_data.event.name}</p>
|
||||
<p>{ticket_data.name} {ticket_data.surname}</p>
|
||||
{:else if scan_state === ScanState.scan_successful}
|
||||
<div class="bg-green-50 p-4 flex-1 flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="h-6 w-6 text-green-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<h3 class="font-semibold text-green-800">Valid Ticket</h3>
|
||||
</div>
|
||||
<p class="text-green-700">Ticket successfully validated.</p>
|
||||
<div class="bg-white rounded p-3 border border-green-200 mt-auto">
|
||||
<p class="font-medium">{ticket_data.event?.name || ''}</p>
|
||||
<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if scan_state === ScanState.scan_successful}
|
||||
<div class="bg-green-50 p-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<h3 class="font-semibold text-green-800">Valid Ticket</h3>
|
||||
</div>
|
||||
<div class="bg-white rounded p-3 border border-green-200">
|
||||
<p class="font-medium">{ticket_data.event.name}</p>
|
||||
<p>{ticket_data.name} {ticket_data.surname}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user