(change): Making code more concise.

webapp/src/lib/components/FormHeader.svelte

@@ -5,6 +5,7 @@
     let {
         prefix,
         pagerForm = $bindable(),
+        headerHeight = $bindable(),
         functions
     } = $props()
 
@@ -22,7 +23,7 @@
     }
 </script>
 
-<div id="formheader" class="{prefix.color}">
+<div id="formheader" class="{prefix.color}" bind:offsetHeight={headerHeight}>
     <div class="flex-row-space tb-margin">
         <div class="flex-row">
             <input type="number" bind:value={pagerForm.id_from}>

webapp/src/lib/focusElement.js

@@ -0,0 +1,3 @@
+export function focusElement(e) {
+    e.target.scrollIntoView({block: "center", behavior: "smooth"});
+};

webapp/src/routes/baskets/[prefix]/+page.svelte

@@ -7,8 +7,11 @@
     const prefix = {...data.prefix};
     let pagerForm = $state({id_from: 0, id_to: 0});
     let current_idx = $state(0);
+    let next_idx = $derived(current_idx+1);
+    let prev_idx = $derived(current_idx-1)
     let current_baskets = $state([]);
     let copy_buffer = $state({prefix: prefix.name, b_id: 0, description: "", donors: "", winning_ticket: 0});
