chore(release): 1.2.0

CHANGELOG.md

@@ -2,8 +2,20 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.2.0](https://git.odit.services/lfk/kiosk/compare/1.1.5...1.2.0)
+
+- refactor(svelte): Threw out workspace config [`5f97c9d`](https://git.odit.services/lfk/kiosk/commit/5f97c9d8da1a9002875d8fe35606c078c62c1d0a)
+- feat: Full printing support [`3e3846f`](https://git.odit.services/lfk/kiosk/commit/3e3846f1cb1fe281edce7c6ce3485f54ddbed3e2)
+- refactor(register): Switch to showing qr code [`ed7242c`](https://git.odit.services/lfk/kiosk/commit/ed7242cc2a6e1af22de8950a53b64e94459a2aee)
+- style(docs): Linting [`6ecaae1`](https://git.odit.services/lfk/kiosk/commit/6ecaae1b8dcce099b82cd257a22bd1d579d79ba2)
+- chore: Bump js lib [`6152500`](https://git.odit.services/lfk/kiosk/commit/61525006526ab5e237b0caf24a474618fc238372)
+- fix: Updated styling [`3fdd8c8`](https://git.odit.services/lfk/kiosk/commit/3fdd8c80d8d72bdc899739896fa379ff7a7b620d)
+
 #### [1.1.5](https://git.odit.services/lfk/kiosk/compare/1.1.4...1.1.5)
 
+> 7 April 2025
+
+- chore(release): 1.1.5 [`e32c2f3`](https://git.odit.services/lfk/kiosk/commit/e32c2f3069e03584f3829a96e3fea94f98bf419b)
 - chore(deps): bump [`1665fd6`](https://git.odit.services/lfk/kiosk/commit/1665fd67ae7153ece759edbe3e74262eb207a2f6)
 - feat: clock widget, general cleanups [`83826f9`](https://git.odit.services/lfk/kiosk/commit/83826f966bb0de2402889d6574c6db7730831119)
 

README.md

@@ -1,32 +1,38 @@
 # @lfk/kiosk
 
 ## Overview 👀
+
 This is a simple kiosk style register form for the LfK runnersystem.
 The basic idea is:
+
 1. Create a runnersystem user with only `RUNNER:CREATE` permissions.
 2. Login with this user under `/login`
-3. Runners can register via their firstnam and lastname
-4. The kiosk creates the runner via the backend and shows their id, firstname, lastname and a barcode containing their id
+3. Runners can register via their firstname and lastname
+4. The kiosk creates the runner via the backend and shows their id, firstname, lastname and a barcode containing their id along
 
 ## Development 🛠️
-```
+
+```shell
 pnpm i
 pnpm dev --open
 ```
 
 ## Build 🚀
-```
+
+```shell
 pnpm i
 pnpm build
 ```
 
 ## Docker 🐳
-```
+
+```shell
 docker build .
 docker-compose up
 ```
 
 ## Kiosk Google Chrome
-```
+
+``` shell
 chrome https://run.lauf-fuer-kaya.de/kiosk/ -kiosk
-```
+```

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lfk/kiosk",
-	"version": "1.1.5",
+	"version": "1.2.0",
 	"private": false,
 	"license": "MIT",
 	"repository": "https://git.odit.services/lfk/kiosk",
@@ -56,7 +56,7 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/athiti": "^5.2.5",
-		"@odit/lfk-client-js": "1.2.0",
+		"@odit/lfk-client-js": "1.2.1",
 		"@tailwindcss/vite": "^4.1.3",
 		"bwip-js": "4.5.3",
 		"eslint-plugin-svelte": "^3.5.1",

pnpm-workspace.yaml

@@ -1,4 +0,0 @@
-onlyBuiltDependencies:
-  - '@sveltejs/kit'
-  - esbuild
-  - svelte-preprocess

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>

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>

src/routes/Register.svelte

@@ -62,19 +62,26 @@
 
 	function textToBase64Barcode(text: string, is_qrcode: boolean) {
 		const canvas = document.createElement('canvas');
-		let bcid = 'code128';
 		if (is_qrcode) {
-			bcid = 'qrcode';
+			bwipjs.toCanvas(canvas, {
+				bcid: 'qrcode',
+				text: `${text}`,
+				scale: 10,
+				includetext: false,
+				textxalign: 'center',
+				backgroundcolor: 'ffffff'
+			});
+		} else {
+			bwipjs.toCanvas(canvas, {
+				bcid: 'code128',
+				text: `${text}`,
+				scale: 10,
+				includetext: true,
+				textxalign: 'center',
+				backgroundcolor: 'ffffff',
+				height: 10
+			});
 		}
-		bwipjs.toCanvas(canvas, {
-			bcid,
-			text: `${text}`,
-			scale: 10,
-			includetext: true,
-			textxalign: 'center',
-			backgroundcolor: 'ffffff',
-			height: 10
-		});
 		return canvas.toDataURL('image/png');
 	}
 
@@ -83,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">
@@ -299,21 +306,46 @@
 					<!-- End Form -->
 				{:else}
 					<div class="mb-2 text-center">
-						<h3 class="text-4xl font-semibold dark:text-white">
+						<h3 class="text-4xl font-semibold dark:text-white print:text-5xl">
 							{response.firstname}
 							{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">
+							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"
+							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-3/4 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="mx-auto text-center items-center">
+					<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 selfservice"
+							src={textToBase64Barcode(response.selfserviceLink.toString(), true)}
+						/>
+					</div>
+
+					<div class="mx-auto text-center items-center print:hidden">
 						<button
 							class:opacity-50={!doneButtonEnabled}
 							disabled={!doneButtonEnabled}