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

Styling of creator finished

Browse Source
This commit is contained in:
Roman Krček
2025-06-24 13:52:04 +02:00
parent a42d102c4d
commit 2c498a62ee
7 changed files with 124 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -45,6 +45,26 @@
} }
</script> </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 --> <!-- Render the current step component -->
{#if step == 0} {#if step == 0}
<StepConnectGoogle /> <StepConnectGoogle />
@@ -57,23 +77,3 @@
{:else if step == 4} {:else if step == 4}
<StepOverview {new_event} {participants} {subject} {body} /> <StepOverview {new_event} {participants} {subject} {body} />
{/if} {/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 refreshToken = '';
let authorized = false; let authorized = false;
let loading = true;
let to = ''; let to = '';
let subject = ''; let subject = '';
@@ -22,9 +23,10 @@
} }
onMount(async () => { onMount(async () => {
console.log("on mount");
refreshToken = localStorage.getItem('gmail_refresh_token') ?? ''; refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
loading = true;
authorized = await validateToken(refreshToken); authorized = await validateToken(refreshToken);
loading = false;
}); });
/* ⇢ redirects straight to Google via server 302 */ /* ⇢ redirects straight to Google via server 302 */
@@ -59,11 +61,30 @@
} }
</script> </script>
{#if !authorized} <div class="mb-4 rounded border border-gray-300 bg-white p-4">
<section class="space-y-4"> {#if loading}
<p>You haven’t connected your Google account yet.</p> <div class="flex items-center space-x-2">
<button class="btn" on:click={connect}>Connect Google</button> <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">
</section> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
{:else} <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
Your connection is good, proceed to next step </svg>
{/if} <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"> <script lang="ts">
export let subject = ''; export let subject: string;
export let body = ''; export let body: string;
</script> </script>
<form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none"> <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'; import { enhance } from '$app/forms';
let { events, new_event } = $props(); let { events, new_event } = $props();
let loading = $state(false);
function handleEnhance() {
loading = true;
return async ({ update }) => {
await update();
loading = false;
};
}
</script> </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> <h2 class="text-2xl font-semibold text-center mb-4">Create Event</h2>
<label class="flex flex-col text-gray-700"> <label class="flex flex-col text-gray-700">
Name Name
@@ -43,7 +52,15 @@
</button> </button>
</form> </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"> <div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
<ol> <ol>
<li><strong>{new_event.name}</strong></li> <li><strong>{new_event.name}</strong></li>

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

@@ -3,7 +3,7 @@
</script> </script>
<!-- New Event Overview --> <!-- 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> <h2 class="text-xl font-bold mb-2">Event Overview</h2>
<ul class="space-y-1"> <ul class="space-y-1">
<li><span class="font-semibold">Name:</span> {new_event.name}</li> <li><span class="font-semibold">Name:</span> {new_event.name}</li>
@@ -13,23 +13,31 @@
</div> </div>
<!-- Email Overview --> <!-- 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> <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="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="whitespace-pre-line border rounded p-2 bg-gray-50 text-gray-700"><span class="font-semibold"></span>
<div class="mt-1">{body}</div> <div>{body}</div>
</div> </div>
</div> </div>
<!-- Participants Overview --> <!-- Participants Overview -->
<div class="bg-white border border-gray-300 rounded p-6"> <div class="bg-white border border-gray-300 rounded p-4">
<h2 class="text-xl font-bold mb-2">Participants ({participants.length})</h2> <h2 class="text-xl font-bold mb-2">Participants ({participants.length})</h2>
<ul class="space-y-1"> <ul class="space-y-1">
{#each participants as p} {#each participants.slice(0, 10) as p}
<li class="flex items-center gap-2 border-b last:border-b-0 pb-1"> <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-semibold">{p.name} {p.surname}</span>
<span class="font-mono text-xs text-gray-600">{p.email}</span> <span class="flex-1"></span>
</li> <span class="font-mono text-xs text-gray-600 text-right">{p.email}</span>
{/each} </li>
</ul> {/each}
</div> </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'; import { enhance } from '$app/forms';
let { participants = [] } = $props(); let { participants = [] } = $props();
let loading = $state(false);
function handleEnhance() {
loading = true;
return async ({ update }) => {
await update();
loading = false;
};
}
</script> </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"> <form
<h2 class="text-2xl font-semibold text-center mb-4">Upload Participants</h2> 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"> <label class="flex flex-col text-gray-700">
CSV File CSV File
<input <input
@@ -14,30 +29,34 @@
name="participants" name="participants"
id="participants" id="participants"
accept=".csv" 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 required
/> />
</label> </label>
<button <button
type="submit" 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 Submit
</button> </button>
</form> </form>
{#if participants.length === 0} {#if participants.length === 0}
<p class="text-gray-500 mt-4">No participants added yet.</p> <div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
{/if} {#if loading}
<strong>Loading...</strong>
{#if participants.length > 0} {:else}
<div class="rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700 mt-4"> <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"> <ul class="space-y-2">
{#each participants as p, i} {#each participants as p, i}
<li class="flex items-center justify-between border-b pb-1"> <li class="flex items-center justify-between border-b pb-1">
<div> <div>
<div class="font-semibold">{p.name} {p.surname}</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> </div>
</li> </li>
{/each} {/each}