feat(cardassignment): Now with hand scanner support
This commit is contained in:
@@ -1,16 +1,111 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { _, time } from "svelte-i18n";
|
||||
import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
|
||||
import QrCodeScanner from "./QrCodeScanner.svelte";
|
||||
import { onMount } from "svelte";
|
||||
let state = "scan_runner";
|
||||
let runnerinfo = { id: 0, firstname: "", lastname: "" };
|
||||
let cardCode = "";
|
||||
let scannerActive = true;
|
||||
let barcodeInput;
|
||||
let nextButton;
|
||||
let tryAgainButton;
|
||||
|
||||
function resetAll() {
|
||||
state = "scan_runner";
|
||||
runnerinfo = { id: 0, firstname: "", lastname: "" };
|
||||
cardCode = "";
|
||||
scannerActive = true;
|
||||
setTimeout(() => {
|
||||
barcodeInput && barcodeInput.focus();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (barcodeInput) {
|
||||
barcodeInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
function handleInput(input) {
|
||||
if (runnerinfo.id === 0) {
|
||||
new Audio("/beep.mp3").play();
|
||||
if (input.includes("https://portal.lauf-fuer-kaya.de/profile/")) {
|
||||
const runnerID = JSON.parse(
|
||||
atob(
|
||||
input
|
||||
.replace("https://portal.lauf-fuer-kaya.de/profile/", "")
|
||||
.split(".")[1]
|
||||
)
|
||||
).id;
|
||||
RunnerService.runnerControllerGetOne(runnerID)
|
||||
.then((runner) => {
|
||||
runnerinfo = runner;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
state = "error_runner";
|
||||
setTimeout(() => {
|
||||
tryAgainButton && tryAgainButton.focus();
|
||||
}, 100);
|
||||
// resetAll();
|
||||
});
|
||||
} else {
|
||||
const runnerID = parseInt(input);
|
||||
RunnerService.runnerControllerGetOne(runnerID)
|
||||
.then((runner) => {
|
||||
runnerinfo = runner;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
state = "error_runner";
|
||||
setTimeout(() => {
|
||||
tryAgainButton && tryAgainButton.focus();
|
||||
}, 100);
|
||||
// resetAll();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (`${input}`.length > 10) {
|
||||
cardCode = input;
|
||||
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";
|
||||
setTimeout(() => {
|
||||
nextButton && nextButton.focus();
|
||||
}, 100);
|
||||
})
|
||||
.catch(() => {
|
||||
state = "error_card";
|
||||
scannerActive = false;
|
||||
setTimeout(() => {
|
||||
tryAgainButton && tryAgainButton.focus();
|
||||
}, 100);
|
||||
});
|
||||
} else {
|
||||
console.log("card not found");
|
||||
// scannerActive = true;
|
||||
state = "error_card";
|
||||
scannerActive = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
scannerActive = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -257,6 +352,7 @@
|
||||
on:click={() => {
|
||||
resetAll();
|
||||
}}
|
||||
bind:this={nextButton}
|
||||
type="button"
|
||||
class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 mt-2"
|
||||
>
|
||||
@@ -307,6 +403,7 @@
|
||||
on:click={() => {
|
||||
resetAll();
|
||||
}}
|
||||
bind:this={tryAgainButton}
|
||||
type="button"
|
||||
class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 mt-2"
|
||||
>
|
||||
@@ -397,82 +494,28 @@
|
||||
}
|
||||
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 = "error_runner";
|
||||
// resetAll();
|
||||
});
|
||||
} else {
|
||||
const runnerID = parseInt(e.detail.decodedText);
|
||||
RunnerService.runnerControllerGetOne(runnerID)
|
||||
.then((runner) => {
|
||||
runnerinfo = runner;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
state = "error_runner";
|
||||
// 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(() => {
|
||||
state = "error_card";
|
||||
scannerActive = false;
|
||||
});
|
||||
} else {
|
||||
console.log("card not found");
|
||||
// scannerActive = true;
|
||||
state = "error_card";
|
||||
scannerActive = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
scannerActive = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
handleInput(e.detail.decodedText);
|
||||
}
|
||||
}}
|
||||
width={320}
|
||||
height={320}
|
||||
class="w-full max-w-sm bg-neutral-300 rounded-lg overflow-hidden"
|
||||
/>
|
||||
<form
|
||||
on:submit={(e) => {
|
||||
handleInput(barcodeInput.value);
|
||||
barcodeInput.value = "";
|
||||
e.preventDefault();
|
||||
}}
|
||||
class="mt-2"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={$_("barcode_scanner")}
|
||||
class="w-full max-w-sm bg-neutral-300 rounded-lg overflow-hidden mt-2"
|
||||
bind:this={barcodeInput}
|
||||
/>
|
||||
</form>
|
||||
{/if}
|
||||
{#if runnerinfo.id !== 0 && state !== "scan_card"}
|
||||
<button
|
||||
|
||||
@@ -526,5 +526,6 @@
|
||||
"you-have-to-provide-an-organization": "Du musst eine Organisation angeben",
|
||||
"you-have-to-save-your-changes-to-generate-a-link": "Du musst deine Änderungen speichern, um einen Link zu generieren.",
|
||||
"you-must-create-at-least-one-card-or-cancel": "Du musst mindestens eine Blankokarte erstellen.",
|
||||
"zip-postal-code": "Postleitzahl"
|
||||
"zip-postal-code": "Postleitzahl",
|
||||
"barcode_scanner": "Scannen mit Handscanner"
|
||||
}
|
||||
@@ -526,5 +526,6 @@
|
||||
"you-have-to-provide-an-organization": "You have to provide an organization",
|
||||
"you-have-to-save-your-changes-to-generate-a-link": "You have to save your changes to generate a link.",
|
||||
"you-must-create-at-least-one-card-or-cancel": "You must create at least one card.",
|
||||
"zip-postal-code": "ZIP/ postal code"
|
||||
"zip-postal-code": "ZIP/ postal code",
|
||||
"barcode_scanner": "Scan via barcode scanner"
|
||||
}
|
||||
Reference in New Issue
Block a user