(add): Drawing Form

2026-06-25 22:22:13 -04:00
parent 9d6473d4bf
commit 1967b84e6e
13 changed files with 471 additions and 6 deletions
@@ -64,13 +64,14 @@
 		{#if curPrefix}
 			<div class="flex flex-col gap-1 items-center border border-black rounded">
 				<h2 class="text-lg font-bold">Forms:</h2>
-				<div class="grid grid-cols-2 gap-1 p-1 min-w-2xs">
+				<div class="grid grid-cols-2 gap-1 p-1 min-w-2xs text-center">
 					<a href={resolve('/tickets/[prefix]', { prefix: curPrefix })} class={bS[pColor]}
 						>Tickets</a
 					>
 					<a href={resolve('/baskets/[prefix]', { prefix: curPrefix })} class={bS[pColor]}
 						>Baskets</a
 					>
+					<a href={resolve('/drawing/[prefix]', {prefix: curPrefix})} class="{bS[pColor]} col-span-2">Drawing Form</a>
 				</div>
 			</div>
 		{:else}
@@ -0,0 +1,39 @@
+import { db } from "$lib/server/db";
+import { baskets, drawing } from "$lib/server/db/schema";
+import { getPath, getSettings } from "$lib/server/settings"
+import { error, json } from "@sveltejs/kit";
+import { sql } from "drizzle-orm";
+
+export const GET = async () => {
+  const s = getSettings();
+  if (s.remote_server) {
+    const connStr = getPath(s);
+    try {
+      const res = await fetch(`${connStr}/api/drawing`, {headers: {'TAM-KEY': s.remote_key}});
+      if (!res.ok) throw error(res.status);
+      const data = await res.json();
+      return json(data);
+    } catch {
+      return json([]);
+    }
+  } else {
+    const data = await db.select().from(drawing).orderBy(drawing.prefix, drawing.b_id);
+    return json(data);
+  }
+}
+
+export const POST = async ({ request }) => {
+  const reqData = await request.json();
+  const s = getSettings();
+  if (s.remote_server) {
+    const connStr = getPath(s);
+    const res = await fetch(`${connStr}/api/drawing`, {
+      method: 'POST',
+      headers: {'TAM-KEY': s.remote_key, 'Content-Type': 'application/json'},
+      body: JSON.stringify(reqData)
+    });
+    if (!res.ok) throw error(res.status);
+  }
+  await db.insert(baskets).values(reqData).onConflictDoUpdate({target: [baskets.prefix, baskets.b_id], set: {winning_ticket: sql`EXCLUDED.winning_ticket`}});
+  return json(reqData);
+}
@@ -0,0 +1,24 @@
+import { db } from '$lib/server/db/index.js';
+import { drawing } from '$lib/server/db/schema.js';
+import { getPath, getSettings } from '$lib/server/settings';
+import { error, json } from '@sveltejs/kit';
+import { eq } from 'drizzle-orm';
+
+export const GET = async ({ params }) => {
+  const { prefix } = params;
+  const s = getSettings();
+  if (s.remote_server) {
+    const connStr = getPath(s);
+    try {
+      const res = await fetch(`${connStr}/api/drawing/${prefix}`, {headers: {'TAM-KEY': s.remote_key}});
+      if (!res.ok) throw error(res.status);
+      const data = await res.json();
+      return json(data);
+    } catch {
+      return json([]);
+    }
+  } else {
+    const data = await db.select().from(drawing).where(eq(drawing.prefix, prefix)).orderBy(drawing.prefix, drawing.b_id);
+    return json(data);
+  }
+}
@@ -0,0 +1,44 @@
+import { db } from '$lib/server/db/index.js';
+import { drawing } from '$lib/server/db/schema.js';
+import { getPath, getSettings } from '$lib/server/settings';
+import { error, json } from '@sveltejs/kit';
+import { and, eq } from 'drizzle-orm';
+
+const placeholder_data = (prefix, b_id) => {
+  return {
+    prefix,
+    b_id,
+    description: "",
+    winning_ticket: 0,
+    last_name: "",
+    first_name: "",
+    phone_number: ""
+  }
+}
+
+export const GET = async ({ params }) => {
+  const [prefix, b_id] = [params.prefix, parseInt(params.b_id)];
+  const s = getSettings();
+  if (s.remote_server) {
+    const connStr = getPath(s);
+    try {
+      const res = await fetch(`${connStr}/api/drawing/${prefix}/${b_id}`, {headers: {'TAM-KEY': s.remote_key}});
+      if (!res.ok) throw error(res.status);
+      const [data] = await res.json();
+      if (data) {
+        return json(data);
+      } else {
+        return json(placeholder_data(prefix, b_id));
+      };
+    } catch {
+      return json(placeholder_data(prefix, b_id));
+    }
+  } else {
+    const [data] = await db.select().from(drawing).where(and(eq(drawing.prefix, prefix), eq(drawing.b_id, b_id))).orderBy(drawing.prefix, drawing.b_id);
+    if (data) {
+      return json(data);
+    } else {
+      return json(placeholder_data(prefix, b_id));
+    }
+  }
+}
@@ -0,0 +1,41 @@
+import { db } from '$lib/server/db/index.js';
+import { drawing } from '$lib/server/db/schema.js';
+import { getPath, getSettings } from '$lib/server/settings';
+import { error, json } from '@sveltejs/kit';
+import { and, between, eq } from 'drizzle-orm';
+
+const placeholder_data = (prefix, b_id) => {
+  return {
+    prefix,
+    b_id,
+    description: "",
+    winning_ticket: 0,
+    last_name: "",
+    first_name: "",
+    phone_number: ""
+  };
+};
+
+export const GET = async ({ params }) => {
+  const [prefix, id_from, id_to] = [params.prefix, parseInt(params.id_from), parseInt(params.id_to)];
+  const s = getSettings();
+  const rtnData = {};
+  for (let i = id_from; i <= id_to; i++) {
+    rtnData[i] = {...placeholder_data(prefix, i)};
+  };
+  if (s.remote_server) {
+    const connStr = getPath(s);
+    try {
+      const res = await fetch(`${connStr}/api/drawing/${prefix}/${id_from}/${id_to}`, {headers: {'TAM-KEY': s.remote_key}});
+      if (!res.ok) throw error(res.status);
+      const data = Array.from(await res.json());
+      data.forEach((b) => rtnData[b.b_id] = b);
+    } catch {
+      return json([]);
+    }
+  } else {
+    const data = await db.select().from(drawing).where(and(eq(drawing.prefix, prefix), between(drawing.b_id, id_from, id_to))).orderBy(drawing.prefix, drawing.b_id);
+    data.forEach((b) => rtnData[b.b_id] = b);
+  };
+  return json(Object.values(rtnData));
+}
@@ -95,7 +95,7 @@
 		dupDown: () => {
 			if (items[nextIdx]) {
 				const buffer = { ...items[curIdx] };
-				['prefix', 't_id'].forEach((key) => delete buffer[key]);
+				['prefix', 'b_id'].forEach((key) => delete buffer[key]);
 				items[nextIdx] = { ...items[nextIdx], ...buffer, changed: true };
 				functions.nextLine();
 			} else {
@@ -105,7 +105,7 @@
 		dupUp: () => {
 			if (curIdx > 0) {
 				const buffer = { ...items[curIdx] };
-				['prefix', 't_id'].forEach((key) => delete buffer[key]);
+				['prefix', 'b_id'].forEach((key) => delete buffer[key]);
 				items[prevIdx] = { ...items[prevIdx], ...buffer, changed: true };
 				functions.prevLine();
 			} else {
@@ -116,13 +116,13 @@
 			if (items[curIdx]) {
 				const buffer = { ...items[curIdx] };
 				['prefix', 't_id'].forEach((key) => delete buffer[key]);
-				window.localStorage.setItem('tam-ticket', JSON.stringify(buffer));
+				window.localStorage.setItem('tam-basket', JSON.stringify(buffer));
 			}
 			focusIdx(curIdx);
 		},
 		paste: () => {
 			if (items[curIdx]) {
-				const buffer = JSON.parse(window.localStorage.getItem('tam-ticket'));
+				const buffer = JSON.parse(window.localStorage.getItem('tam-basket'));
 				items[curIdx] = { ...items[curIdx], ...buffer, changed: true };
 			}
 			focusIdx(curIdx);
@@ -0,0 +1,7 @@
+export const load = async ({ params, fetch }) => {
+	const { prefix } = params;
+	const res = await fetch('/api/prefixes');
+	const prefixes = await res.json();
+	const prefixObj = Array.from(prefixes).find((p) => p.prefix == prefix);
+	return { prefix: prefixObj, prefixes };
+};
@@ -0,0 +1,224 @@
+<script>
+	import { resolve } from '$app/paths';
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { bS, bAS, iS } from '$lib/client/styles';
+	import HeaderBar from '$lib/client/components/HeaderBar.svelte';
+	import PagerBar from '$lib/client/components/PagerBar.svelte';
+	import CommandBar from '$lib/client/components/CommandBar.svelte';
+
+	let { data } = $props();
+	let { prefix, prefixes } = $derived(data);
+
+	let pageTitle = $derived(`${prefix.prefix} Drawing Form | TAM`);
+
+	let curIdx = $state(0),
+		nextIdx = $derived(curIdx + 1),
+		prevIdx = $derived(curIdx - 1);
+	const changeIdx = (idx) => {
+		curIdx = idx;
+	};
+	const focusIdx = (idx) => {
+		curIdx = idx;
+		const elemIdx = document.getElementById(`${idx}_first`);
+		if (elemIdx) {
+			elemIdx.focus();
+		}
+	};
+
+	let pager = $state({ idFrom: 0, idTo: 0 });
+	let items = $state([]);
+	let itemsLength = $derived(items.length);
+	let itemsBuffer = $derived(items.filter((i) => i.changed));
+	const functions = {
+		getPage: async () => {
+			functions.save();
+			if (pager.idFrom > pager.idTo) {
+				[pager.idFrom, pager.idTo] = [pager.idTo, pager.idFrom];
+			}
+			if (pager.idTo - pager.idFrom > 300) {
+				pager.idTo = pager.idFrom + 300;
+			}
+			const res = await fetch(`/api/drawing/${prefix.prefix}/${pager.idFrom}/${pager.idTo}`);
+			const resData = await res.json();
+			resData.map((i) => (i.changed = false));
+			items = [...resData];
+			setTimeout(() => focusIdx(0));
+		},
+		save: async () => {
+			if (itemsBuffer.length > 0) {
+				const res = await fetch('/api/drawing', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(itemsBuffer)
+				});
+				if (res.ok) {
+					itemsBuffer.forEach((i) => (i.changed = false));
+				} else {
+					alert('Error saving items.');
+				}
+			}
+			setTimeout(() => {
+				focusIdx(0);
+			}, 1);
+		},
+		prevPage: () => {
+			((pager.idFrom -= itemsLength), (pager.idTo -= itemsLength));
+			functions.getPage();
+		},
+		nextPage: () => {
+			((pager.idFrom += itemsLength), (pager.idTo += itemsLength));
+			functions.getPage();
+		},
+		nextLine: () => {
+			if (items[nextIdx]) {
+				setTimeout(() => {
+					focusIdx(nextIdx);
+				}, 1);
+			} else {
+				setTimeout(() => {
+					focusIdx(curIdx);
+				}, 1);
+			}
+		},
+		prevLine: () => {
+			if (items[prevIdx]) {
+				setTimeout(() => {
+					focusIdx(prevIdx);
+				}, 1);
+			} else {
+				setTimeout(() => {
+					focusIdx(curIdx);
+				}, 1);
+			}
+		},
+		dupDown: () => {
+			if (items[nextIdx]) {
+				const buffer = { ...items[curIdx] };
+				['prefix', 'b_id'].forEach((key) => delete buffer[key]);
+				items[nextIdx] = { ...items[nextIdx], ...buffer, changed: true };
+				functions.nextLine();
+			} else {
+				focusIdx(curIdx);
+			}
+		},
+		dupUp: () => {
+			if (curIdx > 0) {
+				const buffer = { ...items[curIdx] };
+				['prefix', 'b_id'].forEach((key) => delete buffer[key]);
+				items[prevIdx] = { ...items[prevIdx], ...buffer, changed: true };
+				functions.prevLine();
+			} else {
+				focusIdx(curIdx);
+			}
+		},
+		copy: () => {
+			if (items[curIdx]) {
+				const buffer = { ...items[curIdx] };
+				['prefix', 'b_id'].forEach((key) => delete buffer[key]);
+				window.localStorage.setItem('tam-drawing', JSON.stringify(buffer));
+			}
+			focusIdx(curIdx);
+		},
+		paste: () => {
+			if (items[curIdx]) {
+				const buffer = JSON.parse(window.localStorage.getItem('tam-drawing'));
+				items[curIdx] = { ...items[curIdx], ...buffer, changed: true };
+			}
+			focusIdx(curIdx);
+		}
+	};
+	const headers = ['Basket ID', 'Description', 'Winning Ticket', 'Winner', 'Save?'];
+
+	beforeNavigate(({ cancel }) => {
+		if (itemsBuffer.length > 0) {
+			if (!confirm('Are you sure you want to leave this page? There are unsaved changes!'))
+				cancel();
+		}
+	});
+
+	afterNavigate(() => {
+		items = [];
+		pager = { idFrom: 0, idTo: 0 };
+		curIdx = 0;
+	});
+
+	if (browser) {
+		window.addEventListener('beforeunload', (e) => {
+			if (itemsBuffer.length > 0) e.preventDefault();
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>{pageTitle}</title>
+</svelte:head>
+
+<table class="w-full box-border border-separate p-1">
+	<thead class="sticky top-1 bg-white">
+		<tr>
+			<td colspan="50">
+				<HeaderBar>
+					<div>Baskets:</div>
+					{#each prefixes as p (p.prefix)}
+						<a
+							href={resolve('/drawing/[prefix]', { prefix: p.prefix })}
+							class={prefix.prefix == p.prefix ? bAS[p.color] : bS[p.color]}>{p.prefix}</a
+						>
+					{/each}
+				</HeaderBar>
+				<h1 class="text-xl font-bold p-1">{pageTitle}</h1>
+				<PagerBar {prefix} {functions} bind:pager />
+				<CommandBar {prefix} {functions} /></td
+			>
+		</tr>
+		<tr>
+			{#each headers as header (header)}
+				<th class="border text-left p-0.5">{header}</th>
+			{/each}
+		</tr>
+	</thead>
+	<tbody>
+		{#each items as item, idx (item.b_id)}
+			<tr
+				class="focus-within:font-bold"
+				onfocusin={(e) => {
+					changeIdx(idx);
+					e.target.scrollIntoView({ block: 'center' });
+				}}
+			>
+				<td class="p-0.5 border">{item.b_id}</td>
+				<td class="p-0.5 border"
+					>{item.description}</td
+				>
+				<td class="p-0.5 border"
+					><input
+						type="number"
+						class="{iS.normal} w-full"
+						id="{idx}_first"
+						onchangecapture={async () => {
+						  item.changed = true;
+						  const res = await fetch(`/api/tickets/${prefix.prefix}/${item.winning_ticket}`);
+						  if (res.ok) {
+							const data = await res.json();
+							[item.last_name, item.first_name, item.phone_number] = [(data.last_name || ""), (data.first_name || ""), (data.phone_number || "")];
+						  }
+						}}
+						bind:value={item.winning_ticket}
+					/></td
+				>
+				<td class="p-0.5 border">
+				    {item.last_name || ""}, {item.first_name || ""}: {item.phone_number || ""}
+				</td>
+				<td class="p-0.5 border"
+					><button
+						class={bS[prefix.color]}
+						onclick={() => {
+							item.changed ? (item.changed = false) : (item.changed = true);
+						}}>{item.changed ? 'Yes' : 'No'}</button
+					></td
+				>
+			</tr>
+		{/each}
+	</tbody>
+</table>