From a4b9ad17cdbe992fec8ea7d1de9de74c582cbc1b Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 25 Apr 2025 13:02:49 +0200 Subject: [PATCH] Edit button for module block --- client/cssFiles/SEAWebClientGroup.css | 16 ++- client/jsFiles/SEAWebClientCommunication.js | 124 ++++++++++++-------- client/jsFiles/SEAWebClientGroup.js | 82 +++++++++---- 3 files changed, 146 insertions(+), 76 deletions(-) diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css index 95a6749..564662c 100644 --- a/client/cssFiles/SEAWebClientGroup.css +++ b/client/cssFiles/SEAWebClientGroup.css @@ -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; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js index aaa4365..faf76ec 100644 --- a/client/jsFiles/SEAWebClientCommunication.js +++ b/client/jsFiles/SEAWebClientCommunication.js @@ -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 diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index 9b52d37..f9a9ffe 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/client/jsFiles/SEAWebClientGroup.js @@ -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;