Compare commits
8 Commits
c635955240
...
2d7feea623
| Author | SHA1 | Date | |
|---|---|---|---|
|
2d7feea623 | ||
|
|
a7262f9815 | ||
|
|
10badafb63 | ||
|
|
9fb76cbc8b | ||
|
|
9aa5b66b54 | ||
|
|
fe688de59c | ||
|
|
4d8e65f280 | ||
|
|
e856ed0304 |
88
.github/copilot-instructions.md
vendored
Normal file
88
.github/copilot-instructions.md
vendored
Normal file
@@ -0,0 +1,88 @@
|
||||
GitHub Copilot Instructions for This Repository
|
||||
Use Svelte 5 runes exclusively
|
||||
|
||||
Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc.
|
||||
svelte.dev
|
||||
svelte.dev
|
||||
|
||||
Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!
|
||||
|
||||
Enforce a clean component structure
|
||||
|
||||
<script> comes first, followed by markup and then an optional <style> (rarely needed—prefer Tailwind).
|
||||
|
||||
Export component props with export let … (still valid in Svelte 5).
|
||||
|
||||
Keep each component focused on one visual/behavioural concern; split larger UIs into children.
|
||||
|
||||
Tailwind-only styling conventions
|
||||
|
||||
Base container: rounded-lg border border-gray-300 (or rounded-md on small items).
|
||||
|
||||
Absolutely no shadow-* classes.
|
||||
|
||||
Use p-4 or p-6 for internal padding, and gap-* utilities (not margin hacks) for spacing between children.
|
||||
|
||||
Prefer neutral greys (gray-50‒gray-800) and a single accent palette defined in tailwind.config.js.
|
||||
|
||||
HTML & accessibility
|
||||
|
||||
Generate semantic elements (<button>, <nav>, <main>, <section>, <label>, etc.).
|
||||
|
||||
Every interactive element must have an accessible name (aria-label, visible text, or title).
|
||||
|
||||
Do not generate tabindex gymnastics; rely on natural DOM order.
|
||||
|
||||
Type safety & tooling
|
||||
|
||||
Default to <script lang="ts"> unless the file is explicitly plain JS.
|
||||
|
||||
Always import types from @types/svelte or svelte where needed.
|
||||
|
||||
File / folder conventions
|
||||
|
||||
Component names are PascalCase.svelte.
|
||||
|
||||
Collocate tests as ComponentName.test.ts beside the component.
|
||||
|
||||
Put shared util functions in src/lib.
|
||||
|
||||
Example pattern (reference only)
|
||||
|
||||
svelte
|
||||
Copy
|
||||
Edit
|
||||
<!-- copilot: follow the repo instructions above -->
|
||||
<script lang="ts">
|
||||
let count = $state(0);
|
||||
let doubled = $derived(count * 2);
|
||||
$effect(() => console.log(`count is ${count}`));
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg border border-gray-300 p-4 flex flex-col gap-4">
|
||||
<button
|
||||
class="rounded-md px-4 py-2 bg-blue-600 text-white"
|
||||
onclick={() => count++}
|
||||
aria-label="Increment counter"
|
||||
>
|
||||
{count}
|
||||
</button>
|
||||
|
||||
<p>{doubled}</p>
|
||||
</div>
|
||||
What not to do
|
||||
|
||||
No inline style="" attributes.
|
||||
|
||||
No external CSS files unless Tailwind cannot express the rule.
|
||||
|
||||
No class names that imply design debt (.box, .wrapper, .container-1, etc.).
|
||||
|
||||
Avoid non-reactive variables; if a value affects the UI, use a rune.
|
||||
|
||||
NEVER $: label syntax; use $state(), $derived(), and $effect().
|
||||
|
||||
If you want to use supabse client in the browser, it is stored in the data
|
||||
variable obtained from let { data } = $props();
|
||||
|
||||
Using `on:click` to listen to the click event is deprecated. Use the event attribute `onclick` instead
|
||||
@@ -2,7 +2,10 @@ import { google } from 'googleapis';
|
||||
import { env } from '$env/dynamic/private';
|
||||
import quotedPrintable from 'quoted-printable'; // tiny, zero-dep package
|
||||
|
||||
export const scopes = ['https://www.googleapis.com/auth/gmail.send'];
|
||||
export const scopes = [
|
||||
'https://www.googleapis.com/auth/gmail.send',
|
||||
'https://www.googleapis.com/auth/userinfo.email'
|
||||
];
|
||||
|
||||
export function getOAuthClient() {
|
||||
return new google.auth.OAuth2(
|
||||
@@ -55,17 +58,19 @@ export async function sendGmail(
|
||||
<div style="height: 4px; width: 20%; background: #2e3192;"></div>
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #999; padding-top: 0px; margin-top: 10px; line-height: 1.5; ">
|
||||
<p>This email has been generated with the help of *insert software name*</p>
|
||||
<p>This email has been generated with the help of ScanWave</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
|
||||
const boundary = 'BOUNDARY';
|
||||
const nl = '\r\n'; // RFC-5322 line ending
|
||||
|
||||
const htmlQP = quotedPrintable.encode(message_html);
|
||||
// Convert HTML to a Buffer, then to latin1 string for quotedPrintable.encode
|
||||
const htmlBuffer = Buffer.from(message_html, 'utf8');
|
||||
const htmlLatin1 = htmlBuffer.toString('latin1');
|
||||
const htmlQP = quotedPrintable.encode(htmlLatin1);
|
||||
const qrLines = qr_code.replace(/.{1,76}/g, '$&' + nl);
|
||||
|
||||
const rawParts = [
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export async function load({ locals, url }) {
|
||||
export async function load({ data, url }) {
|
||||
const event_id = url.searchParams.get('id');
|
||||
const { data: event_data, error: eventError } = await locals.supabase
|
||||
.from('events')
|
||||
@@ -23,7 +23,7 @@ export const GET: RequestHandler = async ({ url }) => {
|
||||
const html = `
|
||||
<script>
|
||||
localStorage.setItem('gmail_refresh_token', ${JSON.stringify(refreshToken)});
|
||||
location = '/private/creator';
|
||||
location = '/private/events/creator';
|
||||
</script>`;
|
||||
return new Response(html, { headers: { 'Content-Type': 'text/html' } });
|
||||
} catch (err) {
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
import type { Actions } from './$types';
|
||||
import { error as kitError } from '@sveltejs/kit';
|
||||
import Papa from 'papaparse';
|
||||
import { fail } from '@sveltejs/kit';
|
||||
|
||||
export async function load({ locals }) {
|
||||
const { data: events, error } = await locals.supabase
|
||||
.from('events')
|
||||
.select('*')
|
||||
.order('date', { ascending: true });
|
||||
|
||||
if (error) {
|
||||
console.error('❌ supabase error:', error);
|
||||
// optional: throw to render SvelteKit error page
|
||||
throw kitError(500, 'Could not load events');
|
||||
}
|
||||
|
||||
return { events };
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
create: async (event) => {
|
||||
const formData = await event.request.formData();
|
||||
let { data: new_event, error } = await event.locals.supabase.rpc("create_event",
|
||||
{
|
||||
"p_name": formData.get('name'),
|
||||
"p_date": formData.get('date'),
|
||||
"p_description": formData.get('description'),
|
||||
});
|
||||
return {
|
||||
new_event,
|
||||
error
|
||||
}
|
||||
},
|
||||
participants: async (event) => {
|
||||
const formData = await event.request.formData();
|
||||
const file = formData.get('participants') as File;
|
||||
|
||||
let csvText = await file.text();
|
||||
|
||||
const { data: parsedRows, errors } = Papa.parse<string[]>(csvText, {
|
||||
skipEmptyLines: true,
|
||||
header: false
|
||||
});
|
||||
// Remove the first row (header)
|
||||
if (parsedRows.length > 0) {
|
||||
parsedRows.shift();
|
||||
}
|
||||
|
||||
// Map each row to an object with keys: name, surname, email
|
||||
const participants = parsedRows.map((row: string[]) => ({
|
||||
name: row[0],
|
||||
surname: row[1],
|
||||
email: row[2]
|
||||
}));
|
||||
|
||||
return {
|
||||
participants,
|
||||
}
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -1,125 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { onMount } from 'svelte';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
let { data } = $props();
|
||||
let session_storage_id = page.url.searchParams.get('data');
|
||||
let all_data = {};
|
||||
|
||||
const StepStatus = {
|
||||
Loading: 'loading',
|
||||
Waiting: 'waiting',
|
||||
Success: 'success',
|
||||
Failure: 'failure'
|
||||
} as const;
|
||||
type StepStatus = (typeof StepStatus)[keyof typeof StepStatus];
|
||||
let supabase_status: StepStatus = $state(StepStatus.Waiting);
|
||||
let email_status: StepStatus = $state(StepStatus.Waiting);
|
||||
|
||||
onMount(async () => {
|
||||
if (!session_storage_id) {
|
||||
console.error('No session storage ID provided in the URL');
|
||||
return;
|
||||
}
|
||||
all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}');
|
||||
|
||||
supabase_status = StepStatus.Loading;
|
||||
try {
|
||||
const { result } = await insert_data_supabase(all_data.participants, all_data.event);
|
||||
supabase_status = StepStatus.Success;
|
||||
// Now send emails
|
||||
email_status = StepStatus.Loading;
|
||||
let allSuccess = true;
|
||||
for (const obj of result) {
|
||||
let qr_code = await dataToBase64(obj.id);
|
||||
const payload = {
|
||||
action: 'send',
|
||||
to: obj.email,
|
||||
subject: all_data.email.subject,
|
||||
text: all_data.email.body,
|
||||
qr_code: qr_code,
|
||||
refreshToken: localStorage.getItem('gmail_refresh_token')
|
||||
};
|
||||
const res = await fetch('/private/api/gmail', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
if (!res.ok) {
|
||||
allSuccess = false;
|
||||
console.error('Failed to send email to', obj.email, await res.text());
|
||||
}
|
||||
}
|
||||
email_status = allSuccess ? StepStatus.Success : StepStatus.Failure;
|
||||
} catch (e) {
|
||||
supabase_status = StepStatus.Failure;
|
||||
email_status = StepStatus.Failure;
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
|
||||
async function dataToBase64(data: string): Promise<string> {
|
||||
try {
|
||||
const url = await QRCode.toDataURL(data);
|
||||
const parts = url.split(',');
|
||||
const base64 = parts[1];
|
||||
return base64;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
async function insert_data_supabase(participants, event) {
|
||||
const names = participants.map((p) => p.name);
|
||||
const surnames = participants.map((p) => p.surname);
|
||||
const emails = participants.map((p) => p.email);
|
||||
const {
|
||||
data: { user },
|
||||
error: authError
|
||||
} = await data.supabase.auth.getUser();
|
||||
const { data: user_profile, error: profileError } = await data.supabase
|
||||
.from('profiles')
|
||||
.select('*, section:sections (id, name)')
|
||||
.eq('id', user?.id)
|
||||
.single();
|
||||
const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
|
||||
p_section_id: user_profile?.section.id,
|
||||
p_event_id: event.id,
|
||||
p_names: names,
|
||||
p_surnames: surnames,
|
||||
p_emails: emails
|
||||
});
|
||||
|
||||
return { result };
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Creating Database Entries -->
|
||||
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">Creating database entries</h2>
|
||||
{#if supabase_status === StepStatus.Waiting}
|
||||
<span class="text-black-600">Waiting...</span>
|
||||
{:else if supabase_status === StepStatus.Loading}
|
||||
<span class="text-black-600">Creating entries...</span>
|
||||
{:else if supabase_status === StepStatus.Success}
|
||||
<span class="text-green-600">Database entries created successfully.</span>
|
||||
{:else if supabase_status === StepStatus.Failure}
|
||||
<span class="text-red-600">Failed to create database entries.</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Sending Emails -->
|
||||
<div class="rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">Sending emails</h2>
|
||||
{#if email_status === StepStatus.Waiting}
|
||||
<span class="text-black-600">Waiting...</span>
|
||||
{:else if email_status === StepStatus.Loading}
|
||||
<span class="text-black-600">Sending emails...</span>
|
||||
{:else if email_status === StepStatus.Success}
|
||||
<span class="text-green-600">Emails sent successfully.</span>
|
||||
{:else if email_status === StepStatus.Failure}
|
||||
<span class="text-red-600">Failed to send emails.</span>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,25 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let email: { subject: string, body: string } = { subject: '', body: '' };
|
||||
</script>
|
||||
|
||||
<form 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">Craft Email</h2>
|
||||
<label class="flex flex-col text-gray-700">
|
||||
Subject
|
||||
<input
|
||||
type="text"
|
||||
bind:value={email.subject}
|
||||
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="flex flex-col text-gray-700">
|
||||
Body
|
||||
<textarea
|
||||
bind:value={email.body}
|
||||
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
|
||||
rows="6"
|
||||
required
|
||||
></textarea>
|
||||
</label>
|
||||
</form>
|
||||
@@ -1,71 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let { 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={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
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="flex flex-col text-gray-700">
|
||||
Date
|
||||
<input
|
||||
type="date"
|
||||
name="date"
|
||||
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="flex flex-col text-gray-700">
|
||||
Description
|
||||
<textarea
|
||||
name="description"
|
||||
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
|
||||
rows="3"
|
||||
required
|
||||
></textarea>
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{#if Object.keys(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>{event.name}</strong></li>
|
||||
<li>{event.date}</li>
|
||||
<li>{event.description}</li>
|
||||
</ol>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,59 +0,0 @@
|
||||
<script lang="ts">
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
const StepState = {
|
||||
Waiting: 'waiting',
|
||||
Processing: 'processing',
|
||||
FinishedSuccess: 'finished_success',
|
||||
FinishedFail: 'finished_fail'
|
||||
};
|
||||
|
||||
let qr_codes_state = $state(StepState.Processing);
|
||||
let emails_state = $state(StepState.FinishedSuccess);
|
||||
|
||||
// Inserts all participants into the database and returns their assigned IDs.
|
||||
async function insert_data_supabase(data, participants, new_event) {
|
||||
const names = participants.map((p) => p.name);
|
||||
const surnames = participants.map((p) => p.surname);
|
||||
const emails = participants.map((p) => p.email);
|
||||
const {
|
||||
data: { user },
|
||||
error: authError
|
||||
} = await data.supabase.auth.getUser();
|
||||
const { data: user_profile, error: profileError } = await data.supabase
|
||||
.from('profiles')
|
||||
.select('*, section:sections (id, name)')
|
||||
.eq('id', user?.id)
|
||||
.single();
|
||||
const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
|
||||
p_section_id: user_profile?.section.id,
|
||||
p_event_id: new_event.id,
|
||||
p_names: names,
|
||||
p_surnames: surnames,
|
||||
p_emails: emails
|
||||
});
|
||||
|
||||
return { result };
|
||||
}
|
||||
|
||||
// Creates a base64 interpretation of the ticket ID
|
||||
function createB64QRCode(data) {
|
||||
QRCode.toDataURL('I am a pony!')
|
||||
.then((url) => {
|
||||
const parts = url.split(',');
|
||||
return { base64data: parts[1] };
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
function sendEmail(email, subject, body, qr_code_base64) {
|
||||
// Here you would implement the logic to send the email.
|
||||
// This is a placeholder function.
|
||||
console.log(`Sending email to ${email} with subject "${subject}" and body "${body}"`);
|
||||
console.log(`QR Code Base64: ${qr_code_base64}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
Pl
|
||||
@@ -1,65 +0,0 @@
|
||||
<script lang="ts">
|
||||
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={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
|
||||
type="file"
|
||||
name="participants"
|
||||
id="participants"
|
||||
accept=".csv"
|
||||
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 rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{#if participants.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 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="font-mono text-xs text-gray-600">{p.email}</div>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,24 +1,48 @@
|
||||
<script lang="ts">
|
||||
export let data;
|
||||
import { onMount } from 'svelte';
|
||||
let { data } = $props();
|
||||
|
||||
let events: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
|
||||
onMount(async () => {
|
||||
const { data: evs } = await data.supabase
|
||||
.from('events')
|
||||
.select('*')
|
||||
.order('date', { ascending: false });
|
||||
events = evs || [];
|
||||
loading = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1 class="text-2xl font-bold mb-4 mt-2 text-center">All Events</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
|
||||
{#each data.events as event}
|
||||
<a
|
||||
href={`/private/events/event?id=${event.id}`}
|
||||
class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
|
||||
<span class="text-gray-500 text-sm">{event.date}</span>
|
||||
{#if loading}
|
||||
{#each Array(4) as _}
|
||||
<div class="block border border-gray-300 rounded bg-white p-4 shadow-none min-h-[72px] h-full w-full">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-semibold text-lg text-gray-300 bg-gray-200 rounded w-1/2 h-6 mb-2 inline-block"></span>
|
||||
<span class="text-gray-300 text-sm bg-gray-100 rounded w-1/3 h-4 inline-block"></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{/each}
|
||||
{:else}
|
||||
{#each events as event}
|
||||
<a
|
||||
href={`/private/events/event?id=${event.id}`}
|
||||
class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group min-h-[72px] h-full w-full"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
|
||||
<span class="text-gray-500 text-sm">{event.date}</span>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="/private/creator"
|
||||
href="/private/events/creator"
|
||||
class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-none border border-gray-300"
|
||||
>
|
||||
New Event
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import StepCraftEmail from "./steps/StepCraftEmail.svelte";
|
||||
import StepCreateEvent from "./steps/StepCreateEvent.svelte";
|
||||
import StepOverview from "./steps/StepOverview.svelte";
|
||||
import StepUploadFiles from "./steps/StepUploadFiles.svelte";
|
||||
import StepUploadParticipants from "./steps/StepUploadParticipants.svelte";
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
let authorized = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (form && form.new_event) {
|
||||
event = form.new_event;
|
||||
if (form && form.event) {
|
||||
event = form.event;
|
||||
}
|
||||
if (form && form.participants) {
|
||||
participants = form.participants;
|
||||
@@ -25,7 +25,7 @@
|
||||
const steps = [
|
||||
StepConnectGoogle,
|
||||
StepCreateEvent,
|
||||
StepUploadFiles,
|
||||
StepUploadParticipants,
|
||||
StepCraftEmail,
|
||||
StepOverview
|
||||
];
|
||||
@@ -78,9 +78,9 @@
|
||||
{#if step == 0}
|
||||
<StepConnectGoogle bind:authorized />
|
||||
{:else if step == 1}
|
||||
<StepCreateEvent {event} />
|
||||
<StepCreateEvent bind:event />
|
||||
{:else if step == 2}
|
||||
<StepUploadFiles {participants} />
|
||||
<StepUploadParticipants bind:participants />
|
||||
{:else if step == 3}
|
||||
<StepCraftEmail bind:email />
|
||||
{:else if step == 4}
|
||||
@@ -66,7 +66,7 @@ async function sendTestEmail() {
|
||||
{#if !authorized}
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<p class="text-gray-700">Google not connected.</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}>
|
||||
<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" onclick={connect}>
|
||||
Connect Google
|
||||
</button>
|
||||
</div>
|
||||
238
src/routes/private/events/creator/finish/+page.svelte
Normal file
238
src/routes/private/events/creator/finish/+page.svelte
Normal file
@@ -0,0 +1,238 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { onMount } from 'svelte';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
let { data } = $props();
|
||||
let session_storage_id = page.url.searchParams.get('data');
|
||||
let all_data = {};
|
||||
|
||||
const StepStatus = {
|
||||
Loading: 'loading',
|
||||
Waiting: 'waiting',
|
||||
Success: 'success',
|
||||
Failure: 'failure'
|
||||
} as const;
|
||||
type StepStatus = (typeof StepStatus)[keyof typeof StepStatus];
|
||||
let event_status: StepStatus = $state(StepStatus.Waiting);
|
||||
let participants_status: StepStatus = $state(StepStatus.Waiting);
|
||||
let email_status: StepStatus = $state(StepStatus.Waiting);
|
||||
|
||||
let createdParticipants = $state([]);
|
||||
let mailStatuses = $state([]); // { email, name, status: 'pending' | 'success' | 'failure' }
|
||||
|
||||
onMount(async () => {
|
||||
if (!session_storage_id) {
|
||||
console.error('No session storage ID provided in the URL');
|
||||
return;
|
||||
}
|
||||
all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}');
|
||||
|
||||
try {
|
||||
event_status = StepStatus.Loading;
|
||||
const createdEvent = await createEventInSupabase(all_data.event);
|
||||
event_status = StepStatus.Success;
|
||||
|
||||
participants_status = StepStatus.Loading;
|
||||
createdParticipants = await createParticipantsInSupabase(all_data.participants, createdEvent);
|
||||
participants_status = StepStatus.Success;
|
||||
|
||||
} catch (e) {
|
||||
if (event_status === StepStatus.Loading) event_status = StepStatus.Failure;
|
||||
else participants_status = StepStatus.Failure;
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
|
||||
async function createEventInSupabase(event) {
|
||||
console.log('Creating event in Supabase:', event);
|
||||
const { data: createdEvent, error: eventError } = await data.supabase.rpc('create_event', {
|
||||
p_name: event.name,
|
||||
p_date: event.date
|
||||
});
|
||||
console.log('Created event:', createdEvent);
|
||||
if (eventError) throw eventError;
|
||||
return createdEvent;
|
||||
}
|
||||
|
||||
async function createParticipantsInSupabase(participants, event) {
|
||||
const names = participants.map((p) => p.name);
|
||||
const surnames = participants.map((p) => p.surname);
|
||||
const emails = participants.map((p) => p.email);
|
||||
const {
|
||||
data: { user },
|
||||
error: authError
|
||||
} = await data.supabase.auth.getUser();
|
||||
const { data: user_profile, error: profileError } = await data.supabase
|
||||
.from('profiles')
|
||||
.select('*, section:sections (id, name)')
|
||||
.eq('id', user?.id)
|
||||
.single();
|
||||
const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
|
||||
p_section_id: user_profile?.section.id,
|
||||
p_event_id: event.id,
|
||||
p_names: names,
|
||||
p_surnames: surnames,
|
||||
p_emails: emails
|
||||
});
|
||||
if (qrCodeError) throw qrCodeError;
|
||||
return result;
|
||||
}
|
||||
|
||||
async function sendEmails(participants, email) {
|
||||
mailStatuses = participants.map((p) => ({ email: p.email, name: `${p.name} ${p.surname}`, status: 'pending' }));
|
||||
let allSuccess = true;
|
||||
for (let i = 0; i < participants.length; i++) {
|
||||
const obj = participants[i];
|
||||
let qr_code = await dataToBase64(obj.id);
|
||||
const payload = {
|
||||
action: 'send',
|
||||
to: obj.email,
|
||||
subject: email.subject,
|
||||
text: email.body,
|
||||
qr_code: qr_code,
|
||||
refreshToken: localStorage.getItem('gmail_refresh_token')
|
||||
};
|
||||
try {
|
||||
const res = await fetch('/private/api/gmail', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
if (res.ok) {
|
||||
mailStatuses[i].status = 'success';
|
||||
} else {
|
||||
mailStatuses[i].status = 'failure';
|
||||
allSuccess = false;
|
||||
console.error('Failed to send email to', obj.email, await res.text());
|
||||
}
|
||||
} catch (e) {
|
||||
mailStatuses[i].status = 'failure';
|
||||
allSuccess = false;
|
||||
console.error('Failed to send email to', obj.email, e);
|
||||
}
|
||||
}
|
||||
return allSuccess;
|
||||
}
|
||||
|
||||
async function dataToBase64(data: string): Promise<string> {
|
||||
try {
|
||||
const url = await QRCode.toDataURL(data);
|
||||
const parts = url.split(',');
|
||||
const base64 = parts[1];
|
||||
return base64;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
async function launchMailCampaign() {
|
||||
email_status = StepStatus.Loading;
|
||||
try {
|
||||
const allSuccess = await sendEmails(createdParticipants, all_data.email);
|
||||
email_status = allSuccess ? StepStatus.Success : StepStatus.Failure;
|
||||
} catch (e) {
|
||||
email_status = StepStatus.Failure;
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Creating Event Entry -->
|
||||
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">Creating event</h2>
|
||||
{#if event_status === StepStatus.Waiting}
|
||||
<span class="text-black-600">Waiting...</span>
|
||||
{:else if event_status === StepStatus.Loading}
|
||||
<span class="text-black-600">Creating event...</span>
|
||||
{:else if event_status === StepStatus.Success}
|
||||
<span class="text-green-600">Event created successfully.</span>
|
||||
{:else if event_status === StepStatus.Failure}
|
||||
<span class="text-red-600">Failed to create event.</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Creating Database Entries -->
|
||||
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">Creating database entries</h2>
|
||||
{#if participants_status === StepStatus.Waiting}
|
||||
<span class="text-black-600">Waiting...</span>
|
||||
{:else if participants_status === StepStatus.Loading}
|
||||
<span class="text-black-600">Creating entries...</span>
|
||||
{:else if participants_status === StepStatus.Success}
|
||||
<span class="text-green-600">Database entries created successfully.</span>
|
||||
{:else if participants_status === StepStatus.Failure}
|
||||
<span class="text-red-600">Failed to create database entries.</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Sending Emails -->
|
||||
<div class="rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">Sending emails</h2>
|
||||
{#if email_status === StepStatus.Waiting}
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-black-600">Waiting...</span>
|
||||
<button
|
||||
disabled={event_status !== StepStatus.Success || participants_status !== StepStatus.Success}
|
||||
onclick={launchMailCampaign}
|
||||
class="ml-4 px-6 py-2 rounded font-semibold transition disabled:opacity-50 disabled:cursor-not-allowed
|
||||
{event_status === StepStatus.Success && participants_status === StepStatus.Success ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-gray-400 text-white'}"
|
||||
>
|
||||
Launch Mail Campaign
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="mt-4 space-y-2">
|
||||
{#each createdParticipants as p, i}
|
||||
<li class="flex items-center border-b pb-1 gap-2">
|
||||
{#if mailStatuses[i]?.status === 'success'}
|
||||
<svg
|
||||
title="Sent"
|
||||
class="mr-2 inline h-4 w-4 text-green-600"
|
||||
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>
|
||||
{:else if mailStatuses[i]?.status === 'failure'}
|
||||
<svg
|
||||
title="Failed"
|
||||
class="mr-2 inline h-4 w-4 text-red-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
|
||||
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
title="Pending"
|
||||
class="mr-2 inline h-4 w-4 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="font-semibold">{p.name} {p.surname}</span>
|
||||
<span class="font-mono text-xs text-gray-600 ml-auto">{p.email}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if email_status === StepStatus.Loading}
|
||||
<span class="block mt-2 text-black-600">Sending emails...</span>
|
||||
{:else if email_status === StepStatus.Success}
|
||||
<span class="block mt-2 text-green-600">Emails sent successfully.</span>
|
||||
{:else if email_status === StepStatus.Failure}
|
||||
<span class="block mt-2 text-red-600">Failed to send emails.</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -59,7 +59,7 @@
|
||||
{#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}>
|
||||
<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" onclick={connect}>
|
||||
Connect Google
|
||||
</button>
|
||||
</section>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
let { email = $bindable() } = $props();
|
||||
|
||||
let showForm = $derived(!email.subject || !email.body);
|
||||
|
||||
function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
email = {
|
||||
subject: formData.get('subject') as string,
|
||||
body: formData.get('body') as string
|
||||
};
|
||||
showForm = false;
|
||||
}
|
||||
|
||||
function showEditForm() {
|
||||
showForm = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if showForm}
|
||||
<form on:submit={handleSubmit} 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">Craft Email</h2>
|
||||
<label class="flex flex-col text-gray-700">
|
||||
Subject
|
||||
<input
|
||||
type="text"
|
||||
name="subject"
|
||||
value={email.subject ?? ''}
|
||||
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="flex flex-col text-gray-700">
|
||||
Body
|
||||
<textarea
|
||||
name="body"
|
||||
value={email.body ?? ''}
|
||||
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
|
||||
rows="6"
|
||||
required
|
||||
></textarea>
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<button
|
||||
class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
||||
onclick={showEditForm}
|
||||
aria-label="Edit email"
|
||||
>
|
||||
Edit email
|
||||
</button>
|
||||
<div class="rounded border-l-4 border-green-500 p-4 text-green-700 bg-green-100">
|
||||
<ol>
|
||||
<li><strong>{email.subject}</strong></li>
|
||||
<li class="whitespace-pre-line">{email.body}</li>
|
||||
</ol>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
let { event = $bindable() } = $props();
|
||||
|
||||
let loading = $state(false);
|
||||
let showForm = $derived(!event.name || !event.date);
|
||||
|
||||
function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
loading = true;
|
||||
const form = e.target as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
event = {
|
||||
name: formData.get('name'),
|
||||
date: formData.get('date')
|
||||
};
|
||||
showForm = false;
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function showEditForm() {
|
||||
showForm = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if showForm}
|
||||
<form
|
||||
on:submit={handleSubmit}
|
||||
autocomplete="off"
|
||||
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">Create Event</h2>
|
||||
<label class="mt-2 flex flex-col text-gray-700">
|
||||
Name
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
|
||||
required
|
||||
value={event.name ?? ''}
|
||||
/>
|
||||
</label>
|
||||
<label class="mt-2 flex flex-col text-gray-700">
|
||||
Date
|
||||
<input
|
||||
type="date"
|
||||
name="date"
|
||||
class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
|
||||
required
|
||||
value={event.date ?? ''}
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if !showForm}
|
||||
<button
|
||||
class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
||||
onclick={showEditForm}
|
||||
aria-label="Edit event"
|
||||
>
|
||||
Edit the event
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if !showForm}
|
||||
<div
|
||||
class="rounded border-l-4 border-green-500 p-4 text-green-700"
|
||||
class:bg-gray-100={loading}
|
||||
class:bg-green-100={!loading}
|
||||
>
|
||||
{#if loading}
|
||||
<strong class="text-gray-700">Loading...</strong>
|
||||
{:else if Object.keys(event).length > 0}
|
||||
<ol>
|
||||
<li><strong>{event.name}</strong></li>
|
||||
<li>{event.date}</li>
|
||||
</ol>
|
||||
{:else}
|
||||
<strong class="text-gray-700">No event created yet...</strong>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -12,7 +12,7 @@
|
||||
JSON.stringify({ event, participants, email })
|
||||
);
|
||||
// Redirect with the variable name as a query parameter
|
||||
goto(`/private/creator/finish?data=${encodeURIComponent(varName)}`);
|
||||
goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -23,7 +23,6 @@
|
||||
<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>
|
||||
<li><span class="font-semibold">Description:</span> {event.description}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
<script lang="ts">
|
||||
import Papa from 'papaparse';
|
||||
|
||||
let { participants = $bindable() } = $props();
|
||||
let loading = $state(false);
|
||||
let showForm = $derived(participants.length === 0);
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
loading = true;
|
||||
const form = e.target as HTMLFormElement;
|
||||
const fileInput = form.elements.namedItem('participants') as HTMLInputElement;
|
||||
const file = fileInput?.files?.[0];
|
||||
if (!file) {
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
const csvText = await file.text();
|
||||
const { data: parsedRows } = Papa.parse<string[]>(csvText, {
|
||||
skipEmptyLines: true,
|
||||
header: false
|
||||
});
|
||||
// Remove the first row (header)
|
||||
if (parsedRows.length > 0) {
|
||||
parsedRows.shift();
|
||||
}
|
||||
participants = parsedRows.map((row: string[]) => ({
|
||||
name: row[0],
|
||||
surname: row[1],
|
||||
email: row[2]
|
||||
}));
|
||||
showForm = false;
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function showEditForm() {
|
||||
showForm = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if showForm}
|
||||
<form
|
||||
on:submit={handleSubmit}
|
||||
autocomplete="off"
|
||||
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
|
||||
type="file"
|
||||
name="participants"
|
||||
id="participants"
|
||||
accept=".csv"
|
||||
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 rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<button
|
||||
class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
|
||||
onclick={showEditForm}
|
||||
aria-label="Edit participants"
|
||||
>
|
||||
Edit participants
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if !showForm}
|
||||
<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
|
||||
{#if loading}
|
||||
<strong class="text-gray-700">Loading...</strong>
|
||||
{:else if participants.length === 0}
|
||||
<strong class="text-gray-700">No participants yet...</strong>
|
||||
{:else}
|
||||
<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="font-mono text-xs text-gray-600">{p.email}</div>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,17 +1,50 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
const scannedCount = data.participants.filter((p) => p.scanned).length;
|
||||
const notScannedCount = data.participants.length - scannedCount;
|
||||
let event_data: any = $state(null);
|
||||
let participants: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let scannedCount: number = $state(0);
|
||||
let notScannedCount: number = $state(0);
|
||||
|
||||
onMount(async () => {
|
||||
const event_id = new URLSearchParams(window.location.search).get('id');
|
||||
if (!event_id) {
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const { data: event } = await data.supabase
|
||||
.from('events')
|
||||
.select('*')
|
||||
.eq('id', event_id)
|
||||
.single();
|
||||
event_data = event;
|
||||
|
||||
const { data: parts } = await data.supabase
|
||||
.from('participants')
|
||||
.select('*, scanned_by:profiles (id, display_name)')
|
||||
.eq('event', event_id);
|
||||
participants = parts || [];
|
||||
scannedCount = participants.filter((p) => p.scanned).length;
|
||||
notScannedCount = participants.length - scannedCount;
|
||||
loading = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1>
|
||||
|
||||
<div class="mb-2 rounded border border-gray-300 bg-white p-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-black-700 text-lg font-semibold">{data.event_data.name}</span>
|
||||
<span class="text-black-500 text-sm">{data.event_data.date}</span>
|
||||
{#if loading}
|
||||
<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
|
||||
<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
|
||||
<span class="text-black-500 text-sm">{event_data?.date}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,7 +59,11 @@
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
|
||||
{#if loading}
|
||||
<div class="h-4 w-16 bg-gray-200 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mx-4 h-8 w-px bg-gray-300"></div>
|
||||
<div class="flex flex-1 items-center justify-center gap-2">
|
||||
@@ -41,55 +78,71 @@
|
||||
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
</svg>
|
||||
<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
|
||||
{#if loading}
|
||||
<div class="h-4 w-24 bg-gray-200 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 rounded text-xl font-bold">Participants ({data.participants.length})</h2>
|
||||
<h2 class="mb-2 rounded text-xl font-bold">
|
||||
{#if loading}
|
||||
<div class="h-6 w-32 bg-gray-200 rounded animate-pulse"></div>
|
||||
{:else}
|
||||
Participants ({participants.length})
|
||||
{/if}
|
||||
</h2>
|
||||
<ul class="space-y-1">
|
||||
{#each data.participants as p}
|
||||
<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
|
||||
{#if p.scanned}
|
||||
<svg
|
||||
title="Scanned"
|
||||
class="mr-2 inline h-4 w-4 text-green-600"
|
||||
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>
|
||||
{:else}
|
||||
<svg
|
||||
title="Not scanned"
|
||||
class="mr-2 inline h-4 w-4 text-red-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
|
||||
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="font-semibold">{p.name} {p.surname}</span>
|
||||
<span class="flex-1"></span>
|
||||
{#if p.scanned_by}
|
||||
<div class="flex flex-row items-end ml-2">
|
||||
<span class="mr-1 text-xs text-gray-500">
|
||||
{new Date(p.scanned_at).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})}
|
||||
</span>
|
||||
<span class="text-xs text-gray-500">by {p.scanned_by.display_name}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if loading}
|
||||
<li>
|
||||
<div class="h-10 w-full bg-gray-200 rounded animate-pulse"></div>
|
||||
</li>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each participants as p}
|
||||
<li class="flex items-center gap-2 border-b border-gray-300 pb-1 last:border-b-0">
|
||||
{#if p.scanned}
|
||||
<svg
|
||||
title="Scanned"
|
||||
class="mr-2 inline h-4 w-4 text-green-600"
|
||||
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>
|
||||
{:else}
|
||||
<svg
|
||||
title="Not scanned"
|
||||
class="mr-2 inline h-4 w-4 text-red-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
|
||||
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="font-semibold">{p.name} {p.surname}</span>
|
||||
<span class="flex-1"></span>
|
||||
{#if p.scanned_by}
|
||||
<div class="ml-2 flex flex-row items-end">
|
||||
<span class="mr-1 text-xs text-gray-500">
|
||||
{new Date(p.scanned_at).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})}
|
||||
</span>
|
||||
<span class="text-xs text-gray-500">by {p.scanned_by.display_name}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user