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

I am done for the night/morning...

Browse Source
This commit is contained in:
Scott Idem
2024-04-10 20:31:32 -04:00
parent 5411df5893
commit 920dd176fe
8 changed files with 2092 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/lib/element_qr_scanner.svelte
View File

@@ -8,6 +8,7 @@ import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats} from
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';
@@ -39,6 +40,9 @@ let disable_submit_badge_id_btn: boolean = true;
let user_media_status = 'not_requested';
let debug_comment: string = 'Debugging QR Scanner';
let debug_info: any;
// let max_results: number = 50;
@@ -58,14 +62,24 @@ 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.
navigator.mediaDevices.getUserMedia({video: true})
.then(successCallback, errorCallback);
// Wait 250ms for everything to fully load
// setTimeout(() => {
// console.log('** Element Mounted: ** QR Scanner - setTimeout');
// NOTE: We only want to trigger the scanning to start after the page has fully loaded.
navigator.mediaDevices.getUserMedia({video: true})
.then(successCallback, errorCallback);
console.log('** Element Mounted: ** QR Scanner - getUserMedia in setTimeout');
// mounted = true;
// }, 750);
// console.log('** Element Mounted: ** QR Scanner - setTimeout end');
// NOTE: This can only be done after the page has fully loaded.
// if (start_qr_scanner) {
// handle_start_qr_scanning();
// }
});
@@ -83,25 +97,58 @@ var successCallback = function(error: any) {
console.log('Camera access allowed');
user_media_status = 'allowed';
debug_comment = 'Camera Access Allowed';
debug_info = JSON.stringify(error);
if (html5_qr_code) {
console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...');
debug_info = 'html5_qr_code object found. Clearing and creating new Html5Qrcode...';
html5_qr_code.clear();
// document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
} else {
console.log('html5_qr_code not found. Creating new Html5Qrcode...');
debug_info = 'html5_qr_code not found. Creating new Html5Qrcode...';
}
html5_qr_code = new Html5Qrcode(
'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
);
debug_info = 'new Html5Qrcode for element id=qr_scanner_viewfinder';
if (start_qr_scanner) {
console.log('Ready to start QR scanning!');
debug_info = 'Ready to start QR scanning!';
handle_start_qr_scanning();
}
// let subject = 'Camera Access Allowed';
// let message = error;
// send_init_confirm_email(subject, message);
console.log('Dispatching qr_camera');
debug_info = 'Dispatching qr_camera';
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();
}
// 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';
alert('Error trying to start camera');
alert(error);
debug_comment = 'Camera Access Denied';
debug_info = JSON.stringify(error);
// alert('Error trying to start camera');
// alert(error);
let subject = 'Camera Access Denied';
let message = error;
@@ -113,6 +160,14 @@ var errorCallback = function(error: any) {
}
};
// $: if (start_qr_scanner && user_media_status == 'allowed' && (scanning_status == 'not_started' || scanning_status == 'paused')) {
// console.log('START QR SCANNING');
// handle_start_qr_scanning();
// } else {
// // console.log('STOP QR SCANNING');
// // handle_stop_qr_scanning();
// }
// $: if (mounted && start_qr_scanner) {
// console.log('START QR SCANNING');
@@ -132,27 +187,44 @@ async function handle_start_qr_scanning() {
} else if (user_media_status == 'not_requested') {
console.log('Camera access not requested yet!');
return;
} else if (user_media_status == 'allowed') {
console.log('Camera access allowed!');
debug_info = 'Camera access allowed!';
} else {
console.log('Camera access status unknown! This should not happen?');
debug_info = 'Camera access status unknown! This should not happen?';
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 ] }
);
}
debug_comment = 'Starting QR Scanning...';
if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
// if (html5_qr_code) {
// console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...');
// debug_info = '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...');
// debug_info = 'html5_qr_code not found. Creating new Html5Qrcode...';
// html5_qr_code = new Html5Qrcode(
// 'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
// );
// }
debug_info = 'Check the state and start if not started...';
let current_state = await html5_qr_code.getState()
if (current_state == 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)
@@ -160,6 +232,8 @@ async function handle_start_qr_scanning() {
console.log('Scanning has started');
scanning_status = 'scanning';
debug_info = 'Scanning has started';
// let subject = 'QR Scanning Started';
// let message = ignore;
// send_init_confirm_email(subject, message);
@@ -169,6 +243,9 @@ async function handle_start_qr_scanning() {
console.log('There was an error while trying to start the QR scanner');
scanning_status = 'start_error';
debug_info = 'Error starting scanner: ' + JSON.stringify(err);
// let subject = 'QR Scanning Start Error';
// let message = err;
// send_init_confirm_email(subject, message);
@@ -181,6 +258,7 @@ async function handle_start_qr_scanning() {
} else {
console.log('Scanner is already started');
debug_info = 'Scanner is already started';
return;
}
@@ -383,10 +461,10 @@ function send_init_confirm_email(subject, message) {
class="ae_container qr_scanning_container"
>
<div
class="ae_options m-1"
class="ae_options flex flex-row justify-center items-center gap-1 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 X</button>
<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>
@@ -464,7 +542,15 @@ function send_init_confirm_email(subject, message) {
</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>
<button on:click={() =>
{
handle_stop_qr_scanning();
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}
@@ -475,6 +561,14 @@ function send_init_confirm_email(subject, message) {
<span id="qr_scan_result_value" class="value">{qr_scan_result}</span>
</div>
{/if}
<!-- {debug_comment ?? 'Debugging QR Scanner'}
{#if debug_info}
<div class="ae_container debug_info">
<span class="label">Debug Info:</span>
<span class="value">{debug_info}</span>
</div>
{/if} -->
<!-- </fieldset> -->
</section>