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

Creator fully working POC

Browse Source
This commit is contained in:
Roman Krček
2025-06-25 13:26:02 +02:00
parent ea985c21a9
commit 52c3b9c871
5 changed files with 488 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
<ul class="flex space-x-4">
<li><a href="/private/home" class="hover:underline">Home</a></li>
<li><a href="/private/scanner" class="hover:underline">Scanner</a></li>
<li><a href="/private/creator" class="hover:underline">Creator</a></li>
<li><a href="/private/events" class="hover:underline">Events</a></li>
</ul>
</nav>

125
src/routes/private/creator/finish/+page.svelte Normal file
View 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>

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

@@ -1,24 +1,39 @@
<script lang="ts">
let { new_event, participants, subject, body, stepConditions } = $props();
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/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> {new_event.name}</li>
<li><span class="font-semibold">Date:</span> {new_event.date}</li>
<li><span class="font-semibold">Description:</span> {new_event.description}</li>
<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> {subject}</div>
<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>{body}</div>
<div>{email.body}</div>
</div>
</div>
@@ -38,9 +53,10 @@
</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"
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