(change): Updates and sheets title

behavior

client/README.md

@@ -16,10 +16,10 @@ Docker images are available under the dbob16/tam-client repo within Docker Hub.
 
 Then to run it:
 
-`docker run -d --name tam-client --network host --restart unless-stopped -e host=127.0.0.1 -e port=3000 -v tam-data:/data dbob16/tam-client:latest`
+`docker run -d --name tam-client --network host --restart unless-stopped -e HOST=127.0.0.1 -e PORT=3000 -v tam-data:/data dbob16/tam-client:latest`
 
 It should then be available in a web browser at `http://localhost:3000` on the computer it is being run on. You can bookmark or make shortcuts to it for user convenience.
 
 #### Port Conflict
 
-If there is a conflict with the port when you go to start TAM, you can change the port by changing the number in the `-e port=3000` to another integer. For instance, if you have to change it to port 3001, you can change it to `-e port=3001` and then navigate to `http://localhost:3001` instead.
+If there is a conflict with the port when you go to start TAM, you can change the port by changing the number in the `-e PORT=3000` to another integer. For instance, if you have to change it to port 3001, you can change it to `-e PORT=3001` and then navigate to `http://localhost:3001` instead.

client/package.json

@@ -17,27 +17,27 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
-		"@sveltejs/adapter-node": "^5.5.4",
-		"@sveltejs/kit": "^2.63.0",
-		"@sveltejs/vite-plugin-svelte": "^7.1.2",
-		"@tailwindcss/vite": "^4.3.0",
+		"@sveltejs/adapter-node": "^5.5.7",
+		"@sveltejs/kit": "^2.70.3",
+		"@sveltejs/vite-plugin-svelte": "^7.3.0",
+		"@tailwindcss/vite": "^4.3.3",
 		"@types/better-sqlite3": "^7.6.13",
-		"@types/node": "^24",
+		"@types/node": "^24.13.4",
 		"drizzle-kit": "^0.31.10",
 		"drizzle-orm": "^0.45.2",
-		"eslint": "^10.4.1",
+		"eslint": "^10.10.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.19.0",
-		"globals": "^17.6.0",
-		"prettier": "^3.8.3",
-		"prettier-plugin-svelte": "^4.1.0",
-		"prettier-plugin-tailwindcss": "^0.8.0",
-		"svelte": "^5.56.1",
-		"tailwindcss": "^4.3.0",
-		"vite": "^8.0.16"
+		"eslint-plugin-svelte": "^3.23.0",
+		"globals": "^17.12.0",
+		"prettier": "^3.9.6",
+		"prettier-plugin-svelte": "^4.1.1",
+		"prettier-plugin-tailwindcss": "^0.8.1",
+		"svelte": "^5.57.0",
+		"tailwindcss": "^4.3.3",
+		"vite": "^8.3.0"
 	},
 	"dependencies": {
-		"better-sqlite3": "^12.10.0",
-		"hotkeys-js": "^4.0.4"
+		"better-sqlite3": "^12.11.1",
+		"hotkeys-js": "^4.0.8"
 	}
 }

client/src/hooks.server.js

