linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edit button for module block

Browse Source
This commit is contained in:
Daniel
2025-04-25 13:02:49 +02:00
parent 924116627f
commit a4b9ad17cd
3 changed files with 146 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/cssFiles/SEAWebClientGroup.css
View File

@ -42,13 +42,14 @@
} }
.row-clickable:hover { .row-clickable:hover {
background-color:WhiteSmoke; background-color:lightgray;
opacity: .7; /* opacity: .7; */
} }
.row-disabled { .row-disabled {
opacity: .3; /* opacity: .3; */
/* background-color: lightgray; */ background-color: WhiteSmoke;
color: dimgray
} }
.modules-icon { .modules-icon {
@ -196,6 +197,8 @@
color: black; color: black;
text-align: right; text-align: right;
margin-top: 4px; margin-top: 4px;
position: relative;
z-index: 100;
} }
::-ms-clear { /* remove the x in the input box on IE */ ::-ms-clear { /* remove the x in the input box on IE */
@ -283,6 +286,11 @@ option {
.push-button { .push-button {
border: 2px solid dimgray; border: 2px solid dimgray;
border-radius: 4px; border-radius: 4px;
display: inline-block;
width: 16px;
height: 16px;
top: 5px;
z-index: 50;
} }
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

124
client/jsFiles/SEAWebClientCommunication.js
View File

@ -161,7 +161,7 @@ function handleUpdateMessage(src, message) {
if (debugCommunication > 1) { if (debugCommunication > 1) {
console.log(message); console.log(message);
} }
updateValues(message, src); handleUpdate(message, src);
break; break;
} }
} }
@ -188,65 +188,42 @@ function resetTimer(src) {
}, 60000); }, 60000);
} }
function updateValues(message, src) { function handleUpdate(message, src) {
// Handles changes of parameter-values // Handles changes of parameter-values
for (var i = 0; i < message.updates.length; i++) { for (var i = 0; i < message.updates.length; i++) {
let component = message.updates[i]; let component = message.updates[i];
let comp_value = component.value;
let matches = document.getElementsByName(component.name);
// Check for status updates // Check for status updates
if (component.name.split(":")[1] == 'status') { if (component.name.split(":")[1] == 'status') {
updateStatus(component); updateStatus(component);
} }
// Check for target updates in the module block
if (component.name.split(":")[1] == 'target') {
updateTarget(component);
}
for (var j = 0; j < matches.length; j++) { updateValue(component);
let elem = matches[j]; }
let type = elem.__ctype__; // -> Show Dom-Properties }
if (type == "rdonly" || type == "rdlink") {
let text = htmlEscape(component.formatted);
if (text) {
elem.innerHTML = text;
}
} else if (type == "input") {
let row = elem.closest('div');
row.style.backgroundColor = "white";
let oldValue = ('oldValue' in elem) ? elem.oldValue : elem.value; function updateTarget(component) {
if (comp_value != elem.value && parseFloat(comp_value) != parseFloat(elem.value) && comp_value != oldValue) { let matches = document.getElementsByName(component.name);
if (elem == document.activeElement || oldValue != elem.value) { let elem = matches[0]; // Should be the only match
row.style.backgroundColor = "orange"; elem.value = component.value;
} else {
elem.value = comp_value; let row = elem.closest('div');
} row.style.backgroundColor = "white";
}
elem.actualValue = comp_value; let oldValue = ('oldValue' in elem) ? elem.oldValue : elem.value;
resizeTextfield(elem); if (component.value != elem.value && parseFloat(component.value) != parseFloat(elem.value) && component.value != oldValue) {
} else if (type == "checkbox") { if (elem == document.activeElement || oldValue != elem.value) {
let row = elem.closest('div'); row.style.backgroundColor = "orange";
row.style.backgroundColor = "white"; } else {
elem.value = component.value;
console.log('receive: ', comp_value);
if (comp_value == 'False' || comp_value == 'false' || comp_value == 0) {
elem.checked = false;
} else {
elem.checked = true;
}
} else if (type == "enum") {
elem.style.display = "block";
let row = elem.closest('div');
row.style.backgroundColor = "white";
let options = elem.childNodes;
for (var j = 0; j < options.length; j++) {
if (options[j].label == comp_value) {
elem.value = j + 1;
}
}
}
} }
} }
elem.actualValue = component.value;
resizeTextfield(elem);
} }
function updateStatus(component) { function updateStatus(component) {
@ -292,6 +269,57 @@ function updateStatus(component) {
} }
function updateValue(component) {
let matches = document.getElementsByName(component.name);
for (var j = 0; j < matches.length; j++) {
let elem = matches[j];
let type = elem.__ctype__; // -> Show Dom-Properties
if (type == "rdonly" || type == "rdlink") {
let text = htmlEscape(component.formatted);
if (text) {
elem.innerHTML = text;
}
} else if (type == "input") {
let row = elem.closest('div');
row.style.backgroundColor = "white";
let oldValue = ('oldValue' in elem) ? elem.oldValue : elem.value;
if (component.value != elem.value && parseFloat(component.value) != parseFloat(elem.value) && component.value != oldValue) {
if (elem == document.activeElement || oldValue != elem.value) {
row.style.backgroundColor = "orange";
} else {
elem.value = component.value;
}
}
elem.actualValue = component.value;
resizeTextfield(elem);
} else if (type == "checkbox") {
let row = elem.closest('div');
row.style.backgroundColor = "white";
console.log('receive: ', component.value);
if (component.value == 'False' || component.value == 'false' || component.value == 0) {
elem.checked = false;
} else {
elem.checked = true;
}
} else if (type == "enum") {
elem.style.display = "block";
let row = elem.closest('div');
row.style.backgroundColor = "white";
let options = elem.childNodes;
for (var j = 0; j < options.length; j++) {
if (options[j].label == comp_value) {
elem.value = j + 1;
}
}
}
}
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// XMLHttpRequest // XMLHttpRequest

82
client/jsFiles/SEAWebClientGroup.js
View File

@ -51,7 +51,7 @@ function createRowForModules(component) {
let row = appendToContent(left, right); let row = appendToContent(left, right);
row.onclick = function () { row.onclick = function () {
getGroup(s, component.title); getGroup(s, component.title);
} }
row.classList.add('row-clickable'); row.classList.add('row-clickable');
return row; return row;
@ -74,8 +74,7 @@ function createRowForParameters(component) {
component.type == 'checkbox' || component.type == 'checkbox' ||
component.type == 'enum' component.type == 'enum'
) { ) {
let input_element; var input_element;
console.log(component);
switch (component.type) { switch (component.type) {
case 'enum': case 'enum':
input_element = createEnum(component); input_element = createEnum(component);
@ -91,10 +90,19 @@ function createRowForParameters(component) {
break; break;
} }
input_element.classList.add('input-element', 'input-element-hidden'); input_element.classList.add('input-element', 'input-element-hidden');
if (component.type != 'pushbutton') {
let icon_edit = createIconEdit();
right.appendChild(icon_edit);
}
right.appendChild(input_element);
}
return appendToContent(left, right);
function createIconEdit () {
let icon_edit = document.createElement('img'); let icon_edit = document.createElement('img');
icon_edit.setAttribute('src', 'res/icon_edit.png'); icon_edit.setAttribute('src', 'res/icon_edit.png');
icon_edit.classList.add('modules-icon', 'edit-icon'); icon_edit.classList.add('modules-icon', 'edit-icon');
icon_edit.onclick = function () { icon_edit.onclick = function () {
let is_hidden = input_element.classList.contains('input-element-hidden'); let is_hidden = input_element.classList.contains('input-element-hidden');
hideInputElements(); hideInputElements();
@ -102,10 +110,9 @@ function createRowForParameters(component) {
input_element.classList.remove('input-element-hidden'); input_element.classList.remove('input-element-hidden');
} }
} }
right.appendChild(icon_edit);
right.appendChild(input_element); return icon_edit;
} }
return appendToContent(left, right);
} }
function appendToContent(left, right) { function appendToContent(left, right) {
@ -153,7 +160,6 @@ function createLeftColumnForModules(component) {
function createInfoIcon(component) { function createInfoIcon(component) {
let icon_info = document.createElement('img'); let icon_info = document.createElement('img');
icon_info.setAttribute('src', 'res/icon_info.png'); icon_info.setAttribute('src', 'res/icon_info.png');
icon_info.setAttribute('name', component.title + ':status');
icon_info.classList.add('modules-icon', 'icon-info'); icon_info.classList.add('modules-icon', 'icon-info');
if (isTouchDevice) { if (isTouchDevice) {
icon_info.onclick = function (event) { icon_info.onclick = function (event) {
@ -185,13 +191,33 @@ function createRightColumnForModules(component) {
value.__ctype__ = component.type; value.__ctype__ = component.type;
right.appendChild(value); right.appendChild(value);
if (component.targetname) { if (component.targetname) {
let edit = document.createElement('img');
edit.setAttribute('src', 'res/icon_edit.png'); var input_element = createInput(component);
edit.classList.add('modules-icon'); input_element.classList.add('input-element', 'input-element-hidden');
edit.classList.add('edit-icon');
right.appendChild(edit); let icon_edit = createIconEdit();
right.appendChild(icon_edit);
right.appendChild(input_element);
} }
return right; return right;
function createIconEdit () {
let icon_edit = document.createElement('img');
icon_edit.setAttribute('src', 'res/icon_edit.png');
icon_edit.classList.add('modules-icon', 'edit-icon');
icon_edit.onclick = function (event) {
event.stopPropagation()
let is_hidden = input_element.classList.contains('input-element-hidden');
hideInputElements();
if (is_hidden) {
input_element.classList.remove('input-element-hidden');
}
}
return icon_edit;
}
} }
/* ---------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------- */
@ -199,18 +225,14 @@ function createRightColumnForModules(component) {
function createPushbutton(component) { function createPushbutton(component) {
// Creates row-element containing a push button // Creates row-element containing a push button
console.log ('create pushbutton'); var button = createInputElement(component, 'button', 'push-button');
var elem = createInputElement(component); button.setAttribute('type', 'button');
elem.classList.add("push-button");
elem.onclick = function (e) { button.onclick = function () {
console.log('click pushbutton'); console.log('click pushbutton');
let elem = e.target;
let row = elem.closest('div');
elem.style.backgroundColor = "orangered";
// Request for command
sendCommand(s, component.command); sendCommand(s, component.command);
} }
return elem; return button;
} }
function createInput(component) { function createInput(component) {
@ -236,6 +258,10 @@ function createInput(component) {
} }
} }
input.onclick = function (e) {
e.stopPropagation();
}
input.onfocus = function () { input.onfocus = function () {
input.oldValue = input.value; input.oldValue = input.value;
if (isTouchDevice) if (isTouchDevice)
@ -292,7 +318,11 @@ function createInput(component) {
row.style.backgroundColor = "orangered"; row.style.backgroundColor = "orangered";
// Request for command // Request for command
input.actualValue = input.value; input.actualValue = input.value;
sendCommand(s, component.name + " " + input.value); if (component.targetname) {
sendCommand(s, component.targetname + " " + input.value);
} else {
sendCommand(s, component.name + " " + input.value);
}
input.blur(); input.blur();
hideInputElements(); hideInputElements();
}; };
@ -373,7 +403,11 @@ function createInputElement(component, tag='span', cls='col-right-modules') {
input_element.classList.add('col-right'); input_element.classList.add('col-right');
if (cls) if (cls)
input_element.classList.add(cls); input_element.classList.add(cls);
input_element.setAttribute('name', component.name); if (component.targetname) {
input_element.setAttribute('name', component.targetname);
} else {
input_element.setAttribute('name', component.name);
}
// Add DOM-property // Add DOM-property
input_element.__ctype__ = component.type; input_element.__ctype__ = component.type;
return input_element; return input_element;