{$_("fast_card_replacement")}

{#if state === "done"} {:else if state === "assigning"}

{$_("please_wait_a_moment_while_we_assign_the_card")}
{cardCode}

{:else if state === "error_runner"} {:else if state === "error_card"} {:else} {#if runnerinfo.id === 0}

{$_("scan_runner")}

{$_("select-runner")}

filterRunners(label, filterText, option)} items={runners} showChevron={true} placeholder={$_("search-for-runner-by-name-or-id")} noOptionsMessage={$_("no-runners-found")} on:select={(selectedValue) => { runnerinfo = selectedValue.detail.value; state = "scan_card"; setTimeout(() => { barcodeInput && barcodeInput.focus(); }, 100); }} on:clear={() => (runnerinfo.runner = null)} /> {:else}

{runnerinfo.firstname} {runnerinfo.lastname}

ID: #{runnerinfo.id}
created_via: {runnerinfo.created_via}
{runnerinfo.group.name}

{/if} {/if} {#if state === "scan_card"}

{$_("scan_card")}

{$_("code_128_barcode")}

{/if} {#if state.includes("scan_")} {#if scannerActive} { if (scannerActive) { if (`${e.detail.decodedText}`.length === 13) { e.detail.decodedText = e.detail.decodedText.substring( 0, e.detail.decodedText.length - 1 ); } scannerActive = false; console.log({ type: "DETECT", code: e.detail.decodedText }); handleBarcode(e.detail.decodedText); } }} width={320} height={320} class="w-full max-w-sm bg-neutral-300 rounded-lg overflow-hidden" />

{ handleBarcode(barcodeInput.value); barcodeInput.value = ""; e.preventDefault(); }} class="mt-2" >

{/if} {#if runnerinfo.id !== 0 && state !== "scan_card"} { state = "scan_card"; scannerActive = true; }} type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 w-full mt-2" > {$_("scan_card")} {/if} {#if state === "scan_card" || runnerinfo.id !== 0} { state = "scan_runner"; scannerActive = true; runnerinfo = { id: 0, firstname: "", lastname: "" }; cardCode = ""; }} type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-100 text-red-800 hover:bg-red-200 focus:outline-hidden focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none dark:text-red-500 dark:bg-red-800/30 dark:hover:bg-red-800/20 dark:focus:bg-red-800/20 w-full mt-2" > {$_("cancel")} {/if} {/if}