Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now with much better badge search function. And bug fix for Payment tab.

Browse Source
This commit is contained in:
Scott Idem
2024-04-04 21:33:45 -04:00
parent 5671423467
commit 16f65cf85f
7 changed files with 456 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

422
src/routes/events_badges/review/+page.svelte
View File

@@ -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<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;
@@ -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';
}
}
</script>
@@ -182,39 +277,65 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
</header>
{/if}
<div class="variant-ghost-success my-2 p-2 flex flex-row items-center">
{#if $events_sess.badges.show_form__search}
<form
class="form"
class="form flex-grow flex flex-row flex-wrap gap-1 justify-center items-center w-full"
on:submit|preventDefault={() => {
$events_trigger = 'load__event_badge_obj_li';
}}
>
<!-- <section class="btn btn-group"> -->
<input
{#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="Search (name, email, affiliatons, etc.)"
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 w-96"
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 transition-all"
on:keyup={() => {
if ($events_sess.badges.fulltext_search_qry_str.length >= 3) {
$events_trigger = 'load__event_badge_obj_li';
}
}}
>
<button
type="submit"
class="btn variant-ghost-primary w-48"
class="btn btn-lg variant-ghost-success hover:variant-glass-success text-2xl font-bold w-48 transition-all"
on:click={() => {
// $events_trigger = 'load__event_badge_obj_li';
// $events_trigger = $events_trigger;
// handle_oninput_fulltext_search_qry_str();
// handle_badge_search('event_id', null);
// modalStore.trigger(modal_edit__event_badge);
// $events_trigger = 'load__event_badge';
// $events_loc.show_edit__event_badge_obj = true;
// modalStore.trigger(modal_edit__event_badge);
}}
>
<span class="fas fa-search mx-1"></span>
@@ -222,6 +343,102 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
</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={() => {
$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>
@@ -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}
<!-- {#if $event_badge_li} -->
<section class="ae_h_scrollfix">
@@ -248,40 +467,90 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
<tr>
<th>Badge</th>
<!-- The email should only be the first 3 chars and then @domain name. -->
<th>Email</th>
<th>Affiliations</th>
<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>
<td>
<tr class="">
<td class="">
<button
class="btn variant-ghost-secondary w-96"
class="btn btn-xl text-xl variant-ghost-secondary hover:variant-glass-secondary w-96 overflow-hidden transition-all"
on:click={() => {
ae_util.handle_url_and_message('event_badge_id', badge_obj.event_badge_id_random);
// modalStore.trigger(modal_edit__event_badge);
// 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);
// $events_trigger = 'load__event_badge';
// $events_trigger = 'show_edit__event_badge';
// $events_loc.show_edit__event_badge_obj = true;
// modalStore.trigger(modal_edit__event_badge);
// 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="fas fa-id-badge mx-1"></span>
Badge: {badge_obj.full_name}
<span class="flex flex-row justify-between items-center w-full">
<span>
<span class="fas fa-id-badge mx-1"></span>
{#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>
<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>
<span class="fas fa-users mx-1"></span>
{badge_obj.affiliations}
<td class="">
<span title={badge_obj.registration_type}>{badge_obj.badge_type}</span>
</td>
</tr>
{/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}
<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-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__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>
@@ -304,7 +633,12 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
More information goes here.
</div>
</section>
{/if}
{/if} -->
</section>

2
src/routes/events_leads/exhibit/[slug]/+page.svelte
View File

@@ -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}
<Tab
bind:group={$events_loc.leads.tab[$events_slct.exhibit_id]}
name="tab_payment"

42
src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte
View File

@@ -861,47 +861,5 @@ function handle_qr_camera(event) {
<style lang="postcss">
/* 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%;
}
</style>

5
src/routes/events_leads/exhibit/[slug]/leads_payment.svelte
View File

@@ -120,15 +120,16 @@ $: if ($events_sess.stripe && $events_sess.stripe.license_qty >= 0 || $events_se
<p>You have not rented any tablets for scanning. You can use your own device(s) with this service.</p>
{/if}
<p>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.</p>
<p>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.</p>
</div>
<button
type="button"
on:click={() => {
let confirm_hide = confirm('Are you sure you want to hide this tab?');
let confirm_hide = confirm('You can unhide this later under the Config tab.');
if (confirm_hide) {
$events_loc.leads.show_option__paid_tab = false;
$events_loc.leads.tab[$events_slct.exhibit_id] = 'start';
}
}}
class="btn variant-soft-primary"