erman/scan-wave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add the ability to add participants to already created events

Browse Source
This commit is contained in:
Roman Krček
2025-06-29 17:12:36 +02:00
parent c7275b7ae8
commit 1508b501af
5 changed files with 167 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/routes/private/events/creator/+page.svelte
View File

@@ -1,86 +1,129 @@
<script lang="ts"> <script lang="ts">
import StepConnectGoogle from "./steps/StepConnectGoogle.svelte"; import StepConnectGoogle from './steps/StepConnectGoogle.svelte';
import StepCraftEmail from "./steps/StepCraftEmail.svelte"; import StepCraftEmail from './steps/StepCraftEmail.svelte';
import StepCreateEvent from "./steps/StepCreateEvent.svelte"; import StepCreateEvent from './steps/StepCreateEvent.svelte';
import StepOverview from "./steps/StepOverview.svelte"; import StepOverview from './steps/StepOverview.svelte';
import StepUploadParticipants from "./steps/StepUploadParticipants.svelte"; import StepUploadParticipants from './steps/StepUploadParticipants.svelte';
import { onMount } from 'svelte';
import { page } from '$app/state';
let { data, form } = $props(); let { data, form } = $props();
let event = $state({}); let event = $state({});
let participants = $state([]); let participants = $state([]);
let email = $state({'body': '', 'subject': ''}); let email = $state({ body: '', subject: '' });
let authorized = $state(false); let authorized = $state(false);
let existingEventId = $state(null);
let isAddingParticipants = $state(false);
$effect(() => { onMount(async () => {
if (form && form.event) { const eventId = page.url.searchParams.get('id');
event = form.event; if (eventId) {
} existingEventId = eventId;
if (form && form.participants) { isAddingParticipants = true;
participants = form.participants;
}
});
// Array of step components in order // Fetch existing event data to prefill the form
const steps = [ const { data: existingEvent } = await data.supabase
StepConnectGoogle, .from('events')
StepCreateEvent, .select('*')
StepUploadParticipants, .eq('id', eventId)
StepCraftEmail, .single();
StepOverview
];
let step: number = $state(0); if (existingEvent) {
event = {
name: existingEvent.name,
date: existingEvent.date,
id: existingEvent.id
};
}
}
});
let stepConditions = $derived([ $effect(() => {
authorized, if (form && form.event) {
!!event?.name, event = form.event;
!!participants?.length, }
!!email.subject if (form && form.participants) {
]); participants = form.participants;
}
});
function nextStep() { // Array of step components in order
if (step < steps.length - 1) step += 1; const steps = [
} StepConnectGoogle,
function prevStep() { StepCreateEvent,
if (step > 0) step -= 1; 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> </script>
<div class="flex items-center justify-between mb-4 mt-2"> <div class="mt-2 mb-4">
<button {#if isAddingParticipants}
onclick={prevStep} <h1 class="text-xl font-semibold text-gray-700 text-center">Add Participants to "{event.name}"</h1>
disabled={step === 0} {/if}
class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
>
Previous
</button>
<span class="flex-1 text-center text-gray-600 font-medium">
Step {step + 1} of {steps.length}
</span>
<button
onclick={nextStep}
disabled={step === steps.length - 1 || !stepConditions[step]}
class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
>
Next
</button>
</div> </div>
{#if step == 0} {#if step == 0}
<StepConnectGoogle bind:authorized /> <StepConnectGoogle bind:authorized />
{:else if step == 1} {:else if step == 1}
<StepCreateEvent bind:event /> <StepCreateEvent bind:event readonly={isAddingParticipants} />
{:else if step == 2} {:else if step == 2}
<StepUploadParticipants bind:participants /> <StepUploadParticipants bind:participants />
{:else if step == 3} {:else if step == 3}
<StepCraftEmail bind:email /> <StepCraftEmail bind:email />
{:else if step == 4} {:else if step == 4}
<StepOverview <StepOverview
{data} {data}
{event} {event}
{participants} {participants}
{email} {email}
{stepConditions} {stepConditions}
/> {existingEventId}
{isAddingParticipants}
/>
{/if} {/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="container mx-auto max-w-2xl p-2 flex justify-content-center">
<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-1 flex 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>

23
src/routes/private/events/creator/finish/+page.svelte
View File

@@ -29,9 +29,18 @@
all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}'); all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}');
try { try {
event_status = StepStatus.Loading; let createdEvent;
const createdEvent = await createEventInSupabase(all_data.event);
event_status = StepStatus.Success; 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; participants_status = StepStatus.Loading;
createdParticipants = await createParticipantsInSupabase(all_data.participants, createdEvent); createdParticipants = await createParticipantsInSupabase(all_data.participants, createdEvent);
@@ -141,13 +150,17 @@
<!-- Creating Event Entry --> <!-- Creating Event Entry -->
<div class="mb-4 rounded border border-gray-300 bg-white p-4"> <div class="mb-4 rounded border border-gray-300 bg-white p-4">
<h2 class="mb-2 text-xl font-bold">Creating event</h2> <h2 class="mb-2 text-xl font-bold">
{all_data.isAddingParticipants ? 'Using existing event' : 'Creating event'}
</h2>
{#if event_status === StepStatus.Waiting} {#if event_status === StepStatus.Waiting}
<span class="text-black-600">Waiting...</span> <span class="text-black-600">Waiting...</span>
{:else if event_status === StepStatus.Loading} {:else if event_status === StepStatus.Loading}
<span class="text-black-600">Creating event...</span> <span class="text-black-600">Creating event...</span>
{:else if event_status === StepStatus.Success} {:else if event_status === StepStatus.Success}
<span class="text-green-600">Event created successfully.</span> <span class="text-green-600">
{all_data.isAddingParticipants ? 'Using existing event.' : 'Event created successfully.'}
</span>
{:else if event_status === StepStatus.Failure} {:else if event_status === StepStatus.Failure}
<span class="text-red-600">Failed to create event.</span> <span class="text-red-600">Failed to create event.</span>
{/if} {/if}

24
src/routes/private/events/creator/steps/StepCreateEvent.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
let { event = $bindable() } = $props(); let { event = $bindable(), readonly = false } = $props();
let loading = $state(false); let loading = $state(false);
let showForm = $derived(!event.name || !event.date); let showForm = $derived((!event.name || !event.date) && !readonly);
function handleSubmit(e: Event) { function handleSubmit(e: Event) {
e.preventDefault(); e.preventDefault();
@@ -18,7 +18,9 @@
} }
function showEditForm() { function showEditForm() {
showForm = true; if (!readonly) {
showForm = true;
}
} }
</script> </script>
@@ -59,13 +61,15 @@
{/if} {/if}
{#if !showForm} {#if !showForm}
<button {#if !readonly}
class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700" <button
onclick={showEditForm} class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
aria-label="Edit event" onclick={showEditForm}
> aria-label="Edit event"
Edit the event >
</button> Edit the event
</button>
{/if}
<div class="rounded border border-gray-300 bg-white p-4"> <div class="rounded border border-gray-300 bg-white p-4">
<h2 class="mb-2 text-xl font-bold">Event Preview</h2> <h2 class="mb-2 text-xl font-bold">Event Preview</h2>
{#if Object.keys(event).length > 0} {#if Object.keys(event).length > 0}

6
src/routes/private/events/creator/steps/StepOverview.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
let { data, event, participants, email, stepConditions } = $props(); let { data, event, participants, email, stepConditions, existingEventId = null, isAddingParticipants = false } = $props();
function redirectToFinish() { function redirectToFinish() {
// Generate a random variable name // Generate a random variable name
@@ -9,7 +9,7 @@
// Save the data to sessionStorage // Save the data to sessionStorage
sessionStorage.setItem( sessionStorage.setItem(
varName, varName,
JSON.stringify({ event, participants, email }) JSON.stringify({ event, participants, email, existingEventId, isAddingParticipants })
); );
// Redirect with the variable name as a query parameter // Redirect with the variable name as a query parameter
goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`); goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
@@ -58,7 +58,7 @@
disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500" disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
disabled={!stepConditions.every(Boolean)} disabled={!stepConditions.every(Boolean)}
> >
Generate QR codes and send {isAddingParticipants ? 'Add participants and send emails' : 'Generate QR codes and send'}
</button> </button>
<div class="mt-2 space-y-1"> <div class="mt-2 space-y-1">

32
src/routes/private/events/event/+page.svelte
View File

@@ -37,13 +37,23 @@
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1> <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="mb-2 rounded border border-gray-300 bg-white p-4">
<div class="flex flex-col gap-1"> <div class="flex items-center justify-between gap-4">
{#if loading} <div class="flex flex-col gap-1">
<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div> {#if loading}
<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div> <div class="mb-2 h-6 w-40 animate-pulse rounded bg-gray-200"></div>
{:else} <div class="h-4 w-24 animate-pulse rounded bg-gray-100"></div>
<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span> {:else}
<span class="text-black-500 text-sm">{event_data?.date}</span> <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 && 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} {/if}
</div> </div>
</div> </div>
@@ -60,7 +70,7 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg> </svg>
{#if loading} {#if loading}
<div class="h-4 w-16 bg-gray-200 rounded animate-pulse"></div> <div class="h-4 w-16 animate-pulse rounded bg-gray-200"></div>
{:else} {:else}
<span class="text-sm text-gray-700">Scanned ({scannedCount})</span> <span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
{/if} {/if}
@@ -79,7 +89,7 @@
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" /> <line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
</svg> </svg>
{#if loading} {#if loading}
<div class="h-4 w-24 bg-gray-200 rounded animate-pulse"></div> <div class="h-4 w-24 animate-pulse rounded bg-gray-200"></div>
{:else} {:else}
<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span> <span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
{/if} {/if}
@@ -89,7 +99,7 @@
<div class="rounded border border-gray-300 bg-white p-4"> <div class="rounded border border-gray-300 bg-white p-4">
<h2 class="mb-2 rounded text-xl font-bold"> <h2 class="mb-2 rounded text-xl font-bold">
{#if loading} {#if loading}
<div class="h-6 w-32 bg-gray-200 rounded animate-pulse"></div> <div class="h-6 w-32 animate-pulse rounded bg-gray-200"></div>
{:else} {:else}
Participants ({participants.length}) Participants ({participants.length})
{/if} {/if}
@@ -97,7 +107,7 @@
<ul class="space-y-1"> <ul class="space-y-1">
{#if loading} {#if loading}
<li> <li>
<div class="h-10 w-full bg-gray-200 rounded animate-pulse"></div> <div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
</li> </li>
{:else} {:else}
{#each participants as p} {#each participants as p}