@@ -1,6 +1,9 @@
-import { db } from "$lib/server/db";
+import { db } from '$lib/server/db';
+import { env } from '$env/dynamic/public';
+import { randomUUID } from 'crypto';
 
 export const init = async () => {
+  env.PUBLIC_TAM_CLIENT_ID = randomUUID();
 	await db.run(`CREATE TABLE IF NOT EXISTS baskets (
     prefix text,
     b_id integer,
@@ -31,11 +34,31 @@ export const init = async () => {
     ORDER BY b.prefix, b.b_id`);
 	await db.run(`CREATE VIEW IF NOT EXISTS report_by_name AS SELECT t.last_name, t.first_name, t.phone_number, t.pref, b.prefix, b.b_id, b.description, b.donors, b.winning_ticket
     FROM baskets b LEFT JOIN tickets t ON b.prefix = t.prefix AND b.winning_ticket = t.t_id
-    ORDER BY t.last_name, t.first_name, t.phone_number, b.prefix, b.b_id`)
+    ORDER BY t.last_name, t.first_name, t.phone_number, b.prefix, b.b_id`);
 	await db.run(`CREATE VIEW IF NOT EXISTS report_counts AS SELECT prefix, COUNT(DISTINCT(CONCAT(first_name, last_name, phone_number))) AS unique_buyers, COUNT(*) AS total_buys
     FROM tickets
     GROUP BY prefix
     UNION ALL
     SELECT 'Total', COUNT(DISTINCT(CONCAT(first_name, last_name, phone_number))), COUNT(*)
     FROM tickets`);
+};
+
+export const handle = async ({ event, resolve }) => {
+  if (event.url.pathname.startsWith('/api')) {
+    const clientID = event.request.headers.get('TAM-CLIENT-ID');
+    if (env.PUBLIC_TAM_CLIENT_ID == clientID) {
+      const response = await resolve(event);
+      return response;
+    } else {
+      return new Response(JSON.stringify({detail: "Unauthorized"}), { status: 401 })
+    }
+  } else {
+    const response = await resolve(event);
+    return response;
+  }
+}
+
+export const handleFetch = async ({ request, fetch }) => {
+  request.headers.set('TAM-CLIENT-ID', env.PUBLIC_TAM_CLIENT_ID);
+  return fetch(request);
 }

client/src/lib/client/components/CommandBar.svelte

@@ -77,6 +77,11 @@
 			<button class={bS[prefix.color]} title="Alt + S" onclick={() => functions.save()}
 				>Save Marked</button
 			>
+		{/if}
+		{#if functions.cancel}
+  		<button class={bS[prefix.color]} title="Alt + S" onclick={() => functions.cancel()}
+  			>Cancel Marked</button
+  		>
     {/if}
 	</div>
 </div>

client/src/lib/client/components/PagerBar.svelte

@@ -43,6 +43,11 @@
 			oninput={() => {
 			  if (functions.pagerFromUpdate) functions.pagerFromUpdate();
 			}}
+			onkeydown={(e) => {
+			  if (e.key == "Enter") {
+					functions.getPage()
+				}
+			}}
 			bind:value={pager.idFrom}
 		/>
 		<div>-</div>
@@ -54,6 +59,11 @@
 			onclick={(e) => {
 				e.target.select();
 			}}
+			onkeydown={(e) => {
+			  if (e.key == "Enter") {
+					functions.getPage()
+				}
+			}}
 			bind:value={pager.idTo}
 		/>
 		<button

client/src/lib/server/settings/index.js

@@ -1,5 +1,5 @@
 import { env } from '$env/dynamic/private';
-import { readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { readFileSync, writeFileSync } from 'fs';
 
 const defaultSettings = {
 	remote_server: '',
@@ -7,7 +7,8 @@ const defaultSettings = {
 	remote_port: '8000',
 	remote_tls: false,
 	default_pref: 'CALL',
-	venue_name: 'TAM'
+	venue_name: 'Venue Name',
+	disable_attrib: false
 };
 
 export const getSettings = () => {
@@ -16,7 +17,6 @@ export const getSettings = () => {
 		const settings = JSON.parse(readFileSync(settingsPath, 'utf-8'));
 		return settings;
 	} catch {
-		mkdirSync(env.TAM_DATA_DIR || './data', { recursive: true });
 		writeFileSync(settingsPath, JSON.stringify(defaultSettings, null, 2), 'utf-8');
 		return defaultSettings;
 	}

client/src/routes/+layout.server.js

@@ -0,0 +1,6 @@
+import { env } from "$env/dynamic/public"
+
+export const load = async () => {
+  const tamClientID = `${env.PUBLIC_TAM_CLIENT_ID}`;
+  return { tamClientID }
+}

client/src/routes/+page.server.js

@@ -2,9 +2,10 @@ import { getSettings } from '$lib/server/settings';
 
 export const load = async ({ fetch }) => {
 	const settings = getSettings();
+	const disableAttrib = settings.disable_attrib || false;
 	const res = await fetch('/api');
 	const data = await res.json();
 	const resPrefixes = await fetch('/api/prefixes');
 	const dataPrefixes = await resPrefixes.json();
-	return { ...data, venueName: settings.venue_name, prefixes: dataPrefixes };
+	return { ...data, venueName: settings.venue_name, prefixes: dataPrefixes, disableAttrib };
 };

client/src/routes/+page.svelte

@@ -134,12 +134,15 @@
 		{/if}
 		<div class="text-center text-xs">
 			<p>&copy; 2026 Ticket Auction Manager</p>
+			{#if !data.disableAttrib}
 			<p>
-				Created by Dilan Gilluly. Support me on <a
+				Created by Dilan Gilluly. <a
 					href="https://ko-fi.com/techguydilan"
-					class="text-blue-500">Ko-Fi</a
+					class="text-blue-500"
+					target="_blank">My Ko-Fi</a
 				>.
 			</p>
+			{/if}
 		</div>
 	</div>
 </div>

client/src/routes/api/backuprestore/local/+server.js

@@ -15,6 +15,7 @@ export const GET = async () => {
 
 export const POST = async ({ request }) => {
 	const reqData = await request.json();
+	if (reqData.prefixes) {
   	for (let i = 0; i < reqData.prefixes.length; i += chunk_size) {
   		const chunk = reqData.prefixes.slice(i, i + chunk_size);
   		await db
@@ -24,7 +25,9 @@ export const POST = async ({ request }) => {
   				target: prefixes.prefix,
   				set: { color: sql`EXCLUDED.color`, weight: sql`EXCLUDED.weight` }
   			});
-	}
+  	};
+	};
+	if (reqData.baskets) {
   	for (let i = 0; i < reqData.baskets.length; i += chunk_size) {
   		const chunk = reqData.baskets.slice(i, i + chunk_size);
   		await db
@@ -38,7 +41,9 @@ export const POST = async ({ request }) => {
   					winning_ticket: sql`EXCLUDED.winning_ticket`
   				}
   			});
-	}
+  	};
+	};
+	if (reqData.tickets) {
   	for (let i = 0; i < reqData.tickets.length; i += chunk_size) {
   		const chunk = reqData.tickets.slice(i, i + chunk_size);
   		await db
@@ -53,6 +58,7 @@ export const POST = async ({ request }) => {
   					pref: sql`EXCLUDED.pref`
   				}
   			});
-	}
+  	};
+	};
 	return json({ details: 'Data loaded successfully.' });
 };

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

@@ -7,7 +7,7 @@
 	import CommandBar from '$lib/client/components/CommandBar.svelte';
 
 	let { data } = $props();
-	let { prefix, prefixes } = $derived(data);
+	let { prefix, prefixes, tamClientID } = $derived(data);
 
 	let pageTitle = $derived(`${prefix.prefix} Baskets | TAM`);
 
@@ -38,7 +38,9 @@
 			if (pager.idTo - pager.idFrom > 300) {
 				pager.idTo = pager.idFrom + 300;
 			}
-			const res = await fetch(`/api/baskets/${prefix.prefix}/${pager.idFrom}/${pager.idTo}`);
+			const res = await fetch(`/api/baskets/${prefix.prefix}/${pager.idFrom}/${pager.idTo}`, {
+				headers: { 'TAM-CLIENT-ID': tamClientID }
+			});
 			const resData = await res.json();
 			resData.map((i) => (i.changed = false));
 			items = [...resData];
@@ -51,7 +53,10 @@
 			if (itemsBuffer.length > 0) {
 				const res = await fetch('/api/baskets', {
 					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
+					headers: {
+						'Content-Type': 'application/json',
+						'TAM-CLIENT-ID': tamClientID
+					},
 					body: JSON.stringify(itemsBuffer)
 				});
 				if (res.ok) {
@@ -64,6 +69,12 @@
 				focusIdx(0);
 			}, 1);
 		},
+		cancel() {
+			if (itemsBuffer.length > 0) {
+				itemsBuffer.forEach((i) => (i.changed = false));
+				this.getPage();
+			}
+		},
 		prevPage() {
 			((pager.idFrom -= itemsLength), (pager.idTo -= itemsLength));
 			this.getPage();
@@ -133,8 +144,8 @@
 	const headers = ['Basket ID', 'Description', 'Donors', 'Save?'];
 
 	if (browser) {
-		window.addEventListener('beforeunload', (e) => {
-			if (itemsBuffer.length > 0) e.preventDefault();
+		window.addEventListener('beforeunload', () => {
+			if (itemsBuffer.length > 0) functions.save();
 		});
 	}
 </script>

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

@@ -7,7 +7,7 @@
 	import CommandBar from '$lib/client/components/CommandBar.svelte';
 
 	let { data } = $props();
-	let { prefix, prefixes } = $derived(data);
+	let { prefix, prefixes, tamClientID } = $derived(data);
 
 	let pageTitle = $derived(`${prefix.prefix} Drawing Form | TAM`);
 
@@ -38,7 +38,9 @@
 			if (pager.idTo - pager.idFrom > 300) {
 				pager.idTo = pager.idFrom + 300;
 			}
-			const res = await fetch(`/api/drawing/${prefix.prefix}/${pager.idFrom}/${pager.idTo}`);
+			const res = await fetch(`/api/drawing/${prefix.prefix}/${pager.idFrom}/${pager.idTo}`, {
+				headers: { 'TAM-CLIENT-ID': tamClientID }
+			});
 			const resData = await res.json();
 			resData.map((i) => (i.changed = false));
 			items = [...resData];
@@ -48,7 +50,7 @@
 			if (itemsBuffer.length > 0) {
 				const res = await fetch('/api/drawing', {
 					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
+					headers: { 'Content-Type': 'application/json', 'TAM-CLIENT-ID': tamClientID },
 					body: JSON.stringify(itemsBuffer)
 				});
 				if (res.ok) {
@@ -61,6 +63,12 @@
 				focusIdx(0);
 			}, 1);
 		},
+		cancel() {
+			if (itemsBuffer.length > 0) {
+				itemsBuffer.forEach((i) => (i.changed = false));
+				this.getPage();
+			}
+		},
 		pagerFromUpdate() {
 			pager.idTo = pager.idFrom + (itemsLength - 1);
 		},
@@ -133,8 +141,8 @@
 	const headers = ['Basket ID', 'Description', 'Winning Ticket', 'Winner', 'Save?'];
 
 	if (browser) {
-		window.addEventListener('beforeunload', (e) => {
-			if (itemsBuffer.length > 0) e.preventDefault();
+		window.addEventListener('beforeunload', () => {
+			if (itemsBuffer.length > 0) functions.save();
 		});
 	}
 </script>
@@ -185,7 +193,9 @@
 						id="{idx}_first"
 						oninput={async () => {
 							item.changed = true;
-							const res = await fetch(`/api/tickets/${prefix.prefix}/${item.winning_ticket}`);
+							const res = await fetch(`/api/tickets/${prefix.prefix}/${item.winning_ticket}`, {
+								headers: { 'TAM-CLIENT-ID': tamClientID }
+							});
 							if (res.ok) {
 								const data = await res.json();
 								[item.last_name, item.first_name, item.phone_number] = [

client/src/routes/reports/counts/+page.svelte

@@ -4,7 +4,7 @@
 	import { tS, bS } from '$lib/client/styles';
 
 	let { data } = $props();
-	let prefixes = $derived(data.prefixes);
+	let { prefixes, tamClientID } = $derived(data);
 	let tableData = $state([]);
 	let currentTimeout = $state();
 	let lastRefreshed = $state('');
@@ -12,7 +12,7 @@
 
 	const loadCounts = async () => {
 		const rtnData = {};
-		const res = await fetch('/api/reports/counts');
+		const res = await fetch('/api/reports/counts', {headers: {'TAM-CLIENT-ID': tamClientID}});
 		if (res.ok) {
 			prefixes.forEach((p) => (rtnData[p.prefix] = { ...p }));
 			const resData = await res.json();

client/src/routes/search/tickets/+page.svelte

@@ -6,7 +6,7 @@
 	import TicketSearchBar from '$lib/client/components/TicketSearchBar.svelte';
 
 	let { data } = $props();
-	let { prefix, prefixes } = $derived(data);
+	let { prefix, prefixes, tamClientID } = $derived(data);
 
 	let pageTitle = 'Ticket Search | TAM';
 
@@ -36,7 +36,9 @@
 	const functions = {
 		async search() {
 			const searchParams = new URLSearchParams({ ...searchForm });
-			const res = await fetch(`/api/search/tickets?${searchParams.toString()}`);
+			const res = await fetch(`/api/search/tickets?${searchParams.toString()}`, {
+				headers: { 'TAM-CLIENT-ID': tamClientID }
+			});
 			if (res.ok) {
 				const resData = await res.json();
 				items = [...resData];
@@ -47,7 +49,7 @@
 			if (itemsBuffer.length > 0) {
 				const res = await fetch('/api/search/tickets', {
 					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
+					headers: { 'Content-Type': 'application/json', 'TAM-CLIENT-ID': tamClientID },
 					body: JSON.stringify(itemsBuffer)
 				});
 				if (res.ok) {

client/src/routes/settings/+page.svelte

@@ -5,6 +5,7 @@
 	import HeaderBar from '$lib/client/components/HeaderBar.svelte';
 
 	let { data } = $props();
+	let { tamClientID } = $derived(data);
 	let settings = $state({});
 	let status = $state({
 		message: '',
@@ -73,6 +74,17 @@
 			<div>Venue Name:</div>
 			<input type="text" id="venue_name" class={iS.normal} bind:value={settings.venue_name} />
 		</div>
+		<div class="flex flex-row gap-1 items-center">
+			<div>Disable Attribution:</div>
+			<button
+				class={bS.gray}
+				onclick={() => {
+					settings.disable_attrib
+						? (settings.disable_attrib = false)
+						: (settings.disable_attrib = true);
+				}}>{settings.disable_attrib ? 'Yes' : 'No'}</button
+			>
+		</div>
 		<div class="flex flex-row gap-1 items-center">
 			<button
 				class={bS.gray}
@@ -80,7 +92,7 @@
 					const res = await fetch('/api/settings', {
 						method: 'POST',
 						body: JSON.stringify(settings),
-						headers: { 'Content-Type': 'application/json' }
+						headers: { 'Content-Type': 'application/json', 'TAM-CLIENT-ID': tamClientID }
 					});
 					if (!res.ok) {
 						status.message = `Error Code: ${res.status}`;

client/src/routes/settings/auth-keys/+page.svelte

@@ -1,8 +1,9 @@
 <script>
 	import HeaderBar from '$lib/client/components/HeaderBar.svelte';
 	import { resolve } from '$app/paths';
-	import { bS, iS } from '$lib/client/styles';
+	import { bS, iS, tS } from '$lib/client/styles';
 	let { data } = $props();
+	let { tamClientID } = $derived(data);
 
 	const pageTitle = 'Auth Keys | TAM';
 
@@ -14,10 +15,11 @@
 	let authKeys = $state([]);
 	let newDesc = $state('');
 	let curKey = $state('');
+	let errorStatus = $state('');
 
 	async function getKeys() {
 		const res = await fetch('/api/auth', {
-			headers: { 'TAM-PWD': auth.pwd }
+			headers: { 'TAM-PWD': auth.pwd, 'TAM-CLIENT-ID': tamClientID }
 		});
 		if (res.ok) {
 			auth.toggle = true;
@@ -25,8 +27,8 @@
 			authKeys = [...resData];
 			curKey = data.authKey;
 		} else {
-			auth.pwd = 'Invalid Password!';
-			setTimeout(() => (auth.pwd = ''), 3000);
+			errorStatus = 'Invalid Password!';
+			setTimeout(() => (errorStatus = ''), 7000);
 		}
 	}
 </script>
@@ -45,9 +47,22 @@
 	{#if !auth.toggle}
 		<div class="flex flex-row gap-1 items-center py-1">
 			<div>Password:</div>
-			<input type="password" id="pwd_input" class={iS.normal} bind:value={auth.pwd} />
+			<input
+				type="password"
+				id="pwd_input"
+				class={iS.normal}
+				onkeydown={(event) => {
+					if (event.key == 'Enter') {
+						getKeys();
+					}
+				}}
+				bind:value={auth.pwd}
+			/>
 			<button class={bS.gray} onclick={getKeys}>Login</button>
 		</div>
+		<div class="py-1">
+			<p class={tS.red}>{errorStatus}</p>
+		</div>
 	{:else}
 		<table class="w-full my-1">
 			<thead class="text-left">
@@ -72,7 +87,10 @@
 										onclick={async () => {
 											const res = await fetch('/api/settings', {
 												method: 'POST',
-												headers: { 'Content-Type': 'application/json' },
+												headers: {
+													'Content-Type': 'application/json',
+													'TAM-CLIENT-ID': tamClientID
+												},
 												body: JSON.stringify({ remote_key: key.auth_key })
 											});
 											if (res.ok) {
@@ -86,7 +104,7 @@
 									onclick={async () => {
 										const res = await fetch(`/api/auth?key_to_del=${key.auth_key}`, {
 											method: 'DELETE',
-											headers: { 'TAM-PWD': auth.pwd }
+											headers: { 'TAM-PWD': auth.pwd, 'TAM-CLIENT-ID': tamClientID }
 										});
 										if (res.ok) {
 											setTimeout(() => {
@@ -112,7 +130,11 @@
 								if (newDesc) {
 									const res = await fetch('/api/auth', {
 										method: 'POST',
-										headers: { 'TAM-PWD': auth.pwd, 'Content-Type': 'application/json' },
+										headers: {
+											'TAM-PWD': auth.pwd,
+											'Content-Type': 'application/json',
+											'TAM-CLIENT-ID': tamClientID
+										},
 										body: JSON.stringify({ description: newDesc })
 									});
 									if (res.ok) {

client/src/routes/settings/backuprestore/+page.svelte

@@ -6,7 +6,7 @@
 	const pageTitle = 'Backup and Restore | TAM';
 
 	let { data } = $props();
-	let remoteServer = $derived(data.remoteServer);
+	let { remoteServer, tamClientID } = $derived(data);
 	let uploadFile = $state();
 	let contents = $state('');
 	let results = $state('');
@@ -31,7 +31,7 @@
 			hour: String(now.getHours()).padStart(2, '0'),
 			minutes: String(now.getMinutes()).padStart(2, '0')
 		};
-		const res = await fetch(fetch_url);
+		const res = await fetch(fetch_url, { headers: { 'TAM-CLIENT-ID': tamClientID } });
 		if (res.ok) {
 			const data = await res.json();
 			const jsonString = JSON.stringify(data, null, 2);
@@ -58,7 +58,7 @@
 		setTimeout(async () => {
 			const res = await fetch(`/api/backuprestore/${target}`, {
 				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
+				headers: { 'Content-Type': 'application/json', 'TAM-CLIENT-ID': tamClientID },
 				body: contents
 			});
 			if (res.ok) setResult('File uploaded successfully. Check to see if your data exists.');
@@ -67,7 +67,10 @@
 	}
 
 	async function pushData(target) {
-		const res = await fetch(`/api/backuprestore/push/${target}`, { method: 'HEAD' });
+		const res = await fetch(`/api/backuprestore/push/${target}`, {
+			method: 'HEAD',
+			headers: { 'TAM-CLIENT-ID': tamClientID }
+		});
 		const targetStr = target.charAt(0).toUpperCase() + target.slice(1);
 		if (res.ok) {
 			setResult(`${targetStr} pushed successfully.`);

client/src/routes/settings/prefixes/+page.svelte

@@ -5,6 +5,7 @@
 	import { resolve } from '$app/paths';
 
 	let { data } = $props();
+	let { tamClientID } = $derived(data);
 
 	const pageTitle = 'Prefixes | TAM';
 
@@ -56,7 +57,7 @@
 					if (editPrefix.prefix) {
 						const req = await fetch('/api/prefixes', {
 							method: 'POST',
-							headers: { 'Content-Type': 'application/json' },
+							headers: { 'Content-Type': 'application/json', 'TAM-CLIENT-ID': tamClientID },
 							body: JSON.stringify([editPrefix])
 						});
 						if (req.ok) window.location.reload();
@@ -125,7 +126,8 @@
 								class={bS[prefix.color]}
 								onclick={async () => {
 									const res = await fetch(`/api/prefixes?p=${prefix.prefix}`, {
-										method: 'DELETE'
+										method: 'DELETE',
+										headers: { 'TAM-CLIENT-ID': tamClientID }
 									});
 									if (res.ok) window.location.reload();
 								}}>Delete</button

client/src/routes/sheets/+page.svelte

@@ -26,9 +26,12 @@
 	<thead class="sticky top-0">
 		<tr class="print:hidden">
 			<td colspan="50">
-				<HeaderBar>
-					<div>{pageTitle}</div>
-				</HeaderBar>
+				<HeaderBar />
+			</td>
+		</tr>
+		<tr class="print:hidden">
+			<td colspan="50">
+				<h1 class="text-lg font-bold">{pageTitle}</h1>
 			</td>
 		</tr>
 		<tr class="print:hidden">

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

@@ -7,7 +7,7 @@
 	import CommandBar from '$lib/client/components/CommandBar.svelte';
 
 	let { data } = $props();
-	let { prefix, prefixes } = $derived(data);
+	let { prefix, prefixes, tamClientID } = $derived(data);
 
 	let pageTitle = $derived(`${prefix.prefix} Tickets | TAM`);
 
@@ -38,7 +38,7 @@
 			if (pager.idTo - pager.idFrom > 300) {
 				pager.idTo = pager.idFrom + 300;
 			}
-			const res = await fetch(`/api/tickets/${prefix.prefix}/${pager.idFrom}/${pager.idTo}`);
+			const res = await fetch(`/api/tickets/${prefix.prefix}/${pager.idFrom}/${pager.idTo}`, {headers: {'TAM-CLIENT-ID': tamClientID}});
 			const resData = await res.json();
 			resData.map((i) => (i.changed = false));
 			items = [...resData];
@@ -51,7 +51,7 @@
 			if (itemsBuffer.length > 0) {
 				const res = await fetch('/api/tickets', {
 					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
+					headers: { 'Content-Type': 'application/json', 'TAM-CLIENT-ID': tamClientID },
 					body: JSON.stringify(itemsBuffer)
 				});
 				if (res.ok) {
@@ -64,6 +64,12 @@
 				focusIdx(0);
 			}, 1);
 		},
+		cancel(){
+		  if (itemsBuffer.length > 0) {
+				itemsBuffer.forEach((i) => (i.changed = false));
+				this.getPage();
+			};
+		},
 		prevPage(){
 			((pager.idFrom -= itemsLength), (pager.idTo -= itemsLength));
 			this.getPage();
@@ -133,8 +139,8 @@
 	const headers = ['Ticket ID', 'First Name', 'Last Name', 'Phone Number', 'Pref', 'Save?'];
 
 	if (browser) {
-		window.addEventListener('beforeunload', (e) => {
-			if (itemsBuffer.length > 0) e.preventDefault();
+		window.addEventListener('beforeunload', () => {
+			if (itemsBuffer.length > 0) functions.save();
 		});
 	}
 </script>

deployments/client/docker/build-client.sh

@@ -2,8 +2,7 @@
 source ../../version.env
 docker compose build
 docker image tag dbob16/tam-client:latest dbob16/tam-client:${TAM_VERSION}
-mkdir -p dist/images
-echo "HOST=127.0.0.1" >> dist/prod.env
+echo "HOST=127.0.0.1" > dist/prod.env
 echo "PORT=3000" >> dist/prod.env
 TAM_VERSION=${TAM_VERSION} envsubst < ./run-client.sh.template > ./dist/run-client.sh
 chmod +x dist/run-client.sh

deployments/client/portable/linux/run-server.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+if [ ! -d "./data" ]; then
+  mkdir ./data
+fi
+NODE_TLS_REJECT_UNAUTHORIZED=0 BODY_SIZE_LIMIT=Infinity HOST=localhost PORT=3000 ./exe/bin/node ./build

nixos/tam.nix

@@ -0,0 +1,40 @@
+{ config, pkgs, ... }
+
+{
+
+  networking.hosts = {
+    "192.168.1.1" = [ "tam.lan" ]; # Change the IP of this line to the IP of the TAM server if applicable.
+  };
+
+  users.users."tam" = {
+    isNormalUser = true;
+    description = "Ticket Auction Manager";
+  };
+
+  services.displayManager.sddm.settings.Autologin = {
+    Session = "plasma.desktop";
+    User = "tam";
+  };
+
+  environment.systemPackages = with pkgs; [
+    chromium
+  ];
+
+  virtualisation.docker.enable = true;
+
+  virtualisation.oci-containers = {
+    backend = "docker";
+    containers."tam-client" = {
+      image = "dbob16/tam-client:0.1.0"; # Change image to local repo to avoid pull limits.
+      volumes = [
+        "tam-data:/data"
+      ];
+      environment = {
+        HOST = "localhost";
+        PORT = "3000";
+      };
+      extraOptions = ["--network=host"]
+    };
+  };
+
+}