balki/mail4one
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 5 Wiki Activity

add delete button

Browse Source
This commit is contained in:
Balakrishnan Balasubramanian 2023-07-04 13:06:21 -04:00
parent 71f84cd0a9
commit fe5b9e1f25
1 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
jsdev/index.html
View File

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