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

Better email template display

Browse Source
This commit is contained in:
Roman Krček
2025-07-12 14:21:18 +02:00
parent 0e5d39b149
commit d6eee9c498
2 changed files with 125 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
.github/copilot-instructions.md vendored
View File

@@ -1,12 +1,11 @@
GitHub Copilot Instructions for This Repository GitHub Copilot Instructions for This Repository
If you have any questions, always ask me first. Basics:
- If you have any questions, always ask me first!
Use Svelte 5 runes exclusively - Use Svelte 5 runes exclusively
- Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc.
Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. - When doing client-side loading, always implement placeholders and loaders, so the UI remains responsive and layout shifts are minimized.
svelte.dev - Don't use placeholders and loaders for static data like heading etc.
svelte.dev
Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important! Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!

192
src/routes/private/events/event/view/+page.svelte
View File

@@ -252,64 +252,60 @@
<!-- Event Information --> <!-- Event Information -->
<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6"> <div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
{#if loading} {#if loading}
<!-- Loading placeholder --> <!-- Loading placeholder with header -->
<div class="space-y-4"> <div>
<div class="h-8 w-1/2 animate-pulse rounded bg-gray-200"></div> <h2 class="mb-4 text-2xl font-semibold text-gray-900">Event Information</h2>
<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div> <div class="space-y-3">
<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div> <div class="flex items-center">
<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div> <span class="w-20 text-sm font-medium text-gray-500">Date:</span>
</div> <div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
{:else if event} </div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2"> <div class="flex items-center">
<div> <span class="w-20 text-sm font-medium text-gray-500">Created:</span>
<h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2> <div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
<div class="space-y-3"> </div>
<div class="flex items-center"> <div class="flex items-center">
<span class="w-20 text-sm font-medium text-gray-500">Date:</span> <span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
<span class="text-sm text-gray-900">{formatDate(event.date)}</span> <div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
</div>
<div class="flex items-center">
<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
<span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
</div>
<div class="flex items-center">
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
<a
href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-1 h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
Open in Google Sheets
</a>
</div>
</div> </div>
</div> </div>
<div> </div>
<h3 class="mb-3 text-lg font-medium text-gray-900">Email Details</h3> {:else if event}
<div class="space-y-2"> <div>
<div> <h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2>
<span class="text-sm font-medium text-gray-500">Subject:</span> <div class="space-y-3">
<p class="text-sm text-gray-900">{event.email_subject}</p> <div class="flex items-center">
</div> <span class="w-20 text-sm font-medium text-gray-500">Date:</span>
<div> <span class="text-sm text-gray-900">{formatDate(event.date)}</span>
<span class="text-sm font-medium text-gray-500">Body:</span> </div>
<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p> <div class="flex items-center">
</div> <span class="w-20 text-sm font-medium text-gray-500">Created:</span>
<span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
</div>
<div class="flex items-center">
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
<a
href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-1 h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
Open in Google Sheets
</a>
</div> </div>
</div> </div>
</div> </div>
@@ -320,23 +316,65 @@
{/if} {/if}
</div> </div>
<!-- Email Template Section -->
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
<div class="mb-4">
<h2 class="text-xl font-semibold text-gray-900">Email Template</h2>
</div>
{#if loading}
<!-- Loading placeholder for email template content -->
<div class="space-y-4">
<div>
<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
</div>
<div>
<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
<div class="h-28 w-full animate-pulse rounded bg-gray-200"></div>
</div>
</div>
{:else if event}
<div class="space-y-4">
<div>
<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm text-gray-900">{event.email_subject}</p>
</div>
</div>
<div>
<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200 max-h-48 overflow-y-auto">
<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
</div>
</div>
</div>
{/if}
</div>
<!-- Google Authentication Section --> <!-- Google Authentication Section -->
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4"> <div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
<div class="mb-4 flex items-center justify-between"> <div class="mb-4 flex items-center justify-between">
<h2 class="text-xl font-semibold text-gray-900">Google Account</h2> <h2 class="text-xl font-semibold text-gray-900">Google Account</h2>
<p class="text-sm text-gray-500">Required for syncing participants and sending emails</p> <p class="text-sm text-gray-500">Required for syncing participants and sending emails</p>
</div> </div>
<GoogleAuthButton {#if loading}
size="small" <div class="h-10 w-48 animate-pulse rounded bg-gray-200"></div>
variant="secondary" {:else}
onSuccess={() => { <GoogleAuthButton
// Refresh the page or update UI state as needed size="small"
error = ''; variant="secondary"
}} onSuccess={() => {
onError={(errorMsg) => { // Refresh the page or update UI state as needed
error = errorMsg; error = '';
}} }}
/> onError={(errorMsg) => {
error = errorMsg;
}}
/>
{/if}
</div> </div>
<!-- Participants Section --> <!-- Participants Section -->
@@ -345,7 +383,7 @@
<h2 class="text-xl font-semibold text-gray-900">Participants</h2> <h2 class="text-xl font-semibold text-gray-900">Participants</h2>
<button <button
onclick={syncParticipants} onclick={syncParticipants}
disabled={syncingParticipants || !event} disabled={syncingParticipants || !event || loading}
class="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50" class="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
> >
{#if syncingParticipants} {#if syncingParticipants}
@@ -356,7 +394,7 @@
</button> </button>
</div> </div>
{#if participantsLoading} {#if participantsLoading || loading}
<!-- Loading placeholder for participants --> <!-- Loading placeholder for participants -->
<div class="space-y-3"> <div class="space-y-3">
{#each Array(5) as _} {#each Array(5) as _}
@@ -475,12 +513,20 @@
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4"> <div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
<div class="mb-4 flex items-center justify-between"> <div class="mb-4 flex items-center justify-between">
<h2 class="text-xl font-semibold text-gray-900">Send Emails</h2> <h2 class="text-xl font-semibold text-gray-900">Send Emails</h2>
<div class="text-sm text-gray-500"> {#if !loading}
{participants.filter(p => !p.email_sent).length} uncontacted participants <div class="text-sm text-gray-500">
</div> {participants.filter(p => !p.email_sent).length} uncontacted participants
</div>
{:else}
<div class="text-sm text-gray-500">
Loading participants...
</div>
{/if}
</div> </div>
{#if sendingEmails} {#if loading}
<div class="h-16 w-full animate-pulse rounded bg-gray-200"></div>
{:else if sendingEmails}
<div class="rounded-lg bg-blue-50 p-4 border border-blue-200"> <div class="rounded-lg bg-blue-50 p-4 border border-blue-200">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">