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!

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

@@ -252,15 +252,25 @@
<!-- 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="space-y-3">
<div class="flex items-center">
<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div> <div class="h-4 w-1/4 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>
<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div> <div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
</div>
<div class="flex items-center">
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div> <div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
</div> </div>
</div>
</div>
{:else if event} {:else if event}
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div> <div>
<h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2> <h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2>
<div class="space-y-3"> <div class="space-y-3">
@@ -299,20 +309,6 @@
</div> </div>
</div> </div>
</div> </div>
<div>
<h3 class="mb-3 text-lg font-medium text-gray-900">Email Details</h3>
<div class="space-y-2">
<div>
<span class="text-sm font-medium text-gray-500">Subject:</span>
<p class="text-sm text-gray-900">{event.email_subject}</p>
</div>
<div>
<span class="text-sm font-medium text-gray-500">Body:</span>
<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
</div>
</div>
</div>
</div>
{:else if error} {:else if error}
<div class="py-8 text-center"> <div class="py-8 text-center">
<p class="text-red-600">{error}</p> <p class="text-red-600">{error}</p>
@@ -320,12 +316,53 @@
{/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>
{#if loading}
<div class="h-10 w-48 animate-pulse rounded bg-gray-200"></div>
{:else}
<GoogleAuthButton <GoogleAuthButton
size="small" size="small"
variant="secondary" variant="secondary"
@@ -337,6 +374,7 @@
error = 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>
{#if !loading}
<div class="text-sm text-gray-500"> <div class="text-sm text-gray-500">
{participants.filter(p => !p.email_sent).length} uncontacted participants {participants.filter(p => !p.email_sent).length} uncontacted participants
</div> </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">