371 lines
12 KiB
Svelte
371 lines
12 KiB
Svelte
<script lang="ts">
|
|
import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
|
|
import bwipjs from 'bwip-js';
|
|
import { onMount } from 'svelte';
|
|
|
|
$: firstname = '';
|
|
$: lastname = '';
|
|
$: email = '';
|
|
$: doneButtonEnabled = false;
|
|
$: showResult = false;
|
|
|
|
export let printEnabled = false;
|
|
|
|
let response: ResponseRunner;
|
|
const group = 1; //Default to Bürgerlauf
|
|
|
|
function focusFirstName() {
|
|
setTimeout(() => {
|
|
document.getElementById('firstname')?.focus();
|
|
}, 50);
|
|
setTimeout(() => {
|
|
document.getElementById('firstname')?.focus();
|
|
}, 100);
|
|
}
|
|
function focusDoneButton() {
|
|
setTimeout(() => {
|
|
document.getElementById('done')?.focus();
|
|
}, 50);
|
|
setTimeout(() => {
|
|
document.getElementById('done')?.focus();
|
|
}, 100);
|
|
}
|
|
|
|
async function register() {
|
|
try {
|
|
let emailToSend = null;
|
|
if (email !== '') {
|
|
if (email.includes('@')) {
|
|
emailToSend = email;
|
|
}
|
|
}
|
|
response = (await RunnerService.runnerControllerPost({
|
|
firstname,
|
|
lastname,
|
|
email: emailToSend,
|
|
group,
|
|
created_via: 'kiosk'
|
|
})) as ResponseRunner;
|
|
showResult = true;
|
|
if (printEnabled) {
|
|
setTimeout(() => {
|
|
window.print();
|
|
}, 200);
|
|
}
|
|
setTimeout(() => {
|
|
doneButtonEnabled = true;
|
|
setTimeout(() => {
|
|
focusDoneButton();
|
|
}, 25);
|
|
}, 7500);
|
|
} catch (error) {
|
|
console.log(error);
|
|
showResult = false;
|
|
localStorage.clear();
|
|
location.reload();
|
|
}
|
|
firstname = '';
|
|
lastname = '';
|
|
}
|
|
|
|
function textToBase64Barcode(text: string, is_qrcode: boolean) {
|
|
const canvas = document.createElement('canvas');
|
|
if (is_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
|
|
});
|
|
}
|
|
return canvas.toDataURL('image/png');
|
|
}
|
|
|
|
onMount(() => {
|
|
focusFirstName();
|
|
});
|
|
</script>
|
|
|
|
<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 print:p-0 print:sm:p-0">
|
|
<div class="mt-5 print:mt-0">
|
|
<!-- Form -->
|
|
{#if !showResult}
|
|
<div class="text-center">
|
|
<h1 class="block text-7xl font-bold text-gray-800 dark:text-white">LfK!2025</h1>
|
|
<h1 class="block text-4xl font-bold text-gray-800 dark:text-white">Registrierung</h1>
|
|
<!-- <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p> -->
|
|
</div>
|
|
<form class="mt-4 text-lg" on:submit|preventDefault={register}>
|
|
<div class="grid gap-y-4">
|
|
<!-- Form Group -->
|
|
<div>
|
|
<label for="firstname" class="block text-lg font-bold mb-2 sr-only">Vorname</label>
|
|
<div class="relative">
|
|
<input
|
|
on:keydown={(e) => {
|
|
if (e.keyCode === 13) {
|
|
e.preventDefault();
|
|
document.getElementById('lastname')?.focus();
|
|
}
|
|
if (e.keyCode === 40) {
|
|
document.getElementById('lastname')?.focus();
|
|
}
|
|
}}
|
|
type="text"
|
|
autocomplete="one-time-code"
|
|
id="firstname"
|
|
name="firstname"
|
|
class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border bg-white"
|
|
required
|
|
placeholder="Vorname"
|
|
bind:value={firstname}
|
|
aria-describedby="firstname-error"
|
|
/>
|
|
<!-- <div
|
|
class:hidden={firstname || firstname.length != 0}
|
|
class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 text-red-500"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
|
/>
|
|
</svg>
|
|
</div> -->
|
|
</div>
|
|
<!-- <p
|
|
class:hidden={firstname || firstname.length != 0}
|
|
class="text-xs text-red-600 mt-2"
|
|
id="firstname-error"
|
|
>
|
|
Bitte gebe deinen Vornamen ein
|
|
</p> -->
|
|
</div>
|
|
<!-- End Form Group -->
|
|
|
|
<!-- Form Group -->
|
|
<div>
|
|
<label for="lastname" class="block text-lg font-bold mb-2 sr-only">Nachname</label>
|
|
<div class="relative">
|
|
<input
|
|
on:keydown={(e) => {
|
|
if (e.keyCode === 13) {
|
|
e.preventDefault();
|
|
document.getElementById('email')?.focus();
|
|
}
|
|
if (e.keyCode === 38) {
|
|
document.getElementById('firstname')?.focus();
|
|
}
|
|
if (e.keyCode === 40) {
|
|
document.getElementById('email')?.focus();
|
|
}
|
|
}}
|
|
autocomplete="one-time-code"
|
|
type="lastname"
|
|
id="lastname"
|
|
name="lastname"
|
|
class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border bg-white"
|
|
required
|
|
placeholder="Nachname"
|
|
aria-describedby="lastname-error"
|
|
bind:value={lastname}
|
|
/>
|
|
<!-- <div
|
|
class:hidden={lastname || lastname.length != 0}
|
|
class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 text-red-500"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
|
/>
|
|
</svg>
|
|
</div> -->
|
|
</div>
|
|
<!-- <p
|
|
class:hidden={lastname || lastname.length != 0}
|
|
class="text-xs text-red-600 mt-2"
|
|
id="lastname-error"
|
|
>
|
|
Bitte gebe deinen Nachnamen ein
|
|
</p> -->
|
|
</div>
|
|
<!-- End Form Group -->
|
|
|
|
<!-- Form Group -->
|
|
<div>
|
|
<label for="email" class="block text-lg font-bold mb-2 sr-only"
|
|
>E-Mail (optional)</label
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
on:keydown={(e) => {
|
|
if (e.keyCode === 13) {
|
|
e.preventDefault();
|
|
document.getElementById('submit')?.focus();
|
|
}
|
|
if (e.keyCode === 38) {
|
|
document.getElementById('lastname')?.focus();
|
|
}
|
|
if (e.keyCode === 40) {
|
|
document.getElementById('submit')?.focus();
|
|
}
|
|
}}
|
|
autocomplete="one-time-code"
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border bg-white"
|
|
placeholder="E-Mail (optional)"
|
|
aria-describedby="lastname-error"
|
|
bind:value={email}
|
|
/>
|
|
<!-- <div
|
|
class:hidden={lastname || lastname.length != 0}
|
|
class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 text-red-500"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
|
/>
|
|
</svg>
|
|
</div> -->
|
|
</div>
|
|
<!-- <p
|
|
class:hidden={lastname || lastname.length != 0}
|
|
class="text-xs text-red-600 mt-2"
|
|
id="lastname-error"
|
|
>
|
|
Bitte gebe deinen Nachnamen ein
|
|
</p> -->
|
|
</div>
|
|
<!-- End Form Group -->
|
|
<p
|
|
class="bg-white text-gray-800 dark:bg-gray-800 dark:text-gray-400 rounded border p-3"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="inline"
|
|
><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path
|
|
d="M12 8h.01"
|
|
/></svg
|
|
>
|
|
Mit der Registrierung akzeptieren Sie die AGBs sowie die Datenschutzerklärung des Lauf
|
|
für Kaya! 2025 sowie der ODIT.Services GmbH.
|
|
</p>
|
|
<button
|
|
on:keydown={(e) => {
|
|
if (e.keyCode === 38) {
|
|
document.getElementById('email')?.focus();
|
|
}
|
|
}}
|
|
id="submit"
|
|
type="submit"
|
|
disabled={!firstname || !lastname}
|
|
class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800 cursor-pointer"
|
|
>Anmelden</button
|
|
>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
{:else}
|
|
<div class="mb-2 text-center">
|
|
<h3 class="text-4xl font-semibold dark:text-white print:text-5xl">
|
|
{response.firstname}
|
|
{response.lastname}
|
|
</h3>
|
|
<h4 class="font-semibold dark:text-white hidden print:block print:text-3xl">
|
|
{response.id}
|
|
</h4>
|
|
</div>
|
|
|
|
<div class="mb-2 text-center">
|
|
<h3 class="text-xl font-semibold dark:text-white print:hidden">
|
|
Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine
|
|
Rundenzeiten, Spenden und Urkunden.
|
|
</h3>
|
|
<h3 class="text-xl font-semibold dark:text-white hidden print:block">
|
|
Zeige diesen QR-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"
|
|
alt="runner selfservice"
|
|
src={textToBase64Barcode(response.selfserviceLink.toString(), true)}
|
|
/>
|
|
<h3 class="text-xl font-semibold dark:text-white hidden print:block">
|
|
Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine
|
|
Rundenzeiten, Spenden und Urkunden.
|
|
</h3>
|
|
{#if printEnabled}
|
|
<h3 class="text-xl font-semibold dark:text-white print:hidden">
|
|
Bitte nehm den Bon mit und zeige ihn am Infozelt vor, um deine Läuferkarte zu erhalten.
|
|
Auf dem Bon findest auch nochmal den QR-Code.
|
|
</h3>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="mx-auto text-center items-center print:hidden">
|
|
<button
|
|
class:opacity-50={!doneButtonEnabled}
|
|
disabled={!doneButtonEnabled}
|
|
id="done"
|
|
on:click={() => {
|
|
doneButtonEnabled = false;
|
|
showResult = false;
|
|
focusFirstName();
|
|
}}
|
|
class="w-full 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 cursor-pointer"
|
|
>Fertig</button
|
|
>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<!-- </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|