ui ready enough for amending

2024-07-21 08:23:34 -06:00 · 2024-07-21 08:23:34 -06:00 · d69de4da11
parent b8323f731f
commit d69de4da11
1 changed files with 68 additions and 2 deletions
--- 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) {