Making the QR codes work again. Also making things look better.

This commit is contained in:
Scott Idem
2025-10-03 17:41:35 -04:00
parent c949581429
commit af9c4a82f0
5 changed files with 241 additions and 119 deletions

View File

@@ -5,35 +5,34 @@ import { db_core } from "$lib/ae_core/db_core";
let ae_promises: key_val = {};
// Updated 2024-07-18
export async function generate_qr_code(
{
api_cfg,
account_id,
qr_type, // mecard, obj, str, vcard
qr_id, // This is essentially the filename it can be found at /qr/{account_id}/{qr_id}
qr_data, // vcard fields:
obj_type,
obj_id,
str, // For encoding a string (like a URL) into a QR code.
return_blob=true, // blob or url?
try_cache=false,
log_lvl=0
}: {
api_cfg: any,
account_id: string,
qr_type: string,
qr_id: string,
qr_data?: any,
obj_type?: string,
obj_id?: string,
str?: string,
return_blob?: boolean,
try_cache?: boolean,
log_lvl?: number
}
) {
{
api_cfg,
account_id,
qr_type, // mecard, obj, str, vcard
qr_id, // This is essentially the filename it can be found at /qr/{account_id}/{qr_id}
qr_data, // vcard fields:
obj_type,
obj_id,
str, // For encoding a string (like a URL) into a QR code.
return_blob = true, // blob or url?
try_cache = false,
log_lvl = 0
}: {
api_cfg: any,
account_id: string,
qr_type: string,
qr_id: string,
qr_data?: any,
obj_type?: string,
obj_id?: string,
str?: string,
return_blob?: boolean,
try_cache?: boolean,
log_lvl?: number
}
) {
if (log_lvl) {
console.log(`*** generate_qr_code() *** qr_id=${qr_id}`);
}
@@ -57,15 +56,10 @@ export async function generate_qr_code(
}
params['fn'] = qr_data.full_name_override;
if (qr_data.affiliations) { params['org'] = qr_data.affiliations; }
// url
params['email'] = qr_data.email;
if (qr_data.phone) { params['tel'] = qr_data.phone; }
params['adr'] = qr_data.location_override;
if (qr_data.address_line_1) { params['adr_str'] = qr_data.address_line_1; }
params['adr_loc'] = qr_data.city;
params['adr_reg'] = qr_data.state_province;
params['adr_postal'] = qr_data.postal_code;
@@ -81,35 +75,64 @@ export async function generate_qr_code(
console.log('Params', params);
}
// let filename = `qr_${$ae_loc.account_id}_${qr_id}_${qr_type}.png`;
let filename = null;
// Await the API call
ae_promises.generate_qr_code = await api.get_object({
api_cfg: api_cfg,
endpoint: endpoint,
params: params,
return_blob: return_blob,
filename: filename,
auto_download: false,
log_lvl: log_lvl
});
console.log('QR code generated done!?');
api_cfg: api_cfg,
endpoint: endpoint,
params: params,
return_blob: return_blob,
filename: filename,
auto_download: false,
log_lvl: log_lvl
});
if (return_blob) {
let img_blob = new Blob([ae_promises.generate_qr_code.data]);
let img_obj_url = URL.createObjectURL(img_blob);
// console.log(img_obj_url);
// return img_blob;
return img_obj_url;
if (log_lvl) {
console.log('QR code API response:', ae_promises.generate_qr_code);
}
// let img_blob = new Blob([ae_promises.generate_qr_code.data]);
// console.log(img_blob);
// let img_obj_url = URL.createObjectURL(img_blob);
// console.log(img_obj_url);
// let qr_img_src = img_obj_url;
// If return_blob is true, ensure we return an object URL for use in <img src=...>
if (return_blob) {
let data = ae_promises.generate_qr_code.data ?? ae_promises.generate_qr_code;
// If already a Blob, use it directly
if (data instanceof Blob) {
return URL.createObjectURL(data);
}
// If it's a Response (from fetch), convert to Blob
if (data instanceof Response) {
const blob = await data.blob();
return URL.createObjectURL(blob);
}
// If it's an ArrayBuffer or Uint8Array, convert to Blob
if (data instanceof ArrayBuffer || data instanceof Uint8Array) {
const blob = new Blob([data], { type: "image/png" });
return URL.createObjectURL(blob);
}
// If it's a base64 string, return as data URL
if (typeof data === "string" && data.startsWith("data:image")) {
return data;
}
// If it's a raw string (base64), convert to data URL
if (typeof data === "string") {
return `data:image/png;base64,${data}`;
}
// Fallback: try to create a Blob from whatever is left
try {
const blob = new Blob([data], { type: "image/png" });
return URL.createObjectURL(blob);
} catch (e) {
if (log_lvl) console.error("Could not create QR code image blob:", e, data);
return null;
}
}
// If not returning a blob, return the raw API response
return ae_promises.generate_qr_code;
}

View File

@@ -495,10 +495,12 @@ let events_session_data_struct: key_val = {
show__edit_poc_person: {},
show__view_alert: {},
show__edit_alert_msg: {},
show__view_alert: {}, // key values
show__edit_alert_msg: {}, // key values
tmp__alert_msg: {},
tmp__alert_msg: {}, // key values
session_qr_url: {}, // key value of session_id and URL string
status_rpt: {
recent_files: null,

View File

@@ -1,6 +1,7 @@
<script lang="ts">
interface Props {
children?: import('svelte').Snippet;
log_lvl?: number;
value: any;
success?: boolean;
@@ -8,9 +9,12 @@ interface Props {
btn_title?: string;
btn_class?: string;
hide_icon?: boolean;
hide_text?: boolean;
icon_name?: string;
}
let {
children,
log_lvl = 0,
value = $bindable(''),
success = $bindable(false),
@@ -18,18 +22,22 @@ let {
btn_title = 'Copy to Clipboard',
btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1',
hide_icon = false,
hide_text = false,
icon_name = 'copy', // copy, check, link
}: Props = $props();
// *** Import Svelte specific
import { browser } from '$app/environment';
// import { browser } from '$app/environment';
// *** Import other supporting libraries
import {
// ArrowBigRight,
// CircleX,
CircleCheck,
Copy,
// Eye, EyeOff,
// Key,
Link,
// LogIn, LogOut, LockKeyhole,
// Mail, MailCheck,
// Menu,
@@ -88,10 +96,24 @@ if (log_lvl) {
title={btn_title}
>
<!-- {@render btn_text} -->
<Copy
class="inline-block mx-1 {hide_icon ? 'hidden' : '' }"
size="1.2em"
/>
{#if icon_name === 'link'}
<Link
class="mx-1 {hide_icon ? 'hidden' : 'inline-block' }"
size="1.2em"
/>
{:else if icon_name === 'check'}
<CircleCheck
class="mx-1 {hide_icon ? 'hidden' : 'inline-block' }"
size="1.2em"
/>
{:else}
<Copy
class="mx-1 {hide_icon ? 'hidden' : 'inline-block' }"
size="1.2em"
/>
{/if}
<span class="{hide_text ? 'hidden' : 'inline-block' }">
{btn_text}
</span>
{@render children?.()}
</button>