From 16f65cf85f50b8876e358a681bd6daaa5a3375c3 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Thu, 4 Apr 2024 21:33:45 -0400 Subject: [PATCH] Now with much better badge search function. And bug fix for Payment tab. --- src/app.postcss | 47 ++ src/lib/ae_events_functions.ts | 15 +- src/lib/ae_events_stores.ts | 15 + src/routes/events_badges/review/+page.svelte | 422 ++++++++++++++++-- .../events_leads/exhibit/[slug]/+page.svelte | 2 +- .../exhibit/[slug]/leads_add_scan.svelte | 42 -- .../exhibit/[slug]/leads_payment.svelte | 5 +- 7 files changed, 456 insertions(+), 92 deletions(-) diff --git a/src/app.postcss b/src/app.postcss index 3540de3f..72b7e23b 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -250,4 +250,51 @@ div.btn-group button:last-child { /* outline: medium dashed blue; */ display: none; } +} + + + + +/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */ +div.ae_quick_modal_container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + background-color: hsla(0, 0%, 0%, .5); +} + +/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */ +section.ae_quick_popover { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 100; + background-color: hsla(0, 0%, 100%, .95); + padding: 1rem; + border-radius: .5rem; + box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5); + + min-height: 98%; + min-width: 98%; +} + +section.ae_quick_popover_small { + position: fixed; + top: 1em; + left: 50%; + transform: translate(-50%, 0%); + z-index: 100; + background-color: hsla(0, 0%, 100%, .95); + padding: 1rem; + border-radius: .5rem; + box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5); + + min-height: 24rem; + max-height: 95%; + min-width: 50%; + max-width: 95%; } \ No newline at end of file diff --git a/src/lib/ae_events_functions.ts b/src/lib/ae_events_functions.ts index 31e770b0..dd441c8b 100644 --- a/src/lib/ae_events_functions.ts +++ b/src/lib/ae_events_functions.ts @@ -169,7 +169,7 @@ async function handle_load_ae_obj_li__badge( } -async function handle_search__event_badge({api_cfg, event_id, fulltext_search_qry_str, external_event_id, params={}, try_cache=true}) { +async function handle_search__event_badge({api_cfg, event_id, type_code=null, fulltext_search_qry_str, external_event_id, params={}, try_cache=true}) { console.log(`*** handle_search__event_badge() *** event_id=${event_id}`); let enabled: string = (params.qry__enabled ?? 'enabled'); // all, disabled, enabled @@ -178,6 +178,7 @@ async function handle_search__event_badge({api_cfg, event_id, fulltext_search_qr let offset: number = (params.qry__offset ?? 0); // 0 let params_json: key_val = {}; + if (fulltext_search_qry_str && fulltext_search_qry_str.length > 2) { params_json['ft_qry'] = { 'default_qry_str': fulltext_search_qry_str, @@ -187,7 +188,15 @@ async function handle_search__event_badge({api_cfg, event_id, fulltext_search_qr } params_json['and_qry'] = {}; - if (external_event_id) params_json['and_qry']['external_event_id'] = external_event_id; + if (external_event_id) { + params_json['and_qry']['external_event_id'] = external_event_id; + } + + if (type_code) { // This is the event_badge.badge_type_code. There is also a member_type_code and registration_type_code that could be referenced in the future. + params_json['and_qry']['badge_type_code'] = type_code; + } + + let order_by_li = {'priority': 'DESC', 'sort': 'DESC', 'family_name': 'ASC', 'given_name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'}; // $events_sess.badges.status_qry__search = 'loading'; ae_promises.search__event_badge = await api.get_ae_obj_li_for_obj_id_crud({ @@ -199,7 +208,7 @@ async function handle_search__event_badge({api_cfg, event_id, fulltext_search_qr use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config. enabled: enabled, hidden: hidden, - order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'}, + order_by_li: order_by_li, // order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'created_on': 'DESC', 'updated_on': 'DESC'}, limit: limit, offset: offset, diff --git a/src/lib/ae_events_stores.ts b/src/lib/ae_events_stores.ts index 404636a6..0329beee 100644 --- a/src/lib/ae_events_stores.ts +++ b/src/lib/ae_events_stores.ts @@ -33,6 +33,14 @@ let events_local_data_struct: key_val = { // Badge Printing 'badges': { + auto_view: true, + + show_hidden: false, // These are hidden (archived) leads so the list is not as long. + show_not_enabled: false, + + show_printed: false, + allow_reprint: false, + 'show_element__cfg': true, 'show_element__cfg_detail': false, 'show_element__access_type': true, @@ -122,6 +130,13 @@ let events_session_data_struct: key_val = { 'badges': { 'fulltext_search_qry_str': null, 'status_qry__search': null, + + show_form__search: true, + show_form__search_results: true, + show_form__scan: false, + + qr_scan_start: true, + qr_scan_result: null, }, // Lead Retrievals (Exhibit) diff --git a/src/routes/events_badges/review/+page.svelte b/src/routes/events_badges/review/+page.svelte index 2c8fb101..15b3933f 100644 --- a/src/routes/events_badges/review/+page.svelte +++ b/src/routes/events_badges/review/+page.svelte @@ -14,6 +14,9 @@ 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 { 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() @@ -24,6 +27,7 @@ let lq__event_badge_li = liveQuery( let ae_promises: key_val = {}; let load_obj_li_results: Promise|key_val; let search_submit_results: Promise|key_val; +let scan_submit_results: Promise|key_val; $ae_loc.hostname = data.url.hostname; @@ -42,6 +46,9 @@ if ($events_slct.event_id) { // $events_trigger = 'load__event_obj'; } +// 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'); @@ -126,21 +133,27 @@ async function handle_load_ae_obj_id__event_badge({event_badge_id, try_cache=fal $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) { console.log(`handle_load_ae_obj_id__event() $events_slct.event_id=${$events_slct.event_id} api_cfg=`, $ae_api); + $events_trigger = null; + if (!$events_sess.badges.fulltext_search_qry_str) { $events_sess.badges.fulltext_search_qry_str = ''; } + let type_code = $events_sess.badges.search_badge_type_code; + let search_str = $events_sess.badges.fulltext_search_qry_str.trim(); + // Add quotes around the search string to make it an exact match. + search_str = `"${search_str}"`; + console.log(search_str); + if ($events_sess.status_qry__search == 'loading') { console.log('*** $events_sess.status_qry__search == loading ***'); setTimeout(() => { console.log("Delayed for X second."); - $events_trigger = null; - let search_str = $events_sess.badges.fulltext_search_qry_str.trim(); - console.log(search_str); + $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, fulltext_search_qry_str: search_str, external_event_id: $events_loc.badges.default__external_registration_id}) + 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: search_str, external_event_id: $events_loc.badges.default__external_registration_id}) .then(function (search_results) { $events_slct.badge_obj_li = search_results; console.log(search_results); @@ -149,14 +162,13 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) { }, 250); } else { console.log('*** $events_sess.status_qry__search != loading ***'); - $events_trigger = null; $events_sess.status_qry__search = 'loading'; - let search_str = $events_sess.badges.fulltext_search_qry_str.trim(); + console.log(search_str); - search_submit_results = events_func.handle_search__event_badge({api_cfg: $ae_api, event_id: $events_slct.event_id, fulltext_search_qry_str: search_str, external_event_id: $events_loc.badges.default__external_registration_id}) + 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: search_str, external_event_id: $events_loc.badges.default__external_registration_id}) .then(function (search_results) { $events_slct.badge_obj_li = search_results; console.log(search_results); @@ -167,6 +179,89 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) { + +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'; + } +} + @@ -182,39 +277,65 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) { {/if} +
+ +{#if $events_sess.badges.show_form__search}
{ $events_trigger = 'load__event_badge_obj_li'; }} > - - + +
+{/if} + + + { + if ($events_sess.badges.fulltext_search_qry_str.length >= 3) { + $events_trigger = 'load__event_badge_obj_li'; + } + }} > + + +{:else if $events_sess.badges.show_form__scan} + + + + + + + + + + + + + + + + + + + + +{/if} + + + +
+ {#if $events_sess.badges.show_form__search} + + {:else if $events_sess.badges.show_form__scan} + + {/if} +
+ + + + + {#await load_obj_li_results} @@ -239,6 +456,8 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) { {/await} +{#if $events_sess.badges.show_form__search} + {#if $events_slct?.badge_obj_li.length}
@@ -248,40 +467,90 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) { Badge - Email - Affiliations + Email / Affiliations / Location + + Badge Type {#each $events_slct.badge_obj_li as badge_obj} - - + + - + +
+
{badge_obj.email ? badge_obj.email.replace(/^(.{3}).*@/, '$1...@') : ''} +
+ +
+ {#if badge_obj?.affiliations} + + {badge_obj.affiliations} + {:else if badge_obj.location} + + {badge_obj.location} + {:else if badge_obj.city && badge_obj.state_province} + + {badge_obj.city}, {badge_obj.state_province} + {:else if badge_obj.city} + + {badge_obj.city} + {:else if badge_obj.state_province} + + {badge_obj.state_province} + {:else} + -- none -- + {/if} +
+
- - - {badge_obj.affiliations} + + {badge_obj.badge_type} {/each} @@ -295,8 +564,68 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) { {/if} +{:else if $events_sess.badges.show_form__scan} -{#if $ae_loc.ds.hub__page__events_badges__create_info} + +
+
+
+

Scan

+ +
+ +
+
+ +
+ + + +
+ {@html $events_sess.badges.qr_scan_result ?? 'No results yet'} +
+ + + {#if $events_slct.badge_id && $events_slct.badge_obj} +

Badge ID: {$events_slct.badge_obj.event_badge_id_random}

+ {/if} + +
+
+ +
+ + + +{/if} + +
+ + + + + diff --git a/src/routes/events_leads/exhibit/[slug]/+page.svelte b/src/routes/events_leads/exhibit/[slug]/+page.svelte index 6c9f83fd..756a7bde 100644 --- a/src/routes/events_leads/exhibit/[slug]/+page.svelte +++ b/src/routes/events_leads/exhibit/[slug]/+page.svelte @@ -503,7 +503,7 @@ function send_init_confirm_email({index, lic_key, lic_pass}) { border="" class="bg-surface-100-800-token w-full" > - {#if $events_loc.leads.show_option__paid_tab} + {#if $events_loc.leads.show_option__paid_tab ?? true} -/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */ -div.ae_quick_modal_container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 100; - background-color: hsla(0, 0%, 0%, .5); -} -/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */ -section.ae_quick_popover { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 100; - background-color: hsla(0, 0%, 100%, .95); - padding: 1rem; - border-radius: .5rem; - box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5); - - min-height: 98%; - min-width: 98%; -} - -section.ae_quick_popover_small { - position: fixed; - top: 1em; - left: 50%; - transform: translate(-50%, 0%); - z-index: 100; - background-color: hsla(0, 0%, 100%, .95); - padding: 1rem; - border-radius: .5rem; - box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5); - - min-hight: 24rem; - max-height: 95%; - min-width: 50%; - max-width: 95%; -} diff --git a/src/routes/events_leads/exhibit/[slug]/leads_payment.svelte b/src/routes/events_leads/exhibit/[slug]/leads_payment.svelte index c10d0425..bc3bfd7f 100644 --- a/src/routes/events_leads/exhibit/[slug]/leads_payment.svelte +++ b/src/routes/events_leads/exhibit/[slug]/leads_payment.svelte @@ -120,15 +120,16 @@ $: if ($events_sess.stripe && $events_sess.stripe.license_qty >= 0 || $events_se

You have not rented any tablets for scanning. You can use your own device(s) with this service.

{/if} -

To save space while using this app you can hide this payment tab now that you have paid for your licenses. This can be unhidden under the Conf tab if needed.

+

To save space while using this app you can hide this payment tab now that you have paid for your licenses. This can be unhidden under the Conf(ig) tab if needed.