+    let headerHeight = $state()
 
     function changeFocus(idx) {
         const focusDe = document.getElementById(`${idx}_de`);
@@ -43,7 +46,6 @@
             functions.refreshPage();
         },
         duplicateDown: () => {
-            const next_idx = current_idx + 1;
             if (current_baskets[next_idx]) {
                 current_baskets[next_idx] = {...current_baskets[current_idx], b_id: current_baskets[next_idx].b_id, winning_ticket: current_baskets[next_idx].winning_ticket, changed: true};
                 changeFocus(next_idx);
@@ -52,7 +54,6 @@
             }
         },
         duplicateUp: () => {
-            const prev_idx = current_idx - 1;
             if (prev_idx >= 0) {
                 current_baskets[prev_idx] = {...current_baskets[current_idx], b_id: current_baskets[prev_idx].b_id, winning_ticket: current_baskets[prev_idx].winning_ticket, changed: true};
                 changeFocus(prev_idx);
@@ -61,7 +62,6 @@
             }
         },
         gotoNext: () => {
-            const next_idx = current_idx + 1;
             if (current_baskets[next_idx]) {
                 changeFocus(next_idx);
             } else {
@@ -69,7 +69,6 @@
             }
         },
         gotoPrev: () => {
-            const prev_idx = current_idx - 1;
             if (prev_idx >= 0) {
                 changeFocus(prev_idx);
             } else {
@@ -103,9 +102,9 @@
 </script>
 
 <h1>{prefix.name} Basket Entry</h1>
-<FormHeader {prefix} {functions} bind:pagerForm />
+<FormHeader {prefix} {functions} bind:pagerForm bind:headerHeight />
 <table>
-    <thead>
+    <thead style="top: {headerHeight+2}px">
         <tr>
             <th style="width: 12ch">Basket ID</th>
             <th>Description</th>
@@ -128,8 +127,14 @@
 <style>
     table {
         width: 100%;
+        thead {
+            background-color: #ffffff;
+            position: sticky;
+            z-index: 100;
+        }
         th {
             text-align: left;
+            border: solid 1px #000000;
         }
         tbody tr:nth-child(2n) {
             background-color: #eeeeee;

webapp/src/routes/drawing/[prefix]/+page.svelte

@@ -1,13 +1,17 @@
 <script>
     import { browser } from '$app/environment';
     import FormHeader from '$lib/components/FormHeader.svelte';
+    import { focusElement } from '$lib/focusElement.js';
 
     const { data } = $props();
     const prefix = {...data.prefix};
     let pagerForm = $state({id_from: 0, id_to: 0});
     let current_idx = $state(0);
+    let next_idx = $derived(current_idx+1);
+    let prev_idx = $derived(current_idx-1);
     let current_drawings = $state([]);
     let copy_buffer = $state({prefix: prefix.name, b_id: 1, winning_ticket: 0, winner: ", "});
+    let headerHeight = $state()
 
     function changeFocus(idx) {
         const focusWt = document.getElementById(`${idx}_wt`);
@@ -42,7 +46,6 @@
             functions.refreshPage();
         },
         duplicateDown: () => {
-            const next_idx = current_idx + 1;
             if (current_drawings[next_idx]) {
                 current_drawings[next_idx] = {...current_drawings[current_idx], b_id: current_drawings[next_idx].b_id, changed: true};
                 changeFocus(next_idx);
@@ -51,7 +54,6 @@
             }
         },
         duplicateUp: () => {
-            const prev_idx = current_idx - 1;
             if (prev_idx >= 0) {
                 current_drawings[prev_idx] = {...current_drawing[current_idx], b_id: current_drawings[prev_idx].b_id, changed: true};
                 changeFocus(prev_idx);
@@ -60,7 +62,6 @@
             }
         },
         gotoNext: () => {
-            const next_idx = current_idx + 1;
             if (current_drawings[next_idx]) {
                 changeFocus(next_idx);
             } else {
@@ -68,7 +69,6 @@
             }
         },
         gotoPrev: () => {
-            const prev_idx = current_idx - 1;
             if (prev_idx >= 0) {
                 changeFocus(prev_idx);
             } else {
@@ -102,9 +102,9 @@
 </script>
 
 <h1>{prefix.name} Drawing Form</h1>
-<FormHeader {prefix} {functions} bind:pagerForm />
+<FormHeader {prefix} {functions} bind:pagerForm bind:headerHeight />
 <table>
-    <thead>
+    <thead style="top: {headerHeight+2}px">
         <tr>
             <th style="width: 12ch">Basket ID</th>
             <th style="width: 20ch">Winning Number</th>
@@ -116,7 +116,7 @@
         {#each current_drawings as drawing, idx}
         <tr onfocusin={() => current_idx = idx}>
             <td>{drawing.b_id}</td>
-            <td><input type="number" id="{idx}_wt" bind:value={drawing.winning_ticket} onchange={async () => {
+            <td><input type="number" id="{idx}_wt" bind:value={drawing.winning_ticket} onfocus={focusElement} onchange={async () => {
                 drawing.changed = true;
                 const res = await fetch(`/api/tickets/${prefix.name}/${drawing.winning_ticket}`);
                 if (res.ok) {
@@ -134,8 +134,14 @@
 <style>
     table {
         width: 100%;
+        thead {
+            background-color: #ffffff;
+            position: sticky;
+            z-index: 100;
+        }
         th {
             text-align: left;
+            border: solid 1px #000000;
         }
         tbody tr:nth-child(2n) {
             background-color: #eeeeee;

webapp/src/routes/tickets/[prefix]/+page.svelte

@@ -1,19 +1,22 @@
 <script>
     import { browser } from '$app/environment';
     import FormHeader from '$lib/components/FormHeader.svelte';
+    import { focusElement } from '$lib/focusElement.js';
 
     const { data } = $props();
     let prefix = {...data.prefix};
     let pagerForm = $state({id_from: 0, id_to: 0});
     let current_idx = $state(0);
+    let next_idx = $derived(current_idx+1);
+    let prev_idx = $derived(current_idx-1);
     let current_tickets = $state([]);
     let copy_buffer = $state({prefix: prefix.name, t_id: 0, first_name: "", last_name: "", phone_number: "", preference: "CALL", changed: true});
+    let headerHeight = $state();
 
     function changeFocus(idx) {
         const focusFn = document.getElementById(`${idx}_fn`);
         if (focusFn) {
             focusFn.select();
-            focusFn.scrollIntoView({block: "center"});
         }
     }
 
@@ -42,7 +45,6 @@
             functions.refreshPage()
         },
         duplicateDown: () => {
-            const next_idx = current_idx + 1;
             if (current_tickets[next_idx]) {
                 current_tickets[next_idx] = {...current_tickets[current_idx], t_id: current_tickets[next_idx].t_id, changed: true};
                 changeFocus(next_idx);
@@ -51,7 +53,6 @@
             }
         },
         duplicateUp: () => {
-            const prev_idx = current_idx - 1;
             if (prev_idx >= 0) {
                 current_tickets[prev_idx] = {...current_tickets[current_idx], t_id: current_tickets[prev_idx].t_id, changed: true};
                 changeFocus(prev_idx);
@@ -60,7 +61,6 @@
             }
         },
         gotoNext: () => {
-            const next_idx = current_idx + 1;
             if (current_tickets[next_idx]) {
                 changeFocus(next_idx);
             } else {
@@ -68,7 +68,6 @@
             }
         },
         gotoPrev: () => {
-            const prev_idx = current_idx - 1;
             if (prev_idx >= 0) {
                 changeFocus(prev_idx);
             } else {
@@ -104,9 +103,9 @@
 </script>
 
 <h1>{prefix.name} Ticket Entry</h1>
-<FormHeader {prefix} {functions} bind:pagerForm />
+<FormHeader {prefix} {functions} bind:pagerForm bind:headerHeight />
 <table>
-    <thead>
+    <thead style="top: {headerHeight+2}px">
         <tr>
             <th style="width: 12ch">Ticket ID</th>
             <th>First Name</th>
@@ -120,10 +119,10 @@
         {#each current_tickets as ticket, idx}
         <tr onfocusin={() => current_idx = idx}>
             <td>{ticket.t_id}</td>
-            <td><input id="{idx}_fn" type="text" bind:value={ticket.first_name} onchange={() => ticket.changed = true}></td>
+            <td><input id="{idx}_fn" type="text" bind:value={ticket.first_name} onfocus={focusElement} onchange={() => ticket.changed = true}></td>
-            <td><input id="{idx}_ln" type="text" bind:value={ticket.last_name} onchange={() => ticket.changed = true}></td>
+            <td><input id="{idx}_ln" type="text" bind:value={ticket.last_name} onfocus={focusElement} onchange={() => ticket.changed = true}></td>
-            <td><input id="{idx}_pn" type="text" bind:value={ticket.phone_number} onchange={() => ticket.changed = true}></td>
+            <td><input id="{idx}_pn" type="text" bind:value={ticket.phone_number} onfocus={focusElement} onchange={() => ticket.changed = true}></td>
-            <td><select id="{idx}_pr" style="width: 100%" bind:value={ticket.preference} onchange={() => ticket.changed = true}>
+            <td><select id="{idx}_pr" style="width: 100%" bind:value={ticket.preference} onfocus={focusElement} onchange={() => ticket.changed = true}>
                 <option value="CALL">Call</option>
                 <option value="TEXT">Text</option>
             </select></td>
@@ -136,8 +135,14 @@
 <style>
     table {
         width: 100%;
+        thead {
+            background-color: #ffffff;
+            position: sticky;
+            z-index: 100;
+        }
         th {
             text-align: left;
+            border: solid 1px #000000;
         }
         tbody tr:nth-child(2n) {
             background-color: #eeeeee;