} else {
- if (json.type == "select") {
- //if part of a table, use the saved list of options, otheriwise create select and uiFun will get the options
+ if (!isPartOfTable) {
+ newNode = cE("p");
+ if (json.type != "button") newNode.appendChild(labelNode); //add label
+ }
- //newNode has no id here ...
+ let valueNode;
+ let rangeValueNode = null;
+ // let buttonSaveNode = null;
+ // let buttonCancelNode = null;
- if (!isPartOfTable) {
- newNode = cE("p");
- if (json.type != "button") newNode.appendChild(labelNode); //add label
- }
+ if (json.type == "select") {
- let valueNode;
if (json.ro) { //e.g. for reset/restart reason: do not show a select but only show the selected option
valueNode = cE("span");
if (json.value) valueNode.innerText = json.value;
@@ -218,10 +223,12 @@ function generateHTML(parentNode, json, rowNr = -1) {
// with ( in processUpdate)
valueNode = cE("select");
- valueNode.addEventListener('change', (event) => {console.log("select change", event);setSelect(event.target);});
+ valueNode.addEventListener('change', (event) => {console.log("select change", event);sendValue(event.target);});
+ //if part of a table, use the saved list of options, otheriwise create select and uiFun will get the options
if (isPartOfTable) {
- // console.log("genHTML select table", parentNode, json, rowNr, gId(json.id), gId(json.id).innerText, gId(json.id).innerHTML);
+ // if (json.id == "insfx")
+ // console.log("genHTML select table", parentNode, json, rowNr, gId(json.id), gId(json.id).innerHTML);
valueNode.innerHTML = gId(json.id).innerHTML; //gId(json.id) is the where uiFun assigned to option values to
// let index = 0;
// // for (var value of json.select) {
@@ -235,74 +242,45 @@ function generateHTML(parentNode, json, rowNr = -1) {
}
}
- if (!isPartOfTable) {
- valueNode.id = json.id;
- newNode.appendChild(valueNode);
- } else {
- valueNode.id = json.id + "#" + rowNr;
- newNode = valueNode;
- }
}
else if (json.type == "canvas") {
//
- let pNode = cE("p");
- pNode.appendChild(labelNode);
-
- //3 lines of code to only add 🔍
- let valueNode = cE("span");
- valueNode.innerText= "🔍";
- pNode.appendChild(valueNode);
-
- parentNode.appendChild(pNode);
-
- newNode = cE("canvas");
- newNode.id = json.id;
- newNode.addEventListener('dblclick', (event) => {toggleModal(event.target);});
+
+ if (!isPartOfTable) {
+ newNode.appendChild(labelNode);
+ //3 lines of code to only add 🔍
+ let spanNode = cE("span");
+ spanNode.innerText= "🔍";
+ newNode.appendChild(spanNode);
+ }
+
+ valueNode = cE("canvas");
+ // valueNode.id = json.id;
+ valueNode.addEventListener('dblclick', (event) => {toggleModal(event.target);});
}
else if (json.type == "textarea") {
- let pNode = cE("p");
- pNode.appendChild(labelNode);
- parentNode.appendChild(pNode);
-
- newNode = cE("textarea");
- newNode.id = json.id;
- newNode.readOnly = json.ro;
- newNode.addEventListener('dblclick', (event) => {toggleModal(event.target);});
-
- if (json.value) newNode.innerText = json.value;
- // newNode.appendChild(textareaNode);
- pNode.innerText += "🔍";
- }
- else if (json.type == "url") {
- //tbd: th and table row outside this if
if (!isPartOfTable) {
- newNode = cE("p");
- if (json.type != "button") newNode.appendChild(labelNode); //add label
+ newNode.appendChild(labelNode);
+ //3 lines of code to only add 🔍
+ let spanNode = cE("span");
+ spanNode.innerText= "🔍";
+ newNode.appendChild(spanNode);
}
+
+ valueNode = cE("textarea");
+ valueNode.readOnly = json.ro;
+ valueNode.addEventListener('dblclick', (event) => {toggleModal(event.target);});
+
+ if (json.value) valueNode.innerText = json.value;
+ }
+ else if (json.type == "url") {
- let valueNode = cE("a");
+ valueNode = cE("a");
valueNode.setAttribute('href', json.value);
// valueNode.setAttribute('target', "_blank"); //does not work well on mobile
valueNode.innerText = json.value;
- if (!isPartOfTable) {
- valueNode.id = json.id;
- newNode.appendChild(valueNode);
- } else {
- valueNode.id = json.id + "#" + rowNr;
- newNode = valueNode;
- }
} else { //input
- if (!isPartOfTable) {
- newNode = cE("p");
- if (json.type != "button") newNode.appendChild(labelNode); //add label
- }
-
- let rangeValueNode = null;
- // let buttonSaveNode = null;
- // let buttonCancelNode = null;
-
- let valueNode;
//type specific actions
if (json.type == "checkbox") {
@@ -310,13 +288,13 @@ function generateHTML(parentNode, json, rowNr = -1) {
valueNode.type = json.type;
valueNode.disabled = json.ro;
if (json.value) valueNode.checked = json.value;
- valueNode.addEventListener('change', (event) => {console.log(json.type + " change", event);setCheckbox(event.target);});
+ valueNode.addEventListener('change', (event) => {console.log(json.type + " change", event);sendChecked(event.target);});
} else if (json.type == "button") {
valueNode = cE("input");
valueNode.type = json.type;
valueNode.disabled = json.ro;
valueNode.value = initCap(json.id);
- valueNode.addEventListener('click', (event) => {console.log(json.type + " click", event);setButton(event.target);});
+ valueNode.addEventListener('click', (event) => {console.log(json.type + " click", event);sendValue(event.target);});
} else if (json.type == "range") {
valueNode = cE("input");
valueNode.type = json.type;
@@ -332,7 +310,7 @@ function generateHTML(parentNode, json, rowNr = -1) {
});
//server value changes after draging the slider (onchange)
valueNode.addEventListener('change', (event) => {
- setInput(event.target);
+ sendValue(event.target);
});
rangeValueNode = cE("span");
rangeValueNode.id = json.id + "_rv"; //rangeValue
@@ -347,7 +325,7 @@ function generateHTML(parentNode, json, rowNr = -1) {
valueNode = cE("input");
valueNode.type = json.type;
if (json.value) valueNode.value = json.value;
- valueNode.addEventListener('change', (event) => {console.log(json.type + " change", event);setInput(event.target);});
+ valueNode.addEventListener('change', (event) => {console.log(json.type + " change", event);sendValue(event.target);});
// if (["text", "password", "number"].includes(json.type) ) {
// buttonSaveNode = cE("text");
// buttonSaveNode.innerText = "✅";
@@ -368,19 +346,20 @@ function generateHTML(parentNode, json, rowNr = -1) {
}
} //not checkbox or button or range
- if (!isPartOfTable) {
- valueNode.id = json.id;
- newNode.appendChild(valueNode);
- } else {
- valueNode.id = json.id + "#" + rowNr;
- newNode = valueNode;
- }
-
- if (rangeValueNode) newNode.appendChild(rangeValueNode); //_rv value of range / sliders
- // if (buttonSaveNode) newNode.appendChild(buttonSaveNode);
- // if (buttonCancelNode) newNode.appendChild(buttonCancelNode);
} //input type
+
+ if (!isPartOfTable) {
+ valueNode.id = json.id;
+ newNode.appendChild(valueNode);
+ } else {
+ valueNode.id = json.id + "#" + rowNr;
+ newNode = valueNode;
+ }
+ if (rangeValueNode) newNode.appendChild(rangeValueNode); //_rv value of range / sliders
+ // if (buttonSaveNode) newNode.appendChild(buttonSaveNode);
+ // if (buttonCancelNode) newNode.appendChild(buttonCancelNode);
+
//disable drag of parent screenBox
newNode.draggable = true;
newNode.addEventListener('dragstart', (event) => {event.preventDefault(); event.stopPropagation();});
@@ -389,29 +368,31 @@ function generateHTML(parentNode, json, rowNr = -1) {
if (newNode) parentNode.appendChild(newNode); //add new node to parent
- //don't call uiFun on rowNrs (for the moment)
+ //don't call uiFun on table rows (the table header calls uiFun and propagate this to table row columns in processVarNode when needed - e.g. select)
if (!isPartOfTable) {
//call ui Functionality, if defined (to set label, comment, select etc)
if (json.uiFun >= 0) { //>=0 as element in var
uiFunCommands.push(json.id);
- if (uiFunCommands.length > 8) { //every 10 vars (to respect responseDoc size) check WS_EVT_DATA info
+ if (uiFunCommands.length > 8) { //every 8 vars (to respect responseDoc size) check WS_EVT_DATA info
flushUIFunCommands();
}
}
+ }
- if (json.n) { //multple details
- //add a div with _n extension and details have this as parent
- if (ndivNeeded) {
- let divNode = cE("div");
- divNode.id = json.id + "_n";
- divNode.classList.add("ndiv");
- newNode.appendChild(divNode);
- generateHTML(divNode, json.n, rowNr);
- }
- else
- generateHTML(newNode, json.n, rowNr); //details (e.g. module)
+ if (json.n) { //multple details
+ //add a div with _n extension and details have this as parent
+ if (ndivNeeded) {
+ let divNode = cE("div");
+ divNode.id = json.id + "_n";
+ divNode.classList.add("ndiv");
+ newNode.appendChild(divNode);
+ generateHTML(divNode, json.n, rowNr);
}
+ else
+ generateHTML(newNode, json.n, rowNr); //details (e.g. module)
}
+ // if (rowNr != -1)
+ // newNode.id += "#" + rowNr;
return newNode;
} //not an array
}
@@ -426,10 +407,11 @@ function flushUIFunCommands() {
}
}
+//process json from server
function processUpdate(json) {
// console.log("processUpdate", json);
- if (json.id) { //this is a var object
- console.log("processUpdate variable", gId(json.id), json.n);
+ if (json.id) { //this is a var object so create this object using generateHTML
+ console.log("processUpdate variable", gId(json.id), json);
if (gId(json.id + "_n"))
gId(json.id + "_n").remove();
if (json.n) {
@@ -441,65 +423,108 @@ function processUpdate(json) {
}
flushUIFunCommands(); //make sure uiFuns of new elements are called
}
- else { //uiFun or {variable:{label:value}}
+ else { //loop over keys
for (var key of Object.keys(json)) {
- if (key != "uiFun") { //was the request
+ //special commands
+ if (key == "uiFun") {
+ console.log("processUpdate no action", key, json[key]);
+ }
+ else if (key == "view") {
+ console.log("processUpdate no action", key, json[key]);
+ }
+ else if (key == "updrow") { //update the row of a table
+ // console.log("processUpdate", key, json[key]);
+ let tablerowObject = json[key];
+ for (var tableId of Object.keys(tablerowObject)) {
+ let tableRows = tablerowObject[tableId];
+ let tableNode = gId(tableId);
+ // console.log(" ", tableNode);
+ if (Array.isArray(tableRows)) {
+ for (let tableRow of tableRows) {
+ // console.log(" ", tableId, tableRow);
+ }
+ }
+ for (var i = 0, row; row = tableNode.rows[i]; i++) {
+ if (i != 0 && row.cells[0].innerText == tableRows[0][0]) {
+ console.log(" row", i, row);
+ for (var j = 0, col; col = row.cells[j]; j++) { //coll is a
+ // console.log(" cell", i, j, col);
+ processVarNode(col.firstChild, col.firstChild.id, {value:tableRows[0][j]}); // .firstChild is the cell e.g.
+ }
+ }
+ }
+ } //tableId
+ }
+ else { //{variable:{label:value}}
if (gId(key)) { //is the key a var?
processVarNode(gId(key), key, json[key]);
}
else
console.log("processUpdate id not found in dom", key, json[key]);
- } //key != uiFun
+ }
} //for keys
} //not id
} //processUpdate
+//do something with an existing (variable) node, key is an existing node, json is what to do with it
function processVarNode(node, key, json) {
let overruleValue = false;
+
+ // let node = gId(key);
+ // if (rowNr != -1)
+ // node = gId(key + "#" + rowNr);
if (json.hasOwnProperty("label")) {
- if (key != "insTbl") // tbd: table should not update
- console.log("processVarNode label", key, json.label);
+ // if (key != "insTbl") // tbd: table should not update
+ console.log("processVarNode label", key, json.label);
if (node.nodeName.toLocaleLowerCase() == "input" && node.type == "button") {
node.value = initCap(json.label);
}
else {
let labelNode;
if (node.nodeName.toLocaleLowerCase() == "canvas" || node.nodeName.toLocaleLowerCase() == "table")
- labelNode = node.previousSibling.firstChild; // before /
+ labelNode = node.previousSibling.firstChild; // before or
else if (node.nodeName.toLocaleLowerCase() == "th") //table header
labelNode = node; //the
else
labelNode = node.parentNode.firstChild; // before within
labelNode.innerText = initCap(json.label);
}
- }
+ } //label
+
if (json.hasOwnProperty("comment")) {
- if (key != "insTbl") // tbd: table should not update
- console.log("processVarNode comment", key, json.comment);
- // normal:
- // table or canvas
- // 1) if exist then replace else add
- let parentNode;
- if (node.nodeName.toLocaleLowerCase() == "canvas" || node.nodeName.toLocaleLowerCase() == "table")
- parentNode = node.previousSibling; // before /
- else
- parentNode = node.parentNode;
- let commentNode = parentNode.querySelector('comment');
- // console.log("commentNode", commentNode);
- if (!commentNode) { //create if not exist
- commentNode = cE("comment");
- //if a div node exists (for details - ndiv) then place the comment before the div node
- let divNode = parentNode.querySelector('div');
- if (divNode)
- parentNode.insertBefore(commentNode, divNode);
+
+ if (node.nodeName.toLocaleLowerCase() != "th") { //no comments on table header
+ // normal:
+ // table or canvas
+ // 1) if exist then replace else add
+ let parentNode;
+ if (node.nodeName.toLocaleLowerCase() == "canvas" || node.nodeName.toLocaleLowerCase() == "textarea" || node.nodeName.toLocaleLowerCase() == "table")
+ parentNode = node.previousSibling; // before or