Now with QR codes for sessions and presenters!

2024-07-18 17:15:12 -04:00
parent a6f8f00e9e
commit af17a05022
7 changed files with 234 additions and 9 deletions
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -313,4 +313,21 @@ section.ae_quick_popover_small {
 }
 .ae_root--auth_access .auth_view_only {
    display: initial;
+}
+
+
+
+img.qr_code {
+    /* outline: solid thin hsla(30, 100%, 50%, .1); */
+    /* width: 1.50in; */
+}
+
+img.qr_code:hover {
+    /* outline: solid thin green; */
+    /* width: 2.50in; */
+}
+
+img.qr_code:focus {
+    /* outline: solid thin red; */
+    /* width: 2.50in; */
 }
--- a/src/lib/ae_core__qr_code.ts
+++ b/src/lib/ae_core__qr_code.ts
@@ -0,0 +1,109 @@
+import type { key_val } from '$lib/ae_stores';
+import { api } from '$lib/api';
+
+import { db_core } from "$lib/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
+        }
+    ) {
+    console.log(`*** generate_qr_code() *** qr_id=${qr_id}`);
+
+    let endpoint = `/qr/${account_id}/${qr_id}`;
+    console.log('Endpoint', endpoint);
+    let params: key_val = {
+        'regen': true, // Regenerate the file even if nothing has changed.
+        'return_file': return_blob,
+        'qr_type': qr_type, // mecard, obj, vcard
+        'qr_send': return_blob
+    };
+
+    if (qr_type == 'vcard') {
+        if (qr_data.informal_name) {
+            params['n'] = `${qr_data.family_name};${qr_data.given_name};${qr_data.informal_name}`;
+        } else {
+            params['n'] = `${qr_data.family_name};${qr_data.given_name}`;
+        }
+        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;
+        params['adr_country'] = qr_data.country;
+    } else if (qr_type == 'obj') {
+        params['obj_type'] = obj_type;
+        params['obj_id'] = obj_id;
+    } else if (qr_type == 'str') {
+        params['str'] = str;
+    }
+
+    console.log('Params', params);
+
+
+    // let filename = `qr_${$ae_loc.account_id}_${qr_id}_${qr_type}.png`;
+    let filename = null;
+
+    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 Badge ID done?');
+
+    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;
+    }
+    // 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;
+
+    return ae_promises.generate_qr_code;
+}
--- a/src/lib/ae_core_functions.ts
+++ b/src/lib/ae_core_functions.ts
@@ -11,12 +11,10 @@ import {
    // handle_db_save_ae_obj_li__person
 } from "$lib/ae_core__person";

-// import { liveQuery } from "dexie";
-// import { db_core } from "$lib/db_core";
+import {
+    generate_qr_code,
+} from "$lib/ae_core__qr_code";

-// let example_li = liveQuery(
-//     () => db_core.badges.toArray()
-// );

 let ae_promises: key_val = {}; // Promise<any>;

@@ -373,5 +371,6 @@ let export_obj = {
    handle_create_ae_obj__person: handle_create_ae_obj__person,
    handle_update_ae_obj_id_crud: handle_update_ae_obj_id_crud,
    handle_download_export__obj_type: handle_download_export__obj_type,
+    generate_qr_code: generate_qr_code
 };
 export let core_func = export_obj;
