Card Assignment for Mobile
-
- {#if state.includes("scan_")}
-
- {#if state === "scan_runner"}
-
Scan Runner (Selfservice QR)
- {/if}
- {#if state === "scan_card"}
-
Runner Scanned
-
{runnerinfo.firstname} {runnerinfo.lastname} [#{runnerinfo.id}]
-
Scan Card (Code 128 Barcode)
- {/if}
-
{
- console.log({ type: "DETECT", code: e.detail.decodedText });
- if (state === "scan_runner") {
- if (
- e.detail.decodedText.includes(
- "https://portal.lauf-fuer-kaya.de/profile/"
- )
- ) {
- const runnerID = JSON.parse(
- atob(
- e.detail.decodedText
- .replace("https://portal.lauf-fuer-kaya.de/profile/", "")
- .split(".")[1]
- )
- ).id;
- new Audio("/beep.mp3").play();
- RunnerService.runnerControllerGetOne(runnerID).then((runner) => {
- console.log(runner);
- runnerinfo = runner;
- });
- state = "scan_card";
- }
- }
- if (state === "scan_card") {
- if (
- !e.detail.decodedText.includes(
- "https://portal.lauf-fuer-kaya.de/profile/"
- )
- ) {
- cardCode = e.detail.decodedText;
- new Audio("/beep.mp3").play();
- state = "assigning";
- RunnerCardService.runnerCardControllerGetAll().then((cards) => {
- console.log(cards);
- const card = cards.find((c) => c.code === cardCode);
- if (card) {
- console.log("card found", card);
- RunnerCardService.runnerCardControllerPut(card.id, {
- enabled: true,
- id: card.id,
- runner: runnerinfo.id,
- }).then(() => {
- state = "done";
- });
- } else {
- state = "error_card_404";
- }
- });
- }
- }
+
+ {#if state === "done"}
+ ✅ Done
+
+ Assigned Card {cardCode} to {runnerinfo.firstname}
+ {runnerinfo.lastname} [#{runnerinfo.id}]
+
+
+ {:else if state === "assigning"}
+ Assigning Card {cardCode} ⌛
+ Please wait a moment while we assign the card...
+ {:else}
+
+ {#if runnerinfo.id === 0}
+ Scan Runner
+
+ Selfservice QR/ Registration Barcode
+
+ {:else}
+
+ {runnerinfo.firstname}
+ {runnerinfo.lastname}
+
+
+ ID: #{runnerinfo.id}
created_via: {runnerinfo.created_via}
{runnerinfo.group.name}
+
+ {/if}
+
+ {/if}
+ {#if state === "scan_card"}
+ Scan Card
+ Code 128 Barcode
+ {/if}
+ {#if state.includes("scan_")}
+ {#if scannerActive}
+ {
+ if (scannerActive) {
+ scannerActive = false;
+ console.log({ type: "DETECT", code: e.detail.decodedText });
+ if (runnerinfo.id === 0) {
+ new Audio("/beep.mp3").play();
+ if (
+ e.detail.decodedText.includes(
+ "https://portal.lauf-fuer-kaya.de/profile/"
+ )
+ ) {
+ const runnerID = JSON.parse(
+ atob(
+ e.detail.decodedText
+ .replace("https://portal.lauf-fuer-kaya.de/profile/", "")
+ .split(".")[1]
+ )
+ ).id;
+ RunnerService.runnerControllerGetOne(runnerID)
+ .then((runner) => {
+ runnerinfo = runner;
+ })
+ .catch((e) => {
+ console.error(e);
+ state = "scan_error_runner_404";
+ resetAll();
+ });
+ } else {
+ const runnerID = parseInt(e.detail.decodedText);
+ RunnerService.runnerControllerGetOne(runnerID)
+ .then((runner) => {
+ runnerinfo = runner;
+ })
+ .catch((e) => {
+ console.error(e);
+ state = "scan_error_runner_404";
+ resetAll();
+ });
+ }
+ } else {
+ if (`${e.detail.decodedText}`.length > 10) {
+ cardCode = e.detail.decodedText;
+ new Audio("/beep.mp3").play();
+ state = "assigning";
+ RunnerCardService.runnerCardControllerGetAll()
+ .then((cards) => {
+ console.log(cards);
+ const card = cards.find((c) => c.code === cardCode);
+ if (card) {
+ console.log("card found", card);
+ RunnerCardService.runnerCardControllerPut(card.id, {
+ enabled: true,
+ id: card.id,
+ runner: runnerinfo.id,
+ })
+ .then(() => {
+ state = "done";
+ })
+ .catch(() => {
+ scannerActive = true;
+ });
+ } else {
+ scannerActive = true;
+ }
+ })
+ .catch(() => {
+ scannerActive = true;
+ });
+ }
+ }
+ }
+ }}
+ width={320}
+ height={320}
+ class="w-full max-w-sm bg-neutral-300 rounded-lg overflow-hidden"
+ />
+ {/if}
+ {#if runnerinfo.id !== 0 && state !== "scan_card"}
+
+ {/if}
+ {#if state === "scan_card" || runnerinfo.id !== 0}
{/if}
- {:else}
-
- {#if state === "assigning"}
- Assigning Card {cardCode} ⌛
- Please wait a moment while we assign the card...
- {/if}
- {#if state === "done"}
-
- Assigned Card {cardCode} to {runnerinfo.firstname}
- {runnerinfo.lastname} [#{runnerinfo.id}] ✅
-
-
- {/if}
-
{/if}
diff --git a/src/components/general/QrCodeScanner.svelte b/src/components/general/QrCodeScanner.svelte
index 0bdc726b..d4671b07 100644
--- a/src/components/general/QrCodeScanner.svelte
+++ b/src/components/general/QrCodeScanner.svelte
@@ -13,9 +13,25 @@
const dispatch = createEventDispatcher();
+ const debounceFunc = (func, delay) => {
+ let timer;
+ return function (...args) {
+ const context = this;
+ clearTimeout(timer);
+ timer = setTimeout(() => {
+ func.apply(context, args);
+ }, delay);
+ };
+ };
+
+ const debouncedDispatch = debounceFunc(function (decodedText) {
+ console.log("dispatchEvent");
+ dispatch("detect", { decodedText });
+ }, 500);
+
function onScanSuccess(decodedText, decodedResult) {
if (!paused) {
- dispatch("detect", { decodedText });
+ debouncedDispatch(decodedText);
}
}
@@ -32,6 +48,7 @@
"qr-scanner",
{
fps: 10,
+ showTorchButtonIfSupported: true,
rememberLastUsedCamera: true,
qrbox: { width, height },
aspectRatio: 1,
@@ -48,16 +65,6 @@
);
scanner.render(onScanSuccess, onScanFailure);
});
-
- // pause/resume scanner to avoid unintended scans
- $: togglePause(paused);
- function togglePause(paused) {
- if (paused && scanner?.getState() === Html5QrcodeScannerState.SCANNING) {
- scanner?.pause();
- } else if (scanner?.getState() === Html5QrcodeScannerState.PAUSED) {
- scanner?.resume();
- }
- }