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

back to table

Browse Source
This commit is contained in:
Balakrishnan Balasubramanian 2023-07-06 21:16:47 -04:00
parent 1e045964fa
commit b73ab237e3
1 changed files with 193 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
jsdev/index.html
View File

@ -66,17 +66,33 @@
} }
</script> </script>
<style> <style>
table {
border: 1px solid;
}
thead {
background-color: orange;
}
.outer { .outer {
display: flex; display: flex;
justify-content: center; justify-content: center;
background: grey; background: grey;
} }
.multiline {
text-align: left;
padding: 5px;
padding-left: 15px;
}
.inner { .inner {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid; border: 1px solid;
background: white; background: white;
padding: 5px; padding: 10px;
justify-content: center;
margin: 10px;
// flex: 1 0 0; // flex: 1 0 0;
// max-width: 700px; width: 1200px;
} }
.m41-box { .m41-box {
display: grid; display: grid;
@ -84,23 +100,78 @@
margin: 10px; margin: 10px;
// background-color: lightblue; // background-color: lightblue;
} }
#web-cfg-matches {
width: 90%;
text-align: center;
}
#web-cfg-matches tbody tr:nth-of-type(odd) {
background: lightblue;
}
#web-cfg-matches tbody tr:nth-of-type(even) {
background: lightgrey;
}
#web-cfg-boxes { #web-cfg-boxes {
text-align: center;
width: 90%;
// display: grid; // display: grid;
// grid-template-columns: 1fr ; // grid-template-columns: 1fr ;
width: 100%;
//justify-content: space-around; //justify-content: space-around;
// justify-content: flex-start; // justify-content: flex-start;
// background-color: blue; // background-color: blue;
} }
.m41-box:nth-of-type(odd) { #web-cfg-boxes tbody tr td {
margin: 10px;
padding: 10px;
}
#web-cfg-boxes tbody:nth-of-type(odd) {
background: lightblue; background: lightblue;
} }
.m41-box:nth-of-type(even) { #web-cfg-boxes tbody:nth-of-type(even) {
background: lightgrey; background: lightgrey;
} }
#web-cfg-boxes tbody tr td div.dummy{
display: none;
}
#web-cfg-boxes tbody tr td div button.dummy {
display: none;
}
#web-cfg-boxes tbody:first-of-type tr td.box div button.up.dummy {
display: block;
}
#web-cfg-boxes tbody:first-of-type tr td.box div button.up.real {
display: none;
}
#web-cfg-boxes tbody:last-of-type tr td.box div button.down.dummy {
display: block;
}
#web-cfg-boxes tbody:last-of-type tr td.box div button.down.real {
display: none;
}
#web-cfg-boxes tbody:only-of-type tr td.box div.real {
display: none;
}
#web-cfg-boxes tbody:only-of-type tr td.box div.dummy {
display: block;
}
td th {
padding: 5px;
}
.m41-box-info { .m41-box-info {
display: grid; display: grid;
grid-template-columns: 4fr 2fr 5fr; grid-template-columns: 4fr 2fr 5fr;
@ -139,21 +210,21 @@
"use strict" "use strict"
// Globals // Globals
let server_config
let matches_table let matches_table
let match_row_template let match_row_template
let config let boxes_table
let boxes_ul
let box_template let box_template
let rule_template // let rule_template
function initGlobals() { function initGlobals() {
server_config = JSON.parse(document.getElementById('m41config').text)
matches_table = document.getElementById("web-cfg-matches") matches_table = document.getElementById("web-cfg-matches")
match_row_template = document.getElementById("web-cfg-matches-row") match_row_template = document.getElementById("web-cfg-matches-row")
config = JSON.parse(document.getElementById('m41config').text) boxes_table = document.getElementById("web-cfg-boxes")
boxes_ul = document.getElementById("web-cfg-boxes") box_template = document.getElementById("web-cfg-box")
box_template = document.getElementById("web-cfg-boxes-li") // rule_template = document.getElementById("web-cfg-boxes-rule-li")
rule_template = document.getElementById("web-cfg-boxes-rule-li")
} }
function populate_match_table(matches_config) { function populate_match_table(matches_config) {
@ -207,35 +278,63 @@
} }
function populate_boxes_list(boxes_config) { function populate_boxes_list(boxes_config) {
for (const {name:box_name, rules} of boxes_config) { for (const {name:box_name, rules} of boxes_config) {
addBox() addBox()
const box = boxes_ul.lastElementChild const tbody = boxes_table.lastElementChild
const [{children: [,, header]}, rule_list ] = box.children const box = tbody.firstElementChild
header.innerText = box_name // console.log(box)
for (const {match_name, negate = false, stop_check = false} of rules ) { const [,
addRule(rule_list) {children: [box_text, ]},
const rule = rule_list.lastElementChild ,
{firstElementChild: match_select},
{firstElementChild: negate_check},
{firstElementChild: stop_check},
] = box.children
box_text.value = box_name
const [first_rule, ...rest] = rules
const {match_name, negate = false, stop = false} = first_rule
match_select.value = match_name
negate_check.checked = negate
stop_check.checked = stop
for (const {match_name, negate = false, stop_check = false} of rest ) {
addRule(box)
const rule = tbody.lastElementChild
const [, const [,
{firstElementChild: match_select}, {firstElementChild: match_select},
{firstElementChild: negateCheck}, {firstElementChild: negateCheck},
{firstElementChild: stopCheck} {firstElementChild: stopCheck}
] = rule.children ] = rule.children
negateCheck.checked = negate match_select.value = match_name
stopCheck.checked = stop_check negate_check.checked = negate
stop_check.checked = stop
} }
} }
} }
function addBox() { function addRule(box) {
let box_clone = box_template.content.cloneNode(true) box.parentElement.appendChild(box.cloneNode(true))
boxes_ul.appendChild(box_clone) box.children[0].rowSpan++;
box.children[1].rowSpan++;
const newrule = box.parentElement.lastElementChild
newrule.removeClass("fist-tr")
newrule.firstElementChild.remove()
newrule.firstElementChild.remove()
} }
function addRule(rules_list) { function addBox() {
let rule_clone = rule_template.content.cloneNode(true) let box_clone = box_template.content.cloneNode(true)
rules_list.appendChild(rule_clone) boxes_table.appendChild(box_clone)
} }
function moveUp(button) { function moveUp(button) {
const li = button.parentElement.parentElement.parentElement const li = button.parentElement.parentElement.parentElement
if (li.previousElementSibling != null) { if (li.previousElementSibling != null) {
@ -253,10 +352,10 @@
function main() { function main() {
initGlobals() initGlobals()
populate_match_table(config["matches"]) populate_match_table(server_config["matches"])
save() save()
document.getElementById("before").innerText = JSON.stringify(config["matches"], null, 2) document.getElementById("before").innerText = JSON.stringify(server_config["matches"], null, 2)
populate_boxes_list(config["boxes"]) populate_boxes_list(server_config["boxes"])
} }
function save() { function save() {
@ -278,53 +377,64 @@
<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 contentEditable></td> <td contentEditable class="multiline" ></td>
</tr> </tr>
</template> </template>
<template id="web-cfg-boxes-rule-li"> <template id="web-cfg-box">
<div class="m41-box-rule"> <tbody>
<div class="button-group"> <tr>
<button onClick="this.parentElement.parentElement.remove()">✗</button> <td class="box">
<button onClick="moveUp(this)">↑</button> <div class="button-group dummy">
<button onClick="moveDown(this)">↓</button> <button disabled>✗</button>
</div> <button disabled>↑</button>
<label> <button disabled>↓</button>
Match Name </div>
<select></select> <div class="button-group real">
</label> <button onClick="this.parentElement.parentElement.parentElement.parentElement.remove()">✗</button>
<label> <button onClick="moveUp(this)" class="real up">↑</button>
Negate <button disabled class="dummy up">↑</button>
<input type=checkbox> <button onClick="moveDown(this)" class="real down">↓</button>
</label> <button disabled class="dummy down">↓</button>
<label> </div>
Stop check </td>
<input type=checkbox> <td>
</label> <input type="text" contentEditable>
</div> <button onClick="addRule(this.parentElement.parentElement)">+</button>
</template> </td>
<template id="web-cfg-boxes-li"> <td class="rule">
<div class="m41-box"> <div class="button-group dummy">
<div class="m41-box-info"> <button disabled>✗</button>
<div class="button-group"> <button disabled>↑</button>
<button onClick="this.parentElement.parentElement.parentElement.remove()">✗</button> <button disabled>↓</button>
<button onClick="moveUp(this)">↑</button> </div>
<button onClick="moveDown(this)">↓</button> <div class="button-group real">
</div> <button onClick="this.parentElement.parentElement.parentElement.remove()">✗</button>
<button onClick="addRule(this.parentElement.nextElementSibling)">+</button> <button onClick="moveUp(this)">↑</button>
<span></span> <button disabled class="dummy up">↑</button>
</div> <button onClick="moveDown(this)">↓</button>
<div class="m41-box-rules"> <button disabled class="dummy down">↓</button>
</div> </div>
</div> </td>
<td>
<select></select>
</td>
<td>
<input type=checkbox>
</td>
<td>
<input type=checkbox>
</td>
</tr>
</tbody>
</template> </template>
<div class="outer"> <div class="outer">
<div class="inner"> <div class="inner">
<h1>Mail4one Web config</h1> <h1>Mail4one Web config</h1>
<table border id="web-cfg-matches"> <table id="web-cfg-matches">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
<th>Name</th> <th>Match</th>
<th>Type</th> <th>Type</th>
<th>Values</th> <th>Values</th>
</tr> </tr>
@ -336,10 +446,24 @@
<button onClick="addMatchRow()">Add Match</button> <button onClick="addMatchRow()">Add Match</button>
<button onClick="save()">Save</button> <button onClick="save()">Save</button>
</div> </div>
<h3>Boxes <button onClick="addBox()">+</button></h3> <h3>Boxes <button onClick="addBox()">+</button></h3>
<div id="web-cfg-boxes">
</div> <table id="web-cfg-boxes">
<thead>
<tr>
<th></th>
<th>Mailbox</th>
<th></th>
<th>Match</th>
<th>Invert</th>
<th>Stop</th>
</tr>
</thead>
</table>
<hr> <hr>
<h3>Before</h3> <h3>Before</h3>
<pre id="before"></pre> <pre id="before"></pre>
<hr> <hr>