Out with the old flow
This commit is contained in:
Roman Krček
@@ -1,131 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import StepConnectGoogle from './steps/StepConnectGoogle.svelte';
|
|
||||||
import StepCraftEmail from './steps/StepCraftEmail.svelte';
|
|
||||||
import StepCreateEvent from './steps/StepCreateEvent.svelte';
|
|
||||||
import StepOverview from './steps/StepOverview.svelte';
|
|
||||||
import StepUploadParticipants from './steps/StepUploadParticipants.svelte';
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { page } from '$app/state';
|
|
||||||
|
|
||||||
let { data, form } = $props();
|
|
||||||
|
|
||||||
let event = $state({});
|
|
||||||
let participants = $state([]);
|
|
||||||
let email = $state({ body: '', subject: '' });
|
|
||||||
let authorized = $state(false);
|
|
||||||
let existingEventId = $state(null);
|
|
||||||
let isAddingParticipants = $state(false);
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
const eventId = page.url.searchParams.get('eventId');
|
|
||||||
if (eventId) {
|
|
||||||
existingEventId = eventId;
|
|
||||||
isAddingParticipants = true;
|
|
||||||
|
|
||||||
// Fetch existing event data to prefill the form
|
|
||||||
const { data: existingEvent } = await data.supabase
|
|
||||||
.from('events')
|
|
||||||
.select('*')
|
|
||||||
.eq('id', eventId)
|
|
||||||
.single();
|
|
||||||
|
|
||||||
if (existingEvent) {
|
|
||||||
event = {
|
|
||||||
name: existingEvent.name,
|
|
||||||
date: existingEvent.date,
|
|
||||||
id: existingEvent.id
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
if (form && form.event) {
|
|
||||||
event = form.event;
|
|
||||||
}
|
|
||||||
if (form && form.participants) {
|
|
||||||
participants = form.participants;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Array of step components in order
|
|
||||||
const steps = [
|
|
||||||
StepConnectGoogle,
|
|
||||||
StepCreateEvent,
|
|
||||||
StepUploadParticipants,
|
|
||||||
StepCraftEmail,
|
|
||||||
StepOverview
|
|
||||||
];
|
|
||||||
|
|
||||||
let step: number = $state(0);
|
|
||||||
|
|
||||||
let stepConditions = $derived([
|
|
||||||
authorized,
|
|
||||||
!!event?.name,
|
|
||||||
!!participants?.length,
|
|
||||||
!!email.subject
|
|
||||||
]);
|
|
||||||
|
|
||||||
function nextStep() {
|
|
||||||
if (step < steps.length - 1) step += 1;
|
|
||||||
}
|
|
||||||
function prevStep() {
|
|
||||||
if (step > 0) step -= 1;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if isAddingParticipants}
|
|
||||||
<div class="mt-2 mb-4">
|
|
||||||
<h1 class="text-center text-xl font-semibold text-gray-700">
|
|
||||||
Adding Participants to "{event.name}"
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if step == 0}
|
|
||||||
<StepConnectGoogle bind:authorized />
|
|
||||||
{:else if step == 1}
|
|
||||||
<StepCreateEvent bind:event readonly={isAddingParticipants} />
|
|
||||||
{:else if step == 2}
|
|
||||||
<StepUploadParticipants bind:participants />
|
|
||||||
{:else if step == 3}
|
|
||||||
<StepCraftEmail bind:email />
|
|
||||||
{:else if step == 4}
|
|
||||||
<StepOverview
|
|
||||||
{data}
|
|
||||||
{event}
|
|
||||||
{participants}
|
|
||||||
{email}
|
|
||||||
{stepConditions}
|
|
||||||
{existingEventId}
|
|
||||||
{isAddingParticipants}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="pb-20"></div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="fixed bottom-0 left-0 z-10 flex w-full items-center justify-between gap-4 border-t border-gray-300 bg-white px-4 py-2"
|
|
||||||
style="max-width: 100vw;"
|
|
||||||
>
|
|
||||||
<div class="justify-content-center container mx-auto flex max-w-2xl p-2">
|
|
||||||
<button
|
|
||||||
onclick={prevStep}
|
|
||||||
disabled={step === 0}
|
|
||||||
class="min-w-[100px] rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
|
|
||||||
aria-label="Previous step"
|
|
||||||
>
|
|
||||||
Previous
|
|
||||||
</button>
|
|
||||||
<span class="flex flex-1 items-center justify-center text-center font-medium text-gray-600">
|
|
||||||
Step {step + 1} of {steps.length}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onclick={nextStep}
|
|
||||||
disabled={step === steps.length - 1 || !stepConditions[step]}
|
|
||||||
class="min-w-[100px] rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { goto } from '$app/navigation';
|
|
||||||
|
|
||||||
let to = '';
|
|
||||||
let subject = '';
|
|
||||||
let body = '';
|
|
||||||
let qrcode_b64 = '';
|
|
||||||
let loading = false;
|
|
||||||
let error = '';
|
|
||||||
let success = '';
|
|
||||||
let authorized = false;
|
|
||||||
let refreshToken = '';
|
|
||||||
|
|
||||||
async function validateToken(token: string): Promise<boolean> {
|
|
||||||
if (!token) return false;
|
|
||||||
const res = await fetch('/private/api/gmail', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ action: 'validate', refreshToken: token })
|
|
||||||
});
|
|
||||||
if (!res.ok) return false;
|
|
||||||
const data = await res.json();
|
|
||||||
return !!data.valid;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
|
|
||||||
authorized = await validateToken(refreshToken);
|
|
||||||
});
|
|
||||||
|
|
||||||
const connect = () => goto('/private/api/gmail?action=auth');
|
|
||||||
|
|
||||||
async function sendTestEmail(event: Event) {
|
|
||||||
event.preventDefault();
|
|
||||||
error = '';
|
|
||||||
success = '';
|
|
||||||
loading = true;
|
|
||||||
try {
|
|
||||||
const r = await fetch('/private/api/gmail', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
action: 'send',
|
|
||||||
to,
|
|
||||||
subject,
|
|
||||||
text: body,
|
|
||||||
qr_code: qrcode_b64,
|
|
||||||
refreshToken
|
|
||||||
})
|
|
||||||
});
|
|
||||||
if (r.ok) {
|
|
||||||
success = 'Email sent!';
|
|
||||||
to = subject = body = qrcode_b64 = '';
|
|
||||||
} else {
|
|
||||||
error = await r.text();
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
error = e.message || 'Unknown error';
|
|
||||||
}
|
|
||||||
loading = false;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="max-w-lg mx-auto bg-white border border-gray-300 rounded p-8 mt-8 shadow">
|
|
||||||
<h2 class="text-2xl font-semibold mb-6 text-center">Test Email Sender</h2>
|
|
||||||
{#if !authorized}
|
|
||||||
<div class="mb-4 flex items-center justify-between">
|
|
||||||
<p class="text-gray-700">Google not connected.</p>
|
|
||||||
<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" onclick={connect}>
|
|
||||||
Connect Google
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<form onsubmit={sendTestEmail} class="space-y-4">
|
|
||||||
<label class="block">
|
|
||||||
<span class="text-gray-700">To</span>
|
|
||||||
<input type="email" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200" bind:value={to} required />
|
|
||||||
</label>
|
|
||||||
<label class="block">
|
|
||||||
<span class="text-gray-700">Subject</span>
|
|
||||||
<input type="text" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200" bind:value={subject} required />
|
|
||||||
</label>
|
|
||||||
<label class="block">
|
|
||||||
<span class="text-gray-700">Body</span>
|
|
||||||
<textarea class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none" rows="6" bind:value={body} required></textarea>
|
|
||||||
</label>
|
|
||||||
<label class="block">
|
|
||||||
<span class="text-gray-700">QR Code (base64, data:image/png;base64,...)</span>
|
|
||||||
<input type="text" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200 font-mono text-xs" bind:value={qrcode_b64} placeholder="Paste base64 image string here" required />
|
|
||||||
</label>
|
|
||||||
<button type="submit" class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition" disabled={loading}>
|
|
||||||
{#if loading}
|
|
||||||
<svg class="animate-spin h-5 w-5 mr-2 inline-block text-white" 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-8v8z"></path>
|
|
||||||
</svg>
|
|
||||||
Sending...
|
|
||||||
{:else}
|
|
||||||
Send Test Email
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{/if}
|
|
||||||
{#if error}
|
|
||||||
<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700 mt-4">{error}</div>
|
|
||||||
{/if}
|
|
||||||
{#if success}
|
|
||||||
<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">{success}</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
@@ -1,252 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { page } from '$app/state';
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import QRCode from 'qrcode';
|
|
||||||
|
|
||||||
let { data } = $props();
|
|
||||||
let session_storage_id = page.url.searchParams.get('data');
|
|
||||||
let all_data = {};
|
|
||||||
|
|
||||||
const StepStatus = {
|
|
||||||
Loading: 'loading',
|
|
||||||
Waiting: 'waiting',
|
|
||||||
Success: 'success',
|
|
||||||
Failure: 'failure'
|
|
||||||
} as const;
|
|
||||||
type StepStatus = (typeof StepStatus)[keyof typeof StepStatus];
|
|
||||||
let event_status: StepStatus = $state(StepStatus.Waiting);
|
|
||||||
let participants_status: StepStatus = $state(StepStatus.Waiting);
|
|
||||||
let email_status: StepStatus = $state(StepStatus.Waiting);
|
|
||||||
|
|
||||||
let createdParticipants = $state([]);
|
|
||||||
let mailStatuses = $state([]); // { email, name, status: 'pending' | 'success' | 'failure' }
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
if (!session_storage_id) {
|
|
||||||
console.error('No session storage ID provided in the URL');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}');
|
|
||||||
|
|
||||||
try {
|
|
||||||
let createdEvent;
|
|
||||||
|
|
||||||
if (all_data.isAddingParticipants && all_data.existingEventId) {
|
|
||||||
// Skip event creation for existing events
|
|
||||||
event_status = StepStatus.Success;
|
|
||||||
createdEvent = { id: all_data.existingEventId, ...all_data.event };
|
|
||||||
} else {
|
|
||||||
// Create new event
|
|
||||||
event_status = StepStatus.Loading;
|
|
||||||
createdEvent = await createEventInSupabase(all_data.event);
|
|
||||||
event_status = StepStatus.Success;
|
|
||||||
}
|
|
||||||
|
|
||||||
participants_status = StepStatus.Loading;
|
|
||||||
createdParticipants = await createParticipantsInSupabase(all_data.participants, createdEvent);
|
|
||||||
participants_status = StepStatus.Success;
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
if (event_status === StepStatus.Loading) event_status = StepStatus.Failure;
|
|
||||||
else participants_status = StepStatus.Failure;
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
async function createEventInSupabase(event) {
|
|
||||||
console.log('Creating event in Supabase:', event);
|
|
||||||
const { data: createdEvent, error: eventError } = await data.supabase.rpc('create_event', {
|
|
||||||
p_name: event.name,
|
|
||||||
p_date: event.date
|
|
||||||
});
|
|
||||||
console.log('Created event:', createdEvent);
|
|
||||||
if (eventError) throw eventError;
|
|
||||||
return createdEvent;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function createParticipantsInSupabase(participants, event) {
|
|
||||||
const names = participants.map((p) => p.name);
|
|
||||||
const surnames = participants.map((p) => p.surname);
|
|
||||||
const emails = participants.map((p) => p.email);
|
|
||||||
const {
|
|
||||||
data: { user },
|
|
||||||
error: authError
|
|
||||||
} = await data.supabase.auth.getUser();
|
|
||||||
const { data: user_profile, error: profileError } = await data.supabase
|
|
||||||
.from('profiles')
|
|
||||||
.select('*, section:sections (id, name)')
|
|
||||||
.eq('id', user?.id)
|
|
||||||
.single();
|
|
||||||
const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
|
|
||||||
p_section_id: user_profile?.section.id,
|
|
||||||
p_event_id: event.id,
|
|
||||||
p_names: names,
|
|
||||||
p_surnames: surnames,
|
|
||||||
p_emails: emails
|
|
||||||
});
|
|
||||||
if (qrCodeError) throw qrCodeError;
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function sendEmails(participants, email) {
|
|
||||||
mailStatuses = participants.map((p) => ({ email: p.email, name: `${p.name} ${p.surname}`, status: 'pending' }));
|
|
||||||
let allSuccess = true;
|
|
||||||
for (let i = 0; i < participants.length; i++) {
|
|
||||||
const obj = participants[i];
|
|
||||||
let qr_code = await dataToBase64(obj.id);
|
|
||||||
const payload = {
|
|
||||||
action: 'send',
|
|
||||||
to: obj.email,
|
|
||||||
subject: email.subject,
|
|
||||||
text: email.body,
|
|
||||||
qr_code: qr_code,
|
|
||||||
refreshToken: localStorage.getItem('gmail_refresh_token')
|
|
||||||
};
|
|
||||||
try {
|
|
||||||
const res = await fetch('/private/api/gmail', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(payload)
|
|
||||||
});
|
|
||||||
if (res.ok) {
|
|
||||||
mailStatuses[i].status = 'success';
|
|
||||||
} else {
|
|
||||||
mailStatuses[i].status = 'failure';
|
|
||||||
allSuccess = false;
|
|
||||||
console.error('Failed to send email to', obj.email, await res.text());
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
mailStatuses[i].status = 'failure';
|
|
||||||
allSuccess = false;
|
|
||||||
console.error('Failed to send email to', obj.email, e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return allSuccess;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function dataToBase64(data: string): Promise<string> {
|
|
||||||
try {
|
|
||||||
const url = await QRCode.toDataURL(data);
|
|
||||||
const parts = url.split(',');
|
|
||||||
const base64 = parts[1];
|
|
||||||
return base64;
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function launchMailCampaign() {
|
|
||||||
email_status = StepStatus.Loading;
|
|
||||||
try {
|
|
||||||
const allSuccess = await sendEmails(createdParticipants, all_data.email);
|
|
||||||
email_status = allSuccess ? StepStatus.Success : StepStatus.Failure;
|
|
||||||
} catch (e) {
|
|
||||||
email_status = StepStatus.Failure;
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Creating Event Entry -->
|
|
||||||
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
|
|
||||||
<h2 class="mb-2 text-xl font-bold">
|
|
||||||
{all_data.isAddingParticipants ? 'Using existing event' : 'Creating event'}
|
|
||||||
</h2>
|
|
||||||
{#if event_status === StepStatus.Waiting}
|
|
||||||
<span class="text-black-600">Waiting...</span>
|
|
||||||
{:else if event_status === StepStatus.Loading}
|
|
||||||
<span class="text-black-600">Creating event...</span>
|
|
||||||
{:else if event_status === StepStatus.Success}
|
|
||||||
<span class="text-green-600">
|
|
||||||
{all_data.isAddingParticipants ? 'Using existing event.' : 'Event created successfully.'}
|
|
||||||
</span>
|
|
||||||
{:else if event_status === StepStatus.Failure}
|
|
||||||
<span class="text-red-600">Failed to create event.</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Creating Database Entries -->
|
|
||||||
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
|
|
||||||
<h2 class="mb-2 text-xl font-bold">Creating QR codes for participants</h2>
|
|
||||||
{#if participants_status === StepStatus.Waiting}
|
|
||||||
<span class="text-black-600">Waiting...</span>
|
|
||||||
{:else if participants_status === StepStatus.Loading}
|
|
||||||
<span class="text-black-600">Creating entries...</span>
|
|
||||||
{:else if participants_status === StepStatus.Success}
|
|
||||||
<span class="text-green-600">QR codes created successfully.</span>
|
|
||||||
{:else if participants_status === StepStatus.Failure}
|
|
||||||
<span class="text-red-600">Failed to create QR codes.</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Sending Emails -->
|
|
||||||
<div class="rounded border border-gray-300 bg-white p-4">
|
|
||||||
<h2 class="mb-1 text-xl font-bold">Sending emails</h2>
|
|
||||||
<p class="text-sm text-red-500 mb-2">After pressing send, you must not exit this window until the mail are all sent!</p>
|
|
||||||
{#if email_status === StepStatus.Waiting}
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<span class="text-black-600">Waiting...</span>
|
|
||||||
<button
|
|
||||||
disabled={event_status !== StepStatus.Success || participants_status !== StepStatus.Success}
|
|
||||||
onclick={launchMailCampaign}
|
|
||||||
class="ml-4 px-6 py-2 rounded font-semibold transition disabled:opacity-50 disabled:cursor-not-allowed
|
|
||||||
{event_status === StepStatus.Success && participants_status === StepStatus.Success ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-gray-400 text-white'}"
|
|
||||||
>
|
|
||||||
Send all emails
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<ul class="mt-4 space-y-2">
|
|
||||||
{#each createdParticipants as p, i}
|
|
||||||
<li class="flex items-center border-b pb-1 gap-2">
|
|
||||||
{#if mailStatuses[i]?.status === 'success'}
|
|
||||||
<svg
|
|
||||||
title="Sent"
|
|
||||||
class="mr-2 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>
|
|
||||||
{:else if mailStatuses[i]?.status === 'failure'}
|
|
||||||
<svg
|
|
||||||
title="Failed"
|
|
||||||
class="mr-2 inline h-4 w-4 text-red-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" />
|
|
||||||
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
|
||||||
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
|
||||||
</svg>
|
|
||||||
{:else}
|
|
||||||
<svg
|
|
||||||
title="Pending"
|
|
||||||
class="mr-2 inline h-4 w-4 text-gray-400"
|
|
||||||
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}
|
|
||||||
<span class="font-semibold">{p.name} {p.surname}</span>
|
|
||||||
<span class="font-mono text-xs text-gray-600 ml-auto">{p.email}</span>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{#if email_status === StepStatus.Loading}
|
|
||||||
<span class="block mt-2 text-black-600">Sending emails...</span>
|
|
||||||
{:else if email_status === StepStatus.Success}
|
|
||||||
<span class="block mt-2 text-green-600">Emails sent successfully.</span>
|
|
||||||
{:else if email_status === StepStatus.Failure}
|
|
||||||
<span class="block mt-2 text-red-600">Failed to send emails.</span>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { goto } from '$app/navigation';
|
|
||||||
|
|
||||||
export let authorized = false;
|
|
||||||
|
|
||||||
let refreshToken = '';
|
|
||||||
let loading = true;
|
|
||||||
|
|
||||||
let to = '';
|
|
||||||
let subject = '';
|
|
||||||
let body = '';
|
|
||||||
|
|
||||||
async function validateToken(token: string): Promise<boolean> {
|
|
||||||
if (!token) return false;
|
|
||||||
const res = await fetch('/private/api/gmail', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ action: 'validate', refreshToken: token })
|
|
||||||
});
|
|
||||||
if (!res.ok) return false;
|
|
||||||
const data = await res.json();
|
|
||||||
return !!data.valid;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
|
|
||||||
loading = true;
|
|
||||||
authorized = await validateToken(refreshToken);
|
|
||||||
loading = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ⇢ redirects straight to Google via server 302 */
|
|
||||||
const connect = () => goto('/private/api/gmail?action=auth');
|
|
||||||
|
|
||||||
async function disconnect() {
|
|
||||||
if (!confirm('Disconnect Google account?')) return;
|
|
||||||
await fetch('/private/api/gmail', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ action: 'revoke', refreshToken })
|
|
||||||
});
|
|
||||||
localStorage.removeItem('gmail_refresh_token');
|
|
||||||
refreshToken = '';
|
|
||||||
authorized = false;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="mb-4 mt-2 rounded border border-gray-300 bg-white p-4">
|
|
||||||
{#if loading}
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<svg class="animate-spin h-5 w-5 text-gray-500" 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-8v8z"></path>
|
|
||||||
</svg>
|
|
||||||
<span>Checking Google connection...</span>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
{#if !authorized}
|
|
||||||
<section class="flex items-center justify-between w-full">
|
|
||||||
<p class="mr-4">You haven’t connected your Google account yet.</p>
|
|
||||||
<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" onclick={connect}>
|
|
||||||
Connect Google
|
|
||||||
</button>
|
|
||||||
</section>
|
|
||||||
{:else}
|
|
||||||
<div class="flex items-center space-x-2 text-green-600">
|
|
||||||
<svg class="h-5 w-5" 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>Your connection to Google is good, proceed to next step</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
let { email = $bindable() } = $props();
|
|
||||||
|
|
||||||
let showForm = $derived(!email.subject || !email.body);
|
|
||||||
|
|
||||||
function handleSubmit(e: Event) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = e.target as HTMLFormElement;
|
|
||||||
const formData = new FormData(form);
|
|
||||||
email = {
|
|
||||||
subject: formData.get('subject') as string,
|
|
||||||
body: formData.get('body') as string
|
|
||||||
};
|
|
||||||
showForm = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showEditForm() {
|
|
||||||
showForm = true;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if showForm}
|
|
||||||
<form onsubmit={handleSubmit} class="flex mt-2 flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
|
|
||||||
<h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
|
|
||||||
<label class="flex flex-col text-gray-700">
|
|
||||||
Subject
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="subject"
|
|
||||||
value={email.subject ?? ''}
|
|
||||||
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label class="flex flex-col text-gray-700">
|
|
||||||
Body
|
|
||||||
<textarea
|
|
||||||
name="body"
|
|
||||||
value={email.body ?? ''}
|
|
||||||
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
|
|
||||||
rows="6"
|
|
||||||
required
|
|
||||||
></textarea>
|
|
||||||
</label>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{:else}
|
|
||||||
<button
|
|
||||||
class="mb-4 mt-2 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
|
||||||
onclick={showEditForm}
|
|
||||||
aria-label="Edit email"
|
|
||||||
>
|
|
||||||
Edit email
|
|
||||||
</button>
|
|
||||||
<div class="rounded border border-gray-300 bg-white p-4">
|
|
||||||
<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
|
|
||||||
<div class="mb-2">
|
|
||||||
<span class="block font-semibold">{email.subject}</span>
|
|
||||||
</div>
|
|
||||||
<div class="whitespace-pre-line text-gray-800">
|
|
||||||
{email.body}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
let { event = $bindable(), readonly = false } = $props();
|
|
||||||
|
|
||||||
let loading = $state(false);
|
|
||||||
let showForm = $derived((!event.name || !event.date) && !readonly);
|
|
||||||
|
|
||||||
function handleSubmit(e: Event) {
|
|
||||||
e.preventDefault();
|
|
||||||
loading = true;
|
|
||||||
const form = e.target as HTMLFormElement;
|
|
||||||
const formData = new FormData(form);
|
|
||||||
event = {
|
|
||||||
name: formData.get('name'),
|
|
||||||
date: formData.get('date')
|
|
||||||
};
|
|
||||||
showForm = false;
|
|
||||||
loading = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showEditForm() {
|
|
||||||
if (!readonly) {
|
|
||||||
showForm = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if showForm}
|
|
||||||
<form
|
|
||||||
onsubmit={handleSubmit}
|
|
||||||
autocomplete="off"
|
|
||||||
class="flex mt-2 w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
|
|
||||||
>
|
|
||||||
<h2 class="mb-4 text-center text-2xl font-semibold">Create Event</h2>
|
|
||||||
<label class="mt-2 flex flex-col text-gray-700">
|
|
||||||
Name
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="name"
|
|
||||||
class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
|
|
||||||
required
|
|
||||||
value={event.name ?? ''}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label class="mt-2 flex flex-col text-gray-700">
|
|
||||||
Date
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
name="date"
|
|
||||||
class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
|
|
||||||
required
|
|
||||||
value={event.date ?? ''}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if !showForm}
|
|
||||||
{#if !readonly}
|
|
||||||
<button
|
|
||||||
class="mb-4 mt-2 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
|
||||||
onclick={showEditForm}
|
|
||||||
aria-label="Edit event"
|
|
||||||
>
|
|
||||||
Edit the event
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
<div class="rounded border border-gray-300 bg-white p-4">
|
|
||||||
<h2 class="mb-2 text-xl font-bold">Event Preview</h2>
|
|
||||||
{#if Object.keys(event).length > 0}
|
|
||||||
<ul>
|
|
||||||
<li><span class="font-semibold">{event.name}</span></li>
|
|
||||||
<li class="text-gray-700">{event.date}</li>
|
|
||||||
</ul>
|
|
||||||
{:else}
|
|
||||||
<strong class="text-gray-700">No event created yet...</strong>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { goto } from '$app/navigation';
|
|
||||||
|
|
||||||
let { data, event, participants, email, stepConditions, existingEventId = null, isAddingParticipants = false } = $props();
|
|
||||||
|
|
||||||
function redirectToFinish() {
|
|
||||||
// Generate a random variable name
|
|
||||||
const varName = 'event_' + Math.random().toString(36).substr(2, 9);
|
|
||||||
// Save the data to sessionStorage
|
|
||||||
sessionStorage.setItem(
|
|
||||||
varName,
|
|
||||||
JSON.stringify({ event, participants, email, existingEventId, isAddingParticipants })
|
|
||||||
);
|
|
||||||
// Redirect with the variable name as a query parameter
|
|
||||||
goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- New Event Overview -->
|
|
||||||
<div class="mb-4 mt-2 rounded border border-gray-300 bg-white p-4">
|
|
||||||
<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
|
|
||||||
<ul class="space-y-1">
|
|
||||||
<li><span class="font-semibold">Name:</span> {event.name}</li>
|
|
||||||
<li><span class="font-semibold">Date:</span> {event.date}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Email Overview -->
|
|
||||||
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
|
|
||||||
<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
|
|
||||||
<div class="mb-2"><span class="font-semibold">Subject:</span> {email.subject}</div>
|
|
||||||
<div class="rounded border bg-gray-50 p-2 whitespace-pre-line text-gray-700">
|
|
||||||
<span class="font-semibold"></span>
|
|
||||||
<div>{email.body}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Participants Overview -->
|
|
||||||
<div class="rounded border border-gray-300 bg-white p-4">
|
|
||||||
<h2 class="mb-2 text-xl font-bold">Participants ({participants.length})</h2>
|
|
||||||
<ul class="space-y-1">
|
|
||||||
{#each participants.slice(0, 10) as p}
|
|
||||||
<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
|
|
||||||
<span class="font-semibold">{p.name} {p.surname}</span>
|
|
||||||
<span class="flex-1"></span>
|
|
||||||
<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
<p class="mt-2 text-sm text-gray-500">Note: Only the first 10 participants are shown.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onclick={redirectToFinish}
|
|
||||||
class="mt-4 w-full rounded bg-blue-600 px-4 py-3 font-bold text-white
|
|
||||||
transition-colors duration-200 hover:bg-blue-700
|
|
||||||
disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
|
|
||||||
disabled={!stepConditions.every(Boolean)}
|
|
||||||
>
|
|
||||||
{isAddingParticipants ? 'Add participants and send emails' : 'Generate QR codes and send'}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="mt-2 space-y-1">
|
|
||||||
{#if !stepConditions[0]}
|
|
||||||
<p class="text-sm text-red-500">Please provide an event name before proceeding.</p>
|
|
||||||
{/if}
|
|
||||||
{#if !stepConditions[1]}
|
|
||||||
<p class="text-sm text-red-500">Please add at least one participant before proceeding.</p>
|
|
||||||
{/if}
|
|
||||||
{#if !stepConditions[2]}
|
|
||||||
<p class="text-sm text-red-500">Please provide an email subject before proceeding.</p>
|
|
||||||
{/if}
|
|
||||||
{#if !stepConditions[3]}
|
|
||||||
<p class="text-sm text-red-500">Please provide an email body before proceeding.</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import Papa from 'papaparse';
|
|
||||||
|
|
||||||
let { participants = $bindable() } = $props();
|
|
||||||
let showForm = $derived(participants.length === 0);
|
|
||||||
let errors = $state([]);
|
|
||||||
|
|
||||||
function isValidEmail(email: string): boolean {
|
|
||||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSubmit(e: Event) {
|
|
||||||
e.preventDefault();
|
|
||||||
errors = [];
|
|
||||||
const form = e.target as HTMLFormElement;
|
|
||||||
const fileInput = form.elements.namedItem('participants') as HTMLInputElement;
|
|
||||||
const file = fileInput?.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
const csvText = await file.text();
|
|
||||||
const { data: parsedRows } = Papa.parse<string[]>(csvText, {
|
|
||||||
skipEmptyLines: true,
|
|
||||||
header: false
|
|
||||||
});
|
|
||||||
// Remove the first row (header)
|
|
||||||
if (parsedRows.length > 0) {
|
|
||||||
parsedRows.shift();
|
|
||||||
}
|
|
||||||
const validated = [];
|
|
||||||
parsedRows.forEach((row, idx) => {
|
|
||||||
if (!row || row.length < 3) {
|
|
||||||
errors.push(`Row ${idx + 2} is missing columns.`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const [name, surname, email] = row;
|
|
||||||
if (!name || !surname || !email) {
|
|
||||||
errors.push(`Row ${idx + 2} has missing values.`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
validated.push({
|
|
||||||
name,
|
|
||||||
surname,
|
|
||||||
email,
|
|
||||||
email_valid: isValidEmail(email)
|
|
||||||
});
|
|
||||||
});
|
|
||||||
if (errors.length > 0) {
|
|
||||||
return; // Do not proceed if there are errors
|
|
||||||
}
|
|
||||||
if (validated.length === 0) {
|
|
||||||
participants = [];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
participants = validated.sort((a, b) => {
|
|
||||||
if (a.email_valid === b.email_valid) return 0;
|
|
||||||
return a.email_valid ? 1 : -1;
|
|
||||||
});
|
|
||||||
showForm = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showEditForm() {
|
|
||||||
showForm = true;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if showForm}
|
|
||||||
{#if errors.length > 0}
|
|
||||||
<div class="mb-4 mt-2 rounded border border-red-400 bg-red-50 p-4 text-red-700">
|
|
||||||
<ul class="list-disc ml-4">
|
|
||||||
{#each errors as err}
|
|
||||||
<li>{err}</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<form
|
|
||||||
onsubmit={handleSubmit}
|
|
||||||
autocomplete="off"
|
|
||||||
enctype="multipart/form-data"
|
|
||||||
class="flex mt-2 w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
|
|
||||||
>
|
|
||||||
<h2 class="mb-4 text-center text-2xl font-semibold">Upload Participants</h2>
|
|
||||||
<label class="flex flex-col text-gray-700">
|
|
||||||
CSV File
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
name="participants"
|
|
||||||
id="participants"
|
|
||||||
accept=".csv"
|
|
||||||
class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{:else}
|
|
||||||
<button
|
|
||||||
class="w-full mt-2 rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
|
||||||
onclick={showEditForm}
|
|
||||||
aria-label="Edit participants"
|
|
||||||
>
|
|
||||||
Edit participants
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if !showForm}
|
|
||||||
<div class="mt-4 rounded border border-gray-300 bg-white p-4">
|
|
||||||
<div class="mb-2 flex items-center justify-between">
|
|
||||||
<h2 class="text-xl font-bold">Participants ({participants.length})</h2>
|
|
||||||
{#if participants.length > 0}
|
|
||||||
{#if participants.some((p) => !p.email_valid)}
|
|
||||||
<span class="text-xs text-gray-500">Some emails appear invalid</span>
|
|
||||||
{:else}
|
|
||||||
<span class="text-xs text-gray-500">All emails appear valid</span>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="space-y-1">
|
|
||||||
{#each participants as p}
|
|
||||||
<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
|
|
||||||
{#if p.email_valid}
|
|
||||||
<svg
|
|
||||||
title="Valid email"
|
|
||||||
class="mr-2 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>
|
|
||||||
{:else}
|
|
||||||
<svg
|
|
||||||
title="Invalid email"
|
|
||||||
class="mr-2 inline h-4 w-4 text-red-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" />
|
|
||||||
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
|
||||||
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
|
||||||
</svg>
|
|
||||||
{/if}
|
|
||||||
<span class="font-semibold">{p.name} {p.surname}</span>
|
|
||||||
<span class="flex-1"></span>
|
|
||||||
<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
@@ -1,162 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { page } from '$app/state';
|
|
||||||
|
|
||||||
let { data } = $props();
|
|
||||||
|
|
||||||
let event_data: any = $state(null);
|
|
||||||
let participants: any[] = $state([]);
|
|
||||||
let loading = $state(true);
|
|
||||||
let scannedCount: number = $state(0);
|
|
||||||
let notScannedCount: number = $state(0);
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
const event_id = page.url.searchParams.get('id');
|
|
||||||
|
|
||||||
if (!event_id) {
|
|
||||||
loading = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { data: event } = await data.supabase
|
|
||||||
.from('events')
|
|
||||||
.select('*')
|
|
||||||
.eq('id', event_id)
|
|
||||||
.single();
|
|
||||||
event_data = event;
|
|
||||||
|
|
||||||
const { data: parts } = await data.supabase
|
|
||||||
.from('participants')
|
|
||||||
.select('*, scanned_by:profiles (id, display_name)')
|
|
||||||
.eq('event', event_id);
|
|
||||||
participants = parts || [];
|
|
||||||
scannedCount = participants.filter((p) => p.scanned).length;
|
|
||||||
notScannedCount = participants.length - scannedCount;
|
|
||||||
loading = false;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1>
|
|
||||||
|
|
||||||
<div class="mb-2 rounded border border-gray-300 bg-white p-4">
|
|
||||||
<div class="flex items-center justify-between gap-4">
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
{#if loading}
|
|
||||||
<div class="mb-2 h-6 w-40 animate-pulse rounded bg-gray-200"></div>
|
|
||||||
<div class="h-4 w-24 animate-pulse rounded bg-gray-100"></div>
|
|
||||||
{:else}
|
|
||||||
<span class="text-gray-700 text-lg font-semibold">{event_data?.name}</span>
|
|
||||||
<span class="text-gray-500 text-sm">{event_data?.date}</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if loading}
|
|
||||||
<div class="h-10 w-32 animate-pulse rounded bg-gray-200"></div>
|
|
||||||
{:else if event_data}
|
|
||||||
<a
|
|
||||||
href={`/private/events/creator?eventId=${event_data.id}`}
|
|
||||||
class="rounded border border-gray-300 bg-blue-600 px-6 py-2 font-semibold text-white transition hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Add Participants
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-2 flex items-center rounded border border-gray-300 bg-white p-4">
|
|
||||||
<div class="flex flex-1 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-16 animate-pulse rounded bg-gray-200"></div>
|
|
||||||
{:else}
|
|
||||||
<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="mx-4 h-8 w-px bg-gray-300"></div>
|
|
||||||
<div class="flex flex-1 items-center justify-center gap-2">
|
|
||||||
<svg
|
|
||||||
class="inline h-4 w-4 text-red-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" />
|
|
||||||
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
|
||||||
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
|
||||||
</svg>
|
|
||||||
{#if loading}
|
|
||||||
<div class="h-4 w-24 animate-pulse rounded bg-gray-200"></div>
|
|
||||||
{:else}
|
|
||||||
<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rounded border border-gray-300 bg-white p-4">
|
|
||||||
<h2 class="mb-2 rounded text-xl font-bold">
|
|
||||||
{#if loading}
|
|
||||||
<div class="h-6 w-32 animate-pulse rounded bg-gray-200"></div>
|
|
||||||
{:else}
|
|
||||||
Participants ({participants.length})
|
|
||||||
{/if}
|
|
||||||
</h2>
|
|
||||||
<ul class="space-y-1">
|
|
||||||
{#if loading}
|
|
||||||
<li>
|
|
||||||
<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
|
|
||||||
</li>
|
|
||||||
{:else}
|
|
||||||
{#each participants as p}
|
|
||||||
<li class="flex items-center gap-2 border-b border-gray-300 pb-1 last:border-b-0">
|
|
||||||
{#if p.scanned}
|
|
||||||
<svg
|
|
||||||
title="Scanned"
|
|
||||||
class="mr-2 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>
|
|
||||||
{:else}
|
|
||||||
<svg
|
|
||||||
title="Not scanned"
|
|
||||||
class="mr-2 inline h-4 w-4 text-red-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" />
|
|
||||||
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
|
||||||
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
|
||||||
</svg>
|
|
||||||
{/if}
|
|
||||||
<span class="font-semibold">{p.name} {p.surname}</span>
|
|
||||||
<span class="flex-1"></span>
|
|
||||||
{#if p.scanned_by}
|
|
||||||
<div class="ml-2 flex flex-row items-end">
|
|
||||||
<span class="mr-1 text-xs text-gray-500">
|
|
||||||
{new Date(p.scanned_at).toLocaleTimeString([], {
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
hour12: false
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
<span class="text-xs text-gray-500">by {p.scanned_by.display_name}</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
Reference in New Issue
Block a user