Edit button for module block

client/cssFiles/SEAWebClientGroup.css

@@ -42,13 +42,14 @@
 }
 
 .row-clickable:hover {
-	background-color:WhiteSmoke;
+	background-color:lightgray;
-	opacity: .7;
+	/* opacity: .7; */
 }
 
 .row-disabled {
-	opacity: .3;
+	/* opacity: .3; */
-	/* background-color: lightgray; */
+	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;
 }
 
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

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
-        for (var j = 0; j < matches.length; j++) {
+        if (component.name.split(":")[1] == 'target') {
-            let elem = matches[j];
+            updateTarget(component);
-            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") {
+
+        updateValue(component);
+    }
+}
+
+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 (comp_value != elem.value && parseFloat(comp_value) != parseFloat(elem.value) && comp_value != oldValue) {
+    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 = comp_value;
+            elem.value = component.value;
         }
     }
-                elem.actualValue = comp_value;
+    elem.actualValue = component.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 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
 

client/jsFiles/SEAWebClientGroup.js

@@ -74,8 +74,7 @@ function createRowForParameters(component) {
         component.type == 'checkbox' ||
         component.type == 'enum'
     ) {
-        let input_element;
+        var input_element;
-        console.log(component);
         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');
+        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;
+
+    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 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');
-        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;
+        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);
+    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;