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

feat: migration to Svelte 5

Browse Source
This commit is contained in:
Scott Idem
2025-11-19 12:38:03 -05:00
parent d99e9ee1b0
commit f25b9ccd8f
46 changed files with 9578 additions and 9095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/lib/element_qr_scanner_v2.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
// *** Import Svelte core
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
// import 'html5-qrcode';
@@ -21,27 +23,41 @@
// *** 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 = 10;
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'}
interface Props {
// *** Export/Exposed variables and functions for component
start_qr_scanner?: boolean;
show_pause_btn?: boolean; // pause and resume buttons
show_qr_manual_text_entry_option?: boolean;
show_qr_manual_badge_id_entry_option?: boolean;
show_qr_scan_result?: boolean;
qr_fps?: number;
qr_viewfinder_width?: number; // 275 seems good... Need to not let the this be larger than the container which changes based on the width of the screen/window.
qr_facing_mode?: string; // environment, user, { exact: 'environment'}, { exact: 'user'}
}
let {
start_qr_scanner = $bindable(true),
show_pause_btn = false,
show_qr_manual_text_entry_option = false,
show_qr_manual_badge_id_entry_option = false,
show_qr_scan_result = true,
qr_fps = 10,
qr_viewfinder_width = 275,
qr_facing_mode = 'environment'
}: Props = $props();
const dispatch = createEventDispatcher();
// *** Set initial variables
let scanning_status: string = 'not_started';
let qr_scan_result: null | string = null;
let scanning_status: string = $state('not_started');
let qr_scan_result: null | string = $state(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 qr_entered_text: null | string = $state(null);
let qr_entered_badge_id: null | string = $state(null);
let show_qr_manual_entry: null | boolean = $state(null);
let disable_submit_badge_id_btn: boolean = $state(true);
let user_media_status = 'not_requested';
@@ -258,16 +274,18 @@
}
}
$: 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;
}
run(() => {
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() ***');
@@ -350,7 +368,7 @@
<div class="ae_options flex flex-row justify-center items-center gap-1 m-1">
<button
type="button"
on:click={() => {
onclick={() => {
navigator.mediaDevices
.getUserMedia({ video: true })
.then(get_user_media_success, get_user_media_error);
@@ -363,7 +381,7 @@
<button
type="button"
on:click={() => {
onclick={() => {
handle_start_qr_scanning_trust();
// Select back camera or fail with `OverconstrainedError`.
// html5_qr_code.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);
@@ -385,7 +403,7 @@
{#if scanning_status == 'scanning'}
<button
on:click={handle_stop_qr_scanning}
onclick={handle_stop_qr_scanning}
class="ae_btn__stop btn btn-sm preset-tonal-secondary"
>
<span class="fas fa-crosshairs fa-spin opacity-50 m-1"></span>
@@ -413,7 +431,7 @@
id="entered_text"
bind:value={qr_entered_text}
/>
<button on:click={handle_qr_manual_entry} class="btn btn-md preset-tonal-warning"
<button onclick={handle_qr_manual_entry} class="btn btn-md preset-tonal-warning"
><span class="fas fa-paper-plane"></span> Submit Text</button
>
@@ -424,12 +442,12 @@
label="Name or Email"
value={search_query_str}
focus={true}
on:oninput={handle_oninput_search_query_str}
ononinput={handle_oninput_search_query_str}
/>
</div>
{:else}
<button
on:click={() => {
onclick={() => {
handle_stop_qr_scanning();
show_qr_manual_entry = true;
}}
@@ -444,7 +462,7 @@
{#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">
<form onsubmit={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}"> -->
@@ -460,7 +478,7 @@
<button
type="submit"
on:click={handle_qr_manual_entry}
onclick={handle_qr_manual_entry}
disabled={disable_submit_badge_id_btn}
class="btn btn-md preset-tonal-primary border border-primary-500 m-1"
class:btn_default={disable_submit_badge_id_btn}
@@ -471,7 +489,7 @@
</form>
{:else}
<button
on:click={() => {
onclick={() => {
handle_stop_qr_scanning();
show_qr_manual_entry = true;
}}