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

This is a good point for things. Looks good and working well.

Browse Source
This commit is contained in:
Scott Idem
2024-03-21 18:13:05 -04:00
parent 7381797a28
commit 18c1c84044
5 changed files with 263 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,12 @@ import { events_func } from '$lib/ae_events_functions';
import Element_qr_scanner from '$lib/element_qr_scanner.svelte';
// TEMPORARY: For testing and development
$events_sess.leads.show_form__search = true;
// TEMPORARY: For testing and development
// let param_slug_event_exhibit_id = data.params.slug;
console.log(`ae_events_leads exhibit [slug] leads_add_scan.svelte:`, $events_slct);
let event_exhibit_obj = liveQuery(
@@ -30,7 +36,7 @@ let event_badge_obj_li = liveQuery(
// .where({event_id_random: $events_loc.event_id})
.where('event_id_random').equals($events_loc.event_id)
// .where('event_id_random').equals($events_slct.event_id)
.or('full_name').equalsIgnoreCase($events_sess.leads.entered_search_str)
// .or('full_name').equalsIgnoreCase($events_sess.leads.entered_search_str)
// .and('full_name').anyOfIgnoreCase([$events_sess.leads.entered_search_str, 'Sasa Vukelic'])
// .where('full_name').anyOfIgnoreCase(tmp_search_terms)
// .and('enable').equals(true)
@@ -63,8 +69,10 @@ async function handle_submit_form_search(event) {
let search_str = $events_sess.leads.entered_search_str.trim();
console.log(search_str);
search_submit_results = await events_func.handle_search__event_badge({api_cfg: $ae_api, event_id: $event_exhibit_obj.event_id_random, fulltext_search_qry_str: search_str});
search_submit_results = await events_func.handle_search__event_badge({api_cfg: $ae_api, event_id: $event_exhibit_obj.event_id_random, fulltext_search_qry_str: search_str, external_event_id: $events_loc.leads.default__external_registration_id});
console.log(search_submit_results);
$events_slct.badge_obj_li = search_submit_results;
}
@@ -159,7 +167,7 @@ function handle_qr_camera(event) {
{#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}
<strong>{$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}</strong>
</div>
{:else}
<div class="border border-slate-500/10 p-2 variant-soft-warning">Please go to the Main tab and select a license to use.</div>
@@ -223,32 +231,25 @@ function handle_qr_camera(event) {
{/if}
</span>
{#if $events_loc.leads.show_content__scan_requirements}
<div class="border border-slate-500/10 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> -->
{#if $events_loc.leads.show_content__scan_requirements}
<div class="border border-slate-500/10 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}
{:else} <!-- $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] -->
<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] -->
@@ -273,7 +274,6 @@ function handle_qr_camera(event) {
<header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
<h2 class="h3">Search</h2>
<div class="">
<form
id="form__search_text"
@@ -302,8 +302,6 @@ function handle_qr_camera(event) {
</form>
</div>
<div class="popover__actions">
<button
type="button"
@@ -318,40 +316,177 @@ function handle_qr_camera(event) {
</div>
</header>
<section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
<div class="ae_events__badge_li">
<div class="ae_events__badge_li w-full">
{#if $event_badge_obj_li}
{#if $ae_loc.trusted_access}
<!-- {#if $ae_loc.trusted_access} -->
<div class="border border-slate-500/10 p-2 variant-glass-success min-h-96">
<p>{$events_slct.badge_obj_li.length} results found</p>
{#each $events_slct.badge_obj_li as event_badge_obj_v2, index}
<div class="ae_events__badge_li__item flex flex-row justify-between items-center mx-0 my-2 border border-slate-500/10 p-2 hover:bg-slate-500/10">
<button
type="button"
on:click={() => {
// if (confirm(`Add ${event_badge_obj_v2.full_name} <${event_badge_obj_v2.email}> to the leads list?`)) {
// } else {
// return false;
// }
// console.log(`Add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
$events_sess.leads.show_confirm__add_lead[index] = true;
}}
disabled={!$ae_loc.trusted_access}
title="Add {event_badge_obj_v2.full_name} to the leads list?"
class="btn btn-md variant-soft-primary mx-1"
>
<span class="fas fa-plus mx-1"></span>
Add
</button>
<!-- This block needs to be moved or something. It takes up too much space! -->
{#if $events_sess.leads.show_confirm__add_lead[index]}
<div class="ae_quick_modal_container">
<section
class="
ae_quick_popover_small
events__leads__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">Add?</h2>
<div class="popover__actions">
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
$events_sess.leads.show_confirm__add_lead[index] = 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">
<p>Are you sure you want to add <strong>{event_badge_obj_v2.full_name}</strong> to the leads list?</p>
<p>Badge ID: <strong>{event_badge_obj_v2.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"
on:click={() => {
console.log(`Add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
$events_sess.leads.show_confirm__add_lead[index] = false;
}}
>
<span class="fas fa-check mx-1"></span>
Yes
</button>
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
console.log(`Do not add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
$events_sess.leads.show_confirm__add_lead[index] = false;
}}
>
<span class="fas fa-times mx-1"></span>
No
</button>
</div>
</section> <!-- .popover__content -->
</section> <!-- .ae_quick_popover -->
</div>
{/if}
<div class="grow flex flex-row wrap justify-between items-center mx-1">
<!-- <span class="ae_events__badge_li__item__id">
{event_badge_obj_v2.event_badge_id_random}
</span> -->
<span class="ae_events__badge_li__item__name">
<span class="fas fa-user mx-0.5"></span>
{#if $event_exhibit_obj?.priority || $ae_loc.trusted_access}
{event_badge_obj_v2.full_name}
{:else}
<span class="ae_events__badge_li__item__name__hidden">
{event_badge_obj_v2.full_name ? event_badge_obj_v2.full_name.substring(0, 1) + '...' : 'Hidden'}
</span>
{/if}
</span>
<span class="text-sm text-right">
<span class="ae_events__badge_li__item__affiliations">
{#if $event_exhibit_obj?.priority || $ae_loc.trusted_access}
{event_badge_obj_v2.affiliations}
{:else}
<span class="ae_events__badge_li__item__affiliations__hidden">
{event_badge_obj_v2.affiliations ? event_badge_obj_v2.affiliations.substring(0, 3) + '...' : 'Hidden'}
</span>
{/if}
</span>
<span class="ae_events__badge_li__item__email">
{#if $event_exhibit_obj?.priority || $ae_loc.trusted_access}
<a href="mailto:{event_badge_obj_v2.email}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
<span class="fas fa-envelope mx-0.5"></span>
{event_badge_obj_v2.email}</a>
{:else}
<span class="ae_events__badge_li__item__email__hidden">
<span class="fas fa-envelope mx-0.5"></span>
{event_badge_obj_v2.email ? event_badge_obj_v2.email.substring(0, 1) + '...@example.com' : 'Hidden'}
</span>
{/if}
</span>
</span>
</div>
</div>
{/each}
</div>
<!-- <div class="border border-slate-500/10 p-2 variant-soft-warning">
<p>{$event_badge_obj_li.length} results found cached</p>
{#each $event_badge_obj_li as event_badge_obj, index}
<div class="ae_events__badge_li__item">
<span class="ae_events__badge_li__item__id">
{event_badge_obj.event_badge_id_random}
</span>
--
<span class="ae_events__badge_li__item__name">
{event_badge_obj.full_name}
</span>
<span class="ae_events__badge_li__item__email">
<a href="mailto:{event_badge_obj.email}">{event_badge_obj.email}</a>
</span>
</div>
{/each}
{:else}
</div> -->
<!-- {:else}
<div class="variant-soft-warning">The search results are not enabled at this time.</div>
{/if}
{/if} -->
{:else}
<div class="variant-soft-warning">No results yet</div>
{/if}
</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__search_text"
class="btn variant-soft-primary"
class="btn variant-ghost-primary"
disabled={search_submit_results instanceof Promise && !search_submit_results}
on:click={() => {
// trigger = 'save__ds__code';
@@ -379,6 +514,16 @@ function handle_qr_camera(event) {
<span class="saved-text">
Complete
</span>
<span class="results_cache text-sm">
(
<span class="search_results text-sm">{$events_slct.badge_obj_li.length} results</span>
{#if $ae_loc.trusted_access}
&amp;
<span class="idb_cache text-sm">{$event_badge_obj_li.length} cached</span>
{/if}
)
</span>
</div>
{/if}
{/await}
@@ -410,6 +555,10 @@ function handle_qr_camera(event) {
</div> <!-- .ae_quick_modal_container -->
{/if}
<!-- **END** Search Form -->
<!-- **BEGIN** Scan Form -->
{#if $events_sess.leads.show_form__scan}
<div class="ae_quick_modal_container">
@@ -552,4 +701,21 @@ section.ae_quick_popover {
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>