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