Unknown changes from last week in Prague?

src/lib/ae_events_stores.ts

@@ -63,7 +63,7 @@ let events_local_data_struct: key_val = {
         // For ISHLT 2024 Annual Meeting only!
         default__external_registration_id: '2024_Annual Meeting',
 
-        auto_view: true,
+        auto_view: true, // Show the new lead after added by scan or search
         auto_hide_on_sign_in: true,
 
         show_hidden: false, // These are hidden (archived) leads so the list is not as long.

src/routes/events_badges/stats/+layout.ts

@@ -0,0 +1,148 @@
+/** @type {import('./$types').LayoutLoad} */
+
+import { get } from 'svelte/store';
+
+import type { key_val } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils';
+// import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+// import { events_loc, events_slct, events_trigger } from '$lib/ae_events_stores';
+
+
+/*
+ * This +layout load should be used for:
+ * * loading data required for the layout of the page...
+ * * like?
+ * Returns: data object (parent to child)
+
+export async function load({ params, parent, url }) { // route
+    console.log(`ae_events_badges [slug] +layout.ts data.params:`, params);
+    // console.log(`ae_events_badges [slug] +layout.ts data.route:`, route);
+    // console.log(`ae_events_badges [slug] +layout.ts data.url:`, url);
+
+    let data = await parent();
+    console.log(`Svelte Events Badges [slug] +layout.ts data = data:`, data);
+
+    let ae_loc_tmp = get(ae_loc);
+    console.log(`ae_loc = `, ae_loc_tmp);
+
+    let ds_code_li: null|key_val = ae_loc_tmp.ds;
+    console.log(`ae_ ds_code_li = `, ds_code_li);
+    let ds_code: null|string = null;
+    let ds_type: null|string = null;
+
+
+    let data_struct = {
+        ae_init: ae_loc_tmp,
+        params: params,
+        sections: [
+			{ slug: 'new', title: 'New Event Badge' },
+			{ slug: 'manage', title: 'Manage' },
+            { slug: 'test', title: 'Test' },
+		],
+        url: url,
+
+    };
+
+    let loading_results = null;
+
+    ds_code = 'hub__page__events_badges__create_info';
+    ds_type = 'text';
+    // loading_results = await handle_get_data_store_obj_w_code({ code: ds_code })
+    // .then( function (ds_hub_page_events_create_info_results) {
+    //     if (ds_hub_page_events_create_info_results) {
+    //         console.log(`ae_ hub__page__events_badges__create_info = `, ds_hub_page_events_create_info_results);
+    //         // let ae_loc_tmp = get(ae_loc);
+
+    //         ds_code_li[ds_code] = ds_hub_page_events_create_info_results;
+
+    //         // ae_loc.set(ae_loc_tmp);
+    //         // console.log(`ae_loc = `, get(ae_loc));
+    //     }
+    // })
+    // .finally(function () {
+    //     console.log(`ae_ ds_code_li = `, ds_code_li);
+    //     ae_loc_tmp = {
+    //         ...ae_loc_tmp,
+    //         'ds': ds_code_li,
+    //     }
+    //     console.log(`ae_loc_tmp = `, ae_loc_tmp);
+
+    //     ae_loc.set(ae_loc_tmp);
+    //     console.log(`ae_loc = `, get(ae_loc));
+    // });
+
+    // loading_results = await api.get_data_store_obj_w_code({
+    //     api_cfg: get(ae_api),
+    //     data_store_code: ds_code,
+    //     data_type: ds_type,
+    //     log_lvl: 0
+    //     })
+    // .then( function (ds_results) {
+    //     if (ds_results) {
+    //         console.log(`ae_ Data Store ${ds_code} = `, ds_results);
+    //         // let ae_loc_tmp = get(ae_loc);
+
+    //         ds_code_li[ds_code] = ds_results.text;
+
+    //         // ae_loc.set(ae_loc_tmp);
+    //         // console.log(`ae_loc = `, get(ae_loc));
+    //     }
+    // })
+    // .finally(function () {
+    //     console.log(`ae_ ds_code_li = `, ds_code_li);
+    //     ae_loc_tmp = {
+    //         ...ae_loc_tmp,
+    //         'ds': ds_code_li,
+    //     }
+    //     console.log(`ae_loc_tmp = `, ae_loc_tmp);
+
+    //     ae_loc.set(ae_loc_tmp);
+    //     console.log(`ae_loc = `, get(ae_loc));
+    // });
+
+    return data_struct;
+}
+
+
+
+
+
+// async function handle_get_data_store_obj_w_code({ code=null, data_type='text' }) {
+//     console.log(`*** handle_get_data_store_obj_w_code() *** code=${code}`);
+
+//     if (!code) {
+//         console.log('No code provided.');
+//         return;
+//     }
+
+//     let data_store_obj_get_promise = api.get_data_store_obj_w_code({
+//         api_cfg: get(ae_api),
+//         data_store_code: code,
+//         data_type: data_type,
+//         log_lvl: 0
+//         })
+//     .then(function (get_data_store_result) {
+//         let return_this = null;
+//         if (get_data_store_result) {
+
+//             if (data_type == 'text') {
+//                 // console.log(get_data_store_result.text);
+//                 return_this = get_data_store_result.text;
+//             } else if (data_type == 'json') {
+//                 // console.log(get_data_store_result.json);
+//                 return_this = get_data_store_result.json;
+//             }
+
+//         } else {
+//             console.log('No results returned.');
+//             return_this = null;
+//         }
+//         return return_this;
+//     })
+//     .catch(function (error) {
+//         console.log('No results returned or failed.', error);
+//     });
+
+//     return data_store_obj_get_promise;
+// }

src/routes/events_badges/stats/+page.svelte

@@ -0,0 +1,843 @@
+<script lang="ts">
+/*
+ * AE events_badges stats +page.svelte expects data object properties:
+ * * account_id, event_id
+ * * event_obj with related config
+ * * any customizable global, account, site, or event specific information (data_store)?
+ * *
+*/
+export let data: any;
+console.log(`ae_events_badges stats +page.svelte data:`, data);
+
+import { onMount } from 'svelte';
+
+
+import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils';
+import { api } from '$lib/api';
+import { events_func } from '$lib/ae_events_functions';
+import { liveQuery } from "dexie";
+import { db_events } from "$lib/db_events";
+import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
+
+import Element_qr_scanner from '$lib/element_qr_scanner.svelte';
+import Element_ae_crud from '$lib/element_ae_crud.svelte';
+
+import { goto } from '$app/navigation';
+
+// The lq__ prefix is used to indicate that this is a liveQuery object and it should use the $ prefix when referencing the object.
+let lq__event_badge_li = liveQuery(
+    () => db_events.badges.toArray()
+);
+
+// import Edit_modal_event_badge from '../10_edit_modal__event_badge_obj.svelte';
+
+let ae_promises: key_val = {};
+let load_obj_li_results: Promise<any>|key_val;
+let search_submit_results: Promise<any>|key_val;
+// let scan_submit_results: Promise<any>|key_val;
+
+
+$ae_loc.hostname = data.url.hostname;
+$ae_loc.site_domain = data.url.origin;
+
+// We don't want the edit or view to show up by default. Maybe if we see an object ID param in the URL, we can show a modal.
+$events_loc.show_edit__event_badge_obj = false;
+$events_loc.show_view__event_badge_obj = false;
+
+
+// These will likely be used for patch/update triggers. Maybe delete?
+let ae_triggers: key_val = {};
+
+let ae_event_badge_get_promise: Promise<any>;
+let ae_event_obj_get_promise;
+
+if ($events_slct.event_id) {
+    console.log('Selected Event ID:', $events_slct.event_id);
+    // $events_trigger = 'load__event_badge_obj_li';
+    // $events_trigger = 'load__event_obj';
+}
+
+// Reset this to an empty array.
+$events_slct.badge_obj_li = [];
+
+// ISHLT 2024 badge type codes
+let badge_type_code_li = [{"code":"current_member","name":"Member"},{"code":"inactive_member","name":"Non-Member"},{"code":"current_member_trainee","name":"Trainee Member"},{"code":"inactive_member_trainee","name":"Trainee Non-Member"},{"code":"ex_all","name":"Exhibitor All Access"},{"code":"ex_booth","name":"Exhibitor Booth Staff"},{"code":"hftx","name":"HFTX Master Academy"},{"code":"mcs","name":"MCS Master Academy"},{"code":"pediatric","name":"Pediatric"},{"code":"guest","name":"Guest"},{"code":"staff","name":"Staff"},{"code":"volunteer","name":"Volunteer"},{"code":"test","name":"Test"}];
+
+
+onMount(() => {
+    console.log('Events Badges [New/Edit]: +page.svelte');
+
+    // Load the AE Obj with ID based on the URL param.
+    if (data.url.searchParams.get('event_id')) {
+        $events_loc.event_id = data.url.searchParams.get('event_id');
+        $events_slct.event_id = data.url.searchParams.get('event_id');
+    }
+
+    // Load the Event Presenter Obj with ID based on the URL param.
+    if (data.url.searchParams.get('event_badge_id')) {
+        $events_slct.badge_id = data.url.searchParams.get('event_badge_id');
+    }
+
+	let url = window.location.href;
+    $ae_loc.href_url = url;
+
+    // The assumption is that if they know how to get to exactly this page then they are authorized in some way. Very limited risk!
+    $ae_loc.auth_access = true;
+});
+
+
+if ($events_slct.event_badge_id) {
+    console.log('Selected Event Presenter ID:', $events_slct.event_badge_id);
+    $events_trigger = 'load__event_badge';
+
+    // $events_loc.show_edit__event_badge_obj = true;
+    // $events_trigger = 'show_edit__event_badge';
+}
+
+
+$: if ($events_trigger == 'load__event_badge' && $events_slct.event_badge_id) {
+    console.log('Selected Event Presenter ID:', $events_slct.event_badge_id);
+
+    $events_trigger = null;
+
+    handle_load_ae_obj_id__event_badge({event_badge_id: $events_slct.event_badge_id, try_cache: false});
+
+    // modalStore.trigger(modal_edit__event_badge);
+    // $events_trigger = 'show_edit__event_badge';
+}
+
+async function handle_load_ae_obj_id__event_badge({event_badge_id, try_cache=false}) {
+    console.log(`*** handle_load_ae_obj_id__event_badge() *** event_badge_id=${event_badge_id}`);
+
+    let params = {};
+
+	// $ae_loc.hub.event_badge_id_status_qry__search = 'loading';
+    ae_event_badge_get_promise = api.get_ae_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'event_badge',
+        obj_id: event_badge_id,
+        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
+        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
+        params: params,
+        log_lvl: 0
+        })
+    .then(function (event_badge_get_result) {
+        if (event_badge_get_result) {
+            $events_slct.event_badge_obj = event_badge_get_result;
+            console.log(`event_badge object:`, $events_slct.event_badge);
+        }
+
+        // Auto show the selected event_badge ID
+        // Is this pushState needed here?
+        // Set the URL param "event_badge_id" to the current event_badge ID.
+        // const url = new URL(location);
+        // url.searchParams.set('event_badge_id', $events_slct.event_badge_id);
+        // history.pushState({}, '', url);
+
+        // Is this postMessage needed here?
+        // let message = {'event_badge_id': $events_slct.event_badge_id};
+        // window.parent.postMessage(message, "*");
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_event_badge_get_promise;
+}
+
+
+// Updated 2024-03-06 late
+$: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
+    console.log(`load__event_badge_obj_li() $events_slct.event_id=${$events_slct.event_id}`);
+
+    $events_trigger = null;
+
+    if (!$events_sess.badges.fulltext_search_qry_str || $events_sess?.badges.fulltext_search_qry_str.length <= 1 ) {
+        $events_slct.badge_obj_li = [];
+        // $events_sess.badges.fulltext_search_qry_str = '';
+    } else {
+
+    let type_code = $events_sess.badges.search_badge_type_code;
+    
+    let search_str = $events_sess.badges.fulltext_search_qry_str.trim();
+    let search_method = 'lk'; // 'ft', 'lk', 'eq'
+    let ft_search_str_new = '';
+    let lk_search_str_new = '';
+
+    if (search_method == 'ft') {
+        // Add quotes around the search string to make it an exact match.
+        ft_search_str_new = `"${search_str}"`;
+    } else if (search_method == 'lk') {
+        // Add a wildcard to the search string to make it a like match.
+        lk_search_str_new = search_str.trim().replace(',', ' ').replace(';', ' ').replace('  ', '%').replace(' ', '%');
+        lk_search_str_new = `%${lk_search_str_new}%`;
+    }
+    console.log(`"${search_str}"`);
+
+    let params = {
+        'qry__enabled': 'enabled',
+        'qry__hidden': 'not_hidden',
+        'qry__limit': 35,
+    }
+
+    if ($ae_loc.administrator_access) {
+        params['qry__enabled'] = 'all';
+        params['qry__hidden'] = 'all';
+        params['qry__limit'] = 150;
+    } else if ($ae_loc.trusted_access) {
+        params['qry__enabled'] = 'enabled';
+        params['qry__hidden'] = 'all';
+        params['qry__limit'] = 75;
+    } else {
+        params['qry__enabled'] = 'enabled';
+        params['qry__hidden'] = 'not_hidden';
+        params['qry__limit'] = 35;
+    }
+
+    if ($events_sess.status_qry__search == 'loading') {
+        console.log('*** $events_sess.status_qry__search == loading ***');
+
+        setTimeout(() => {
+            console.log("Delayed for X second.");
+
+            $events_sess.status_qry__search = 'loading';
+
+            search_submit_results = events_func.handle_search__event_badge({
+                api_cfg: $ae_api, 
+                event_id: $events_slct.event_id, 
+                type_code: type_code, 
+                fulltext_search_qry_str: ft_search_str_new,
+                like_search_qry_str: lk_search_str_new,
+                external_event_id: $events_loc.badges.default__external_registration_id,
+                params: params,
+                try_cache: false
+            })
+            .then(function (search_results) {
+                $events_slct.badge_obj_li = search_results;
+                console.log(search_results);
+                $events_sess.status_qry__search = 'done';
+            });
+        }, 250);
+    } else {
+        console.log('*** $events_sess.status_qry__search != loading ***');
+
+        $events_sess.status_qry__search = 'loading';
+
+        search_submit_results = events_func.handle_search__event_badge({
+            api_cfg: $ae_api, 
+            event_id: $events_slct.event_id, 
+            type_code: type_code, 
+            fulltext_search_qry_str: ft_search_str_new, 
+            like_search_qry_str: lk_search_str_new,
+            external_event_id: $events_loc.badges.default__external_registration_id,
+            params: params,
+            try_cache: false
+        })
+        .then(function (search_results) {
+            $events_slct.badge_obj_li = search_results;
+            console.log(search_results);
+            $events_sess.status_qry__search = 'done';
+        });
+    }
+
+    } // end if search string is valid
+}
+
+
+
+
+let load_event_badge_results = null;
+function handle_qr_scan_result(event) {
+    console.log('*** handle_qr_scan_result() ***');
+
+    let qr_scan_result = event.detail.result;
+    console.log(qr_scan_result);
+    let qr_scan_obj = ae_util.process_data_string(qr_scan_result);
+
+    if (qr_scan_obj.qr_type == 'OBJ') {
+        console.log(`Got a QR type of OBJ. Type ${qr_scan_obj.type}; ID ${qr_scan_obj.id}`);
+
+        if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_badge') {
+            console.log(`Found an Event Badge object type and ID.`);
+            let event_badge_id = qr_scan_obj.id
+
+            $events_sess.badges.qr_scan_result = `Found a badge type with ID: ${event_badge_id}`;
+
+            load_event_badge_results = events_func.handle_load_ae_obj_id__badge({api_cfg: $ae_api, badge_id: event_badge_id })
+            .then((result) => {
+                $events_slct.badge_id = event_badge_id;
+                $events_slct.badge_obj = result;
+                console.log(result);
+
+                // Confirm they want to view the badge.
+                if ($events_slct.badge_obj.print_count >= 1 && !confirm(`That badge has already been printed ${$events_slct.badge_obj.print_count} times. View badge for ${$events_slct.badge_obj.full_name}?`)) {
+                    return;
+                }
+
+                // ae_util.handle_url_and_message('event_badge_id', badge_obj.event_badge_id_random);
+
+                // Go to the badge view page
+                // Example: /event/badge/view_badge?event_badge_id=THE_ID
+                goto(`/event/badge/view_badge?event_badge_id=${$events_slct.badge_obj.event_badge_id_random}`, {replaceState: true});
+            });
+
+
+
+        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_exhibit') {
+            console.log(`Ignoring.`);
+        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_person') {
+            console.log(`Ignoring.`);
+        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_session') {
+            console.log(`Ignoring.`);
+        } else {
+            console.log(`Ignoring. The object returned was unexpected or not valid.`);
+            console.log(qr_scan_obj);
+        }
+    } else if (qr_scan_obj.qr_type == 'MECARD') {
+        console.log(`Got a QR type of MECARD. This was not expected, but we will at least display it???`);
+
+        // https://github.com/ertant/vCard
+        // vcard = vCardParser.parse(qr_scan_obj.str); // vCard
+        // console.log(vcard);
+
+        mecard = qr_scan_obj.str.split(';'); // vCard
+        // NOTE: Next we need to loop through the values and split each again on ":".
+        // NOTE: Then probably do a second check based on the known key values (N, EMAIL, ADR).
+        console.log(mecard);
+
+        show_mecard = true;
+    } else {
+        console.log(`Got a QR type of ${qr_scan_obj.qr_type}. Display warning to user, but otherwise ignoring.`);
+        console.log(qr_scan_obj);
+    }
+}
+
+function handle_qr_camera(event) {
+    console.log('*** handle_qr_camera() ***', event.detail);
+
+    if (!$ae_loc.hub.qr) {
+        $ae_loc.hub.qr = {};
+    }
+
+    if (event.detail.status == 'allowed') {
+        // console.log('Camera access allowed');
+        $ae_loc.hub.qr.camera_status = 'allowed';
+    } else if (event.detail.status == 'denied') {
+        console.log('Camera access denied!?');
+        $ae_loc.hub.qr.camera_status = 'denied';
+    }
+}
+
+</script>
+
+
+<section
+    class="ae_events_badges_review md:container h-full mx-auto"
+    >
+
+<!-- {#if $ae_loc.ds.hub__page__events_badges__create_info_header} -->
+{#if $ae_loc.iframe}
+    <span class="flex flex-row items-center justify-center">
+    <img src={$ae_loc.site_cfg_json.header_image_path} alt="header" class="w-auto max-h-20 m-2" />
+    <h1 class="h3 text-center m-2">Review &amp; Print<br>Your Badge</h1>
+    </span>
+{:else}
+<header>
+    <h1 class="h2 text-center">Badge Review and Print</h1>
+</header>
+{/if}
+
+<div class="variant-ghost-success my-2 p-2 flex flex-row items-center">
+
+{#if $events_sess.badges.show_form__search}
+<form
+    on:submit|preventDefault={() => {
+        $events_trigger = 'load__event_badge_obj_li';
+    }}
+    autocomplete="off"
+    class="form flex-grow flex flex-row flex-wrap gap-1 justify-center items-center w-full"
+    >
+{#if $ae_loc.trusted_access && badge_type_code_li}
+<div class="search_by_badge_type_code">
+    <select
+        bind:value={$events_sess.badges.search_badge_type_code}
+        on:change={() => {
+            $events_trigger = 'load__event_badge_obj_li';
+        }}
+        class="select text-xs transition-all"
+        >
+        <option value="">-- All Badge Types --</option>
+        {#each badge_type_code_li as badge_type_code}
+            <option value={badge_type_code.code}>{badge_type_code.name}</option>
+        {/each}
+    </select>
+</div>
+{/if}
+
+<!-- <input
+    type="search"
+    placeholder="name, email, affiliations"
+    id="badge_fulltext_search_qry_str"
+    name="fulltext_search_qry_str"
+    bind:value={$events_sess.badges.fulltext_search_qry_str}
+    class="input text-xl hover:text-3xl font-bold font-mono w-96"
+    on:change={() => {
+        if ($events_sess.badges.fulltext_search_qry_str.length >= 3) {
+            $events_trigger = 'load__event_badge_obj_li';
+        }
+    }}
+    > -->
+    <input
+    type="search"
+    placeholder="name, email, affiliations"
+    id="badge_fulltext_search_qry_str"
+    name="fulltext_search_qry_str"
+    bind:value={$events_sess.badges.fulltext_search_qry_str}
+    class="input text-1xl hover:text-3xl font-bold font-mono w-96 hover:w-2/5 transition-all"
+    on:keyup={() => {
+        if ($events_sess.badges.fulltext_search_qry_str.length >= 3) {
+            $events_trigger = 'load__event_badge_obj_li';
+        }
+    }}
+    autofocus
+    suggest="off"
+    data-lpignore="true"
+    >
+
+
+<button
+    type="submit"
+    class="btn btn-lg variant-ghost-success hover:variant-glass-success text-2xl font-bold w-48 transition-all"
+    on:click={() => {
+
+    }}
+    >
+    {#if $events_sess.status_qry__search == 'loading'}
+        <span class="fas fa-spinner fa-spin"></span>
+    {:else }
+        <!-- Nothing -->
+    {/if}
+    <span class="fas fa-search mx-1"></span>
+    Search
+</button>
+</form>
+
+<!-- **BEGIN** Scan Form -->
+{:else if $events_sess.badges.show_form__scan}
+
+<!-- <div class="ae_quick_modal_container">
+    <section
+        class="
+            ae_quick_popover
+            events__badges__scan
+            z-50
+            flex
+            flex-col
+            gap-4
+            justify-stretch
+            max-h-full
+            min-w-full
+            "
+        >
+        <header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
+            <h2 class="h3">Scan</h2>
+
+            <div class="popover__actions">
+                <button
+                    type="button"
+                    class="btn variant-soft-primary"
+                    on:click={() => {
+                        $events_sess.badges.show_form__scan = false;
+                        $events_sess.badges.qr_scan_start = false;
+                    }}
+                    >
+                    <span class="fas fa-times mx-1"></span>
+                    Close
+                </button>
+            </div>
+        </header>
+
+        <section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix"> -->
+
+
+        <!-- <div class=""> -->
+        <!-- <Element_qr_scanner start_qr_scanner={$events_sess.badges.qr_scan_start} show_qr_scan_result={true} show_qr_manual_badge_id_entry_option={true} on:qr_scan_result={handle_qr_scan_result} on:qr_camera={handle_qr_camera} /> -->
+        <!-- </div> -->
+
+        <!-- <div class="qr_quick_results variant-soft-secondary font-bold p-4">
+            {@html $events_sess.badges.qr_scan_result ?? 'No results yet'}
+        </div> -->
+
+
+
+        <!-- This block needs to be moved or something. It takes up too much space! -->
+        <!-- This uses the events_slct with badge_id and badge_obj. -->
+        <!-- {#if $events_slct.badge_id && $events_slct.badge_obj} -->
+
+        <!-- {/if} -->
+
+
+
+{/if}
+<!-- **END** Scan Form -->
+
+
+<div>
+    {#if $events_sess.badges.show_form__search}
+    <button
+        type="button"
+        on:click={() => {
+            localStorage.setItem('ae_badge_printed_redirect_path', '/events_badges/review');
+            // goto('/events_badges/print', {replaceState: true});
+            
+            $events_sess.badges.show_form__search = false;
+            $events_sess.badges.show_form__search_results = false;
+            $events_sess.badges.show_form__scan = true;
+            $events_sess.badges.qr_scan_start = true;
+        }}
+        class="btn btn-sm variant-ghost-primary"
+        >
+        <span class="fas fa-qrcode mx-1"></span>
+        QR Scan
+    </button>
+    {:else if $events_sess.badges.show_form__scan}
+    <button
+        type="button"
+        on:click={() => {
+            $events_sess.badges.show_form__search = true;
+            $events_sess.badges.show_form__search_results = false;
+            $events_sess.badges.show_form__scan = false;
+            $events_sess.badges.qr_scan_start = false;
+        }}
+        class="btn btn-sm variant-ghost-primary"
+        >
+        <span class="fas fa-search mx-1"></span>
+        Search
+    </button>
+    {/if}
+</div>
+
+
+</div>
+
+
+{#await load_obj_li_results}
+    <span class="modal-loading">
+        <span class="fas fa-spinner fa-spin"></span>
+        <span class="loading-text">
+            Loading...
+        </span>
+    </span>
+{:then load_obj_li_results}
+    {#if load_obj_li_results}
+    <span class="fas fa-check text-green-500"></span>
+    <span class="saved-text">
+        Loaded
+    </span>
+    {/if}
+{/await}
+
+
+{#if $events_sess.badges.show_form__search}
+
+{#if $events_slct?.badge_obj_li.length}
+<!-- {#if $event_badge_li} -->
+<section class="ae_h_scrollfix">
+<h2 class="h3">Results:</h2>
+<table class="table">
+<thead>
+<tr>
+    <th>Badge</th>
+    <!-- The email should only be the first 3 chars and then @domain name. -->
+    <th>Email / Affiliations / Location</th>
+    <!-- <th>Affiliations / Location</th> -->
+    <th>Badge Type</th>
+</tr>
+</thead>
+<tbody>
+{#each $events_slct.badge_obj_li as badge_obj}
+<!-- {#each $lq__event_badge_li as badge_obj} -->
+<tr 
+    class:hidden={(badge_obj.print_count >= 1 || badge_obj.hide) && !$ae_loc.trusted_access}
+    class:fade_50={(badge_obj.print_count >= 1 || badge_obj.hide) && $ae_loc.trusted_access}
+    >
+<td class="">
+    <button
+        class="btn btn-xl text-xl variant-ghost-secondary hover:variant-glass-secondary w-96 overflow-hidden transition-all"
+        on:click={() => {
+            // Confirm they want to view the badge.
+            if (badge_obj.print_count >= 1 && !confirm(`That badge has already been printed ${badge_obj.print_count} times. View badge for ${badge_obj.full_name}?`)) {
+                return;
+            }
+            // ae_util.handle_url_and_message('event_badge_id', badge_obj.event_badge_id_random);
+
+            // Go to the badge view page
+            // Example: /event/badge/view_badge?event_badge_id=THE_ID
+            goto(`/event/badge/view_badge?event_badge_id=${badge_obj.event_badge_id_random}`, {replaceState: true});
+        }}
+        >
+        <span class="flex flex-row justify-between items-center w-full">
+            <span>
+            {#if badge_obj.hide}
+                <span class="fas fa-eye-slash mx-1"></span>
+            {:else}
+                <span class="fas fa-id-badge mx-1"></span>
+            {/if}   
+            {#if badge_obj.print_count >= 1}
+                <!-- Show a green checkmark -->
+                <span class="fas fa-check text-green-500"></span>
+
+                {#if $ae_loc.trusted_access}
+                    <span class="print_count variant-soft-warning px-1">{badge_obj.print_count}x</span>
+                {/if}
+            {/if}
+            </span>
+
+            <span class="font-bold">
+            {#if badge_obj.full_name_override}
+                {badge_obj.full_name_override}
+            {:else if badge_obj.full_name}
+                {badge_obj.full_name}
+            {:else if badge_obj.given_name}
+                {badge_obj.given_name} {badge_obj.family_name}
+            {:else}
+                -- no name --
+            {/if}
+            </span>
+        </span>
+    </button>
+</td>
+<td class="">
+    <div class="">
+    <div>
+    <!-- The email should only be the first 3 chars and then @domain name. -->
+    <!-- Example: original: scott.idem@oneskyit.com obscured: sco...@oneskyit.com -->
+    <span class="fas fa-envelope mx-1"></span>
+    {badge_obj.email ? badge_obj.email.replace(/^(.{3}).*@/, '$1...@') : ''}
+    </div>
+
+    <div>
+    {#if badge_obj?.affiliations}
+        <span class="fas fa-users mx-1"></span>
+        {badge_obj.affiliations}
+    {:else if badge_obj.location}
+        <span class="fas fa-map-marker-alt mx-1"></span>
+        {badge_obj.location}
+    {:else if badge_obj.city && badge_obj.state_province}
+        <span class="fas fa-map-marker-alt mx-1"></span>
+        {badge_obj.city}, {badge_obj.state_province}
+    {:else if badge_obj.city}
+        <span class="fas fa-map-marker-alt mx-1"></span>
+        {badge_obj.city}
+    {:else if badge_obj.state_province}
+        <span class="fas fa-map-marker-alt mx-1"></span>
+        {badge_obj.state_province}
+    {:else}
+        -- none --
+    {/if}
+    </div>
+    </div>
+</td>
+<td class="">
+    <div class="flex flex-row items-center justify-between">
+    <span title={badge_obj.registration_type}>{badge_obj.badge_type}</span>
+    
+    <div>
+    <Element_ae_crud
+        trigger_patch={ae_triggers.print_count}
+        api_cfg={$ae_api}
+        object_type={'event_badge'}
+        object_id={badge_obj.event_badge_id_random}
+        field_name={'print_count'}
+        field_type={'text'}
+        field_value={badge_obj.print_count}
+        allow_null={false}
+        hide_edit_btn={true}
+        outline_element={false}
+        show_crud={false}
+        display_inline={true}
+        class_li={'m-1'}
+        on:ae_crud_updated={e => {
+            console.log(`ae_crud_updated event:`, e.detail);
+            // events_func.handle_load_ae_obj_id__badge({api_cfg: $ae_api, badge_id: $events_slct.badge_id});
+        }}
+        >
+        
+        <!-- {@html (badge_obj.print_count ? `<span class="fas fa-users m-1"></span> ${badge_obj.print_count}` : '<span class="fas fa-users m-1"></span> 0')} -->
+        {#if $ae_loc.administrator_access}
+        <span class="fas fa-print m-1"></span>
+        <input
+            type="number" min="0" max="10" step="1"
+            bind:value={badge_obj.print_count}
+
+            class="input text-sm w-16 m-1"
+            />
+        <button
+            type="button"
+            on:click={() => {
+                // badge_obj.print_count = 0;
+                ae_triggers.print_count = true;
+            }}
+            class="btn btn-sm variant-soft-warning"
+            >
+            <span class="fas fa-save m-1"></span>
+            Save
+        </button>
+        {/if}
+    </Element_ae_crud>
+    
+    <Element_ae_crud
+        trigger_patch={ae_triggers.hide}
+        api_cfg={$ae_api}
+        object_type={'event_badge'}
+        object_id={badge_obj?.event_badge_id_random}
+        field_name={'hide'}
+        field_type={'button'}
+        field_value={badge_obj.hide}
+        allow_null={false}
+        hide_edit_btn={true}
+        outline_element={false}
+        show_crud={false}
+        display_inline={true}
+        class_li={'m-1'}
+        on:ae_crud_updated={e => {
+            console.log(`ae_crud_updated event:`, e.detail);
+            // events_func.handle_load_ae_obj_id__badge({api_cfg: $ae_api, badge_id: badge_obj.badge_id_random});
+        }}
+        >
+        <!-- {#if $ae_loc.trusted_access}
+        {(badge_obj?.hide ? 'Hidden' : 'Not Hidden')}
+        {/if} -->
+        <button
+            on:click={() => {
+                // $events_slct.badge_obj = badge_obj;
+                badge_obj.hide = !badge_obj?.hide;
+                ae_triggers.hide = true;
+            }}
+            class="btn btn-sm variant-soft-warning"
+            class:hidden={!$ae_loc.trusted_access}
+            >
+            {#if $ae_loc.trusted_access}
+            {@html (badge_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')}
+            {:else}
+                <!-- Users see this as the "Archive" option button -->
+                {@html (badge_obj?.hide ? '<span class="fas fa-archive m-1"></span> Unarchive' : '<span class="fas fa-archive m-1"></span> Archive')}
+            {/if}
+        </button>
+    </Element_ae_crud>
+    </div>
+    
+    </div>
+</td>
+</tr>
+{/each}
+</tbody>
+</table>
+</section>
+{:else}
+    <div class="text-xl variant-filled-success font-bold p-2">
+        Type your name, email, or affiliations. Results will start to appear automatically.
+    </div>
+
+    {#if $events_sess.badges.fulltext_search_qry_str && $events_sess.badges.fulltext_search_qry_str.length > 5}
+    <div class="text-xl variant-filled-warning font-bold p-2">
+        No badges found. Please change your search.
+    </div>
+    {/if}
+{/if}
+
+
+{:else if $events_sess.badges.show_form__scan}
+
+
+<div class="ae_quick_modal_container">
+    <section
+        class="
+            ae_quick_popover_small
+            events__badges__scan
+            z-50
+            flex
+            flex-col
+            gap-4
+            justify-stretch
+
+            "
+        >
+        <header class="popover__header flex gap-2 justify-between items-center p-1 border-b">
+            <h2 class="h3">Scan</h2>
+
+            <div class="popover__actions flex flex-row gap-2 items-center">
+                <div>
+                <button
+                    type="button"
+                    on:click={() => {
+                        console.log('Turn on iframe mode');
+                        $ae_loc.iframe = !$ae_loc.iframe;
+                    }}
+                    class="btn btn-sm variant-soft w-48"
+                    >
+                    <span class="fas fa-compress mx-1"></span>
+                    Turn {$ae_loc.iframe ? 'off' : 'on'} iframe mode
+                </button>
+                </div>
+
+                <button
+                    type="button"
+                    class="btn variant-soft-primary"
+                    on:click={() => {
+                        $events_sess.badges.show_form__search = true;
+                        $events_sess.badges.show_form__search_results = false;
+                        $events_sess.badges.show_form__scan = false;
+                        $events_sess.badges.qr_scan_start = false;
+
+                        $events_slct.badge_id = null;
+                        $events_slct.badge_obj = null;
+                    }}
+                    >
+                    <span class="fas fa-times mx-1"></span>
+                    Close
+                </button>
+            </div>
+        </header>
+
+        <section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
+
+        <Element_qr_scanner start_qr_scanner={$events_sess.badges.qr_scan_start} show_qr_scan_result={true} show_qr_manual_badge_id_entry_option={true} on:qr_scan_result={handle_qr_scan_result} on:qr_camera={handle_qr_camera} />
+
+        <div class="qr_quick_results variant-soft-secondary font-bold p-4">
+            {@html $events_sess.badges.qr_scan_result ?? 'No results yet'}
+        </div>
+
+
+        {#if $events_slct.badge_id && $events_slct.badge_obj}
+        <p>Badge ID: <strong>{$events_slct.badge_obj.event_badge_id_random}</strong></p>
+        {/if}
+
+        </section> <!-- .popover__content -->
+    </section> <!-- .ae_quick_popover -->
+
+</div>
+
+
+
+{/if}
+
+<!-- {#if $ae_loc.ds.hub__page__events_badges__create_info}
+{@html $ae_loc.ds.hub__page__events_badges__create_info}
+{:else}
+<section>
+        <div class="alert alert-info">
+            More information goes here.
+        </div>
+</section>
+{/if} -->
+
+
+</section>
+
+
+
+
+

src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte

@@ -259,7 +259,7 @@ function handle_qr_camera(event) {
 {/if}
 
 <button class="btn btn-sm variant-soft-warning" on:click={() => {
-        if ($events_loc.leads.default_to_scan) {
+        if (!$events_loc.leads.default_to_scan) {
             if (!confirm('Are you sure you want to enable the default scan option?')) {
                 return false;
             }
@@ -270,6 +270,18 @@ function handle_qr_camera(event) {
     {@html ($events_loc.leads.default_to_scan ? '<span class="fas fa-toggle-on m-1"></span> Disable Default Scan?' : '<span class="fas fa-toggle-off m-1"></span> Enable Default Scan?')}
 </button>
 
+<button class="btn btn-sm variant-soft-warning" on:click={() => {
+    if (!$events_loc.leads.auto_view) {
+        if (!confirm('Are you sure you want to enable the auto view new leads option?')) {
+            return false;
+        }
+    }
+    $events_loc.leads.auto_view=!$events_loc.leads.auto_view;
+    }}
+    >
+{@html ($events_loc.leads.auto_view ? '<span class="fas fa-toggle-on m-1"></span> Disable Auto View?' : '<span class="fas fa-toggle-off m-1"></span> Enable Auto View?')}
+</button>
+
 {#if ($events_loc.leads.show_content__scan_requirements)}
     <button class="btn btn-sm variant-soft-secondary" on:click={() => $events_loc.leads.show_content__scan_requirements=false}><span class="fas fa-info mx-1"></span> Hide Requirements?</button>
 {:else if (!$events_loc.leads.show_content__scan_requirements)}
@@ -407,7 +419,6 @@ function handle_qr_camera(event) {
 
                     $events_sess.leads.show_confirm__add_lead[index] = true;
                 }}
-                disabled={!$ae_loc.trusted_access && 2==4}
                 title="Add {event_badge_obj_v2.full_name} to the leads list?"
                 class="btn btn-md variant-soft-primary mx-1"
                 >
@@ -468,7 +479,6 @@ function handle_qr_camera(event) {
                         <button
                             type="button"
                             class="btn variant-soft-primary"
-                            disabled={!$ae_loc.trusted_access && 2==4}
                             on:click={() => {
                                 console.log(`Add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
 
@@ -511,6 +521,10 @@ function handle_qr_camera(event) {
                                         $events_loc.leads.tab[$events_slct.exhibit_id] = 'leads';
 
                                         $events_sess.leads.show_form__view_lead = $events_slct.exhibit_tracking_id;
+                                    } else {
+                                        // $events_sess.leads.show_form__search = true;
+                                        $events_sess.leads.show_form__scan = true;
+                                        $events_sess.leads.qr_scan_start = true;
                                     }
                                 });
 
@@ -700,6 +714,8 @@ function handle_qr_camera(event) {
                     on:click={() => {
                         $events_sess.leads.show_form__scan = false;
                         $events_sess.leads.qr_scan_start = false;
+
+                        $events_sess.leads.qr_scan_result = null;
                     }}
                     >
                     <span class="fas fa-times mx-1"></span>
@@ -738,7 +754,7 @@ function handle_qr_camera(event) {
             vDEV
 
         {:else}
-        ???
+        <p>Please close this and select a QR Scanner version</p>
         {/if}
 
         <div class="qr_quick_results variant-soft-secondary font-bold p-4">
@@ -775,6 +791,8 @@ function handle_qr_camera(event) {
 
                                 $events_slct.badge_id = null;
                                 $events_slct.badge_obj = null;
+
+                                $events_sess.leads.qr_scan_result = null;
                             }}
                             >
                             <span class="fas fa-times mx-1"></span>
@@ -787,6 +805,7 @@ function handle_qr_camera(event) {
                 <p>Are you sure you want to add <strong>{$event_badge_obj.full_name}</strong> to the leads list?</p>
                 <p>Badge ID: <strong>{$event_badge_obj.event_badge_id_random}</strong></p>
                 <div class="flex flex-row gap-16 justify-center items-center">
+
                     <button
                         type="button"
                         class="btn variant-soft-primary"
@@ -800,6 +819,8 @@ function handle_qr_camera(event) {
 
                             // $events_slct = $events_slct;
                             // $events_sess = $events_sess;
+
+                            $events_sess.leads.qr_scan_result = null;
                         }}
                         >
                         <span class="fas fa-times mx-1"></span>
@@ -849,6 +870,12 @@ function handle_qr_camera(event) {
                                     $events_loc.leads.tab[$events_slct.exhibit_id] = 'leads';
 
                                     $events_sess.leads.show_form__view_lead = $events_slct.exhibit_tracking_id;
+                                } else {
+                                    // $events_sess.leads.show_form__search = true;
+                                    $events_sess.leads.show_form__scan = true;
+                                    $events_sess.leads.qr_scan_start = true;
+
+                                    $events_sess.leads.qr_scan_result = null;
                                 }
                             });
 
@@ -858,6 +885,7 @@ function handle_qr_camera(event) {
                         <span class="fas fa-check mx-1"></span>
                         Yes
                     </button>
+
                 </div>
                 </section> <!-- .popover__content -->
             </section> <!-- .ae_quick_popover -->
@@ -922,6 +950,8 @@ function handle_qr_camera(event) {
                 on:click={() => {
                     $events_sess.leads.show_form__scan = false;
                     $events_sess.leads.qr_scan_start = false;
+
+                    $events_sess.leads.qr_scan_result = null;
                 }}
                 >
                 <span class="fas fa-times mx-1"></span>

src/routes/events_leads/exhibit/[slug]/leads_list.svelte

@@ -341,7 +341,7 @@ let refresh_leads_list = setInterval(function () {
                     $events_sess.leads.show_form__view_lead = $events_slct.exhibit_tracking_id;
                     // $events_sess.leads.show_form__view_lead[$events_slct.exhibit_tracking_id] = true;
                 }}
-                class="btn btn-sm variant-soft-primary flex flex-row justify-between items-center gap-0.5 min-w-72 min-h-14 max-h-14"
+                class="btn btn-sm variant-soft-primary flex flex-row justify-between items-center gap-0.5 min-w-72 lg:min-w-96 min-h-14 max-h-14"
                 >
                 <span class="fas fa-user mx-0.5"></span>
                 <span class="text-lg grow text-center">{event_exhibit_tracking_obj.event_badge_full_name}</span>