From a42d102c4d1a01a8b674853a610dd46844706f81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Tue, 24 Jun 2025 12:45:05 +0200
Subject: [PATCH] Styling of creator progress

---
 src/routes/private/creator/+page.server.ts    | 10 +++-
 src/routes/private/creator/+page.svelte       | 34 ++++++++----
 .../creator/steps/StepCraftEmail.svelte       | 27 +++++++++-
 .../creator/steps/StepCreateEvent.svelte      | 51 +++++++++++++++---
 .../private/creator/steps/StepOverview.svelte | 36 ++++++++++---
 .../creator/steps/StepUploadFiles.svelte      | 52 ++++++++++++-------
 6 files changed, 164 insertions(+), 46 deletions(-)

diff --git a/src/routes/private/creator/+page.server.ts b/src/routes/private/creator/+page.server.ts
index f324d97..6c5b7c0 100644
--- a/src/routes/private/creator/+page.server.ts
+++ b/src/routes/private/creator/+page.server.ts
@@ -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,
         }
diff --git a/src/routes/private/creator/+page.svelte b/src/routes/private/creator/+page.svelte
index 83681d0..af11e51 100644
--- a/src/routes/private/creator/+page.svelte
+++ b/src/routes/private/creator/+page.svelte
@@ -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>
diff --git a/src/routes/private/creator/steps/StepCraftEmail.svelte b/src/routes/private/creator/steps/StepCraftEmail.svelte
index 6154991..6e7956d 100644
--- a/src/routes/private/creator/steps/StepCraftEmail.svelte
+++ b/src/routes/private/creator/steps/StepCraftEmail.svelte
@@ -1 +1,26 @@
-emaillk
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/src/routes/private/creator/steps/StepCreateEvent.svelte b/src/routes/private/creator/steps/StepCreateEvent.svelte
index 54ec5d9..49d22e2 100644
--- a/src/routes/private/creator/steps/StepCreateEvent.svelte
+++ b/src/routes/private/creator/steps/StepCreateEvent.svelte
@@ -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>
\ No newline at end of file
+{#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}
\ No newline at end of file
diff --git a/src/routes/private/creator/steps/StepOverview.svelte b/src/routes/private/creator/steps/StepOverview.svelte
index f961fb8..a0d5289 100644
--- a/src/routes/private/creator/steps/StepOverview.svelte
+++ b/src/routes/private/creator/steps/StepOverview.svelte
@@ -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)}
\ No newline at end of file
+<!-- 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>
\ No newline at end of file
diff --git a/src/routes/private/creator/steps/StepUploadFiles.svelte b/src/routes/private/creator/steps/StepUploadFiles.svelte
index 1858ed3..307fdec 100644
--- a/src/routes/private/creator/steps/StepUploadFiles.svelte
+++ b/src/routes/private/creator/steps/StepUploadFiles.svelte
@@ -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">
-		{#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>
-		{/each}
-	</ul>
+	<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 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}