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

Move data processing to the browser for better responsivness and privacy

Browse Source
This commit is contained in:
Roman Krček
2025-06-27 23:29:08 +02:00
parent 9aa5b66b54
commit 9fb76cbc8b
7 changed files with 243 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/routes/private/events/creator/+page.server.ts
View File

@@ -1,61 +0,0 @@
import type { Actions } from './$types';
import { error as kitError } from '@sveltejs/kit';
import Papa from 'papaparse';
import { fail } from '@sveltejs/kit';
export async function load({ locals }) {
const { data: events, error } = await locals.supabase
.from('events')
.select('*')
.order('date', { ascending: true });
if (error) {
console.error('❌ supabase error:', error);
// optional: throw to render SvelteKit error page
throw kitError(500, 'Could not load events');
}
return { events };
}
export const actions = {
create: async (event) => {
const formData = await event.request.formData();
let { data: new_event, error } = await event.locals.supabase.rpc("create_event",
{
"p_name": formData.get('name'),
"p_date": formData.get('date'),
"p_description": formData.get('description'),
});
return {
new_event,
error
}
},
participants: async (event) => {
const formData = await event.request.formData();
const file = formData.get('participants') as File;
let csvText = await file.text();
const { data: parsedRows, errors } = Papa.parse<string[]>(csvText, {
skipEmptyLines: true,
header: false
});
// Remove the first row (header)
if (parsedRows.length > 0) {
parsedRows.shift();
}
// Map each row to an object with keys: name, surname, email
const participants = parsedRows.map((row: string[]) => ({
name: row[0],
surname: row[1],
email: row[2]
}));
return {
participants,
}
}
} satisfies Actions;

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

