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

This is nearly working.

Browse Source
This commit is contained in:
Scott Idem
2024-04-10 00:14:53 -04:00
parent f405d1b3b7
commit 46dcd389a4
2 changed files with 152 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
src/lib/element_qr_scanner.svelte
View File

@@ -5,6 +5,8 @@ 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';
@@ -35,6 +37,9 @@ 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();
@@ -53,36 +58,52 @@ let qr_scan_cfg = { fps: qr_fps, qrbox: qr_viewfinder_width }; // 275 seems good
onMount(() => {
console.log('** Element Mounted: ** QR Scanner');
// 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();
}
// 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(() => {
onDestroy(async () => {
console.log('** Element Destroyed: ** QR Scanner');
qr_scan_result = null;
qr_found_text = null;
handle_stop_qr_scanning();
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',
@@ -100,16 +121,24 @@ var errorCallback = function(error: any) {
// }
function handle_start_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');
// document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
html5_qr_code = new Html5Qrcode(
'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
@@ -121,21 +150,37 @@ function handle_start_qr_scanning() {
);
}
// if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
// // console.log('Scanner is not started');
// } else {
// console.log('Scanner is already started');
// return;
// }
if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
// console.log('Scanner is not started');
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;
});
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;
}
}
@@ -161,28 +206,46 @@ function handle_resume_qr_scanning() {
}
function handle_stop_qr_scanning() {
if (html5_qr_code && html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
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;
}
// qr_scan_result = null;
// qr_found_text = null;
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();
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;
});
// 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;
}
@@ -204,29 +267,7 @@ 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;
// });
}
@@ -277,6 +318,46 @@ 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>

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

@@ -799,25 +799,26 @@ 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="submit"
form="form__scan_text"
type="button"
class="btn variant-soft-primary"
disabled={scan_submit_results instanceof Promise && !scan_submit_results}
on:click={() => {
// trigger = 'save__ds__code';
// $slct_trigger = 'save__ds__code';
$events_sess.leads.qr_scan_start = !$events_sess.leads.qr_scan_start;
}}
>
<span class="fas fa-search mx-1"></span>
Scan
{#if $events_sess.leads.qr_scan_start}
Stop Scanning
{:else}
Scanning
{/if}
</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">
@@ -834,7 +835,7 @@ function handle_qr_camera(event) {
</span>
</div>
{/if}
{/await}
{/await} -->
<div
class="ae_debug"
@@ -849,7 +850,6 @@ 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;
}}