lfk/kiosk
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added runnerid as barcode

Browse Source
This commit is contained in:
Nicolai Ort 2023-04-19 11:40:24 +02:00
parent 09aee15f60
commit 5a81cb64f5
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F
1 changed files with 44 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/routes/registration/+page.svelte
View File

@ -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>
<p class="block text-lg mb-2 dark:text-white">Vorname: {response.firstname}</p>
<p class="block text-lg mb-2 dark:text-white">Nachname: {response.lastname}</p>
<div>
<p class="text-lg mb-2 dark:text-white">ID: {response.id}</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>