--- a/src/lib/ae_events_stores.ts
+++ b/src/lib/ae_events_stores.ts
@@ -287,9 +287,9 @@ let events_session_data_struct: key_val = {
        new_upload_list: null,
        files_uploading_count: null,

-        qry_max__sessions: 25,
+        qry_max__sessions: 75,
        qry_max__presentations: 25,
-        qry_max__presenters: 25,
+        qry_max__presenters: 75,
        qry_max__files: 25,
        show_fields__presentation: true,
        show_fields__session: true,
--- a/src/routes/core/person/[person_id]/+page.svelte
+++ b/src/routes/core/person/[person_id]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 /** @type {import('./$types').PageData} */
-import { page } from '$app/stores';
-console.log($page.params.slug);
+// import { page } from '$app/stores';
+// console.log($page.params.slug);
 export let data: any;

 // Imports
--- a/src/routes/events_pres_mgmt/presenter_view.svelte
+++ b/src/routes/events_pres_mgmt/presenter_view.svelte
@@ -254,7 +254,19 @@ async function handle_delete__event_file({event_file_id}) {
    return ae_promises.delete__event_file_obj;
 }

+$: if ($lq__event_presenter_obj) {
+    // Generate a QR code for the object ID.
+    // ae_promises.generate_qr_code_obj_id = core_func.generate_qr_code({api_cfg: $ae_api, account_id: $slct.account_id, qr_type: 'obj', qr_id: $lq__event_presenter_obj?.event_presenter_id_random, obj_type: 'event_presenter', obj_id: $lq__event_presenter_obj?.event_presenter_id_random});

+    // Generate a QR code for the URL.
+    let qr_id_url = `${$lq__event_presenter_obj?.event_presenter_id_random}_url`;
+
+    // URL for this page (be sure to URL encode it):
+    let url_str = `${$ae_loc.url_origin}/events_pres_mgmt/presenter/${$lq__event_presenter_obj.event_presenter_id_random}`;
+    url_str = encodeURI(url_str);
+
+    ae_promises.generate_qr_code_url = core_func.generate_qr_code({api_cfg: $ae_api, account_id: $slct.account_id, qr_type: 'str', qr_id: qr_id_url, str: url_str});
+}
 </script>

 <!-- {#await $lq__event_presenter_obj} -->
@@ -385,6 +397,58 @@ async function handle_delete__event_file({event_file_id}) {
    Presenter:
    <span class="text-md font-normal">
 </h3>
+
+
+{#await ae_promises.generate_qr_code_obj_id}
+    Generating...
+{:then result}
+    {#if ae_promises.generate_qr_code_obj_id}
+        <!-- {img_obj_url} -->
+        <span class="float-right flex flex-col items-center justify-center">
+            <img
+                class="qr_code qr_type_obj_id h-32 w-32 hover:h-48 hover:w-48 hidden"
+                style=""
+                src={result}
+                alt="Object ID QR code"
+
+                />
+                <!-- src="{$cfg.api['base_url']}/qr/{$client.account_id}/{event_badge_obj.event_badge_id_random}?filename=qr_{$client.account_id}_{event_badge_obj.event_badge_id_random}_mecard.png" -->
+                <!-- src={qr_img_src} -->
+                <!-- on:dblclick={() => {
+                    // (hide_qr) ? hide_qr = !hide_qr : hide_qr;
+                    (hide_qr) ? hide_qr = false : hide_qr = true;
+                }} -->
+            <span>
+            <span class="fas fa-qrcode"></span>
+            Presenter ID
+            </span>
+        </span>
+    {/if}
+{/await}
+
+{#await ae_promises.generate_qr_code_url}
+    Generating...
+{:then result}
+    {#if ae_promises.generate_qr_code_url && $ae_loc.trusted_access}
+        <span class="float-right m-1 p-1 flex flex-col items-center justify-center outline outline-gray-200 *:hover:inline">
+            <img
+                class="qr_code qr_type_url h-32 w-32 hover:h-48 hover:w-48"
+                style=""
+                src={result}
+                alt="URL QR code"
+                />
+            <span>
+                <span class="fas fa-link"></span>
+                <span>Presenter URL</span>
+            </span>
+            <!-- URL: <a href="{$ae_loc.url_origin}/events_pres_mgmt/presenter/{$lq__event_presenter_obj.event_presenter_id_random}" target="_blank">{$ae_loc.url_origin}/events_pres_mgmt/presenter/{$lq__event_presenter_obj.event_presenter_id_random}</a> -->
+            <div class="hidden">
+                This QR is a link back to this page.
+            </div>
+        </span>
+    {/if}
+{/await}
+
 <ul
    class="space-y-2 px-4"
    >
--- a/src/routes/events_pres_mgmt/session/[slug]/+page.svelte
+++ b/src/routes/events_pres_mgmt/session/[slug]/+page.svelte
@@ -454,7 +454,19 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
 //     });
 // }

+$: if ($lq__event_session_obj) {
+    // Generate a QR code for the object ID.
+    // ae_promises.generate_qr_code_obj_id = core_func.generate_qr_code({api_cfg: $ae_api, account_id: $slct.account_id, qr_type: 'obj', qr_id: $lq__event_session_obj?.event_session_id_random, obj_type: 'event_session', obj_id: $lq__event_session_obj?.event_session_id_random});

+    // Generate a QR code for the URL.
+    let qr_id_url = `${$lq__event_session_obj?.event_session_id_random}_url`;
+
+    // URL for this page (be sure to URL encode it):
+    let url_str = `${$ae_loc.url_origin}/events_pres_mgmt/session/${$lq__event_session_obj.event_session_id_random}`;
+    url_str = encodeURI(url_str);
+
+    ae_promises.generate_qr_code_url = core_func.generate_qr_code({api_cfg: $ae_api, account_id: $slct.account_id, qr_type: 'str', qr_id: qr_id_url, str: url_str});
+}

 </script>

@@ -540,6 +552,30 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
 <!-- Information about the session -->
 <section>

+
+{#await ae_promises.generate_qr_code_url}
+    Generating...
+{:then result}
+    {#if ae_promises.generate_qr_code_url && $ae_loc.trusted_access}
+        <span class="float-right m-1 p-1 flex flex-col items-center justify-center outline outline-gray-200 *:hover:inline">
+            <img
+                class="qr_code qr_type_url h-32 w-32 hover:h-48 hover:w-48"
+                style=""
+                src={result}
+                alt="URL QR code"
+                />
+            <span>
+                <span class="fas fa-link"></span>
+                <span>Session URL</span>
+            </span>
+            <div class="hidden">
+                This QR is a link back to this page.
+            </div>
+        </span>
+    {/if}
+{/await}
+
+
 <ul
    class="space-y-2 px-4"
    >