From 8b72bfd91c1d6296f16b745f0dd8c197deda6e99 Mon Sep 17 00:00:00 2001
From: Dilan Gilluly <gillulyd@gmail.com>
Date: Mon, 22 Sep 2025 22:58:26 -0400
Subject: [PATCH] nightly - 2025-09-22

---
 README.md                                     | 11 +++++
 webapp/src/lib/css/colors.css                 | 35 +++++++++++++++
 webapp/src/lib/css/main.css                   | 26 +++++++++++
 webapp/src/routes/+layout.svelte              |  1 +
 webapp/src/routes/+page.js                    |  9 ++++
 webapp/src/routes/+page.svelte                | 33 +++++++++++---
 webapp/src/routes/api/prefixes/+server.js     |  2 +-
 .../src/routes/api/prefixes/[name]/+server.js | 15 +++++++
 webapp/src/routes/prefixes/+page.svelte       | 44 +++++++++++++++----
 9 files changed, 160 insertions(+), 16 deletions(-)
 create mode 100644 README.md
 create mode 100644 webapp/src/lib/css/colors.css
 create mode 100644 webapp/src/routes/+page.js

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9e99fbd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,11 @@
+# TAM3 - Web Based
+
+This is the new web based version of Ticket Auction Manager. I decided to delete and redo it to rehash some things.
+
+Goals for this project:
+
+- To get everything working from [TAM-API](https://www.github.com/dbob16/tam-api)
+- Web-based version
+- Also have a desktop app available (eventually, maybe Electron or Tauri based)
+
+**This is under _active_ development**
\ No newline at end of file
diff --git a/webapp/src/lib/css/colors.css b/webapp/src/lib/css/colors.css
new file mode 100644
index 0000000..72e40d1
--- /dev/null
+++ b/webapp/src/lib/css/colors.css
@@ -0,0 +1,35 @@
+.white {
+    --button-fg: #333333;
+    --button-bg: #ffffff;
+    --button-border: #333333;
+}
+
+.blue {
+    --button-fg: #000000;
+    --button-bg: #add8e6;
+    --button-border: #000000;
+}
+
+.yellow {
+    --button-fg: #000000;
+    --button-bg: #f9f96c;
+    --button-border: #000000;
+}
+
+.orange {
+    --button-fg: #000000;
+    --button-bg: #ffba39;
+    --button-border: #000000;
+}
+
+.red {
+    --button-fg: #000000;
+    --button-bg: #fa7575;
+    --button-border: #000000;
+}
+
+.green {
+    --button-fg: #000000;
+    --button-bg: lightgreen;
+    --button-border: #000000;
+}
\ No newline at end of file
diff --git a/webapp/src/lib/css/main.css b/webapp/src/lib/css/main.css
index 8b13789..94a1437 100644
--- a/webapp/src/lib/css/main.css
+++ b/webapp/src/lib/css/main.css
@@ -1 +1,27 @@
+:root {
+    --button-fg: #333333;
+    --button-bg: #eeeeee;
+    --button-border: #333333;
+}
 
+a.styled, button.styled {
+    display: block;
+    font: bold 12pt Arial;
+    text-decoration: none;
+    background-color: var(--button-bg);
+    color: var(--button-fg);
+    padding: 0.5rem 0.25rem;
+    border: solid 1px var(--button-border);
+    border-radius: 0.25rem;
+}
+
+a.styled:hover, button.styled:hover {
+    text-decoration: underline;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
\ No newline at end of file
diff --git a/webapp/src/routes/+layout.svelte b/webapp/src/routes/+layout.svelte
index 5a2edde..2696ca8 100644
--- a/webapp/src/routes/+layout.svelte
+++ b/webapp/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import favicon from "$lib/assets/favicon.svg";
   import "$lib/css/main.css";
+  import "$lib/css/colors.css";
 
   let { children } = $props();
 </script>
diff --git a/webapp/src/routes/+page.js b/webapp/src/routes/+page.js
new file mode 100644
index 0000000..44022f6
--- /dev/null
+++ b/webapp/src/routes/+page.js
@@ -0,0 +1,9 @@
+export async function load({ fetch }) {
+    const res = await fetch('/api/prefixes/');
+    if (res.ok) {
+        const data = await res.json();
+        return { prefixes: data, status: "Prefixes fetched successfully." }
+    } else {
+        return { prefixes: [], status: "Error fetching prefixes."}
+    }
+}
\ No newline at end of file
diff --git a/webapp/src/routes/+page.svelte b/webapp/src/routes/+page.svelte
index e61118a..e308f3b 100644
--- a/webapp/src/routes/+page.svelte
+++ b/webapp/src/routes/+page.svelte
@@ -1,18 +1,39 @@
 <script>
+  import { browser } from "$app/environment";
+
+  let { data } = $props();
   let prefix_name = $state("");
+  let all_prefixes = $state([]);
+  let current_prefix = $state({name: "", color: "", weight: 0})
+
+  $effect(() => {
+    const new_prefix = all_prefixes.find((prefix) => prefix.name === prefix_name);
+    if (new_prefix) {
+      current_prefix = {...new_prefix};
+    }
+  })
+  
+  if (browser) {
+    all_prefixes = [...data.prefixes];
+    document.title = "TAM3 - Main Menu"
+  };
 </script>
 
 <div class="main-menu">
   <h1>TAM3 - Main Menu</h1>
   <div class="prefix-selector">
-    <select bind:value={prefix_name}></select>
+    <select style="width: 100%; box-sizing: border-box;" bind:value={prefix_name}>
+      {#each all_prefixes as prefix}
+      <option value={prefix.name}>{prefix.name}</option>
+      {/each}
+    </select>
   </div>
-  <div class="form-buttons">
-    <a href="/tickets/" class="button">Tickets</a>
-    <a href="/baskets/" class="button">Baskets</a>
-    <a href="/drawing/" class="button">Drawing</a>
+  <div><h2>Forms:</h2></div>
+  <div class="flex-row {current_prefix.color}">
+    <a href="/tickets/{current_prefix.name}/" target="_blank" class="styled">Tickets</a>
+    <a href="/baskets/{current_prefix.name}/" target="_blank" class="styled">Baskets</a>
+    <a href="/drawing/{current_prefix.name}/" target="_blank" class="styled">Drawing</a>
   </div>
-  <button>Test</button>
 </div>
 
 <style>
diff --git a/webapp/src/routes/api/prefixes/+server.js b/webapp/src/routes/api/prefixes/+server.js
index abba53d..d39f889 100644
--- a/webapp/src/routes/api/prefixes/+server.js
+++ b/webapp/src/routes/api/prefixes/+server.js
@@ -11,7 +11,7 @@ export async function GET() {
         const data = await res.json();
         return new Response(JSON.stringify(data), {status: 200, statusText: "Prefixes fetched from remote successfully."});
     } else {
-        const data = await db.select().from(prefixes);
+        const data = await db.select().from(prefixes).orderBy(prefixes.weight, prefixes.name);
         return new Response(JSON.stringify(data), {status: 200, statusText: "Prefixes loaded successfully."});
     }
 }
diff --git a/webapp/src/routes/api/prefixes/[name]/+server.js b/webapp/src/routes/api/prefixes/[name]/+server.js
index c7971bb..2fed5fd 100644
--- a/webapp/src/routes/api/prefixes/[name]/+server.js
+++ b/webapp/src/routes/api/prefixes/[name]/+server.js
@@ -20,4 +20,19 @@ export async function GET({ params }) {
             return new Response(JSON.stringify({status: "Issue loading prefix"}), {status: 404, statusText: "Prefix not found."})
         }
     }
+};
+
+export async function DELETE({ params }) {
+    let { name } = params;
+    await db.delete(prefixes).where(eq(prefixes.name, name))
+    if (env.TAM3_REMOTE) {
+        const res = await fetch(`${env.TAM3_REMOTE}/prefixes/?api_key=${env.TAM3_REMOTE_KEY}&prefix_name=${name}`);
+        if (!res.ok) {
+            return new Response(JSON.stringify({status: "Issue deleting prefix."}), {status: res.status, statusText: res.statusText});
+        } else {
+            return new Response(JSON.stringify({status: "Prefix deleted from remote successfully"}), {status: 200, statusText: res.statusText});
+        };
+    } else {
+        return new Response(JSON.stringify({status: "Prefix deleted successfully"}), {status: 200, statusText: "Prefix deleted successfully."})
+    }
 }
