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

Styling of creator progress

Browse Source
This commit is contained in:
Roman Krček
2025-06-24 12:45:05 +02:00
parent 0fdf77a8c3
commit a42d102c4d
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(); let csvText = await file.text();
const { data: parsedRows, errors } = Papa.parse(csvText, { const { data: parsedRows, errors } = Papa.parse<string[]>(csvText, {
skipEmptyLines: true, skipEmptyLines: true,
header: false 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 // Map each row to an object with keys: name, surname, email
const participants = parsedRows.map((row: string[]) => ({ const participants = parsedRows.map((row: string[]) => ({
@@ -54,6 +60,8 @@ export const actions = {
email: row[2] email: row[2]
})); }));
console.log('Mapped participants:', participants);
return { return {
participants, participants,
} }

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

@@ -9,6 +9,8 @@
let new_event = $state({}); let new_event = $state({});
let participants = $state([]); let participants = $state([]);
let subject = $state('');
let body = $state('');
// Update events and participants from the form data // Update events and participants from the form data
$effect( () => { $effect( () => {
@@ -51,17 +53,27 @@
{:else if step == 2} {:else if step == 2}
<StepUploadFiles {participants} /> <StepUploadFiles {participants} />
{:else if step == 3} {:else if step == 3}
<StepCraftEmail /> <StepCraftEmail bind:subject bind:body />
{:else if step == 4} {:else if step == 4}
<StepOverview {new_event} {participants} /> <StepOverview {new_event} {participants} {subject} {body} />
{/if} {/if}
<br /> <div class="flex items-center justify-between mt-4">
<button
{step} on:click={prevStep}
disabled={step === 0}
<!-- Optional navigation buttons --> 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"
<button onclick={prevStep} disabled={step === 0}>Previous</button> >
<button onclick={nextStep} disabled={step === steps.length - 1}>Next</button> 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> </script>
<p class="bg-grey-200">{JSON.stringify(events)}</p>
<form method="POST" action="?/create" use:enhance> <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">
<input type="text" name="name" /> <h2 class="text-2xl font-semibold text-center mb-4">Create Event</h2>
<input type="date" name="date" /> <label class="flex flex-col text-gray-700">
<textarea name="description"></textarea> Name
<button type="submit">Submit</button> <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> </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"> <script lang="ts">
let { new_event, participants } = $props(); let { new_event, participants, subject, body } = $props();
</script> </script>
<p>New event:</p> <!-- New Event Overview -->
{JSON.stringify(new_event)} <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 /> <!-- Participants Overview -->
<p>Participants</p> <div class="bg-white border border-gray-300 rounded p-6">
{JSON.stringify(participants)} <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(); let { participants = [] } = $props();
function removeParticipant(index: number) {
participants = participants.slice(0, index).concat(participants.slice(index + 1));
}
</script> </script>
<form method="POST" action="?/participants" use:enhance enctype="multipart/form-data"> <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">
<input type="file" name="participants" id="participants" accept=".csv" required /> <h2 class="text-2xl font-semibold text-center mb-4">Upload Participants</h2>
<button type="submit"> Submit </button> <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> </form>
{JSON.stringify(participants)}
{#if participants.length === 0} {#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}
{#if participants.length > 0} {#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} {#each participants as p, i}
<li class="flex items-center gap-2 border-b pb-1"> <li class="flex items-center justify-between border-b pb-1">
<span>{p.name} {p.surname} ({p.email})</span> <div>
<button class="ml-auto text-red-600 hover:underline" type="button" onclick={() => removeParticipant(i)}> <div class="font-semibold">{p.name} {p.surname}</div>
Remove <div class="text-xs font-mono text-gray-600">{p.email}</div>
</button> </div>
</li> </li>
{/each} {/each}
</ul> </ul>
</div>
{/if} {/if}