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

UX improvements #8

Merged
erman merged 8 commits from supabase into main 2025-06-24 19:15:46 +02:00
Conversation 0 Commits 8 Files Changed 14 +124 -59
7 changed files with 124 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2c498a62ee - Show all commits

2
src/routes/private/+layout.svelte
View File

@@ -11,6 +11,6 @@
</ul>
</nav>
<div class="container p-2 bg-white ">
<div class="container max-w-2xl mx-auto p-2 bg-white">
<slot />
</div>

40
src/routes/private/creator/+page.svelte
View File

@@ -45,6 +45,26 @@
}
</script>
<div class="flex items-center justify-between mb-4 mt-2">
<button
onclick={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
onclick={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>
<!-- Render the current step component -->
{#if step == 0}
<StepConnectGoogle />
@@ -57,23 +77,3 @@
{:else if step == 4}
<StepOverview {new_event} {participants} {subject} {body} />
{/if}
<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>

39
src/routes/private/creator/steps/StepConnectGoogle.svelte
View File

@@ -4,6 +4,7 @@
let refreshToken = '';
let authorized = false;
let loading = true;
let to = '';
let subject = '';
@@ -22,9 +23,10 @@
}
onMount(async () => {
console.log("on mount");
refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
loading = true;
authorized = await validateToken(refreshToken);
loading = false;
});
/* ⇢ redirects straight to Google via server 302 */
@@ -59,11 +61,30 @@
}
</script>
{#if !authorized}
<section class="space-y-4">
<p>You haven’t connected your Google account yet.</p>
<button class="btn" on:click={connect}>Connect Google</button>
</section>
{:else}
Your connection is good, proceed to next step
{/if}
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
{#if loading}
<div class="flex items-center space-x-2">
<svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
</svg>
<span>Checking Google connection...</span>
</div>
{:else}
{#if !authorized}
<section class="flex items-center justify-between w-full">
<p class="mr-4">You haven’t connected your Google account yet.</p>
<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" on:click={connect}>
Connect Google
</button>
</section>
{:else}
<div class="flex items-center space-x-2 text-green-600">
<svg class="h-5 w-5" 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>
<span>Your connection to Google is good, proceed to next step</span>
</div>
{/if}
{/if}
</div>

4
src/routes/private/creator/steps/StepCraftEmail.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
export let subject = '';
export let body = '';
export let subject: string;
export let body: string;
</script>
<form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">

21
src/routes/private/creator/steps/StepCreateEvent.svelte
View File

@@ -2,11 +2,20 @@
import { enhance } from '$app/forms';
let { events, new_event } = $props();
let loading = $state(false);
function handleEnhance() {
loading = true;
return async ({ update }) => {
await update();
loading = false;
};
}
</script>
<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">
<form method="POST" action="?/create" use:enhance={handleEnhance} 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
@@ -43,7 +52,15 @@
</button>
</form>
{#if Object.keys(new_event).length > 0}
{#if Object.keys(new_event).length === 0}
<div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
{#if loading}
<strong>Loading...</strong>
{:else}
<strong>No event created yet...</strong>
{/if}
</div>
{:else}
<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>

38
src/routes/private/creator/steps/StepOverview.svelte
View File

@@ -3,7 +3,7 @@
</script>
<!-- New Event Overview -->
<div class="bg-white border border-gray-300 rounded p-6 mb-6">
<div class="bg-white border border-gray-300 rounded p-4 mb-4">
<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>
@@ -13,23 +13,31 @@
</div>
<!-- Email Overview -->
<div class="bg-white border border-gray-300 rounded p-6 mb-6">
<div class="bg-white border border-gray-300 rounded p-4 mb-4">
<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 class="whitespace-pre-line border rounded p-2 bg-gray-50 text-gray-700"><span class="font-semibold"></span>
<div>{body}</div>
</div>
</div>
<!-- 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>
<div class="bg-white border border-gray-300 rounded p-4">
<h2 class="text-xl font-bold mb-2">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 last:border-b-0 pb-1">
<span class="font-semibold">{p.name} {p.surname}</span>
<span class="flex-1"></span>
<span class="font-mono text-xs text-gray-600 text-right">{p.email}</span>
</li>
{/each}
</ul>
<p class="text-sm text-gray-500 mt-2">Note: Only the first 10 participants are shown.</p>
</div>
<button
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded mt-4 transition-colors duration-200"
>
Generate QR codes and send
</button>

39
src/routes/private/creator/steps/StepUploadFiles.svelte
View File

@@ -2,11 +2,26 @@
import { enhance } from '$app/forms';
let { participants = [] } = $props();
let loading = $state(false);
function handleEnhance() {
loading = true;
return async ({ update }) => {
await update();
loading = false;
};
}
</script>
<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>
<form
method="POST"
action="?/participants"
use:enhance={handleEnhance}
enctype="multipart/form-data"
class="flex w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
>
<h2 class="mb-4 text-center text-2xl font-semibold">Upload Participants</h2>
<label class="flex flex-col text-gray-700">
CSV File
<input
@@ -14,30 +29,34 @@
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"
class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
required
/>
</label>
<button
type="submit"
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
>
Submit
</button>
</form>
{#if participants.length === 0}
<p class="text-gray-500 mt-4">No participants added yet.</p>
{/if}
{#if participants.length > 0}
<div class="rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700 mt-4">
<div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
{#if loading}
<strong>Loading...</strong>
{:else}
<strong>No participants yet...</strong>
{/if}
</div>
{:else}
<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
<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 class="font-mono text-xs text-gray-600">{p.email}</div>
</div>
</li>
{/each}