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

Styling of creator progress #7

Merged
erman merged 1 commits from supabase into main 2025-06-24 12:45:40 +02:00
Conversation 0 Commits 1 Files Changed 6 +164 -46
6 changed files with 164 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,10 +42,16 @@ export const actions = {
let csvText = await file.text();
const { data: parsedRows, errors } = Papa.parse(csvText, {
const { data: parsedRows, errors } = Papa.parse<string[]>(csvText, {
skipEmptyLines: true,
header: false
});
// Remove the first row (header)
if (parsedRows.length > 0) {
parsedRows.shift();
}
console.log('Parsed rows:', parsedRows);
// Map each row to an object with keys: name, surname, email
const participants = parsedRows.map((row: string[]) => ({
@@ -54,6 +60,8 @@ export const actions = {
email: row[2]
}));
console.log('Mapped participants:', participants);
return {
participants,
}

34
src/routes/private/creator/+page.svelte
View File

@@ -9,6 +9,8 @@
let new_event = $state({});
let participants = $state([]);
let subject = $state('');
let body = $state('');
// Update events and participants from the form data
$effect( () => {
@@ -51,17 +53,27 @@
{:else if step == 2}
<StepUploadFiles {participants} />
{:else if step == 3}
<StepCraftEmail />
<StepCraftEmail bind:subject bind:body />
{:else if step == 4}
<StepOverview {new_event} {participants} />
<StepOverview {new_event} {participants} {subject} {body} />
{/if}
<br />
{step}
<!-- Optional navigation buttons -->
<button onclick={prevStep} disabled={step === 0}>Previous</button>
<button onclick={nextStep} disabled={step === steps.length - 1}>Next</button>
<div class="flex items-center justify-between mt-4">
<button
on:click={prevStep}
disabled={step === 0}
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
on:click={nextStep}
disabled={step === steps.length - 1}
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>

27
src/routes/private/creator/steps/StepCraftEmail.svelte
View File

@@ -1 +1,26 @@
emaillk
<script lang="ts">
export let subject = '';
export let body = '';
</script>
<form 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>
<label class="flex flex-col text-gray-700">
Subject
<input
type="text"
bind:value={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
bind:value={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>
</form>

51
src/routes/private/creator/steps/StepCreateEvent.svelte
View File

@@ -5,13 +5,50 @@
</script>
<p class="bg-grey-200">{JSON.stringify(events)}</p>
<form method="POST" action="?/create" use:enhance>
<input type="text" name="name" />
<input type="date" name="date" />
<textarea name="description"></textarea>
<button type="submit">Submit</button>
<form method="POST" action="?/create" use:enhance 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">Create Event</h2>
<label class="flex flex-col text-gray-700">
Name
<input
type="text"
name="name"
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">
Date
<input
type="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"
required
/>
</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
type="submit"
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
Submit
</button>
</form>
<p class="bg-grey-200">{JSON.stringify(new_event)}</p>
{#if Object.keys(new_event).length > 0}
<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
<ol>
<li><strong>{new_event.name}</strong></li>
<li>{new_event.date}</li>
<li>{new_event.description}</li>
</ol>
</div>
{/if}

36
src/routes/private/creator/steps/StepOverview.svelte
View File

@@ -1,11 +1,35 @@
<script lang="ts">
let { new_event, participants } = $props();
let { new_event, participants, subject, body } = $props();
</script>
<p>New event:</p>
{JSON.stringify(new_event)}
<!-- New Event Overview -->
<div class="bg-white border border-gray-300 rounded p-6 mb-6">
<h2 class="text-xl font-bold mb-2">Event Overview</h2>
<ul class="space-y-1">
<li><span class="font-semibold">Name:</span> {new_event.name}</li>
<li><span class="font-semibold">Date:</span> {new_event.date}</li>
<li><span class="font-semibold">Description:</span> {new_event.description}</li>
</ul>
</div>
<!-- Email Overview -->
<div class="bg-white border border-gray-300 rounded p-6 mb-6">
<h2 class="text-xl font-bold mb-2">Email Preview</h2>
<div class="mb-2"><span class="font-semibold">Subject:</span> {subject}</div>
<div class="whitespace-pre-line border rounded p-2 bg-gray-50 text-gray-700"><span class="font-semibold">Body:</span>
<div class="mt-1">{body}</div>
</div>
</div>
<br />
<p>Participants</p>
{JSON.stringify(participants)}
<!-- Participants Overview -->
<div class="bg-white border border-gray-300 rounded p-6">
<h2 class="text-xl font-bold mb-2">Participants ({participants.length})</h2>
<ul class="space-y-1">
{#each participants as p}
<li class="flex items-center gap-2 border-b last:border-b-0 pb-1">
<span class="font-semibold">{p.name} {p.surname}</span>
<span class="font-mono text-xs text-gray-600">{p.email}</span>
</li>
{/each}
</ul>
</div>

44
src/routes/private/creator/steps/StepUploadFiles.svelte
View File

@@ -3,32 +3,44 @@
let { participants = [] } = $props();
function removeParticipant(index: number) {
participants = participants.slice(0, index).concat(participants.slice(index + 1));
}
</script>
<form method="POST" action="?/participants" use:enhance enctype="multipart/form-data">
<input type="file" name="participants" id="participants" accept=".csv" required />
<button type="submit"> Submit </button>
<form method="POST" action="?/participants" use:enhance enctype="multipart/form-data" 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">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 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<button
type="submit"
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
Submit
</button>
</form>
{JSON.stringify(participants)}
{#if participants.length === 0}
<p class="text-gray-500">No participants added yet.</p>
<p class="text-gray-500 mt-4">No participants added yet.</p>
{/if}
{#if participants.length > 0}
<ul class="mt-4 space-y-2">
<div class="rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700 mt-4">
<ul class="space-y-2">
{#each participants as p, i}
<li class="flex items-center gap-2 border-b pb-1">
<span>{p.name} {p.surname} ({p.email})</span>
<button class="ml-auto text-red-600 hover:underline" type="button" onclick={() => removeParticipant(i)}>
Remove
</button>
<li class="flex items-center justify-between border-b pb-1">
<div>
<div class="font-semibold">{p.name} {p.surname}</div>
<div class="text-xs font-mono text-gray-600">{p.email}</div>
</div>
</li>
{/each}
</ul>
</div>
{/if}