From d69de4da113ee3c6cd59d321aed2bc5c34aad096 Mon Sep 17 00:00:00 2001
From: bel <bel@bel.bel>
Date: Sun, 21 Jul 2024 08:23:34 -0600
Subject: [PATCH] ui ready enough for amending

---
 cmd/http/public/transactions.html | 70 ++++++++++++++++++++++++++++++-
 1 file changed, 68 insertions(+), 2 deletions(-)
diff --git a/cmd/http/public/transactions.html b/cmd/http/public/transactions.html
index 2ee1cb9..ad54d1b 100644
--- a/cmd/http/public/transactions.html
+++ b/cmd/http/public/transactions.html
@@ -1,6 +1,11 @@
 <html>
   <header>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
+    <style>
+      input[type="text"] {
+        border: 1px solid black;
+      }
+    </style>
     <script>
       function http(method, remote, callback, body) {
          var xmlhttp = new XMLHttpRequest();
@@ -83,8 +88,69 @@
         const xactionJSON = atob(row.attributes.transaction.value)
         const xaction = JSON.parse(xactionJSON)
         console.log(xaction)
-        row.innerHTML = `<td colspan="3"></td>`
-        TODO
+
+        row.attributes.onclick = ""
+        row.onclick = ""
+        row.style = ""
+        console.log(row)
+
+        var result = `<td colspan="3">`
+        result += `<form method="modal">`
+        result += `  <div>`
+        result += `    <label for="date">Date</label>`
+        result += `    <input type="text" name="date" value='${xaction[0].Date}' style="width: 100%;"/>`
+        result += `  </div>`
+        result += `  <div>`
+        result += `    <label for="description">Description</label>`
+        result += `    <input type="text" name="description" value='${xaction[0].Description}' style="width: 100%;"/>`
+        result += `  </div>`
+
+        for (var i in xaction) {
+          var delta = xaction[i]
+          result += `<hr>`
+          result += `<div style="display: flex; flex-direction: row; width: 100%; margin-top: 1em;">`
+          result += `  <div style="flex-grow: 1; margin-left: 1em; margin-right: 1em;">`
+          result += `    <label for="name${i}">Name${i}</label>`
+          result += `    <input type="text" name="name${i}" value='${delta.Name}' style="width: 100%;"/>`
+          result += `  </div>`
+          result += `  <div style="margin-left: 1em; margin-right: 1em;">`
+          result += `    <label for="value${i}">Value${i}</label>`
+          result += `    <input type="text" name="value${i}" value='${delta.Value}' style="width: 100%;"/>`
+          result += `  </div>`
+          result += `  <input type="button" name="submit${i}" value="Submit${i}" onclick="submitEdit(this); return false;" delta="${btoa(JSON.stringify(delta))}"/>`
+          result += `</div>`
+        }
+
+        result += `</form`
+        result += `</td>`
+
+        row.innerHTML = result
+      }
+
+      function submitEdit(btn) {
+        const old = JSON.parse(atob(btn.attributes.delta.value))
+        const now = JSON.parse(atob(btn.attributes.delta.value))
+
+        const idx = btn.name.split("submit")[1]
+        const form = btn.parentElement.parentElement
+
+        now.Value = form[`value${idx}`].value
+        now.Name = form[`name${idx}`].value
+        now.Description = form[`description`].value
+        now.Date = form[`date`].value
+
+        if (JSON.stringify(old) === JSON.stringify(now)) {
+          return
+        }
+
+        http("PUT", "/api/amend", (body, status) => {
+          if (status != 200)
+            throw(`Unexpected status ${status}: ${body}`)
+          load()
+        }, {
+          old: old,
+          now: now,
+        })
       }
 
       function stage(who, contributesToHouse) {
