Move creator into events structure
This commit is contained in:
Roman Krček
61
src/routes/private/events/creator/+page.server.ts
Normal file
61
src/routes/private/events/creator/+page.server.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
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;
|
||||
94
src/routes/private/events/creator/+page.svelte
Normal file
94
src/routes/private/events/creator/+page.svelte
Normal file
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import StepConnectGoogle from "./steps/StepConnectGoogle.svelte";
|
||||
import StepCraftEmail from "./steps/StepCraftEmail.svelte";
|
||||
import StepCreateEvent from "./steps/StepCreateEvent.svelte";
|
||||
import StepOverview from "./steps/StepOverview.svelte";
|
||||
import StepUploadFiles from "./steps/StepUploadFiles.svelte";
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
let event = $state({});
|
||||
let participants = $state([]);
|
||||
let email = $state({'body': '', 'subject': ''});
|
||||
let authorized = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (form && form.new_event) {
|
||||
event = form.new_event;
|
||||
}
|
||||
if (form && form.participants) {
|
||||
participants = form.participants;
|
||||
}
|
||||
});
|
||||
|
||||
// Array of step components in order
|
||||
const steps = [
|
||||
StepConnectGoogle,
|
||||
StepCreateEvent,
|
||||
StepUploadFiles,
|
||||
StepCraftEmail,
|
||||
StepOverview
|
||||
];
|
||||
|
||||
let step: number = $state(0);
|
||||
|
||||
// let stepConditions = $derived([
|
||||
// authorized,
|
||||
// !!new_event?.name,
|
||||
// !!participants?.length,
|
||||
// !!subject && !!body
|
||||
// ]);
|
||||
|
||||
// for debugging purpouses
|
||||
let stepConditions = [
|
||||
true,
|
||||
true,
|
||||
true,
|
||||
true
|
||||
];
|
||||
|
||||
function nextStep() {
|
||||
if (step < steps.length - 1) step += 1;
|
||||
}
|
||||
function prevStep() {
|
||||
if (step > 0) step -= 1;
|
||||
}
|
||||
</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 || !stepConditions[step]}
|
||||
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>
|
||||
|
||||
{#if step == 0}
|
||||
<StepConnectGoogle bind:authorized />
|
||||
{:else if step == 1}
|
||||
<StepCreateEvent {event} />
|
||||
{:else if step == 2}
|
||||
<StepUploadFiles {participants} />
|
||||
{:else if step == 3}
|
||||
<StepCraftEmail bind:email />
|
||||
{:else if step == 4}
|
||||
<StepOverview
|
||||
{data}
|
||||
{event}
|
||||
{participants}
|
||||
{email}
|
||||
{stepConditions}
|
||||
/>
|
||||
{/if}
|
||||
110
src/routes/private/events/creator/emailtest/+page.svelte
Normal file
110
src/routes/private/events/creator/emailtest/+page.svelte
Normal file
@@ -0,0 +1,110 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let to = '';
|
||||
let subject = '';
|
||||
let body = '';
|
||||
let qrcode_b64 = '';
|
||||
let loading = false;
|
||||
let error = '';
|
||||
let success = '';
|
||||
let authorized = false;
|
||||
let refreshToken = '';
|
||||
|
||||
async function validateToken(token: string): Promise<boolean> {
|
||||
if (!token) return false;
|
||||
const res = await fetch('/private/api/gmail', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'validate', refreshToken: token })
|
||||
});
|
||||
if (!res.ok) return false;
|
||||
const data = await res.json();
|
||||
return !!data.valid;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
|
||||
authorized = await validateToken(refreshToken);
|
||||
});
|
||||
|
||||
const connect = () => goto('/private/api/gmail?action=auth');
|
||||
|
||||
async function sendTestEmail() {
|
||||
error = '';
|
||||
success = '';
|
||||
loading = true;
|
||||
try {
|
||||
const r = await fetch('/private/api/gmail', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
action: 'send',
|
||||
to,
|
||||
subject,
|
||||
text: body,
|
||||
qr_code: qrcode_b64,
|
||||
refreshToken
|
||||
})
|
||||
});
|
||||
if (r.ok) {
|
||||
success = 'Email sent!';
|
||||
to = subject = body = qrcode_b64 = '';
|
||||
} else {
|
||||
error = await r.text();
|
||||
}
|
||||
} catch (e) {
|
||||
error = e.message || 'Unknown error';
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="max-w-lg mx-auto bg-white border border-gray-300 rounded p-8 mt-8 shadow">
|
||||
<h2 class="text-2xl font-semibold mb-6 text-center">Test Email Sender</h2>
|
||||
{#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}>
|
||||
Connect Google
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={sendTestEmail} class="space-y-4">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">To</span>
|
||||
<input type="email" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200" bind:value={to} required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Subject</span>
|
||||
<input type="text" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200" bind:value={subject} required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Body</span>
|
||||
<textarea class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none" rows="6" bind:value={body} required></textarea>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">QR Code (base64, data:image/png;base64,...)</span>
|
||||
<input type="text" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200 font-mono text-xs" bind:value={qrcode_b64} placeholder="Paste base64 image string here" required />
|
||||
</label>
|
||||
<button type="submit" class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition" disabled={loading}>
|
||||
{#if loading}
|
||||
<svg class="animate-spin h-5 w-5 mr-2 inline-block text-white" 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>
|
||||
Sending...
|
||||
{:else}
|
||||
Send Test Email
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
{#if error}
|
||||
<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700 mt-4">{error}</div>
|
||||
{/if}
|
||||
{#if success}
|
||||
<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">{success}</div>
|
||||
{/if}
|
||||
</div>
|
||||
125
src/routes/private/events/creator/finish/+page.svelte
Normal file
125
src/routes/private/events/creator/finish/+page.svelte
Normal file
@@ -0,0 +1,125 @@
|
||||
<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>
|
||||
@@ -0,0 +1,75 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let authorized = false;
|
||||
|
||||
let refreshToken = '';
|
||||
let loading = true;
|
||||
|
||||
let to = '';
|
||||
let subject = '';
|
||||
let body = '';
|
||||
|
||||
async function validateToken(token: string): Promise<boolean> {
|
||||
if (!token) return false;
|
||||
const res = await fetch('/private/api/gmail', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'validate', refreshToken: token })
|
||||
});
|
||||
if (!res.ok) return false;
|
||||
const data = await res.json();
|
||||
return !!data.valid;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
|
||||
loading = true;
|
||||
authorized = await validateToken(refreshToken);
|
||||
loading = false;
|
||||
});
|
||||
|
||||
/* ⇢ redirects straight to Google via server 302 */
|
||||
const connect = () => goto('/private/api/gmail?action=auth');
|
||||
|
||||
async function disconnect() {
|
||||
if (!confirm('Disconnect Google account?')) return;
|
||||
await fetch('/private/api/gmail', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'revoke', refreshToken })
|
||||
});
|
||||
localStorage.removeItem('gmail_refresh_token');
|
||||
refreshToken = '';
|
||||
authorized = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,25 @@
|
||||
<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>
|
||||
@@ -0,0 +1,71 @@
|
||||
<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}
|
||||
59
src/routes/private/events/creator/steps/StepFinal.svelte
Normal file
59
src/routes/private/events/creator/steps/StepFinal.svelte
Normal file
@@ -0,0 +1,59 @@
|
||||
<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
|
||||
78
src/routes/private/events/creator/steps/StepOverview.svelte
Normal file
78
src/routes/private/events/creator/steps/StepOverview.svelte
Normal file
@@ -0,0 +1,78 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let { data, event, participants, email, stepConditions } = $props();
|
||||
|
||||
function redirectToFinish() {
|
||||
// Generate a random variable name
|
||||
const varName = 'event_' + Math.random().toString(36).substr(2, 9);
|
||||
// Save the data to sessionStorage
|
||||
sessionStorage.setItem(
|
||||
varName,
|
||||
JSON.stringify({ event, participants, email })
|
||||
);
|
||||
// Redirect with the variable name as a query parameter
|
||||
goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- New Event Overview -->
|
||||
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
|
||||
<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>
|
||||
|
||||
<!-- Email Overview -->
|
||||
<div class="mb-4 rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
|
||||
<div class="mb-2"><span class="font-semibold">Subject:</span> {email.subject}</div>
|
||||
<div class="rounded border bg-gray-50 p-2 whitespace-pre-line text-gray-700">
|
||||
<span class="font-semibold"></span>
|
||||
<div>{email.body}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Participants Overview -->
|
||||
<div class="rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">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 pb-1 last:border-b-0">
|
||||
<span class="font-semibold">{p.name} {p.surname}</span>
|
||||
<span class="flex-1"></span>
|
||||
<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<p class="mt-2 text-sm text-gray-500">Note: Only the first 10 participants are shown.</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onclick={redirectToFinish}
|
||||
class="mt-4 w-full rounded bg-blue-600 px-4 py-3 font-bold text-white
|
||||
transition-colors duration-200 hover:bg-blue-700
|
||||
disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
|
||||
disabled={!stepConditions.every(Boolean)}
|
||||
>
|
||||
Generate QR codes and send
|
||||
</button>
|
||||
|
||||
<div class="mt-2 space-y-1">
|
||||
{#if !stepConditions[0]}
|
||||
<p class="text-sm text-red-500">Please provide an event name before proceeding.</p>
|
||||
{/if}
|
||||
{#if !stepConditions[1]}
|
||||
<p class="text-sm text-red-500">Please add at least one participant before proceeding.</p>
|
||||
{/if}
|
||||
{#if !stepConditions[2]}
|
||||
<p class="text-sm text-red-500">Please provide an email subject before proceeding.</p>
|
||||
{/if}
|
||||
{#if !stepConditions[3]}
|
||||
<p class="text-sm text-red-500">Please provide an email body before proceeding.</p>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,65 @@
|
||||
<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}
|
||||
Reference in New Issue
Block a user