78 lines
2.6 KiB
Svelte
78 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
|
|
let { data, event, participants, email, stepConditions } = $props();
|
|
|
|
function redirectToFinish() {
|
|
// Generate a random variable name
|
|
const varName = 'event_' + Math.random().toString(36).substr(2, 9);
|
|
// Save the data to sessionStorage
|
|
sessionStorage.setItem(
|
|
varName,
|
|
JSON.stringify({ event, participants, email })
|
|
);
|
|
// Redirect with the variable name as a query parameter
|
|
goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- New Event Overview -->
|
|
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
|
|
<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
|
|
<ul class="space-y-1">
|
|
<li><span class="font-semibold">Name:</span> {event.name}</li>
|
|
<li><span class="font-semibold">Date:</span> {event.date}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Email Overview -->
|
|
<div class="mb-4 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="font-semibold">Subject:</span> {email.subject}</div>
|
|
<div class="rounded border bg-gray-50 p-2 whitespace-pre-line text-gray-700">
|
|
<span class="font-semibold"></span>
|
|
<div>{email.body}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Participants Overview -->
|
|
<div class="rounded border border-gray-300 bg-white p-4">
|
|
<h2 class="mb-2 text-xl font-bold">Participants ({participants.length})</h2>
|
|
<ul class="space-y-1">
|
|
{#each participants.slice(0, 10) as p}
|
|
<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
|
|
<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>
|
|
<p class="mt-2 text-sm text-gray-500">Note: Only the first 10 participants are shown.</p>
|
|
</div>
|
|
|
|
<button
|
|
onclick={redirectToFinish}
|
|
class="mt-4 w-full rounded bg-blue-600 px-4 py-3 font-bold text-white
|
|
transition-colors duration-200 hover:bg-blue-700
|
|
disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
|
|
disabled={!stepConditions.every(Boolean)}
|
|
>
|
|
Generate QR codes and send
|
|
</button>
|
|
|
|
<div class="mt-2 space-y-1">
|
|
{#if !stepConditions[0]}
|
|
<p class="text-sm text-red-500">Please provide an event name before proceeding.</p>
|
|
{/if}
|
|
{#if !stepConditions[1]}
|
|
<p class="text-sm text-red-500">Please add at least one participant before proceeding.</p>
|
|
{/if}
|
|
{#if !stepConditions[2]}
|
|
<p class="text-sm text-red-500">Please provide an email subject before proceeding.</p>
|
|
{/if}
|
|
{#if !stepConditions[3]}
|
|
<p class="text-sm text-red-500">Please provide an email body before proceeding.</p>
|
|
{/if}
|
|
</div>
|