\ No newline at end of file
diff --git a/webapp/src/routes/prefixes/+page.svelte b/webapp/src/routes/prefixes/+page.svelte
index 34a7db5..2feadca 100644
--- a/webapp/src/routes/prefixes/+page.svelte
+++ b/webapp/src/routes/prefixes/+page.svelte
@@ -20,7 +20,6 @@
 
     async function savePrefix() {
         const post_body = JSON.stringify({...prefix_form});
-        console.log(post_body);
         const res = await fetch("/api/prefixes/", {
             method: 'POST',
             body: JSON.stringify({...prefix_form}),
@@ -30,10 +29,20 @@
             status = `[${res.status}]: ${res.statusText}`;
         } else {
             status = `${res.statusText}`;
-            getPrefixes()
+            getPrefixes();
         }
     }
 
+    async function delPrefix(name) {
+        const res = await fetch(`/api/prefixes/${name}`, { method: 'DELETE' });
+        if (!res.ok) {
+            status = `[${res.status}]: ${res.statusText}`;
+        } else {
+            status = `${res.statusText}`;
+            getPrefixes();
+        };
+    }
+
     if (browser) {
         getPrefixes()
     }
@@ -62,9 +71,13 @@
     </div>
     <div>
         <div>Commands</div>
-        <div>
-            <button onclick={savePrefix}>Save/Update</button>
-            <button onclick={() => {
+        <div class="flex-row {prefix_form.color}">
+            <button class="styled" onclick={() => {
+                if (prefix_form.name !== "") {
+                    savePrefix();
+                };
+            }}>Save/Update</button>
+            <button class="styled" onclick={() => {
                 prefix_form = {name: "", color: "white", weight: 0};
             }}>Reset</button>
         </div>
@@ -78,13 +91,17 @@
         <div>Commands</div>
     </div>
     {#each all_prefixes as prefix}
-    <div>
+    <div class="row">
         <div>{prefix.name}</div>
         <div>{prefix.color}</div>
         <div>{prefix.weight}</div>
-        <div>
-            <button>Edit</button>
-            <button>Delete</button>
+        <div class="flex-row {prefix.color}">
+            <button class="styled" onclick={() => {
+                prefix_form = {...prefix}
+            }}>Edit</button>
+            <button class="styled" onclick={() => {
+                delPrefix(prefix.name);
+            }}>Delete</button>
         </div>
     </div>
     {/each}
@@ -108,12 +125,21 @@
 
     .prefix-list {
         margin-top: 3rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
     }
 
     .prefix-list div {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
+        align-items: center;
         gap: 1rem;
+        padding: 0.25rem;
+    }
+
+    .prefix-list div.row:nth-child(2n) {
+        background: #ddd;
     }
 
     .status {