dbob16/tam3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(change): Making code more concise.

Browse Source
This commit is contained in:
Dilan Gilluly
2026-01-13 17:09:13 -05:00
parent c1b0421650
commit 195d2caf52
5 changed files with 45 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/src/lib/components/FormHeader.svelte
View File

@@ -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}>

3
webapp/src/lib/focusElement.js Normal file
View File

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

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

@@ -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;

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

@@ -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;

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

@@ -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}_ln" type="text" bind:value={ticket.last_name} onchange={() => ticket.changed = true}></td>
<td><input id="{idx}_pn" type="text" bind:value={ticket.phone_number} onchange={() => ticket.changed = true}></td>
<td><select id="{idx}_pr" style="width: 100%" bind:value={ticket.preference} onchange={() => ticket.changed = true}>
<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} onfocus={focusElement} 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} 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;