feat: working CardAssignment

src/components/dashboard/Dashboard.svelte

@@ -41,7 +41,27 @@
 				</svg>
 				<span>{$_("dashboard-title")}</span>
 			</a>
-			{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET") && store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
+				<a
+					class:activenav={$router.path.includes("/cardassignment/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/cardassignment/"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+
+					<span>Card Assignment</span>
+				</a>
 				<a
 					class:activenav={$router.path.includes("/runners/")}
 					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"

src/components/general/CardAssignment.svelte

@@ -1,26 +1,30 @@
 <script>
+	import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
 	import QrCodeScanner from "./QrCodeScanner.svelte";
 	let state = "scan_runner";
-	let runnerID = undefined;
-	let cardInfo = "";
+	let runnerinfo = { id: 0, firstname: "", lastname: "" };
+	let cardCode = "";
+	$: scannerActive = state.includes("scan");
 </script>
 
 <div class="p-4">
 	<h3 class="text-3xl font-bold">Card Assignment for Mobile</h3>
-	{#if state === "done"}
-		<p>Assigned Card {cardInfo} ✅</p>
-		<p>(not really, needs to be implemented)</p>
-	{:else}
+	<!-- <p>state</p>
+	<p>{state}</p>
+	<p>scannerActive</p>
+	<p>{scannerActive}</p> -->
+	{#if state.includes("scan_")}
 		<!--  -->
 		{#if state === "scan_runner"}
 			<h3 class="text-xl font-bold">Scan Runner (Selfservice QR)</h3>
 		{/if}
 		{#if state === "scan_card"}
 			<h3 class="text-xl font-bold">Runner Scanned</h3>
-			<p>{runnerID}</p>
+			<p>{runnerinfo.firstname} {runnerinfo.lastname} [#{runnerinfo.id}]</p>
 			<h3 class="text-xl font-bold">Scan Card (Code 128 Barcode)</h3>
 		{/if}
 		<QrCodeScanner
+			paused={!scannerActive}
 			on:detect={(e) => {
 				console.log({ type: "DETECT", code: e.detail.decodedText });
 				if (state === "scan_runner") {
@@ -29,13 +33,18 @@
 							"https://portal.lauf-fuer-kaya.de/profile/"
 						)
 					) {
-						runnerID = JSON.parse(
+						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";
 					}
 				}
@@ -45,8 +54,25 @@
 							"https://portal.lauf-fuer-kaya.de/profile/"
 						)
 					) {
-						cardInfo = e.detail.decodedText;
-						state = "done";
+						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";
+							}
+						});
 					}
 				}
 			}}
@@ -58,8 +84,8 @@
 			<button
 				on:click={() => {
 					state = "scan_runner";
-					runnerID = undefined;
-					cardInfo = "";
+					runnerinfo = { id: 0, firstname: "", lastname: "" };
+					cardCode = "";
 				}}
 				type="button"
 				class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-100 text-red-800 hover:bg-red-200 focus:outline-hidden focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none dark:text-red-500 dark:bg-red-800/30 dark:hover:bg-red-800/20 dark:focus:bg-red-800/20 w-full mt-2"
@@ -68,5 +94,30 @@
 			</button>
 		{/if}
 		<!--  -->
+	{:else}
+		<!--  -->
+		{#if state === "assigning"}
+			<p>Assigning Card {cardCode} ⌛</p>
+			<p>Please wait a moment while we assign the card...</p>
+		{/if}
+		{#if state === "done"}
+			<p>
+				Assigned Card {cardCode} to {runnerinfo.firstname}
+				{runnerinfo.lastname} [#{runnerinfo.id}] ✅
+			</p>
+			<button
+				on:click={() => {
+					// state = "scan_runner";
+					// runnerinfo = { id: 0, firstname: "", lastname: "" };
+					// cardCode = "";
+					location.reload();
+				}}
+				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 w-full mt-2"
+			>
+				Done
+			</button>
+		{/if}
+		<!--  -->
 	{/if}
 </div>

src/components/general/QrCodeScanner.svelte

@@ -14,12 +14,16 @@
 	const dispatch = createEventDispatcher();
 
 	function onScanSuccess(decodedText, decodedResult) {
-		dispatch("detect", { decodedText });
+		if (!paused) {
+			dispatch("detect", { decodedText });
+		}
 	}
 
 	// usually better to ignore and keep scanning
 	function onScanFailure(message) {
-		dispatch("error", { message });
+		if (!paused) {
+			dispatch("error", { message });
+		}
 	}
 
 	let scanner;