UX improvements for the final step.
This commit is contained in:
Roman Krček
2
.github/copilot-instructions.md
vendored
2
.github/copilot-instructions.md
vendored
@@ -84,3 +84,5 @@ 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(
|
||||
@@ -61,11 +64,13 @@ export async function sendGmail(
|
||||
</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,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { onMount } from 'svelte';
|
||||
import QRCode from 'qrcode';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
let { data } = $props();
|
||||
let { data } = $props();
|
||||
let session_storage_id = page.url.searchParams.get('data');
|
||||
let all_data = {};
|
||||
|
||||
@@ -14,9 +14,13 @@
|
||||
Failure: 'failure'
|
||||
} as const;
|
||||
type StepStatus = (typeof StepStatus)[keyof typeof StepStatus];
|
||||
let supabase_status: StepStatus = $state(StepStatus.Waiting);
|
||||
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');
|
||||
@@ -24,54 +28,34 @@
|
||||
}
|
||||
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;
|
||||
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) {
|
||||
supabase_status = StepStatus.Failure;
|
||||
email_status = StepStatus.Failure;
|
||||
if (event_status === StepStatus.Loading) event_status = StepStatus.Failure;
|
||||
else participants_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 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 insert_data_supabase(participants, event) {
|
||||
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);
|
||||
@@ -91,21 +75,94 @@
|
||||
p_surnames: surnames,
|
||||
p_emails: emails
|
||||
});
|
||||
if (qrCodeError) throw qrCodeError;
|
||||
return result;
|
||||
}
|
||||
|
||||
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 supabase_status === StepStatus.Waiting}
|
||||
{#if participants_status === StepStatus.Waiting}
|
||||
<span class="text-black-600">Waiting...</span>
|
||||
{:else if supabase_status === StepStatus.Loading}
|
||||
{:else if participants_status === StepStatus.Loading}
|
||||
<span class="text-black-600">Creating entries...</span>
|
||||
{:else if supabase_status === StepStatus.Success}
|
||||
{:else if participants_status === StepStatus.Success}
|
||||
<span class="text-green-600">Database entries created successfully.</span>
|
||||
{:else if supabase_status === StepStatus.Failure}
|
||||
{:else if participants_status === StepStatus.Failure}
|
||||
<span class="text-red-600">Failed to create database entries.</span>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -114,12 +171,68 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user