development #13

Merged
erman merged 9 commits from development into main 2025-06-29 17:17:21 +02:00
3 changed files with 106 additions and 49 deletions
Showing only changes of commit cf854f1242 - Show all commits

View File

@@ -57,10 +57,13 @@
>
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 class="rounded border border-gray-300 bg-white p-4">
<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
<div class="mb-2">
<span class="block font-semibold">{email.subject}</span>
</div>
<div class="whitespace-pre-line text-gray-800">
{email.body}
</div>
</div>
{/if}

View File

@@ -66,21 +66,13 @@
>
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>
<li><strong>{event.name}</strong></li>
<li>{event.date}</li>
</ol>
<div class="rounded border border-gray-300 bg-white p-4">
<h2 class="mb-2 text-xl font-bold">Event Preview</h2>
{#if Object.keys(event).length > 0}
<ul>
<li><span class="font-semibold">{event.name}</span></li>
<li class="text-gray-700">{event.date}</li>
</ul>
{:else}
<strong class="text-gray-700">No event created yet...</strong>
{/if}

View File

@@ -2,19 +2,20 @@
import Papa from 'papaparse';
let { participants = $bindable() } = $props();
let loading = $state(false);
let showForm = $derived(participants.length === 0);
let errors = $state([]);
function isValidEmail(email: string): boolean {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
async function handleSubmit(e: Event) {
e.preventDefault();
loading = true;
errors = [];
const form = e.target as HTMLFormElement;
const fileInput = form.elements.namedItem('participants') as HTMLInputElement;
const file = fileInput?.files?.[0];
if (!file) {
loading = false;
return;
}
if (!file) return;
const csvText = await file.text();
const { data: parsedRows } = Papa.parse<string[]>(csvText, {
skipEmptyLines: true,
@@ -24,13 +25,36 @@
if (parsedRows.length > 0) {
parsedRows.shift();
}
participants = parsedRows.map((row: string[]) => ({
name: row[0],
surname: row[1],
email: row[2]
}));
const validated = [];
parsedRows.forEach((row, idx) => {
if (!row || row.length < 3) {
errors.push(`Row ${idx + 2} is missing columns.`);
return;
}
const [name, surname, email] = row;
if (!name || !surname || !email) {
errors.push(`Row ${idx + 2} has missing values.`);
return;
}
validated.push({
name,
surname,
email,
email_valid: isValidEmail(email)
});
});
if (errors.length > 0) {
return; // Do not proceed if there are errors
}
if (validated.length === 0) {
participants = [];
return;
}
participants = validated.sort((a, b) => {
if (a.email_valid === b.email_valid) return 0;
return a.email_valid ? 1 : -1;
});
showForm = false;
loading = false;
}
function showEditForm() {
@@ -39,6 +63,15 @@
</script>
{#if showForm}
{#if errors.length > 0}
<div class="mb-4 rounded border border-red-400 bg-red-50 p-4 text-red-700">
<ul class="list-disc ml-4">
{#each errors as err}
<li>{err}</li>
{/each}
</ul>
</div>
{/if}
<form
onsubmit={handleSubmit}
autocomplete="off"
@@ -75,22 +108,51 @@
{/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 class="mt-4 rounded border border-gray-300 bg-white p-4">
<div class="mb-2 flex items-center justify-between">
<h2 class="text-xl font-bold">Participants ({participants.length})</h2>
{#if participants.length > 0}
{#if participants.some((p) => !p.email_valid)}
<span class="text-xs text-gray-500">Some emails appear invalid</span>
{:else}
<span class="text-xs text-gray-500">All emails appear valid</span>
{/if}
{/if}
</div>
<ul class="space-y-1">
{#each participants as p}
<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
{#if p.email_valid}
<svg
title="Valid email"
class="mr-2 inline h-4 w-4 text-green-600"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
{:else}
<svg
title="Invalid email"
class="mr-2 inline h-4 w-4 text-red-600"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
</svg>
{/if}
<span class="font-semibold">{p.name} {p.surname}</span>
<span class="flex-1"></span>
<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
</li>
{/each}
</ul>
</div>
{/if}