Added runnerid as barcode

src/routes/registration/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
+	import bwipjs from 'bwip-js';
 
 	$: firstname = '';
 	$: lastname = '';
-	$: showResult = true;
+	$: showResult = false;
 	$: showError = false;
 
 	let response: ResponseRunner;
@@ -17,11 +18,34 @@
 				group
 			})) as ResponseRunner;
 			showError = false;
+			showResult = true;
 		} catch (error) {
 			console.log(error);
 			showError = true;
+			showResult = false;
 		}
 	}
+
+	function textToBase64Barcode(text: string, is_qrcode: boolean) {
+		const canvas = document.createElement('canvas');
+		let bcid = 'ean13';
+		if (is_qrcode) {
+			bcid = 'qrcode';
+		}
+		let codeconfig = {
+			bcid,
+			text: `${text}`,
+			scale: 4,
+			includetext: true,
+			textxalign: 'center',
+			backgroundcolor: 'ffffff'
+		};
+		if (bcid == 'ean13') {
+			codeconfig.height = 10;
+		}
+		bwipjs.toCanvas(canvas, codeconfig);
+		return canvas.toDataURL('image/png');
+	}
 </script>
 
 <div class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16">
@@ -142,9 +166,25 @@
 						</form>
 						<!-- End Form -->
 					{:else}
-						<p class="block text-lg mb-2 dark:text-white">ID: {response.id}</p>
+						<div>
-						<p class="block text-lg mb-2 dark:text-white">Vorname: {response.firstname}</p>
+							<p class="text-lg mb-2 dark:text-white">ID: {response.id}</p>
-						<p class="block text-lg mb-2 dark:text-white">Nachname: {response.lastname}</p>
+							<p class="text-lg mb-2 dark:text-white">Vorname: {response.firstname}</p>
+							<p class="text-lg mb-2 dark:text-white">Nachname: {response.lastname}</p>
+						</div>
+
+						<img
+							class="w-full md:w-auto mb-2 mx-auto"
+							alt="Runnerid"
+							src={textToBase64Barcode(response.id.toString(), false)}
+						/>
+
+						<button
+							on:click={() => {
+								showResult = false;
+							}}
+							class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
+							>Fertig</button
+						>
 					{/if}
 				</div>
 			</div>