From 3e3846f1cb1fe281edce7c6ce3485f54ddbed3e2 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Tue, 8 Apr 2025 20:56:16 +0200
Subject: [PATCH] feat: Full printing support

---
 src/routes/+layout.svelte  |  4 ++--
 src/routes/+page.svelte    |  2 +-
 src/routes/Register.svelte | 46 ++++++++++++++++++++++++++++----------
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 14ad086..79718d3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -24,12 +24,12 @@
 </script>
 
 <div
-	class="text-neutral-800 flex flex-col h-screen"
+	class="text-neutral-800 flex flex-col h-screen print:h-full"
 	style="background: url({lfkbackground});background-position: center center!important;background-size: contain!important;background-repeat: no-repeat!important;"
 >
 	<main class="flex-grow">
 		<div
-			class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8"
+			class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8 print:hidden"
 		>
 			{hours}:{minutes}:{seconds}
 		</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 201d1d8..9c8eb63 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,7 +14,7 @@
 {:else}
 	<Login />
 {/if}
-<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none">
+<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none print:absolute print:bottom-auto">
 	{#if $userState.isLoggedIn}
 		<b class="font-bold">LfK!2025</b> powered by
 		<b class="font-bold">ODIT.Services</b>
diff --git a/src/routes/Register.svelte b/src/routes/Register.svelte
index 0edc830..a39bc95 100644
--- a/src/routes/Register.svelte
+++ b/src/routes/Register.svelte
@@ -64,16 +64,16 @@
 		const canvas = document.createElement('canvas');
 		if (is_qrcode) {
 			bwipjs.toCanvas(canvas, {
-				bcid: "qrcode",
+				bcid: 'qrcode',
 				text: `${text}`,
 				scale: 10,
 				includetext: false,
 				textxalign: 'center',
-				backgroundcolor: 'ffffff',
+				backgroundcolor: 'ffffff'
 			});
 		} else {
 			bwipjs.toCanvas(canvas, {
-				bcid: "code128",
+				bcid: 'code128',
 				text: `${text}`,
 				scale: 10,
 				includetext: true,
@@ -90,13 +90,13 @@
 	});
 </script>
 
-<div class="flex h-full items-center py-16 select-none">
-	<div class="w-full max-w-md mx-auto p-6">
+<div class="flex h-full items-center py-16 select-none print:py-0 print:items-baseline">
+	<div class="w-full max-w-md mx-auto p-6 print:p-0">
 		<!-- <div
 			class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-200"
 		> -->
-		<div class="p-4 sm:p-7">
-			<div class="mt-5">
+		<div class="p-4 sm:p-7 print:p-0 print:sm:p-0">
+			<div class="mt-5 print:mt-0">
 				<!-- Form -->
 				{#if !showResult}
 					<div class="text-center">
@@ -311,19 +311,41 @@
 							{response.lastname}
 						</h3>
 					</div>
-					
-					<div class="mb-2 text-center">
+
+					<div class="mb-2 text-center hidden print:block">
+						<h3 class="text-4xl font-semibold dark:text-white">
+							Runner-ID
+						</h3>
 						<h3 class="text-2xl font-semibold dark:text-white">
-							Hier direkt den Selfservice öffnen und deine Rundenzeiten anzeigen:
+							Zeige diesen Code am Infozelt vor, um deine Läuferkarte zu erhalten
+						</h3>
+						<img
+							class="w-full md:w-auto mb-2 mx-auto bg-white p-4 print:hidden"
+							alt="runner id"
+							src={textToBase64Barcode(response.id.toString(), false)}
+						/>
+						<img
+							class="w-1/2 md:w-auto mb-2 mx-auto bg-white p-4 hidden print:block"
+							alt="runner id print only"
+							src={textToBase64Barcode(response.id.toString(), false)}
+						/>
+					</div>
+
+					<div class="mb-2 text-center">
+						<h3 class="text-4xl font-semibold dark:text-white hidden print:block">
+							Selfservice
+						</h3>
+						<h3 class="text-xl font-semibold dark:text-white">
+							Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine Rundenzeiten, Spenden und Urkunden.
 						</h3>
 						<img
 							class="w-full md:w-auto mb-2 mx-auto bg-white p-4"
-							alt="runner id"
+							alt="runner selfservice"
 							src={textToBase64Barcode(response.selfserviceLink.toString(), true)}
 						/>
 					</div>
 
-					<div class="mx-auto text-center items-center">
+					<div class="mx-auto text-center items-center print:hidden">
 						<button
 							class:opacity-50={!doneButtonEnabled}
 							disabled={!doneButtonEnabled}