From fe5b9e1f25e4a7646dc98696ccdf21da05043db4 Mon Sep 17 00:00:00 2001
From: Balakrishnan Balasubramanian <git.user@balki.me>
Date: Tue, 4 Jul 2023 13:06:21 -0400
Subject: [PATCH] add delete button

---
 jsdev/index.html | 103 +++++++++++++++++++++++++----------------------
 1 file changed, 55 insertions(+), 48 deletions(-)
diff --git a/jsdev/index.html b/jsdev/index.html
index bf1046f..dca0263 100644
--- a/jsdev/index.html
+++ b/jsdev/index.html
@@ -1,8 +1,10 @@
 <!doctype html>
 <html>
     <head>
-        <title>Mail4one Web config</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+        <title>Mail4one Web config</title>
         <script type="application/json" id="m41config">
             {
               "matches": [
@@ -65,77 +67,81 @@
         </script>
         <script type="application/javascript">
             "use strict"
+
             // Globals
             let matches_table
             let match_row_template
             let config
+
+            function initGlobals() {
+
+                matches_table = document.getElementById("web-cfg-matches")
+                match_row_template = document.getElementById("web-cfg-matches-row")
+                config = JSON.parse(document.getElementById('m41config').text)
+            }
+
             function populate_match_table(matches_config) {
-                for (let match_config of matches_config) {
-                    const { 
-                        "name": match_name,
-                        "addrs" : addrs,
-                        "addr_rexs" : addr_rexs,
-                    } = match_config
+
+                for (const { name: match_name, addrs, addr_rexs } of matches_config) {
 
                     const [match_type, match_values] = (() => {
+
                         if (addrs != undefined) {
                             return ["addrs", addrs]
                         } else {
                             return ["addr_rexs", addr_rexs]
                         }
-                    })();
+                    })()
 
 
                     addMatchRow()
-                    const rows = matches_table.tBodies[0].rows
-                    const last_row = rows.item(rows.length -1 )
-                    const [ name_cell, type_cell, value_cell ] = last_row.cells
+                    const last_row = matches_table.tBodies[0].lastElementChild
+                    const [ ,name_cell, {firstElementChild: type_select}, value_cell ] = last_row.cells
 
                     name_cell.innerText = match_name
-                    type_cell.firstElementChild.value = match_type
-                    value_cell.firstElementChild.value = match_values.join("\n")
-
+                    type_select.value = match_type
+                    value_cell.innerText = match_values.join("\n")
                 }
             }
 
             function extract_match_table() {
+
                 let matches = []
                 for (let row of matches_table.tBodies[0].rows) {
-                    const [ name_cell, type_cell, value_cell ] = row.cells
+
+                    const [ ,name_cell, {firstElementChild: type_select}, value_cell ] = row.cells
                     let m = {"name" : name_cell.innerText}
-                    switch (type_cell.firstElementChild.value) {
-                        case "addrs": {
-                            m["addrs"] = value_cell.firstElementChild.value.split("\n")
-                            break;
-                        }
-                        case "addr_rexs": {
-                            m["addr_rexs"] = value_cell.firstElementChild.value.split("\n")
-                            break;
-                        }
+                    switch (type_select.value) {
+                        case "addrs":
+                            m["addrs"] = value_cell.innerText.split("\n")
+                            break
+                        case "addr_rexs":
+                            m["addr_rexs"] = value_cell.innerText.split("\n")
+                            break
                     }
                     matches.push(m)
                 }
                 return matches
             }
 
+            function addMatchRow() {
+
+                let row_clone = match_row_template.content.cloneNode(true)
+                matches_table.tBodies[0].appendChild(row_clone)
+            }
+
             function main() {
-                matches_table = document.getElementById("web-cfg-matches")
-                match_row_template = document.getElementById("web-cfg-matches-row")
-                config = JSON.parse(document.getElementById('m41config').text);
+
+                initGlobals()
                 populate_match_table(config["matches"])
                 save()
-                document.getElementById("before").value = JSON.stringify(config["matches"])
+                document.getElementById("before").innerText = JSON.stringify(config["matches"], null, 2)
             }
 
             function save() {
+
                 const matches = extract_match_table() 
-                document.getElementById("after").value = JSON.stringify(matches)
-
-            }
-
-            function addMatchRow() {
-                let row_clone = match_row_template.content.cloneNode(true)
-                matches_table.tBodies[0].appendChild(row_clone)
+                document.getElementById("after").innerText = JSON.stringify(matches, null, 2)
             }
 
         </script>
@@ -143,22 +149,22 @@
     <body onload="main()">
         <template id="web-cfg-matches-row">
             <tr>
-                <td contentEditable="true" >Name</td>
+                <td><button onClick="this.parentElement.parentElement.remove()">✗</button></td>
+                <td contentEditable></td>
                 <td>
                     <select>
                         <option value="addrs">List of addresses</option>
                         <option value="addr_rexs">List of regexes for addresses</option>
                     </select>
                 </td>
-                <td>
-                    <textarea></textarea>
-                </td>
+                <td contentEditable></td>
             </tr>
         </template>
         <h1>Mail4one Web config</h1>
-        <table id="web-cfg-matches">
+        <table border id="web-cfg-matches">
             <thead>
                 <tr>
+                    <th></th>
                     <th>Name</th>
                     <th>Type</th>
                     <th>Values</th>
@@ -167,15 +173,16 @@
             <tbody>
             </tbody>
         </table>
-        <button onClick="addMatchRow()">Add Match</button>
-        <button onClick="save()">Save</button>
         <div>
-            <label for="cfg_before">Before</label>
-            <textarea id="before" name="cfg_before" style="width=100%"></textarea>
-        </div>
-        <div>
-            <label for="cfg_after">After</label>
-            <textarea id="after" name="cfg_after"></textarea>
+            <button onClick="addMatchRow()">Add Match</button>
+            <button onClick="save()">Save</button>
         </div>
+        <hr>
+        <h3>Before</h3>
+        <pre id="before"></pre>
+        <hr>
+        <h3>After</h3>
+        <pre id="after"></pre>
+        <hr>
     </body>
 </html>