@@ -3,7 +3,7 @@
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 StepUploadFiles from "./steps/StepUploadFiles.svelte"; import StepUploadParticipants from "./steps/StepUploadParticipants.svelte";
let { data, form } = $props(); let { data, form } = $props();
@@ -13,8 +13,8 @@
let authorized = $state(false); let authorized = $state(false);
$effect(() => { $effect(() => {
if (form && form.new_event) { if (form && form.event) {
event = form.new_event; event = form.event;
} }
if (form && form.participants) { if (form && form.participants) {
participants = form.participants; participants = form.participants;
@@ -25,7 +25,7 @@
const steps = [ const steps = [
StepConnectGoogle, StepConnectGoogle,
StepCreateEvent, StepCreateEvent,
StepUploadFiles, StepUploadParticipants,
StepCraftEmail, StepCraftEmail,
StepOverview StepOverview
]; ];
@@ -78,9 +78,9 @@
{#if step == 0} {#if step == 0}
<StepConnectGoogle bind:authorized /> <StepConnectGoogle bind:authorized />
{:else if step == 1} {:else if step == 1}
<StepCreateEvent {event} /> <StepCreateEvent bind:event />
{:else if step == 2} {:else if step == 2}
<StepUploadFiles {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}

49
src/routes/private/events/creator/steps/StepCraftEmail.svelte
View File

@@ -1,14 +1,33 @@
<script lang="ts"> <script lang="ts">
export let email: { subject: string, body: string } = { subject: '', body: '' }; 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> </script>
<form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none"> {#if showForm}
<form on:submit={handleSubmit} class="flex 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> <h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
<label class="flex flex-col text-gray-700"> <label class="flex flex-col text-gray-700">
Subject Subject
<input <input
type="text" type="text"
bind:value={email.subject} 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" class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required required
/> />
@@ -16,10 +35,32 @@
<label class="flex flex-col text-gray-700"> <label class="flex flex-col text-gray-700">
Body Body
<textarea <textarea
bind:value={email.body} 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" 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" rows="6"
required required
></textarea> ></textarea>
</label> </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> </form>
{:else}
<button
class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
on:click={showEditForm}
aria-label="Edit email"
>
Edit email
</button>
<div class="rounded border-l-4 border-green-500 p-4 text-green-700 bg-green-100">
<ol>
<li><strong>{email.subject}</strong></li>
<li class="whitespace-pre-line">{email.body}</li>
</ol>
</div>
{/if}

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

@@ -1,71 +1,88 @@
<script lang="ts"> <script lang="ts">
import { enhance } from '$app/forms'; let { event = $bindable() } = $props();
let { event } = $props();
let loading = $state(false); let loading = $state(false);
let showForm = $derived(!event.name || !event.date);
function handleEnhance() { function handleSubmit(e: Event) {
e.preventDefault();
loading = true; loading = true;
const form = e.target as HTMLFormElement;
return async ({ update }) => { const formData = new FormData(form);
await update(); event = {
loading = false; name: formData.get('name'),
date: formData.get('date')
}; };
showForm = false;
loading = false;
}
function showEditForm() {
showForm = true;
} }
</script> </script>
{#if showForm}
<form method="POST" action="?/create" use:enhance={handleEnhance} class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none"> <form
<h2 class="text-2xl font-semibold text-center mb-4">Create Event</h2> on:submit={handleSubmit}
<label class="flex flex-col text-gray-700"> autocomplete="off"
class="flex 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 Name
<input <input
type="text" type="text"
name="name" name="name"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200" class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
required required
value={event.name ?? ''}
/> />
</label> </label>
<label class="flex flex-col text-gray-700"> <label class="mt-2 flex flex-col text-gray-700">
Date Date
<input <input
type="date" type="date"
name="date" name="date"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200" class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
required required
value={event.date ?? ''}
/> />
</label> </label>
<label class="flex flex-col text-gray-700">
Description
<textarea
name="description"
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="3"
required
></textarea>
</label>
<button <button
type="submit" type="submit"
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition" class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
> >
Submit Save
</button> </button>
</form> </form>
{#if Object.keys(event).length === 0}
<div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
{#if loading}
<strong>Loading...</strong>
{:else}
<strong>No event created yet...</strong>
{/if} {/if}
</div>
{:else} {#if !showForm}
<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4"> <button
class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
on:click={showEditForm}
aria-label="Edit event"
>
Edit the event
</button>
{/if}
{#if !showForm}
<div
class="rounded border-l-4 border-green-500 p-4 text-green-700"
class:bg-gray-100={loading}
class:bg-green-100={!loading}
>
{#if loading}
<strong class="text-gray-700">Loading...</strong>
{:else if Object.keys(event).length > 0}
<ol> <ol>
<li><strong>{event.name}</strong></li> <li><strong>{event.name}</strong></li>
<li>{event.date}</li> <li>{event.date}</li>
<li>{event.description}</li>
</ol> </ol>
{:else}
<strong class="text-gray-700">No event created yet...</strong>
{/if}
</div> </div>
{/if} {/if}

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

@@ -23,7 +23,6 @@
<ul class="space-y-1"> <ul class="space-y-1">
<li><span class="font-semibold">Name:</span> {event.name}</li> <li><span class="font-semibold">Name:</span> {event.name}</li>
<li><span class="font-semibold">Date:</span> {event.date}</li> <li><span class="font-semibold">Date:</span> {event.date}</li>
<li><span class="font-semibold">Description:</span> {event.description}</li>
</ul> </ul>
</div> </div>

65
src/routes/private/events/creator/steps/StepUploadFiles.svelte
View File

@@ -1,65 +0,0 @@
<script lang="ts">
import { enhance } from '$app/forms';
let { participants = [] } = $props();
let loading = $state(false);
function handleEnhance() {
loading = true;
return async ({ update }) => {
await update();
loading = false;
};
}
</script>
<form
method="POST"
action="?/participants"
use:enhance={handleEnhance}
enctype="multipart/form-data"
class="flex 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>
{#if participants.length === 0}
<div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
{#if loading}
<strong>Loading...</strong>
{:else}
<strong>No participants yet...</strong>
{/if}
</div>
{:else}
<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
<ul class="space-y-2">
{#each participants as p, i}
<li class="flex items-center justify-between border-b pb-1">
<div>
<div class="font-semibold">{p.name} {p.surname}</div>
<div class="font-mono text-xs text-gray-600">{p.email}</div>
</div>
</li>
{/each}
</ul>
</div>
{/if}

97
src/routes/private/events/creator/steps/StepUploadParticipants.svelte Normal file
View File

@@ -0,0 +1,97 @@
<script lang="ts">
import Papa from 'papaparse';
type Participant = { name: string; surname: string; email: string };
let { participants = $bindable() } = $props() as { participants: Participant[] };
let loading = $state(false);
let showForm = $derived(participants.length === 0);
async function handleSubmit(e: Event) {
e.preventDefault();
loading = true;
const form = e.target as HTMLFormElement;
const fileInput = form.elements.namedItem('participants') as HTMLInputElement;
const file = fileInput?.files?.[0];
if (!file) {
loading = false;
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();
}
participants = parsedRows.map((row: string[]) => ({
name: row[0],
surname: row[1],
email: row[2]
}));
showForm = false;
loading = false;
}
function showEditForm() {
showForm = true;
}
</script>
{#if showForm}
<form
on:submit={handleSubmit}
autocomplete="off"
enctype="multipart/form-data"
class="flex 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 rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
on:click={showEditForm}
aria-label="Edit participants"
>
Edit participants
</button>
{/if}
{#if !showForm}
<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
{#if loading}
<strong class="text-gray-700">Loading...</strong>
{:else if participants.length === 0}
<strong class="text-gray-700">No participants yet...</strong>
{:else}
<ul class="space-y-2">
{#each participants as p, i}
<li class="flex items-center justify-between border-b pb-1">
<div>
<div class="font-semibold">{p.name} {p.surname}</div>
<div class="font-mono text-xs text-gray-600">{p.email}</div>
</div>
</li>
{/each}
</ul>
{/if}
</div>
{/if}