feat: add experimental ui for mobile card assignment

package.json

@@ -49,6 +49,7 @@
     "bwip-js": "3.4.0",
     "check-password-strength": "2.0.10",
     "csvtojson": "2.0.10",
+    "html5-qrcode": "^2.3.8",
     "localforage": "1.10.0",
     "marked": "4.3.0",
     "svelte": "3.58.0",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       csvtojson:
         specifier: 2.0.10
         version: 2.0.10
+      html5-qrcode:
+        specifier: ^2.3.8
+        version: 2.3.8
       localforage:
         specifier: 1.10.0
         version: 1.10.0
@@ -77,7 +80,7 @@ importers:
         version: 3.3.3(prettier@3.5.3)(svelte@3.58.0)
       release-it:
         specifier: 17.10.0
-        version: 17.10.0
+        version: 17.10.0(typescript@5.8.3)
       svelte-select:
         specifier: 3.17.0
         version: 3.17.0
@@ -924,6 +927,9 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  html5-qrcode@2.3.8:
+    resolution: {integrity: sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -1794,6 +1800,11 @@ packages:
   type@2.7.2:
     resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
 
+  typescript@5.8.3:
+    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   uglify-js@3.19.3:
     resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
     engines: {node: '>=0.8.0'}
@@ -2439,12 +2450,14 @@ snapshots:
       graceful-fs: 4.2.11
       xdg-basedir: 5.1.0
 
-  cosmiconfig@9.0.0:
+  cosmiconfig@9.0.0(typescript@5.8.3):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.8.3
 
   crc-32@1.2.2: {}
 
@@ -2765,6 +2778,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  html5-qrcode@2.3.8: {}
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
@@ -3322,14 +3337,14 @@ snapshots:
     dependencies:
       rc: 1.2.8
 
-  release-it@17.10.0:
+  release-it@17.10.0(typescript@5.8.3):
     dependencies:
       '@iarna/toml': 2.2.5
       '@octokit/rest': 20.1.1
       async-retry: 1.3.3
       chalk: 5.3.0
       ci-info: 4.1.0
-      cosmiconfig: 9.0.0
+      cosmiconfig: 9.0.0(typescript@5.8.3)
       execa: 8.0.0
       git-url-parse: 14.0.0
       globby: 14.0.2
@@ -3607,6 +3622,9 @@ snapshots:
 
   type@2.7.2: {}
 
+  typescript@5.8.3:
+    optional: true
+
   uglify-js@3.19.3:
     optional: true
 

src/App.svelte

@@ -41,6 +41,7 @@
   import Settings from "./components/settings/Settings.svelte";
   import Transition from "./components/base/Transition.svelte";
   import Orgs from "./components/orgs/Orgs.svelte";
+  import CardAssignment from "./components/general/CardAssignment.svelte";
   import Runners from "./components/runners/Runners.svelte";
   import Footer from "./components/general/Footer.svelte";
   import TracksOverview from "./components/tracks/TracksOverview.svelte";
@@ -141,6 +142,11 @@
             <RunnerDetail {params} />
           </Route>
         </Route>
+        <Route path="/cardassignment/*">
+          <Route path="/">
+            <CardAssignment />
+          </Route>
+        </Route>
         <Route path="/teams/*">
           <Route path="/">
             <Teams />

src/components/general/CardAssignment.svelte

@@ -0,0 +1,72 @@
+<script>
+	import QrCodeScanner from "./QrCodeScanner.svelte";
+	let state = "scan_runner";
+	let runnerID = undefined;
+	let cardInfo = "";
+</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}
+		<!--  -->
+		{#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>
+			<h3 class="text-xl font-bold">Scan Card (Code 128 Barcode)</h3>
+		{/if}
+		<QrCodeScanner
+			on:detect={(e) => {
+				console.log({ type: "DETECT", code: e.detail.decodedText });
+				if (state === "scan_runner") {
+					if (
+						e.detail.decodedText.includes(
+							"https://portal.lauf-fuer-kaya.de/profile/"
+						)
+					) {
+						runnerID = JSON.parse(
+							atob(
+								e.detail.decodedText
+									.replace("https://portal.lauf-fuer-kaya.de/profile/", "")
+									.split(".")[1]
+							)
+						).id;
+						state = "scan_card";
+					}
+				}
+				if (state === "scan_card") {
+					if (
+						!e.detail.decodedText.includes(
+							"https://portal.lauf-fuer-kaya.de/profile/"
+						)
+					) {
+						cardInfo = e.detail.decodedText;
+						state = "done";
+					}
+				}
+			}}
+			width={320}
+			height={320}
+			class="w-full max-w-sm bg-neutral-300 rounded-lg overflow-hidden"
+		/>
+		{#if state === "scan_card"}
+			<button
+				on:click={() => {
+					state = "scan_runner";
+					runnerID = undefined;
+					cardInfo = "";
+				}}
+				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"
+			>
+				Cancel
+			</button>
+		{/if}
+		<!--  -->
+	{/if}
+</div>

src/components/general/QrCodeScanner.svelte

@@ -0,0 +1,80 @@
+<script>
+	import { onMount, createEventDispatcher } from "svelte";
+	import {
+		Html5QrcodeScanner,
+		Html5QrcodeScanType,
+		Html5QrcodeSupportedFormats,
+		Html5QrcodeScannerState,
+	} from "html5-qrcode";
+
+	export let width;
+	export let height;
+	export let paused = false;
+
+	const dispatch = createEventDispatcher();
+
+	function onScanSuccess(decodedText, decodedResult) {
+		dispatch("detect", { decodedText });
+	}
+
+	// usually better to ignore and keep scanning
+	function onScanFailure(message) {
+		dispatch("error", { message });
+	}
+
+	let scanner;
+	onMount(() => {
+		scanner = new Html5QrcodeScanner(
+			"qr-scanner",
+			{
+				fps: 10,
+				rememberLastUsedCamera: true,
+				qrbox: { width, height },
+				aspectRatio: 1,
+				supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA],
+				formatsToSupport: [
+					Html5QrcodeSupportedFormats.CODE_39,
+					Html5QrcodeSupportedFormats.EAN_8,
+					Html5QrcodeSupportedFormats.EAN_13,
+					Html5QrcodeSupportedFormats.QR_CODE,
+					Html5QrcodeSupportedFormats.CODE_128,
+				],
+			},
+			false // non-verbose
+		);
+		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();
+		}
+	}
+</script>
+
+<div id="qr-scanner" class={$$props.class} />
+
+<style>
+	/* Hide unwanted icons */
+	#qr-scanner :global(img[alt="Info icon"]),
+	#qr-scanner :global(img[alt="Camera based scan"]) {
+		display: none;
+	}
+
+	/* Change camera permission button text */
+	#qr-scanner :global(#html5-qrcode-button-camera-permission) {
+		visibility: hidden;
+	}
+	#qr-scanner :global(#html5-qrcode-button-camera-permission::after) {
+		position: absolute;
+		inset: auto 0 0;
+		display: block;
+		content: "Allow camera access";
+		visibility: visible;
+		padding: 10px 0;
+	}
+</style>