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

Quick save of things

Browse Source
This commit is contained in:
Scott Idem
2024-04-10 00:09:57 -04:00
parent 0aae7f9361
commit f405d1b3b7
4 changed files with 1485 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

543
src/lib/element_qr_scanner backup.svelte Normal file
View File

@@ -0,0 +1,543 @@
<script lang="ts">
// *** Import Svelte core
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
// import 'html5-qrcode';
import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats} from 'html5-qrcode';
// *** Import Aether core variables and functions
import { api } from '$lib/api';
import { ae_api } from '$lib/ae_stores';
// *** Import Aether core components
// import Element_input from './element_input.svelte';
// import ae from '/element_input.svelte';
// import Input_element from '/element_input.svelte';
// *** Import Aether module variables and functions
// *** Import Aether module components
// *** Export/Exposed variables and functions for component
export let start_qr_scanner: boolean = true;
export let show_pause_btn: boolean = false; // pause and resume buttons
export let show_qr_manual_text_entry_option: boolean = false;
export let show_qr_manual_badge_id_entry_option: boolean = false;
export let show_qr_scan_result: boolean = true;
export let qr_fps = 15;
export let qr_viewfinder_width = 275; // 275 seems good... Need to not let the this be larger than the container which changes based on the width of the screen/window.
export let qr_facing_mode = 'environment'; // environment, user, { exact: 'environment'}, { exact: 'user'}
// *** Set initial variables
let scanning_status: string = 'not_started';
let qr_scan_result: null|string = null;
let qr_found_text: null|string = null;
let qr_entered_text: null|string = null;
let qr_entered_badge_id: null|string = null;
let show_qr_manual_entry: null|boolean = null;
let disable_submit_badge_id_btn: boolean = true;
let user_media_status = 'not_requested';
// let max_results: number = 50;
const dispatch = createEventDispatcher();
let html5_qr_code: any|null|string = null;
// let html5_qr_code = new Html5Qrcode(
// 'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
// );
// let qr_scan_cfg = { fps: 10, qrbox: 400 }; // default was 250 and using 300 when 600px
let qr_scan_cfg = { fps: qr_fps, qrbox: qr_viewfinder_width }; // 275 seems good... Need to not let the this be larger than the container which changes based on the width of the screen/window.
// let mounted = false;
onMount(() => {
console.log('** Element Mounted: ** QR Scanner');
// NOTE: We only want to trigger the scanning to start after the page has fully loaded.
navigator.mediaDevices.getUserMedia({video: true})
.then(successCallback, errorCallback);
// NOTE: This can only be done after the page has fully loaded.
// if (start_qr_scanner) {
// handle_start_qr_scanning();
// }
});
onDestroy(async () => {
console.log('** Element Destroyed: ** QR Scanner');
qr_scan_result = null;
qr_found_text = null;
await handle_stop_qr_scanning();
});
var successCallback = function(error: any) {
console.log('Camera access allowed');
user_media_status = 'allowed';
// let subject = 'Camera Access Allowed';
// let message = error;
// send_init_confirm_email(subject, message);
dispatch('qr_camera', {
status: 'allowed',
});
// NOTE: This can only be done after the page has fully loaded.
if (start_qr_scanner) {
handle_start_qr_scanning();
}
};
var errorCallback = function(error: any) {
if (error.name == 'NotAllowedError') {
console.log('Camera access not allowed!');
user_media_status = 'denied';
// let subject = 'Camera Access Denied';
// let message = error;
// send_init_confirm_email(subject, message);
dispatch('qr_camera', {
status: 'denied',
});
}
};
// $: if (mounted && start_qr_scanner) {
// console.log('START QR SCANNING');
// handle_start_qr_scanning();
// } else if (mounted && !start_qr_scanner) {
// console.log('STOP QR SCANNING');
// handle_stop_qr_scanning();
// }
async function handle_start_qr_scanning() {
console.log('*** handle_start_qr_scanning() ***');
if (user_media_status == 'denied') {
console.log('Camera access not allowed!');
return;
} else if (user_media_status == 'not_requested') {
console.log('Camera access not requested yet!');
return;
}
qr_scan_result = null;
qr_found_text = null;
if (html5_qr_code) {
console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...');
// html5_qr_code.clear();
// document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
html5_qr_code = new Html5Qrcode(
'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
);
} else {
console.log('html5_qr_code not found. Creating new Html5Qrcode...');
html5_qr_code = new Html5Qrcode(
'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
);
}
if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
// console.log('Scanner is not started');
return await html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error)
.then((ignore: any) => {
console.log('Scanning has started');
scanning_status = 'scanning';
// let subject = 'QR Scanning Started';
// let message = ignore;
// send_init_confirm_email(subject, message);
return true;
}).catch((err) => {
console.log('There was an error while trying to start the QR scanner');
scanning_status = 'start_error';
let subject = 'QR Scanning Start Error';
let message = err;
send_init_confirm_email(subject, message);
return false;
});
} else {
console.log('Scanner is already started');
return;
}
}
function handle_pause_qr_scanning() {
if (html5_qr_code && html5_qr_code.getState() != Html5QrcodeScannerState.SCANNING) {
console.log('Scanner is not scanning!');
return;
}
html5_qr_code.pause();
scanning_status = 'paused';
}
function handle_resume_qr_scanning() {
if (html5_qr_code && html5_qr_code.getState() != Html5QrcodeScannerState.PAUSED) {
console.log('Scanner is not paused!');
return;
}
document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
html5_qr_code.resume();
scanning_status = 'scanning';
}
async function handle_stop_qr_scanning() {
start_qr_scanner = false;
if (!html5_qr_code) {
console.log('html5_qr_code object found. Nothing to stop?');
return false;
}
let state = html5_qr_code.getState();
console.log('html5_qr_code state:', state);
if (state == Html5QrcodeScannerState.NOT_STARTED) {
console.log('Scanner is not started');
return;
}
if (state == Html5QrcodeScannerState.PAUSED || state == Html5QrcodeScannerState.SCANNING) {
console.log('Scanner is not started');
await html5_qr_code.stop()
scanning_status = 'not_started';
return;
}
await html5_qr_code.clear();
return true;
// html5_qr_code.pause();
// return html5_qr_code.stop()
// .then((ignore) => {
// console.log('Scanning has stopped');
// // document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
// scanning_status = 'not_started';
// }).then((ignore) => {
// // html5_qr_code = null;
// // html5_qr_code.clear();
// }).catch((err) => {
// console.log('There was an error while trying to stop the scanning');
// return false;
// });
// html5_qr_code = null;
}
// Callback function for QrcodeSuccessCallback (decodedText: string, result: Html5QrcodeResult)
function handle_qr_scan_success(decoded_text, decoded_result) {
console.log('*** handle_qr_scan_success() ***');
console.log(`QR scanned = ${decoded_text}`, decoded_result);
qr_scan_result = decoded_text; // NOTE: decoded_result is not currently used by html5-qrcode
qr_found_text = decoded_text;
dispatch('qr_scan_result', {
result: qr_scan_result, // This text will need to be parsed to get more info.
text: qr_found_text, // This text will need to be parsed to get more info.
entry_method: 'QR',
});
// handle_pause_qr_scanning();
handle_stop_qr_scanning();
}
// Callback function for QrcodeErrorCallback (errorMessage: string, error: Html5QrcodeError)
// NOTE: Most of the time this is normal and not an actual error. It just did not find something to scan.
function handle_qr_scan_error(qr_error_message, qr_code_error) {
// console.log('*** handle_qr_scan_error() ***');
if (qr_code_error.type) {
console.log(`Error scanning code = ${qr_error_message}`, qr_code_error);
return;
}
}
$: if ( qr_entered_badge_id && qr_entered_badge_id.length >= 11 && qr_entered_badge_id && qr_entered_badge_id.length <= 14) {
disable_submit_badge_id_btn = false;
} else {
disable_submit_badge_id_btn = true;
}
function handle_qr_manual_entry() {
console.log('*** handle_qr_manual_entry() ***');
if (qr_entered_text) {
console.log(`QR entered text = ${qr_entered_text}`);
} else if (qr_entered_badge_id) {
console.log(`QR entered badge ID = ${qr_entered_badge_id}`);
qr_entered_text = `OBJ:ot:event_badge,oi:${qr_entered_badge_id}`;
console.log(`Parse to proper QR badge ID = ${qr_entered_text}`);
}
// html5_qr_code.stop().then((ignore) => {
// console.log('Scanning has stopped');
// document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
// }).catch((err) => {
// console.log('There was an error while trying to stop the scanning');
// });
qr_scan_result = qr_entered_text;
dispatch('qr_scan_result', {
result: qr_scan_result,
entry_method: 'manual',
});
qr_scan_result = null;
qr_entered_text = null;
}
function send_init_confirm_email(subject, message) {
console.log(`*** send_init_confirm_email() *** ${subject}`);
let to_email = 'scott.idem+skdev@oneskyit.com';
// let origin_url = encodeURI(`${data.url.origin}`);
let full_subject = `${subject} Aether QR Scanner Debugging`;
let body_html = `
<div>Scott,
<p>This is an automatic debug email from the Aether QR scanner.</p>
</div>
<br>
<div>
Message:<br>
<pre>
${JSON.stringify(message)}
</pre>
</div>
`;
api.send_email({
api_cfg: $ae_api,
from_email: 'noreply+ae_qr_debug@oneskyit.com',
from_name: 'AE QR Debug',
to_email: to_email,
subject: full_subject,
body_html: body_html,
});
}
</script>
<section
class="ae_element qr_scanner border-2 border-slate-500/10 space-y-2 flex flex-col gap-1 justify-center items-center min-w-full max-w-full"
class:not_started={scanning_status == 'not_started'}
class:paused={scanning_status == 'paused'}
class:scanning={scanning_status == 'scanning'}
>
<!-- <header>
<h2>QR Scanner</h2>
</header> -->
<!-- <fieldset class=""> -->
<!-- <legend class="d_none">QR Scanner:</legend> -->
<div
class="ae_container qr_scanning_container"
>
<div
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 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-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> -->
<!-- <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>
<div id="qr_scanner_viewfinder" class="qr_scanner_viewfinder grow flex flex-col justify-center items-center" style=""></div> <!-- width: 600px -->
</div>
{#if show_qr_manual_text_entry_option}
<div class="ae_container qr_manual_entry text_entry">
{#if show_qr_manual_entry}
<label for="entered_text" class="">Enter text</label>
<input type="text" name="entered_text" id="entered_text" bind:value="{qr_entered_text}">
<button on:click={handle_qr_manual_entry} class="btn btn-md variant-soft-warning"><span class="fas fa-paper-plane"></span> Submit Text</button>
<div class="search_by_text">
<input type='text' placeholder="Name or Email" label="Name or Email" value={search_query_str} focus={true} on:oninput={handle_oninput_search_query_str} />
</div>
{:else}
<button on:click={() => show_qr_manual_entry=true} class="btn btn-md variant-soft-warning"><span class="fas fa-keyboard"></span> Enter Text</button>
{/if}
</div>
{/if}
{#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="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}"> -->
<input
bind:value="{qr_entered_badge_id}"
type="text"
name="entered_badge_id"
id="entered_badge_id"
required
placeholder="Enter Badge ID"
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-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 mx-1"></span> Submit Badge ID
</button>
</form>
{:else}
<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}
{#if show_qr_scan_result && qr_scan_result}
<div class="ae_container qr_scan_result">
<span class="label">Raw Result:</span>
<span id="qr_scan_result_value" class="value">{qr_scan_result}</span>
</div>
{/if}
<!-- </fieldset> -->
</section>
<style>
.not_started {
background-color: hsla(0, 100%, 75%, 0.3);
border-color: hsla(0, 100%, 75%, 0.6);
}
.paused {
background-color: hsla(60, 100%, 75%, 0.3);
border-color: hsla(60, 100%, 75%, 0.6);
}
.scanning {
background-color: hsla(120, 100%, 75%, 0.3);
border-color: hsla(120, 100%, 75%, 0.6);
}
.qr_scanner {
/* outline: solid thin pink; */
max-width: 100vw;
/* overflow-x: scroll; */
display: flex;
flex-direction: column;
/* flex-wrap: wrap; */
justify-content: flex-start;
align-items: center; /* center */
align-content: stretch;
}
.ae_element.qr_scanner div.qr_scanner_viewfinder {
/* max-width: 100vw; */
/* contain: content; */
/* contain: contain; */
}
.qr_scanner .qr_scanner_viewfinder {
/* outline: dashed medium blue; */
min-width: 400px;
width: 100%;
/* max-width: 100%; */
max-width: 500px;
/* max-width: 100vw; */
/* outline: solid thin red; */
contain: contain;
overflow-x: scroll;
}
@media (max-width: 767px) {
.qr_scanner .qr_scanner_viewfinder {
/* outline: dashed medium red; */
min-width: 80vw;
/* width: 100%; */
/* max-width: 100%; */
/* max-width: 450px; */
max-width: 100vw;
margin: 0;
padding: 0;
}
}
</style>

201
src/lib/element_qr_scanner.svelte
View File

@@ -5,8 +5,6 @@ import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats} from 'html5-qrcode';
// *** Import Aether core variables and functions
import { api } from '$lib/api';
import { ae_api } from '$lib/ae_stores';
// *** Import Aether core components
// import Element_input from './element_input.svelte';
@@ -37,9 +35,6 @@ let qr_entered_badge_id: null|string = null;
let show_qr_manual_entry: null|boolean = null;
let disable_submit_badge_id_btn: boolean = true;
let user_media_status = 'not_requested';
// let max_results: number = 50;
const dispatch = createEventDispatcher();
@@ -58,52 +53,36 @@ let qr_scan_cfg = { fps: qr_fps, qrbox: qr_viewfinder_width }; // 275 seems good
onMount(() => {
console.log('** Element Mounted: ** QR Scanner');
// NOTE: We only want to trigger the scanning to start after the page has fully loaded.
// NOTE: This can only be done after the page has fully loaded. At least that is what my tests have shown so far. -2022-12-02
if (start_qr_scanner) {
handle_start_qr_scanning();
}
navigator.mediaDevices.getUserMedia({video: true})
.then(successCallback, errorCallback);
// NOTE: This can only be done after the page has fully loaded.
// if (start_qr_scanner) {
// handle_start_qr_scanning();
// }
});
onDestroy(async () => {
onDestroy(() => {
console.log('** Element Destroyed: ** QR Scanner');
qr_scan_result = null;
qr_found_text = null;
await handle_stop_qr_scanning();
handle_stop_qr_scanning();
});
var successCallback = function(error: any) {
console.log('Camera access allowed');
user_media_status = 'allowed';
// let subject = 'Camera Access Allowed';
// let message = error;
// send_init_confirm_email(subject, message);
dispatch('qr_camera', {
status: 'allowed',
});
// NOTE: This can only be done after the page has fully loaded.
if (start_qr_scanner) {
handle_start_qr_scanning();
}
};
var errorCallback = function(error: any) {
if (error.name == 'NotAllowedError') {
console.log('Camera access not allowed!');
user_media_status = 'denied';
// let subject = 'Camera Access Denied';
// let message = error;
// send_init_confirm_email(subject, message);
dispatch('qr_camera', {
status: 'denied',
@@ -121,24 +100,16 @@ var errorCallback = function(error: any) {
// }
async function handle_start_qr_scanning() {
function handle_start_qr_scanning() {
console.log('*** handle_start_qr_scanning() ***');
if (user_media_status == 'denied') {
console.log('Camera access not allowed!');
return;
} else if (user_media_status == 'not_requested') {
console.log('Camera access not requested yet!');
return;
}
qr_scan_result = null;
qr_found_text = null;
if (html5_qr_code) {
console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...');
// html5_qr_code.clear();
// document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
html5_qr_code = new Html5Qrcode(
'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
@@ -150,37 +121,21 @@ async function handle_start_qr_scanning() {
);
}
if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
// console.log('Scanner is not started');
// if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
// // console.log('Scanner is not started');
// } else {
// console.log('Scanner is already started');
// return;
// }
return await html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error)
.then((ignore: any) => {
console.log('Scanning has started');
scanning_status = 'scanning';
// let subject = 'QR Scanning Started';
// let message = ignore;
// send_init_confirm_email(subject, message);
return true;
}).catch((err) => {
console.log('There was an error while trying to start the QR scanner');
scanning_status = 'start_error';
let subject = 'QR Scanning Start Error';
let message = err;
send_init_confirm_email(subject, message);
return false;
});
} else {
console.log('Scanner is already started');
return;
}
html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error).then((ignore: any) => {
console.log('Scanning has started');
scanning_status = 'scanning';
return true;
}).catch((err) => {
console.log('There was an error while trying to start the QR scanner');
return false;
});
}
@@ -206,46 +161,28 @@ function handle_resume_qr_scanning() {
}
async function handle_stop_qr_scanning() {
start_qr_scanner = false;
if (!html5_qr_code) {
console.log('html5_qr_code object found. Nothing to stop?');
return false;
}
let state = html5_qr_code.getState();
console.log('html5_qr_code state:', state);
if (state == Html5QrcodeScannerState.NOT_STARTED) {
function handle_stop_qr_scanning() {
if (html5_qr_code && html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
console.log('Scanner is not started');
return;
}
if (state == Html5QrcodeScannerState.PAUSED || state == Html5QrcodeScannerState.SCANNING) {
console.log('Scanner is not started');
await html5_qr_code.stop()
scanning_status = 'not_started';
return;
}
await html5_qr_code.clear();
return true;
// qr_scan_result = null;
// qr_found_text = null;
// html5_qr_code.pause();
// return html5_qr_code.stop()
// .then((ignore) => {
// console.log('Scanning has stopped');
// // document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
// scanning_status = 'not_started';
// }).then((ignore) => {
// // html5_qr_code = null;
// // html5_qr_code.clear();
// }).catch((err) => {
// console.log('There was an error while trying to stop the scanning');
// return false;
// });
html5_qr_code.stop().then((ignore) => {
console.log('Scanning has stopped');
document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
scanning_status = 'not_started';
}).then((ignore) => {
// html5_qr_code = null;
html5_qr_code.clear();
}).catch((err) => {
console.log('There was an error while trying to stop the scanning');
return false;
});
// html5_qr_code = null;
}
@@ -267,7 +204,29 @@ function handle_qr_scan_success(decoded_text, decoded_result) {
});
// handle_pause_qr_scanning();
handle_stop_qr_scanning();
// html5_qr_code.stop().then((ignore) => {
// console.log('Scanning has stopped');
// scanning_status = 'not_started';
// document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
// qr_scan_result = decoded_text;
// qr_found_text = decoded_text;
// dispatch('qr_scan_result', {
// result: qr_scan_result,
// entry_method: 'QR',
// });
// // qr_scan_result = null;
// // qr_found_text = null;
// return true;
// }).catch((err) => {
// console.log('There was an error while trying to stop the scanning');
// return false;
// });
}
@@ -318,46 +277,6 @@ function handle_qr_manual_entry() {
qr_scan_result = null;
qr_entered_text = null;
}
function send_init_confirm_email(subject, message) {
console.log(`*** send_init_confirm_email() *** ${subject}`);
let to_email = 'scott.idem+skdev@oneskyit.com';
// let origin_url = encodeURI(`${data.url.origin}`);
let full_subject = `${subject} Aether QR Scanner Debugging`;
let body_html = `
<div>Scott,
<p>This is an automatic debug email from the Aether QR scanner.</p>
</div>
<br>
<div>
Message:<br>
<pre>
${JSON.stringify(message)}
</pre>
</div>
`;
api.send_email({
api_cfg: $ae_api,
from_email: 'noreply+ae_qr_debug@oneskyit.com',
from_name: 'AE QR Debug',
to_email: to_email,
subject: full_subject,
body_html: body_html,
});
}
</script>

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

@@ -0,0 +1,871 @@
<script lang="ts">
console.log(`ae_events_leads exhibit [slug] leads_add_scan.svelte`, $events_slct);
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 { core_func } from '$lib/ae_core_functions';
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
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;
// $events_sess.leads.show_form__scan = true;
// TEMPORARY: For testing and development
$: event_exhibit_obj = liveQuery(
() => db_events.exhibits.get($events_slct.exhibit_id)
);
$: event_exhibit_tracking_obj = liveQuery(
() => db_events.exhibit_tracking.get($events_slct.exhibit_tracking_id)
);
$events_sess.leads.entered_search_str = '';
// $events_sess.leads.entered_search_str = 'Albert Einstein';
let tmp_search_terms = $events_sess.leads.entered_search_str.split(' ')
$: event_badge_obj = liveQuery(
() => db_events.badges.get($events_slct.badge_id)
);
// Version 2: This does not work yet
let event_badge_obj_li = liveQuery(
// () => db_events.exhibits.toArray()
() => db_events.badges
// .where({event_exhibit_id_random: $events_slct.exhibit_id, enable: true, hide: false})
// .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)
// .and('full_name').anyOfIgnoreCase([$events_sess.leads.entered_search_str, 'Sasa Vukelic'])
// .where('full_name').anyOfIgnoreCase(tmp_search_terms)
// .and('enable').equals(true)
.sortBy('full_name') // Use sortBy() instead of orderBy(). toArray() is also not needed???
// .toArray()
// , full_name: 'Susan'
// Scott Idem
// Albert Einstein
);
// We are using Dexie.js for the database. This liveQuery should only show records that match the event_id and contain the search string.
// Version 3: This does not work yet
let event_badge_obj_li_v3 = liveQuery(
// () => db_events.exhibits.toArray()
() => db_events.badges
.where({event_exhibit_id_random: $events_slct.exhibit_id, full_name: $events_sess.leads.entered_search_str})
);
let search_submit_results: Promise<any>|key_val;
let scan_submit_results: Promise<any>|key_val;
async function handle_submit_form_search(event) {
console.log('*** handle_submit_form_search() ***', event);
$events_sess.leads.submit_status__search = 'submitting';
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, external_event_id: $events_loc.leads.default__external_registration_id});
console.log(search_submit_results);
$events_slct.badge_obj_li = search_submit_results;
}
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.leads.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);
});
// 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???');
// }
$events_sess.leads.show_confirm__add_lead[event_badge_id] = 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="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:
<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>
{/if}
<!-- <div class="border border-slate-500/10 p-2 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-ghost-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;
}}
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-ghost-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 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] -->
</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
max-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="">
<form
id="form__search_text"
class="form flex flex-col sm:flex-row md:flex-row lg:flex-row wrap 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. The focus needs to be set automatically! -->
<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"
autofocus
/>
<button
type="submit"
class="btn variant-ghost-primary"
>
<span class="fas fa-search mx-1"></span>
Search
</button>
</form>
</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>
</header>
<section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
<div class="ae_events__badge_li w-full">
{#if $event_badge_obj_li}
<!-- {#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 && 2==4}
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! -->
<!-- This uses the event_badge_obj_v2 from the for each loop. -->
{#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 Selected?</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(`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>
<button
type="button"
class="btn variant-soft-primary"
disabled={!$ae_loc.trusted_access && 2==4}
on:click={() => {
console.log(`Add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
// TEMPORARY: For testing and development
// if (!$ae_loc.trusted_access) {
// console.log('You do not have permission to add this person to the leads list.');
// return false;
// }
// TEMPORARY: For testing and development
events_func.handle_create_ae_obj__exhibit_tracking({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id, event_badge_id: event_badge_obj_v2.event_badge_id_random, external_person_id: $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key, })
.then((result) => {
console.log(result);
let exhibit_tracking_id = null;
let exhibit_tracking_obj = {};
if (result) {
exhibit_tracking_id = result.event_exhibit_tracking_id_random;
exhibit_tracking_obj = result;
$events_slct.exhibit_tracking_id = exhibit_tracking_id;
$events_slct.exhibit_tracking_obj = exhibit_tracking_obj;
$events_sess.leads.show_confirm__add_lead[index] = false;
} else {
console.log('This badge ID has probably already been added to the lead list for this exhibit.');
// Need to look the old record up and set it to not hidden.
// events_func.handle_update_ae_obj_id_crud({api_cfg: $ae_api, object_type: 'event_exhibit_tracking', object_id: $events_slct.exhibit_tracking_id, field_name: 'hide', new_field_value: false})
$events_sess.leads.show_confirm__add_lead[index] = false;
}
if ($events_loc.leads.auto_view) {
$events_sess.leads.show_form__search = false;
$events_sess.leads.show_form__scan = false;
// $events_slct.exhibit_tracking_id = exhibit_tracking_id;
// $events_slct.exhibit_tracking_obj = exhibit_tracking_id;
$events_loc.leads.tab[$events_slct.exhibit_id] = 'leads';
$events_sess.leads.show_form__view_lead = $events_slct.exhibit_tracking_id;
}
});
// $events_sess.leads.show_confirm__add_lead[index] = false;
}}
>
<span class="fas fa-check mx-1"></span>
Yes
</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>
</div>
{/each}
</div> -->
<!-- {:else}
<div class="variant-soft-warning">The search results are not enabled at this time.</div>
{/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-ghost-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>
<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}
<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}
<!-- **END** Search Form -->
<!-- **BEGIN** Scan Form -->
{#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
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.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 ae_modal_scrollfix">
<!-- <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>
<!-- 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_sess.leads.show_confirm__add_lead[$events_slct.badge_id] && $event_badge_obj}
<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 Scanned?</h2>
<div class="popover__actions">
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
$events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = 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">
<p>Are you sure you want to add <strong>{$event_badge_obj.full_name}</strong> to the leads list?</p>
<p>Badge ID: <strong>{$event_badge_obj.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(`Do not add ${$event_badge_obj.full_name} ${$event_badge_obj.email} to the leads list`);
$events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = false;
$events_slct.badge_id = null;
$events_slct.badge_obj = null;
// $events_slct = $events_slct;
// $events_sess = $events_sess;
}}
>
<span class="fas fa-times mx-1"></span>
No
</button>
<button
type="button"
class="btn variant-soft-primary"
disabled={!$ae_loc.trusted_access && 2==4}
on:click={() => {
console.log(`Add ${event_badge_obj.full_name} ${event_badge_obj.email} to the leads list`);
// TEMPORARY: For testing and development
// if (!$ae_loc.trusted_access) {
// console.log('You do not have permission to add this person to the leads list.');
// return false;
// }
// TEMPORARY: For testing and development
events_func.handle_create_ae_obj__exhibit_tracking({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id, event_badge_id: $events_slct.badge_id, external_person_id: $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key, })
.then((result) => {
console.log(result);
let exhibit_tracking_id = null;
let exhibit_tracking_obj = {};
if (result) {
exhibit_tracking_id = result.event_exhibit_tracking_id_random;
exhibit_tracking_obj = result;
$events_slct.exhibit_tracking_id = exhibit_tracking_id;
$events_slct.exhibit_tracking_obj = exhibit_tracking_obj;
} else {
console.log('This badge ID has probably already been added to the lead list for this exhibit.');
// Need to look the old record up and set it to not hidden.
}
$events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = false;
// $events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = false;
$events_slct.badge_id = null;
$events_slct.badge_obj = null;
if ($events_loc.leads.auto_view) {
$events_sess.leads.show_form__search = false;
$events_sess.leads.show_form__scan = false;
$events_loc.leads.tab[$events_slct.exhibit_id] = 'leads';
$events_sess.leads.show_form__view_lead = $events_slct.exhibit_tracking_id;
}
});
// $events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = false;
}}
>
<span class="fas fa-check mx-1"></span>
Yes
</button>
</div>
</section> <!-- .popover__content -->
</section> <!-- .ae_quick_popover -->
</div>
{/if}
</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="button"
class="btn variant-soft-primary"
on:click={() => {
$events_sess.leads.qr_scan_start = !$events_sess.leads.qr_scan_start;
}}
>
<span class="fas fa-search mx-1"></span>
{#if $events_sess.leads.qr_scan_start}
Stop Scanning
{:else}
Scanning
{/if}
</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;
$events_sess.leads.qr_scan_start = 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">
</style>

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

@@ -799,26 +799,25 @@ function handle_qr_camera(event) {
</section> <!-- .popover__content -->
<footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
<!-- <div class="popover__content__actions">
<div class="popover__content__actions">
<button
type="button"
type="submit"
form="form__scan_text"
class="btn variant-soft-primary"
disabled={scan_submit_results instanceof Promise && !scan_submit_results}
on:click={() => {
$events_sess.leads.qr_scan_start = !$events_sess.leads.qr_scan_start;
// trigger = 'save__ds__code';
// $slct_trigger = 'save__ds__code';
}}
>
<span class="fas fa-search mx-1"></span>
{#if $events_sess.leads.qr_scan_start}
Stop Scanning
{:else}
Scanning
{/if}
Scan
</button>
</div> -->
</div>
<div class="popover__status">
<!-- Something text -->
<!-- {#await scan_submit_results}
{#await scan_submit_results}
<div class="modal-loading">
<span class="fas fa-spinner fa-spin"></span>
<span class="loading-text">
@@ -835,7 +834,7 @@ function handle_qr_camera(event) {
</span>
</div>
{/if}
{/await} -->
{/await}
<div
class="ae_debug"
@@ -850,6 +849,7 @@ function handle_qr_camera(event) {
type="button"
class="btn variant-soft-primary"
on:click={() => {
$events_sess.leads.show_form__scan = false;
$events_sess.leads.qr_scan_start = false;
}}