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

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%;