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
committed by Markus Zolliker
parent df582a2f23
commit e6e69c8f5c
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 {
background-color:WhiteSmoke;
opacity: .7;
background-color:lightgray;
/* opacity: .7; */
}
.row-disabled {
opacity: .3;
/* background-color: lightgray; */
/* opacity: .3; */
background-color: WhiteSmoke;
color: dimgray
}
.modules-icon {
@ -196,6 +197,8 @@
color: black;
text-align: right;
margin-top: 4px;
position: relative;
z-index: 100;
}
::-ms-clear { /* remove the x in the input box on IE */
@ -283,6 +286,11 @@ option {
.push-button {
border: 2px solid dimgray;
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) {
console.log(message);
}
updateValues(message, src);
handleUpdate(message, src);
break;
}
}
@ -188,65 +188,42 @@ function resetTimer(src) {
}, 60000);
}
function updateValues(message, src) {
function handleUpdate(message, src) {
// Handles changes of parameter-values
for (var i = 0; i < message.updates.length; i++) {
let component = message.updates[i];
let comp_value = component.value;
let matches = document.getElementsByName(component.name);
// Check for status updates
if (component.name.split(":")[1] == 'status') {
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++) {
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";
updateValue(component);
}
}
let oldValue = ('oldValue' in elem) ? elem.oldValue : elem.value;
if (comp_value != elem.value && parseFloat(comp_value) != parseFloat(elem.value) && comp_value != oldValue) {
if (elem == document.activeElement || oldValue != elem.value) {
row.style.backgroundColor = "orange";
} else {
elem.value = comp_value;
}
}
elem.actualValue = comp_value;
resizeTextfield(elem);
} else if (type == "checkbox") {
let row = elem.closest('div');
row.style.backgroundColor = "white";
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;
}
}
}
function updateTarget(component) {
let matches = document.getElementsByName(component.name);
let elem = matches[0]; // Should be the only match
elem.value = component.value;
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);
}
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

82
client/jsFiles/SEAWebClientGroup.js
View File

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