chore(deps): remove unused

package.json

@@ -52,7 +52,6 @@
     "html5-qrcode": "^2.3.8",
     "localforage": "1.10.0",
     "papaparse": "^5.5.2",
-    "svelecte": "3",
     "svelte": "3.58.0",
     "svelte-french-toast": "1.2.0",
     "svelte-i18n": "4.0.1",

pnpm-lock.yaml

@@ -38,9 +38,6 @@ importers:
       papaparse:
         specifier: ^5.5.2
         version: 5.5.2
-      svelecte:
-        specifier: '3'
-        version: 3.17.3
       svelte:
         specifier: 3.58.0
         version: 3.58.0
@@ -1986,9 +1983,6 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelecte@3.17.3:
-    resolution: {integrity: sha512-wnvoRxJIFFkm+CmXgjL4R3i/TcuYUIBkE+jDJSBD7AdSOzk1K6u3+nW4zwxaGT29zyZpiZkWeiy7lO62r5F+tg==}
-
   svelte-french-toast@1.2.0:
     resolution: {integrity: sha512-5PW+6RFX3xQPbR44CngYAP1Sd9oCq9P2FOox4FZffzJuZI2mHOB7q5gJBVnOiLF5y3moVGZ7u2bYt7+yPAgcEQ==}
     peerDependencies:
@@ -2010,9 +2004,6 @@ packages:
   svelte-select@3.17.0:
     resolution: {integrity: sha512-ITmX/XUiSdkaILmsTviKRkZPaXckM5/FA7Y8BhiUPoamaZG/ZDyOo6ydjFu9fDVFTbwoAUGUi6HBjs+ZdK2AwA==}
 
-  svelte-tiny-virtual-list@2.1.2:
-    resolution: {integrity: sha512-jeP/WMvgFUR4mYXHGPiCexjX5DuzSO+3xzHNhxfcsFyy+uYPtnqI5UGb383swpzQAyXB0OBqYfzpYihD/5gxnA==}
-
   svelte-writable-derived@3.1.1:
     resolution: {integrity: sha512-w4LR6/bYZEuCs7SGr+M54oipk/UQKtiMadyOhW0PTwAtJ/Ai12QS77sLngEcfBx2q4H8ZBQucc9ktSA5sUGZWw==}
     peerDependencies:
@@ -3955,10 +3946,6 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelecte@3.17.3:
-    dependencies:
-      svelte-tiny-virtual-list: 2.1.2
-
   svelte-french-toast@1.2.0(svelte@3.58.0):
     dependencies:
       svelte: 3.58.0
@@ -3981,8 +3968,6 @@ snapshots:
 
   svelte-select@3.17.0: {}
 
-  svelte-tiny-virtual-list@2.1.2: {}
-
   svelte-writable-derived@3.1.1(svelte@3.58.0):
     dependencies:
       svelte: 3.58.0

src/components/tools/DonationCreate.svelte

@@ -7,6 +7,7 @@
   } from "@odit/lfk-client-js";
   import Select from "svelte-select";
   import toast from "svelte-french-toast";
+	import { onMount } from "svelte";
 
   let runners = [];
   let donors = [];
@@ -19,7 +20,7 @@
     postalcode: "",
     country: "Germany",
   };
-  let amount = 0;
+  let amount = null;
   let address_checked = false;
   let donor_create_new = false;
   let last_created = null;
@@ -52,7 +53,7 @@
   loadDonors();
 
   const getRunnerLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname+" [#"+option.id+"]";
 
   const filterRunners = (label, filterText, option) => {
     if (filterText.startsWith("#")) {
@@ -70,18 +71,22 @@
     amount = 0;
     address_checked = false;
     donor_create_new = false;
-    const clears = document.getElementsByClassName("clearSelect");
-    for (let i = 0; i < clears.length; i++) {
-      clears[i].click();
-    }
+    const clears = document.querySelectorAll(".clearSelect");
+    clears.forEach(c => {
+      c.click();
+    });
   }
+
+  onMount(() => {
+    document.querySelector("#wrapper_runner_select input").focus();
+  })
 </script>
 
 <div class="p-4">
   <h3 class="text-3xl font-bold">{$_("fast_donation_create")}</h3>
   <!--  -->
   <div>
-    <div class="w-full max-w-md space-y-4 mb-6">
+    <div class="w-full space-y-4 mb-6">
       {#if last_created}
         <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
           <p class="text-black">
@@ -94,7 +99,7 @@
       {/if}
 
       <!-- Runner Selection -->
-      <div>
+      <div id="wrapper_runner_select">
         <h4 class="text-xl font-semibold">{$_("runner")}</h4>
         <Select
           containerClasses="rounded-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
@@ -106,6 +111,7 @@
           noOptionsMessage={$_("no-runners-found")}
           on:select={(selectedValue) => {
             runnerinfo = selectedValue.detail.value;
+            document.querySelector("#donation_amount_eur").focus();
           }}
           on:clear={() => (runnerinfo = { id: 0, firstname: "", lastname: "" })}
         />
@@ -121,11 +127,19 @@
             class:focus:border-red-500={!amount > 0}
             class:focus:ring-red-500={!amount > 0}
             bind:value={amount}
+            on:keydown={(e)=>
+            {
+              if(e.key==="Enter"){
+                e.preventDefault();
+                document.querySelector("#button_existing_donor").focus();
+              }
+            }}
             type="number"
             step="0.01"
+            id="donation_amount_eur"
             name="donation_amount_eur"
             class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
-            placeholder="2.00"
+            placeholder="z.B. 1,50"
           />
           <span
             class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
@@ -142,17 +156,35 @@
         <div class="mb-2">
           <div class="flex border rounded-md overflow-hidden shadow-sm">
             <button
-              class:bg-indigo-600={!donor_create_new}
-              class:text-white={!donor_create_new}
-              class="py-2 px-4 w-1/2 transition-colors"
-              on:click={() => {
-                donor_create_new = false;
-                donorinfo = { id: 0, firstname: "", lastname: "" };
-              }}
+            on:keydown={(e)=>
+            {
+              if(e.key==="ArrowRight"){
+                e.preventDefault();
+                document.querySelector("#button_new_donor").focus();
+                document.querySelector("#button_new_donor").click();
+              }
+            }}
+            id="button_existing_donor"
+            class:bg-indigo-600={!donor_create_new}
+            class:text-white={!donor_create_new}
+            class="py-2 px-4 w-1/2 transition-colors"
+            on:click={() => {
+              donor_create_new = false;
+              donorinfo = { id: 0, firstname: "", lastname: "" };
+            }}
             >
-              {$_("existing-donor")}
-            </button>
-            <button
+            {$_("existing-donor")}
+          </button>
+          <button
+              on:keydown={(e)=>
+              {
+                if(e.key==="ArrowLeft"){
+                  e.preventDefault();
+                  document.querySelector("#button_existing_donor").focus();
+                  document.querySelector("#button_existing_donor").click();
+                }
+              }}
+              id="button_new_donor"
               class={`py-2 px-4 w-1/2 transition-colors ${donor_create_new ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700"}`}
               on:click={() => {
                 donor_create_new = true;
@@ -306,6 +338,7 @@
       <!-- Submit Button -->
       <div class="mt-6">
         <button
+          id="submit_button"
           type="button"
           class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed"
           disabled={!amount > 0 ||