840 lines
29 KiB
Svelte
840 lines
29 KiB
Svelte
<script lang="ts">
|
||
/*
|
||
* AE events_badges stats +page.svelte expects data object properties:
|
||
* * account_id, event_id
|
||
* * event_obj with related config
|
||
* * any customizable global, account, site, or event specific information (data_store)?
|
||
* *
|
||
*/
|
||
export let data: any;
|
||
console.log(`ae_events_badges stats +page.svelte data:`, data);
|
||
|
||
import { onMount } from 'svelte';
|
||
|
||
|
||
import type { key_val } from '$lib/ae_stores';
|
||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||
import { api } from '$lib/api';
|
||
import { events_func } from '$lib/ae_events_functions';
|
||
import { liveQuery } from "dexie";
|
||
import { db_events } from "$lib/ae_events/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 Element_ae_crud from '$lib/element_ae_crud.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.badge.toArray()
|
||
);
|
||
|
||
// import Edit_modal_event_badge from '../10_edit_modal__event_badge_obj.svelte';
|
||
|
||
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;
|
||
$ae_loc.site_domain = data.url.origin;
|
||
|
||
// We don't want the edit or view to show up by default. Maybe if we see an object ID param in the URL, we can show a modal.
|
||
$events_loc.show_edit__event_badge_obj = false;
|
||
$events_loc.show_view__event_badge_obj = false;
|
||
|
||
|
||
// These will likely be used for patch/update triggers. Maybe delete?
|
||
let ae_triggers: key_val = {};
|
||
|
||
let ae_event_badge_get_promise: Promise<any>;
|
||
let ae_event_obj_get_promise;
|
||
|
||
if ($events_slct.event_id) {
|
||
console.log('Selected Event ID:', $events_slct.event_id);
|
||
// $events_trigger = 'load__event_badge_obj_li';
|
||
// $events_trigger = 'load__event_obj';
|
||
}
|
||
|
||
// Reset this to an empty array.
|
||
$events_slct.badge_obj_li = [];
|
||
|
||
// 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');
|
||
|
||
// Load the AE Obj with ID based on the URL param.
|
||
if (data.url.searchParams.get('event_id')) {
|
||
$events_loc.event_id = data.url.searchParams.get('event_id');
|
||
$events_slct.event_id = data.url.searchParams.get('event_id');
|
||
}
|
||
|
||
// Load the Event Presenter Obj with ID based on the URL param.
|
||
if (data.url.searchParams.get('event_badge_id')) {
|
||
$events_slct.badge_id = data.url.searchParams.get('event_badge_id');
|
||
}
|
||
|
||
let url = window.location.href;
|
||
$ae_loc.href_url = url;
|
||
|
||
// The assumption is that if they know how to get to exactly this page then they are authorized in some way. Very limited risk!
|
||
$ae_loc.auth_access = true;
|
||
});
|
||
|
||
|
||
if ($events_slct.event_badge_id) {
|
||
console.log('Selected Event Presenter ID:', $events_slct.event_badge_id);
|
||
$events_trigger = 'load__event_badge';
|
||
|
||
// $events_loc.show_edit__event_badge_obj = true;
|
||
// $events_trigger = 'show_edit__event_badge';
|
||
}
|
||
|
||
|
||
$: if ($events_trigger == 'load__event_badge' && $events_slct.event_badge_id) {
|
||
console.log('Selected Event Presenter ID:', $events_slct.event_badge_id);
|
||
|
||
$events_trigger = null;
|
||
|
||
handle_load_ae_obj_id__event_badge({event_badge_id: $events_slct.event_badge_id, try_cache: false});
|
||
|
||
// modalStore.trigger(modal_edit__event_badge);
|
||
// $events_trigger = 'show_edit__event_badge';
|
||
}
|
||
|
||
async function handle_load_ae_obj_id__event_badge({event_badge_id, try_cache=false}) {
|
||
console.log(`*** handle_load_ae_obj_id__event_badge() *** event_badge_id=${event_badge_id}`);
|
||
|
||
let params = {};
|
||
|
||
// $ae_sess.hub.event_badge_id_status_qry__search = 'loading';
|
||
ae_event_badge_get_promise = api.get_ae_obj_id_crud({
|
||
api_cfg: $ae_api,
|
||
obj_type: 'event_badge',
|
||
obj_id: event_badge_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_badge_get_result) {
|
||
if (event_badge_get_result) {
|
||
$events_slct.event_badge_obj = event_badge_get_result;
|
||
console.log(`event_badge object:`, $events_slct.event_badge);
|
||
}
|
||
|
||
// Auto show the selected event_badge ID
|
||
// Is this pushState needed here?
|
||
// Set the URL param "event_badge_id" to the current event_badge ID.
|
||
// const url = new URL(location);
|
||
// url.searchParams.set('event_badge_id', $events_slct.event_badge_id);
|
||
// history.pushState({}, '', url);
|
||
|
||
// Is this postMessage needed here?
|
||
// let message = {'event_badge_id': $events_slct.event_badge_id};
|
||
// window.parent.postMessage(message, "*");
|
||
})
|
||
.catch(function (error) {
|
||
console.log('No results returned or failed.', error);
|
||
});
|
||
|
||
return ae_event_badge_get_promise;
|
||
}
|
||
|
||
|
||
// Updated 2024-03-06 late
|
||
$: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
|
||
console.log(`load__event_badge_obj_li() $events_slct.event_id=${$events_slct.event_id}`);
|
||
|
||
$events_trigger = null;
|
||
|
||
if (!$events_sess.badges.fulltext_search_qry_str || $events_sess?.badges.fulltext_search_qry_str.length <= 1 ) {
|
||
$events_slct.badge_obj_li = [];
|
||
// $events_sess.badges.fulltext_search_qry_str = '';
|
||
} else {
|
||
|
||
let type_code = $events_sess.badges.search_badge_type_code;
|
||
|
||
let search_str = $events_sess.badges.fulltext_search_qry_str.trim();
|
||
let search_method = 'lk'; // 'ft', 'lk', 'eq'
|
||
let ft_search_str_new = '';
|
||
let lk_search_str_new = '';
|
||
|
||
if (search_method == 'ft') {
|
||
// Add quotes around the search string to make it an exact match.
|
||
ft_search_str_new = `"${search_str}"`;
|
||
} else if (search_method == 'lk') {
|
||
// Add a wildcard to the search string to make it a like match.
|
||
lk_search_str_new = search_str.trim().replace(',', ' ').replace(';', ' ').replace(' ', '%').replace(' ', '%');
|
||
lk_search_str_new = `%${lk_search_str_new}%`;
|
||
}
|
||
console.log(`"${search_str}"`);
|
||
|
||
let enabled = 'enabled';
|
||
let hidden = 'not_hidden';
|
||
let limit = 35;
|
||
|
||
if ($ae_loc.administrator_access) {
|
||
enabled = 'all';
|
||
hidden = 'all';
|
||
limit = 250;
|
||
} else if ($ae_loc.trusted_access) {
|
||
enabled = 'enabled';
|
||
hidden = 'all';
|
||
limit = 150;
|
||
}
|
||
|
||
if ($events_sess.status_qry__search == 'loading') {
|
||
console.log('*** $events_sess.status_qry__search == loading ***');
|
||
|
||
setTimeout(() => {
|
||
console.log("Delayed for X second.");
|
||
|
||
$events_sess.status_qry__search = 'loading';
|
||
|
||
search_submit_results = events_func.search__event_badge({
|
||
api_cfg: $ae_api,
|
||
event_id: $events_slct.event_id,
|
||
type_code: type_code,
|
||
fulltext_search_qry_str: ft_search_str_new,
|
||
like_search_qry_str: lk_search_str_new,
|
||
external_event_id: $events_loc.badges.default__external_registration_id,
|
||
enabled: enabled,
|
||
hidden: hidden,
|
||
limit: limit,
|
||
})
|
||
.then(function (search_results) {
|
||
$events_slct.badge_obj_li = search_results;
|
||
console.log(search_results);
|
||
$events_sess.status_qry__search = 'done';
|
||
});
|
||
}, 250);
|
||
} else {
|
||
console.log('*** $events_sess.status_qry__search != loading ***');
|
||
|
||
$events_sess.status_qry__search = 'loading';
|
||
|
||
search_submit_results = events_func.search__event_badge({
|
||
api_cfg: $ae_api,
|
||
event_id: $events_slct.event_id,
|
||
type_code: type_code,
|
||
fulltext_search_qry_str: ft_search_str_new,
|
||
like_search_qry_str: lk_search_str_new,
|
||
external_event_id: $events_loc.badges.default__external_registration_id,
|
||
enabled: enabled,
|
||
hidden: hidden,
|
||
limit: limit,
|
||
})
|
||
.then(function (search_results) {
|
||
$events_slct.badge_obj_li = search_results;
|
||
console.log(search_results);
|
||
$events_sess.status_qry__search = 'done';
|
||
});
|
||
}
|
||
|
||
} // end if search string is valid
|
||
}
|
||
|
||
|
||
|
||
|
||
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>
|
||
|
||
|
||
<section
|
||
class="ae_events_badges_review md:container h-full mx-auto"
|
||
>
|
||
|
||
<!-- {#if $ae_loc.ds.hub__page__events_badges__create_info_header} -->
|
||
{#if $ae_loc.iframe}
|
||
<span class="flex flex-row items-center justify-center">
|
||
<img src={$ae_loc.site_cfg_json?.header_image_path} alt="header" class="w-auto max-h-20 m-2" />
|
||
<h1 class="h3 text-center m-2">Review & Print<br>Your Badge</h1>
|
||
</span>
|
||
{:else}
|
||
<header>
|
||
<h1 class="h2 text-center">Badge Review and Print</h1>
|
||
</header>
|
||
{/if}
|
||
|
||
<div class="preset-tonal-success border border-success-500 my-2 p-2 flex flex-row items-center">
|
||
|
||
{#if $events_sess.badges.show_form__search}
|
||
<form
|
||
on:submit|preventDefault={() => {
|
||
$events_trigger = 'load__event_badge_obj_li';
|
||
}}
|
||
autocomplete="off"
|
||
class="form grow flex flex-row flex-wrap gap-1 justify-center items-center w-full"
|
||
>
|
||
{#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="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-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 hover:w-2/5 transition-all"
|
||
on:keyup={() => {
|
||
if ($events_sess.badges.fulltext_search_qry_str.length >= 3) {
|
||
$events_trigger = 'load__event_badge_obj_li';
|
||
}
|
||
}}
|
||
autofocus
|
||
suggest="off"
|
||
data-lpignore="true"
|
||
>
|
||
|
||
|
||
<button
|
||
type="submit"
|
||
class="btn btn-lg preset-tonal-success border border-success-500 hover:preset-tonal-success text-2xl font-bold w-48 transition-all"
|
||
on:click={() => {
|
||
|
||
}}
|
||
>
|
||
{#if $events_sess.status_qry__search == 'loading'}
|
||
<span class="fas fa-spinner fa-spin"></span>
|
||
{:else }
|
||
<!-- Nothing -->
|
||
{/if}
|
||
<span class="fas fa-search mx-1"></span>
|
||
Search
|
||
</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={() => {
|
||
localStorage.setItem('ae_badge_printed_redirect_path', '/events_badges/review');
|
||
// goto('/events_badges/print', {replaceState: true});
|
||
|
||
$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 preset-tonal-primary border border-primary-500"
|
||
>
|
||
<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 preset-tonal-primary border border-primary-500"
|
||
>
|
||
<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>
|
||
<span class="loading-text">
|
||
Loading...
|
||
</span>
|
||
</span>
|
||
{:then load_obj_li_results}
|
||
{#if load_obj_li_results}
|
||
<span class="fas fa-check text-green-500"></span>
|
||
<span class="saved-text">
|
||
Loaded
|
||
</span>
|
||
{/if}
|
||
{/await}
|
||
|
||
|
||
{#if $events_sess.badges.show_form__search}
|
||
|
||
{#if $events_slct?.badge_obj_li.length}
|
||
<!-- {#if $event_badge_li} -->
|
||
<section class="ae_h_scrollfix">
|
||
<h2 class="h3">Results:</h2>
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Badge</th>
|
||
<!-- The email should only be the first 3 chars and then @domain name. -->
|
||
<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
|
||
class:hidden={(badge_obj.print_count >= 1 || badge_obj.hide) && !$ae_loc.trusted_access}
|
||
class:fade_50={(badge_obj.print_count >= 1 || badge_obj.hide) && $ae_loc.trusted_access}
|
||
>
|
||
<td class="">
|
||
<button
|
||
class="btn btn-lg text-xl preset-tonal-secondary border border-secondary-500 hover:preset-tonal-secondary w-96 overflow-hidden transition-all"
|
||
on:click={() => {
|
||
// 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);
|
||
|
||
// 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="flex flex-row justify-between items-center w-full">
|
||
<span>
|
||
{#if badge_obj.hide}
|
||
<span class="fas fa-eye-slash mx-1"></span>
|
||
{:else}
|
||
<span class="fas fa-id-badge mx-1"></span>
|
||
{/if}
|
||
{#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 preset-tonal-warning px-1">{badge_obj.print_count}×</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 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 class="">
|
||
<div class="flex flex-row items-center justify-between">
|
||
<span title={badge_obj.registration_type}>{badge_obj.badge_type}</span>
|
||
|
||
<div>
|
||
<Element_ae_crud
|
||
trigger_patch={ae_triggers.print_count}
|
||
api_cfg={$ae_api}
|
||
object_type={'event_badge'}
|
||
object_id={badge_obj.event_badge_id_random}
|
||
field_name={'print_count'}
|
||
field_type={'text'}
|
||
field_value={badge_obj.print_count}
|
||
allow_null={false}
|
||
hide_edit_btn={true}
|
||
outline_element={false}
|
||
show_crud={false}
|
||
display_inline={true}
|
||
class_li={'m-1'}
|
||
on:ae_crud_updated={e => {
|
||
console.log(`ae_crud_updated event:`, e.detail);
|
||
// events_func.handle_load_ae_obj_id__badge({api_cfg: $ae_api, badge_id: $events_slct.badge_id});
|
||
}}
|
||
>
|
||
|
||
<!-- {@html (badge_obj.print_count ? `<span class="fas fa-users m-1"></span> ${badge_obj.print_count}` : '<span class="fas fa-users m-1"></span> 0')} -->
|
||
{#if $ae_loc.administrator_access}
|
||
<span class="fas fa-print m-1"></span>
|
||
<input
|
||
type="number" min="0" max="10" step="1"
|
||
bind:value={badge_obj.print_count}
|
||
|
||
class="input text-sm w-16 m-1"
|
||
/>
|
||
<button
|
||
type="button"
|
||
on:click={() => {
|
||
// badge_obj.print_count = 0;
|
||
ae_triggers.print_count = true;
|
||
}}
|
||
class="btn btn-sm preset-tonal-warning"
|
||
>
|
||
<span class="fas fa-save m-1"></span>
|
||
Save
|
||
</button>
|
||
{/if}
|
||
</Element_ae_crud>
|
||
|
||
<Element_ae_crud
|
||
trigger_patch={ae_triggers.hide}
|
||
api_cfg={$ae_api}
|
||
object_type={'event_badge'}
|
||
object_id={badge_obj?.event_badge_id_random}
|
||
field_name={'hide'}
|
||
field_type={'button'}
|
||
field_value={badge_obj.hide}
|
||
allow_null={false}
|
||
hide_edit_btn={true}
|
||
outline_element={false}
|
||
show_crud={false}
|
||
display_inline={true}
|
||
class_li={'m-1'}
|
||
on:ae_crud_updated={e => {
|
||
console.log(`ae_crud_updated event:`, e.detail);
|
||
// events_func.handle_load_ae_obj_id__badge({api_cfg: $ae_api, badge_id: badge_obj.badge_id_random});
|
||
}}
|
||
>
|
||
<!-- {#if $ae_loc.trusted_access}
|
||
{(badge_obj?.hide ? 'Hidden' : 'Not Hidden')}
|
||
{/if} -->
|
||
<button
|
||
on:click={() => {
|
||
// $events_slct.badge_obj = badge_obj;
|
||
badge_obj.hide = !badge_obj?.hide;
|
||
ae_triggers.hide = true;
|
||
}}
|
||
class="btn btn-sm preset-tonal-warning"
|
||
class:hidden={!$ae_loc.trusted_access}
|
||
>
|
||
{#if $ae_loc.trusted_access}
|
||
{@html (badge_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')}
|
||
{:else}
|
||
<!-- Users see this as the "Archive" option button -->
|
||
{@html (badge_obj?.hide ? '<span class="fas fa-archive m-1"></span> Unarchive' : '<span class="fas fa-archive m-1"></span> Archive')}
|
||
{/if}
|
||
</button>
|
||
</Element_ae_crud>
|
||
</div>
|
||
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
{:else}
|
||
<div class="text-xl preset-filled-success-500 font-bold p-2">
|
||
Type your name, email, or affiliations. Results will start to appear automatically.
|
||
</div>
|
||
|
||
{#if $events_sess.badges.fulltext_search_qry_str && $events_sess.badges.fulltext_search_qry_str.length > 5}
|
||
<div class="text-xl preset-filled-warning-500 font-bold p-2">
|
||
No badges found. Please change your search.
|
||
</div>
|
||
{/if}
|
||
{/if}
|
||
|
||
|
||
{:else if $events_sess.badges.show_form__scan}
|
||
|
||
|
||
<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-2 justify-between items-center p-1 border-b">
|
||
<h2 class="h3">Scan</h2>
|
||
|
||
<div class="popover__actions flex flex-row gap-2 items-center">
|
||
<div>
|
||
<button
|
||
type="button"
|
||
on:click={() => {
|
||
console.log('Turn on iframe mode');
|
||
$ae_loc.iframe = !$ae_loc.iframe;
|
||
}}
|
||
class="btn btn-sm preset-tonal w-48"
|
||
>
|
||
<span class="fas fa-compress mx-1"></span>
|
||
Turn {$ae_loc.iframe ? 'off' : 'on'} iframe mode
|
||
</button>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
class="btn preset-tonal-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 preset-tonal-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>
|
||
<div class="alert alert-info">
|
||
More information goes here.
|
||
</div>
|
||
</section>
|
||
{/if} -->
|
||
|
||
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|