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

Trying to make things work for the morning...

Browse Source
This commit is contained in:
Scott Idem
2024-04-09 21:25:12 -04:00
parent 4460b38098
commit f68bccddb9
4 changed files with 104 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app.postcss
View File

@@ -305,4 +305,12 @@ section.ae_quick_popover_small {
}
.fade_50:hover {
opacity: 1;
}
.auth_view_only {
display: none;
}
.ae_root--auth_access .auth_view_only {
display: initial;
}

120
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',
@@ -103,13 +124,21 @@ var errorCallback = function(error: any) {
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 ] }
@@ -128,7 +157,8 @@ function handle_start_qr_scanning() {
// return;
// }
html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error).then((ignore: any) => {
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;
@@ -161,20 +191,17 @@ function handle_resume_qr_scanning() {
}
function handle_stop_qr_scanning() {
async function handle_stop_qr_scanning() {
if (html5_qr_code && html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
console.log('Scanner is not started');
return;
}
// qr_scan_result = null;
// qr_found_text = null;
// html5_qr_code.pause();
html5_qr_code.stop().then((ignore) => {
await html5_qr_code.stop().then((ignore) => {
console.log('Scanning has stopped');
document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
// document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
scanning_status = 'not_started';
}).then((ignore) => {
// html5_qr_code = null;
@@ -185,6 +212,7 @@ function handle_stop_qr_scanning() {
});
// html5_qr_code = null;
return;
}
@@ -204,29 +232,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 +283,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>

14
src/routes/+page.svelte
View File

@@ -22,7 +22,12 @@ onMount(() => {
</script>
<section class="ae_root md:container h-full mx-auto flex flex-col items-center p-4 space-y-12">
<section
class="ae_root md:container h-full mx-auto flex flex-col items-center p-4 space-y-12"
class:ae_root--auth_access={$ae_loc.auth_access}
class:ae_root--trusted_access={$ae_loc.trusted_access}
class:ae_root--administrator_access={$ae_loc.administrator_access}
>
<Element_data_store
ds_code="hub__site__root_page_header"
@@ -41,16 +46,17 @@ onMount(() => {
for_type={null}
for_id={null}
ds_name="Default: AE Hub - Site root page content HTML"
show_edit={false}
class_li={$ae_sess.ds_loaded.hub__site__root_page_content === false ? 'hidden' : 'grow'}
bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_content}
/>
<!-- page content DS: {$ae_sess.ds_loaded.hub__site__root_page_content} -->
<section class="flex flex-col items-center p-4 space-y-6">
<section class="flex flex-col gap-2 items-center p-4 space-y-6">
<div data-sveltekit-preload-data="false" class="">
<button
class="btn btn-sm variant-soft text-error-300 hover:text-error-800"
class="btn btn-sm m-1 variant-soft text-error-300 hover:text-error-800"
title="Reload and clear the page cache"
on:click={() => {
window.location.reload(true);
@@ -60,7 +66,7 @@ onMount(() => {
Reload and Clear Cache
</button>
<button
class="btn btn-sm variant-soft text-error-300 hover:text-error-800"
class="btn btn-sm m-1 variant-soft text-error-300 hover:text-error-800"
title="Clear the browser storage for this page"
on:click={() => {
localStorage.clear();

3
src/routes/events_badges/review/+page.svelte
View File

@@ -75,6 +75,9 @@ onMount(() => {
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;
});