Move creator into events structure

src/routes/private/events/creator/finish/+page.svelte

@@ -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>