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

General clean up and making things a least look real.

Browse Source
This commit is contained in:
Scott Idem
2024-03-20 16:33:36 -04:00
parent 84e3098b72
commit e21b7ef584
8 changed files with 565 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/ae_events_stores.ts
View File

@@ -118,11 +118,15 @@ let events_session_data_struct: key_val = {
example: true,
show_form__license: false,
show_form__search: false,
show_form__scan: false,
submit_status__license: null, // 'saving', 'created', 'updated'
// create_status__license: null, // 'creating', 'created', 'updated'
// update_status__license: null, // 'updating', 'created', 'updated'
submit_status__search: null, // 'searching', 'complete'
// The entered_passcode is the exhibit booths shared passcode for staff. This is used to initially access the lead retrieval service.
entered_passcode: null,
@@ -135,6 +139,9 @@ let events_session_data_struct: key_val = {
'updated_on': new Date().toISOString()
},
entered_search_str: null,
qr_scan_start: true,
qr_scan_result: null,
},

31
src/lib/element_qr_scanner.svelte
View File

@@ -295,19 +295,32 @@ function handle_qr_manual_entry() {
class="ae_container qr_scanning_container"
>
<div
class="ae_options"
class="ae_options m-1"
>
{#if scanning_status == 'not_started' }
<button on:click={handle_start_qr_scanning} class="btn btn-lg variant-soft-primary btn_start"><span class="fas fa-qrcode"></span> Start Scanning</button>
<button on:click={handle_start_qr_scanning} class="btn btn-lg variant-soft-primary btn_start"><span class="fas fa-qrcode mx-1"></span> Start Scanning</button>
<span class="loading-text">
Scanning stopped
</span>
{:else if scanning_status == 'paused' && show_pause_btn}
<button on:click={handle_resume_qr_scanning} class="btn btn-md variant-soft-primary btn_resume"><span class="fas fa-play"></span> Resume</button>
<span>Scanning paused</span>
{:else if scanning_status == 'scanning'}
<button on:click={handle_stop_qr_scanning} class="btn btn-md variant-soft-secondary btn_stop"><span class="fas fa-stop-circle m-1"></span> Stop</button>
<button on:click={handle_stop_qr_scanning} class="btn btn-md variant-soft-secondary btn_stop">
<span class="fas fa-crosshairs fa-spin opacity-50 m-1"></span>
<!-- <span class="fas fa-stop-circle m-1"></span> -->
Stop
</button>
{#if show_pause_btn}
<button on:click={handle_pause_qr_scanning} class="btn btn-lg variant-soft-secondary btn_pause"><span class="fas fa-pause-circle"></span> Pause</button>
{/if}
<span>Scanning for QR code...</span>
<!-- <span>Scanning for QR code...</span> -->
<!-- <div class="modal-loading"> -->
<!-- <span class="fas fa-crosshairs fa-spin opacity-50"></span> -->
<span class="loading-text">
Scanning for QR code...
</span>
<!-- </div> -->
{/if}
</div>
@@ -335,7 +348,7 @@ function handle_qr_manual_entry() {
{#if show_qr_manual_badge_id_entry_option}
<div class="ae_container qr_manual_entry badge_id_entry">
{#if show_qr_manual_entry}
<form on:submit|preventDefault={() => handle_qr_manual_entry} class="form-floating">
<form on:submit|preventDefault={() => handle_qr_manual_entry} class="flex">
<!-- <label for="entered_badge_id" class="">Enter badge ID</label>
<input type="text" name="entered_badge_id" id="entered_badge_id" bind:value="{qr_entered_badge_id}"> -->
@@ -347,23 +360,23 @@ function handle_qr_manual_entry() {
id="entered_badge_id"
required
placeholder="Enter Badge ID"
class="input"
class="input max-w-52"
/>
<button
type="submit"
on:click={handle_qr_manual_entry}
disabled={disable_submit_badge_id_btn}
class="btn btn-md variant-soft-primary"
class="btn btn-md variant-ghost-primary m-1"
class:btn_default={disable_submit_badge_id_btn}
class:btn_primary={!disable_submit_badge_id_btn}
>
<span class="fas fa-paper-plane"></span> Submit Badge ID
<span class="fas fa-paper-plane mx-1"></span> Submit Badge ID
</button>
</form>
{:else}
<button on:click={() => show_qr_manual_entry=true} class="btn btn-md variant-soft-secondary"><span class="fas fa-keyboard"></span> Enter Badge ID</button>
<button on:click={() => show_qr_manual_entry=true} class="btn btn-md variant-soft-secondary m-1"><span class="fas fa-keyboard mx-1"></span> Enter Badge ID</button>
{/if}
</div>
{/if}

4
src/routes/events_leads/+page.svelte
View File

@@ -198,14 +198,14 @@ function handle_check_event_exhibit_staff_passcode() {
<input
type="text"
bind:value={$events_sess.leads.entered_passcode}
class="input w-40"
class="input w-40 m-1"
placeholder="Exhibit passcode"
/>
<button
type="submit"
disabled={disable_open_lead_retrieval_btn}
class="btn variant-ghost-primary open_lead_retrieval_btn"
class="btn variant-ghost-primary m-1 open_lead_retrieval_btn"
>
<span class="fas fa-arrow-right mx-1"></span> Open Exhibitor Lead Retrieval
</button>

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

@@ -19,9 +19,10 @@ import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadi
// import type { Writable } from 'svelte/store';
import Element_data_store from '$lib/element_data_store.svelte';
import Element_qr_scanner from '$lib/element_qr_scanner.svelte';
// import Element_data_store from '$lib/element_data_store.svelte';
// import Element_qr_scanner from '$lib/element_qr_scanner.svelte';
import Leads_add_scan from './leads_add_scan.svelte';
import Leads_list from './leads_list.svelte';
import Leads_manage from './leads_manage.svelte';
import Leads_payment from './leads_payment.svelte';
@@ -164,7 +165,7 @@ $: if ($events_trigger == 'load__event_exhibit_obj' && $events_slct.exhibit_id)
console.log(`load_event_exhibit_obj = `, result);
// Check if the license_li_json is an array and if not, convert it to an array.
if (result.license_li_json && !Array.isArray(result.license_li_json)) {
if (result?.license_li_json && !Array.isArray(result.license_li_json)) {
console.log('Convert license_li_json to an array.');
result.license_li_json = [];
}
@@ -175,63 +176,9 @@ $: if ($events_trigger == 'load__event_exhibit_obj' && $events_slct.exhibit_id)
// $events_slct.exhibit_obj.url = `${data.url.origin}/events_leads/exhibit/${$events_slct.exhibit_id}?license_key=${license_key}&event_id=${$events_slct.event_id}`;
});
// handle_load_ae_obj_id__event_exhibit({event_exhibit_id: $events_slct.exhibit_id, try_cache: false});
}
// // Load the Event Presenter Obj with ID based on the URL param.
// // $events_slct.exhibit_id = data.url.searchParams.get('ae_id');
// $events_slct.exhibit_id = data.url.searchParams.get('event_exhibit_id');
// if ($events_slct.exhibit_id) {
// console.log('Selected Event Presenter ID:', $events_slct.exhibit_id);
// $events_trigger = 'load__event_exhibit';
// // $events_loc.leads.show_edit__event_exhibit_obj = true;
// // $events_trigger = 'show_edit__event_exhibit';
// }
async function handle_load_ae_obj_id__event_exhibit({event_exhibit_id, try_cache=false}) {
console.log(`*** handle_load_ae_obj_id__event_exhibit() *** event_exhibit_id=${event_exhibit_id}`);
let params = {};
// $ae_loc.hub.event_exhibit_id_qry_status = 'loading';
ae_event_exhibit_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'event_exhibit',
obj_id: event_exhibit_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_exhibit_get_result) {
if (event_exhibit_get_result) {
$events_slct.exhibit_obj = event_exhibit_get_result;
console.log(`event_exhibit object:`, $events_slct.exhibit);
}
// Auto show the selected event_exhibit ID
// Is this pushState needed here?
// Set the URL param "event_exhibit_id" to the current event_exhibit ID.
// const url = new URL(location);
// url.searchParams.set('event_exhibit_id', $events_slct.exhibit_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
// let message = {'event_exhibit_id': $events_slct.exhibit_id};
// window.parent.postMessage(message, "*");
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return ae_event_exhibit_get_promise;
}
async function handle_submit_form_license_update(event) {
console.log('*** handle_submit_form_license_update() ***');
@@ -426,10 +373,10 @@ function send_init_confirm_email({to_email}) {
let license_key = to_email;
let subject = `Leads License Link for ${$event_exhibit_obj.name} (ID: ${$events_slct.exhibit_id})`;
let subject = `Leads License Link for ${$event_exhibit_obj?.name} (ID: ${$events_slct.exhibit_id})`;
let body_html = `
<div>${$event_exhibit_obj.license_li_json[license_key].full_name},
<div>${$event_exhibit_obj?.license_li_json[license_key].full_name},
<p>If this was sent to you incorrectly, plaese ignore.</p>
</div>
@@ -452,91 +399,6 @@ function send_init_confirm_email({to_email}) {
}
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.leads.qr_scan_result = `Found a badge type with ID: ${event_badge_id}`;
// event_exhibit_tracking_obj_create_promise = await handle_create_event_exhibit_tracking_obj($slct.event_exhibit_id, event_badge_id);
// console.log(event_exhibit_tracking_obj_create_promise);
// if (event_exhibit_tracking_obj_create_promise) {
// console.log('Created new log entry for this badge.');
// console.log(event_exhibit_tracking_obj_create_promise);
// handle_load_event_exhibit_obj({event_exhibit_id: $slct.event_exhibit_id, try_cache: false});
// $slct.event_exhibit_tracking_obj = event_exhibit_tracking_obj_create_promise;
// $slct.event_exhibit_tracking_id = $slct.event_exhibit_tracking_obj.event_exhibit_tracking_id_random;
// // $slct.event_badge_obj = $slct.event_exhibit_tracking_obj.event_badge;
// // $slct.event_badge_id = $slct.event_badge_obj.event_badge_id_random;
// show_add_qr = false;
// qr_scan_result = '';
// qr_scan_obj = {};
// show_tracking_entry = true;
// } else if (event_exhibit_tracking_obj_create_promise === null) {
// console.log('A matching log entry probably exists for this person!');
// } else {
// console.log('Something unexpected happened???');
// }
} 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>
@@ -594,15 +456,19 @@ function handle_qr_camera(event) {
name="tab_payment"
value={'payment'}>
<svelte:fragment slot="lead">
{#if !$event_exhibit_obj.paid}
{#if !$event_exhibit_obj?.priority}
<span class="fas fa-question text-red-500"></span>
{:else}
<span class="fas fa-check text-green-500"></span>
{/if}
<span class="fas fa-credit-card mx-1"></span>
</svelte:fragment>
{#if $event_exhibit_obj?.priority}
<span class="">Paid</span>
{:else}
<span class="text-xs">License
Payment</span>
{/if}
</Tab>
<Tab
@@ -680,7 +546,7 @@ function handle_qr_camera(event) {
{$events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
<button
type="button"
class="btn btn-sm variant-soft-warning"
class="btn btn-sm variant-ghost-warning"
on:click={() => {
$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key = null;
}}
@@ -724,9 +590,9 @@ function handle_qr_camera(event) {
<h2 class="h3">License List (max {$event_exhibit_obj?.license_max})</h2>
{#if !Array.isArray($event_exhibit_obj.license_li_json) || (Array.isArray($event_exhibit_obj.license_li_json) && $event_exhibit_obj?.license_li_json.length < $event_exhibit_obj?.license_max)}
{#if !Array.isArray($event_exhibit_obj?.license_li_json) || (Array.isArray($event_exhibit_obj?.license_li_json) && $event_exhibit_obj?.license_li_json.length < $event_exhibit_obj?.license_max)}
<button
class="btn btn-sm variant-soft-primary w-40"
class="btn btn-sm variant-ghost-primary w-40"
on:click={() => {
// let tmp_obj = $event_exhibit_obj;
$events_sess.leads.tmp_license = {
@@ -782,7 +648,7 @@ function handle_qr_camera(event) {
<!-- <div class="ae_h_scrollfix"> -->
{#if Array.isArray($event_exhibit_obj.license_li_json) && $event_exhibit_obj.license_li_json.length > 0}
{#if Array.isArray($event_exhibit_obj?.license_li_json) && $event_exhibit_obj?.license_li_json.length > 0}
<table class="table table-compact table-hover">
<thead>
<tr>
@@ -1017,102 +883,7 @@ function handle_qr_camera(event) {
{:else if $events_loc.leads.tab[$events_slct.exhibit_id] == 'add_scan'}
<section class="tab__add_section min-w-full flex flex-col wrap justify-center items-center space-y-4 ae_h_scrollfix">
{#if $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
<div>Scanning for:
{$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
</div>
{:else}
<div class="variant-soft-warning">Please go to the Main tab and select a license to use.</div>
{/if}
<div class="variant-soft-warning">This section is not enabled for ISHLT 2024 at this time. The ability to add a lead by scanning the attendee's QR code or by searching for their name, will be enabled before the ISHLT 2024 Annual Meeting in Prague.</div>
<p>
<!-- This page is used to test QR scanning with your device. -->
{#if $ae_loc.hub.qr.camera_status == 'unknown'}
<strong>You will need to allow access to your device's camera when asked.</strong>
{:else if $ae_loc.hub.qr.camera_status == 'denied'}
<strong>You need to allow access to your device's camera. Currently this seems to be blocked or denied for this site.</strong>
Please check your browser's permissions.
{/if}
</p>
<span>
<button
class="btn btn_md variant-soft-primary mx-1 add_person_qr_btn"
on:click={() => {
// $slct.event_exhibit_tracking_id = null;
// $slct.event_exhibit_tracking_obj = null;
// show_add_qr = true;
// qr_scan_obj = null;
// event_exhibit_tracking_obj_create_promise = null;
}}
disabled={true}
title="Scan a QR code to add a person to the leads list."
>
<span class="fas fa-qrcode mx-1"></span>
Scan to Add Person
</button>
<button
class="btn btn_md variant-soft-primary mx-1 add_person_search_btn"
on:click={() => {
// $slct.event_exhibit_tracking_id = null;
// $slct.event_exhibit_tracking_obj = null;
// show_add_search = true;
// qr_scan_obj = null;
// event_exhibit_tracking_obj_create_promise = null;
}}
disabled={true}
title="Search for a person to add to the leads list."
>
<span class="fas fa-search mx-1"></span>
Search to Add Person
</button>
</span>
<span class="float-right">
{#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)}
<button class="btn btn-sm variant-soft-secondary" on:click={() => $events_loc.leads.show_content__scan_requirements=true}><span class="fas fa-info mx-1"></span> Requirements</button>
{/if}
</span>
{#if $events_loc.leads.show_content__scan_requirements}
<div class="border-2 border-primary p-2 variant-soft-secondary">
<p>You will need a device with a camera to scan the QR codes. You will also of course need one or more valid QR codes to scan.
<!-- <button class="ae_btn btn_sm" on:click={() => show='qr_codes'}><span class="fas fa-qrcode"></span> Example QR Codes</button> -->
</p>
<ul class="list-disc list-inside">
<li>Most laptops, workstations, Android phones/tablets, iPhones, and iPads are compatible</li>
<li>The device must have a current (within the last 4 years) web browser such as Google Chrome, Mozilla Firefox, Apple's Safari, or Microsoft Edge. Opera is not yet fully supported.</li>
<li>There is no Android or Apple app that needs to be installed!</li>
<li>The device must have a camera for scanning or you will need to manually enter attendee badge IDs.</li>
<li>The only permission you need to allow is access to your device's camera when asked.</li>
</ul>
</div>
{:else}
<!-- <button class="ae_btn btn_sm btn_info" on:click={() => show_requirements=true}><span class="fas fa-eye"></span> Requirements</button> -->
{/if}
<!-- <div class=""> -->
<Element_qr_scanner 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.leads.qr_scan_result ?? 'No results yet'}
</div>
{:else}
<div class="variant-soft-error">Not logged in. Please log in and select a user license.</div>
{/if} <!-- $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] -->
</section>
<Leads_add_scan />
<!-- BEGIN Tab: Leads -->
@@ -1155,8 +926,6 @@ function handle_qr_camera(event) {
flex
flex-col
gap-4
justify-stretch
"
>
@@ -1325,7 +1094,7 @@ 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;
@@ -1336,7 +1105,7 @@ div.ae_quick_modal_container {
background-color: hsla(0, 0%, 0%, .5);
}
/* The section.ae_quick_modal should be above the rest of the content and centered on the page */
/* 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%;

488
src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte Normal file
View File

@@ -0,0 +1,488 @@
<script lang="ts">
// export let data;
// console.log(`ae_events_leads exhibit [slug] leads_manage.svelte data:`, data);
import { ae_util } from '$lib/ae_utils';
import { liveQuery } from "dexie";
import { db_events } from "$lib/db_events";
import { ae_loc, ae_sess, ae_api, 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';
// let param_slug_event_exhibit_id = data.params.slug;
let event_exhibit_obj = liveQuery(
() => db_events.exhibits.get($events_slct.exhibit_id)
);
let search_submit_results: Promise<any>|key_val;
let scan_submit_results: Promise<any>|key_val;
function handle_submit_form_search(event) {
console.log('*** handle_submit_form_search() ***');
console.log(event);
$events_sess.leads.submit_status__search = 'submitting';
let search_str = $events_sess.leads.entered_search_str;
console.log(search_str);
// search_submit_results = handle_search_for_person(search_str);
console.log(search_submit_results);
}
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.leads.qr_scan_result = `Found a badge type with ID: ${event_badge_id}`;
// event_exhibit_tracking_obj_create_promise = await handle_create_event_exhibit_tracking_obj($slct.event_exhibit_id, event_badge_id);
// console.log(event_exhibit_tracking_obj_create_promise);
// if (event_exhibit_tracking_obj_create_promise) {
// console.log('Created new log entry for this badge.');
// console.log(event_exhibit_tracking_obj_create_promise);
// handle_load_event_exhibit_obj({event_exhibit_id: $slct.event_exhibit_id, try_cache: false});
// $slct.event_exhibit_tracking_obj = event_exhibit_tracking_obj_create_promise;
// $slct.event_exhibit_tracking_id = $slct.event_exhibit_tracking_obj.event_exhibit_tracking_id_random;
// // $slct.event_badge_obj = $slct.event_exhibit_tracking_obj.event_badge;
// // $slct.event_badge_id = $slct.event_badge_obj.event_badge_id_random;
// show_add_qr = false;
// qr_scan_result = '';
// qr_scan_obj = {};
// show_tracking_entry = true;
// } else if (event_exhibit_tracking_obj_create_promise === null) {
// console.log('A matching log entry probably exists for this person!');
// } else {
// console.log('Something unexpected happened???');
// }
} 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="tab__add_section min-w-full flex flex-col wrap justify-center items-center space-y-4 ae_h_scrollfix">
{#if $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
<div>Leads for:
{$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
</div>
{:else}
<div class="variant-soft-warning">Please go to the Main tab and select a license to use.</div>
{/if}
<div class="variant-soft-warning">This section is not fully enabled for ISHLT 2024 at this time. The ability to add a lead by scanning the attendee's QR code or by searching for their name, will be enabled before the ISHLT 2024 Annual Meeting in Prague.</div>
<p>
<!-- This page is used to test QR scanning with your device. -->
{#if $ae_loc.hub.qr.camera_status == 'unknown'}
<strong>You will need to allow access to your device's camera when asked.</strong>
{:else if $ae_loc.hub.qr.camera_status == 'denied'}
<strong>You need to allow access to your device's camera. Currently this seems to be blocked or denied for this site.</strong>
Please check your browser's permissions.
{/if}
</p>
<span class="flex flex-col md:flex-row wrap justify-center items-center">
<button
class="btn btn-xl variant-soft-primary m-2 w-64 add_person_qr_btn"
on:click={() => {
// $slct.event_exhibit_tracking_id = null;
// $slct.event_exhibit_tracking_obj = null;
// show_add_qr = true;
// qr_scan_obj = null;
// event_exhibit_tracking_obj_create_promise = null;
$events_sess.leads.show_form__scan = true;
$events_sess.leads.qr_scan_start = true;
}}
disabled={!$ae_loc.trusted_access && 2==4}
title="Scan a QR code to add a person to the leads list."
>
<span class="fas fa-qrcode mx-1"></span>
Scan to Add Person
</button>
<button
class="btn btn-xl variant-soft-primary m-2 w-64 add_person_search_btn"
on:click={() => {
// $slct.event_exhibit_tracking_id = null;
// $slct.event_exhibit_tracking_obj = null;
// show_add_search = true;
// qr_scan_obj = null;
// event_exhibit_tracking_obj_create_promise = null;
$events_sess.leads.show_form__search = true;
}}
disabled={!$ae_loc.trusted_access && 2==4}
title="Search for a person to add to the leads list."
>
<span class="fas fa-search mx-1"></span>
Search to Add Person
</button>
</span>
<span class="">
{#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)}
<button class="btn btn-sm variant-soft-secondary" on:click={() => $events_loc.leads.show_content__scan_requirements=true}><span class="fas fa-info mx-1"></span> Requirements</button>
{/if}
</span>
{#if $events_loc.leads.show_content__scan_requirements}
<div class="border-2 border-primary p-2 variant-soft-secondary">
<p>You will need a device with a camera to scan the QR codes. You will also of course need one or more valid QR codes to scan.
<!-- <button class="ae_btn btn_sm" on:click={() => show='qr_codes'}><span class="fas fa-qrcode"></span> Example QR Codes</button> -->
</p>
<ul class="list-disc list-inside">
<li>Most laptops, workstations, Android phones/tablets, iPhones, and iPads are compatible</li>
<li>The device must have a current (within the last 4 years) web browser such as Google Chrome, Mozilla Firefox, Apple's Safari, or Microsoft Edge. Opera is not yet fully supported.</li>
<li>There is no Android or Apple app that needs to be installed!</li>
<li>The device must have a camera for scanning or you will need to manually enter attendee badge IDs.</li>
<li>The only permission you need to allow is access to your device's camera when asked.</li>
</ul>
</div>
{:else}
<!-- <button class="ae_btn btn_sm btn_info" on:click={() => show_requirements=true}><span class="fas fa-eye"></span> Requirements</button> -->
{/if}
<!-- <div class=""> -->
<!-- <Element_qr_scanner start_qr_scanner={false} 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.leads.qr_scan_result ?? 'No results yet'}
</div> -->
{:else}
<div class="variant-soft-error">Not logged in. Please log in and select a user license.</div>
{/if} <!-- $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] -->
</section>
{#if $events_sess.leads.show_form__search}
<div class="ae_quick_modal_container">
<section
class="
ae_quick_popover
events__leads__search
z-50
flex
flex-col
gap-4
justify-stretch
min-h-full
min-w-full
"
>
<header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
<h2 class="h3">Search</h2>
<div class="popover__actions">
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
$events_sess.leads.show_form__search = 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">
<form
id="form__search_text"
class="form flex flex-row gap-2 justify-center items-center w-full"
on:submit|preventDefault={handle_submit_form_search}
>
<!-- This is the plain text search field for looking up attendees based on their name, email, etc. -->
<input
type="text"
name="entered_search_string"
placeholder="Search for attendee"
bind:value={$events_sess.leads.entered_search_str}
required
class="input max-w-56"
/>
<button
type="submit"
class="btn variant-ghost-primary"
>
<span class="fas fa-search mx-1"></span>
Search
</button>
</form>
</section> <!-- .popover__content -->
<footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
<div class="popover__content__actions">
<button
type="submit"
form="form__search_text"
class="btn variant-soft-primary"
disabled={search_submit_results instanceof Promise && !search_submit_results}
on:click={() => {
// trigger = 'save__ds__code';
// $slct_trigger = 'save__ds__code';
}}
>
<span class="fas fa-search mx-1"></span>
Search
</button>
</div>
<div class="popover__status">
<!-- Something text -->
{#await search_submit_results}
<div class="modal-loading">
<span class="fas fa-spinner fa-spin"></span>
<span class="loading-text">
Searching...
</span>
</div>
{:then search_submit_results}
{#if search_submit_results}
<div>
<span class="fas fa-check text-green-500"></span>
<span class="saved-text">
Complete
</span>
</div>
{/if}
{/await}
<div
class="ae_debug"
class:hidden={!$ae_loc?.debug}
>
submit: {$events_sess?.leads.submit_status__search}
</div>
</div>
<div class="popover__actions">
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
$events_sess.leads.show_form__search = false;
}}
>
<span class="fas fa-times mx-1"></span>
Close
</button>
</div>
</footer> <!-- .popover__footer -->
</section> <!-- .ae_quick_popover -->
</div> <!-- .ae_quick_modal_container -->
{/if}
{#if $events_sess.leads.show_form__scan}
<div class="ae_quick_modal_container">
<section
class="
ae_quick_popover
events__leads__scan
z-50
flex
flex-col
gap-4
justify-stretch
min-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.leads.show_form__scan = false;
$events_sess.leads.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">
<!-- <div class=""> -->
<Element_qr_scanner start_qr_scanner={$events_sess.leads.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.leads.qr_scan_result ?? 'No results yet'}
</div>
</section> <!-- .popover__content -->
<footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
<div class="popover__content__actions">
<button
type="submit"
form="form__scan_text"
class="btn variant-soft-primary"
disabled={scan_submit_results instanceof Promise && !scan_submit_results}
on:click={() => {
// trigger = 'save__ds__code';
// $slct_trigger = 'save__ds__code';
}}
>
<span class="fas fa-search mx-1"></span>
Scan
</button>
</div>
<div class="popover__status">
<!-- Something text -->
{#await scan_submit_results}
<div class="modal-loading">
<span class="fas fa-spinner fa-spin"></span>
<span class="loading-text">
Scanning...
</span>
</div>
{:then scan_submit_results}
{#if scan_submit_results}
<div>
<span class="fas fa-check text-green-500"></span>
<span class="saved-text
">
Complete
</span>
</div>
{/if}
{/await}
<div
class="ae_debug"
class:hidden={!$ae_loc?.debug}
>
submit: {$events_sess?.leads.submit_status__scan}
</div>
</div>
<div class="popover__actions">
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
$events_sess.leads.show_form__scan = false;
}}
>
<span class="fas fa-times mx-1"></span>
Close
</button>
</div>
</footer> <!-- .popover__footer -->
</section> <!-- .ae_quick_popover -->
</div> <!-- .ae_quick_modal_container -->
{/if}
<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%;
}
</style>

6
src/routes/events_leads/exhibit/[slug]/leads_list.svelte
View File

@@ -10,6 +10,10 @@ import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_ev
// let param_slug_event_exhibit_id = data.params.slug;
let event_exhibit_obj = liveQuery(
() => db_events.exhibits.get($events_slct.exhibit_id)
);
// let l_event_exhibit_tracking_obj = liveQuery(
// () => db_events.exhibit_tracking.get($events_slct.exhibit_tracking_id)
// );
@@ -51,7 +55,7 @@ let event_exhibit_tracking_obj_li = liveQuery(
{#if $events_slct.exhibit_id && $events_slct.exhibit_obj}
<h2 class="h3">
<span class="fas fa-clipboard-list-check"></span>
Leads for {$events_slct.exhibit_obj.name}
Leads for {$event_exhibit_obj?.name}
</h2>
<div class="variant-soft-warning">This section is not currently enabled.</div>

20
src/routes/events_leads/exhibit/[slug]/leads_manage.svelte
View File

@@ -41,7 +41,9 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
<div>
<div class="space-y-2">
<p class="mb-4"><strong>{@html $event_exhibit_obj?.priority ? '<span class="fas fa-check text-green-500"></span> Leads license(s) marked as paid for this exhibit!' : 'The leads license have not been marked as paid yet. If you have already paid, please wait and this will be reflected here within 48 business hours.'}</strong></p>
<strong>Logged in and using license for:</strong>
{#if $event_exhibit_obj?.license_li_json}
<!-- <div class="flex flex-row wrap gap-1"> -->
@@ -66,7 +68,7 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
<!-- Show the full_name of the person associated with that license key email address. The license information is stored in an array. The license key is not the index number value in the array. Ideally I was planning to make the key the email address, not an array index number. -->
<button
type="button"
class="btn btn-sm variant-soft-warning w-48"
class="btn btn-sm variant-ghost-warning w-48"
on:click={() => {
$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key = null;
}}
@@ -82,7 +84,7 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] = null;
}}
title="Log out"
class="btn btn-sm variant-soft-warning w-48"
class="btn btn-sm variant-ghost-warning w-48"
>
<span class="fas fa-sign-out-alt mx-1"></span>
Log Out
@@ -99,7 +101,7 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] = null;
}}
title="Log out"
class="btn btn-sm variant-soft-warning w-48"
class="btn btn-sm variant-ghost-warning w-48"
>
<span class="fas fa-sign-out-alt mx-1"></span>
Log Out
@@ -131,7 +133,7 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
}}
disabled={true}
class="btn btn-sm variant-soft-primary w-48 mb-1 export_data_btn"
class="btn btn-sm variant-ghost-primary w-48 mb-1 export_data_btn"
title={`TEMPORARILY DISABLED: Download leads data for ${$events_slct.exhibit_obj.name}`}
>
<span class="fas fa-download mx-1"></span> Export Data
@@ -156,7 +158,7 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
console.log('Auto hide on sign in');
$events_loc.leads.auto_hide_on_sign_in = !$events_loc.leads.auto_hide_on_sign_in;
}}
class="btn btn-sm variant-soft w-48"
class="btn btn-sm variant-ghost w-48"
>
<span class="fas fa-eye-slash mx-1"></span>
Turn {$events_loc.leads.auto_hide_on_sign_in ? 'off' : 'on'} auto hide
@@ -169,7 +171,7 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
console.log('Turn on iframe mode');
$ae_loc.iframe = !$ae_loc.iframe;
}}
class="btn btn-sm variant-soft w-48"
class="btn btn-sm variant-ghost w-48"
>
<span class="fas fa-compress mx-1"></span>
Turn {$ae_loc.iframe ? 'off' : 'on'} iframe mode
@@ -182,7 +184,7 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
console.log('Show/Hide Details');
$events_loc.show_details = !$events_loc.show_details;
}}
class="btn btn-sm variant-soft w-48"
class="btn btn-sm variant-ghost w-48"
>
<span class="fas fa-eye mx-1"></span>
Show/Hide Details
@@ -196,7 +198,7 @@ export let get_event_exhibit_tracking_export = async function get_event_exhibit_
$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] = null;
}}
title="Log out"
class="btn variant-soft-primary w-48"
class="btn variant-ghost-primary w-48"
>
<span class="fas fa-sign-out-alt mx-1"></span>
Log Out

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

@@ -108,8 +108,19 @@ $: if ($events_sess.stripe && $events_sess.stripe.license_qty >= 0 || $events_se
</h2>
{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
{#if $event_exhibit_obj?.paid}
{#if $event_exhibit_obj?.priority}
<h3 class="h4">Marked as Paid</h3>
<div class="border-2 border-primary p-2 variant-soft-success space-y-4">
<p>Thank you for your payment. You have purchased {$event_exhibit_obj?.license_max} user license(s) for the lead retrieval service with your booth at ISHLT 2024 in Prague.</p>
{#if $event_exhibit_obj?.leads_device_sm_qty > 0}
<p>You have also rented {$event_exhibit_obj?.leads_device_sm_qty} tablet(s) for using with the lead retrievals. You will be able to pick up your rental tablets at ISHLT's onsite registration.</p>
{:else}
<p>You have not rented any tablets for scanning. You can use your own device(s) with this service.</p>
{/if}
</div>
{:else}
<h3 class="h4">Not Marked as Paid</h3>