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

feat(registration): autofocus input fields + done button
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Philipp Dormann 2023-04-19 16:58:35 +02:00
parent 418fe7773f
commit cbfbd92d0e
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
1 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
import bwipjs from 'bwip-js';
import lfkbackground from './background.png';
import { onMount } from 'svelte';
$: firstname = '';
$: lastname = '';
@ -11,6 +12,23 @@
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 {
response = (await RunnerService.runnerControllerPost({
@ -20,6 +38,7 @@
})) as ResponseRunner;
showError = false;
showResult = true;
focusDoneButton();
} catch (error) {
console.log(error);
showError = true;
@ -46,6 +65,10 @@
});
return canvas.toDataURL('image/png');
}
onMount(() => {
focusFirstName();
});
</script>
<div
@ -178,8 +201,10 @@
<div class="mx-auto text-center items-center">
<button
id="done"
on:click={() => {
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"
>Fertig</button
@ -191,7 +216,7 @@
</div>
</div>
</div>
<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white">
<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none">
<a
rel="noopener noreferrer"
target="_blank"