okay-button for input

client/cssFiles/SEAWebClientGroup.css

@@ -179,6 +179,20 @@
 	display: none;
 }
 
+/* ------------------------------ okay-icon ------------------------------ */
+
+.icon-okay {
+	width: 18px;
+  	height: 18px;
+  	margin-top: 6px;
+  	margin-left: 4px;
+}
+
+.icon-okay:hover {
+	transform: scale(.8);
+	opacity: .6;
+}
+
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 /* INPUT ELEMENTS */
 

client/cssFiles/SEAWebClientMain.css

@@ -177,7 +177,7 @@ meta, body {
     justify-content: flex-end;
 }
 
-.panel-grapics-wide {
+.panel-graphics-wide {
 	padding-right: 28px;
 }
 

client/jsFiles/SEAWebClientCommunication.js

@@ -245,11 +245,7 @@ function updateStatus(component) {
         status_info.innerHTML = component.formatted;
     }
 
-    status_icon.classList.remove('icon-status-disabled');
+    status_icon.classList.remove('icon-status-disabled', 'icon-status-idle', 'icon-status-warn', 'icon-status-busy', 'icon-status-error');
-    status_icon.classList.remove('icon-status-idle');
-    status_icon.classList.remove('icon-status-warn');
-    status_icon.classList.remove('icon-status-busy');
-    status_icon.classList.remove('icon-status-error');
     row.classList.remove('row-disabled');
     right.classList.remove = 'col-right-disabled';
 

client/jsFiles/SEAWebClientGroup.js

@@ -154,8 +154,7 @@ function createRightColumnForModules(component) {
             component.type == 'pushbutton' ||
             component.type == 'checkbox' ||
             component.type == 'enum'
-        ) { 
+        ) {
-            console.log(component.type);
             let input_element = createType(component);
             if (component.type != 'pushbutton') {
                 let icon_edit = createIconEdit(input_element);
@@ -212,6 +211,9 @@ function createIconEdit (input_element) {
         hideInputElements();
         if (is_hidden) {
             input_element.classList.remove('input-element-hidden');
+            icon_edit.setAttribute('src', 'res/icon_edit_close.png');
+        } else {
+            icon_edit.setAttribute('src', 'res/icon_edit.png');
         }
     }
 
@@ -264,15 +266,23 @@ function createPushbutton(component) {
 
 function createInputText(component) {
     // Creates row-element containing input-item.
-    var command = component.command;
+    
     var input = createInputElement(component, 'input', 'input-text');
     input.type = "text";
     input.style.width = "100px";
+
+    // Prevent updates, while user is changing textfield
     input.addEventListener("focus", function(evt) {
         let elm = evt.target;
         setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0);
     });
 
+    let submit_btn = document.createElement('input');
+    submit_btn.setAttribute('type', 'image');
+    submit_btn.classList.add('icon-modules', 'icon-okay');
+    submit_btn.setAttribute('src', 'res/icon_okay.png');
+    submit_btn
+
     input.onkeydown = function (e) {
         if (e.key == "Escape") {
             // User decided to cancel
@@ -285,10 +295,6 @@ function createInputText(component) {
         }
     }
 
-    input.onclick = function (e) {
-        e.stopPropagation();
-    }
-
     input.onfocus = function () {
         input.oldValue = input.value;
         if (isTouchDevice)
@@ -297,47 +303,51 @@ function createInputText(component) {
             }, 1);
     }
 
-    input.onblur = function () {
+    // input.onclick = function (e) {
-        if (prompt) {
+    //     e.stopPropagation();
-            return false;
+    // }
-        }
+
-        var row = input.closest('div');
+    // input.onblur = function () {
-        row.classList.add('row-waiting-for-answer');
+    //     if (prompt) {
-        var value = input.value;
+    //         return false;
-        let oldValue = 'oldValue' in input ? input.oldValue : value;
+    //     }
-        if (!('actualValue' in input)) input.actualValue = oldValue;
+    //     var row = input.closest('div');
-            actualValue = input.actualValue;
+    //     row.classList.add('row-waiting-for-answer');
-        if (value == actualValue || value == oldValue ||
+    //     var value = input.value;
-            parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
+    //     let oldValue = 'oldValue' in input ? input.oldValue : value;
-            input.value = actualValue;
+    //     if (!('actualValue' in input)) input.actualValue = oldValue;
-            // nothing to do.
+    //         actualValue = input.actualValue;
-            row.classList.remove('row-waiting-for-answer');
+    //     if (value == actualValue || value == oldValue ||
-            return false;
+    //         parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
-        }
+    //         input.value = actualValue;
-        // User changed value and moved focus to other object.
+    //         // nothing to do.
-        alertify.confirm("", "You changed a field without pressing the return key.<br>"
+    //         row.classList.remove('row-waiting-for-answer');
-                + "Hint: press ESC for leaving a field unchanged.<b>"
+    //         return false;
-                + "You are connected with <b>" + clientTitle + "</b>.<br>"
+    //     }
-                + "Are you sure you want to change the value of<br><b>"
+    //     // User changed value and moved focus to other object.
-                + component.name + "</b> from <b>" + actualValue
+    //     alertify.confirm("", "You changed a field without pressing the return key.<br>"
-                + "</b> to <b>" + value + "</b>?", 
+    //             + "Hint: press ESC for leaving a field unchanged.<b>"
-        function () {
+    //             + "You are connected with <b>" + clientTitle + "</b>.<br>"
-            // User decided to proceed.
+    //             + "Are you sure you want to change the value of<br><b>"
-            row.classList.add('row-waiting-for-answer');
+    //             + component.name + "</b> from <b>" + actualValue
-            // Request for command
+    //             + "</b> to <b>" + value + "</b>?", 
-            sendCommand(s, command + " " + value);
+    //     function () {
-            resizeTextfield(input);
+    //         // User decided to proceed.
-            prompt = false;
+    //         row.classList.add('row-waiting-for-answer');
-            hideInputElements();
+    //         // Request for command
-        }, function () {
+    //         sendCommand(s, component.command + " " + value);
-            // User decided to cancel
+    //         resizeTextfield(input);
-            input.value = input.actualValue;
+    //         prompt = false;
-            resizeTextfield(input);
+    //         hideInputElements();
-            row.classList.remove('row-waiting-for-answer');
+    //     }, function () {
-            prompt = false;
+    //         // User decided to cancel
-            hideInputElements();
+    //         input.value = input.actualValue;
-        });
+    //         resizeTextfield(input);
-    }
+    //         row.classList.remove('row-waiting-for-answer');
+    //         prompt = false;
+    //         hideInputElements();
+    //     });
+    // }
 
     var form = document.createElement('form');
     form.onsubmit = function (e) {
@@ -355,19 +365,8 @@ function createInputText(component) {
         hideInputElements();
     };
     form.appendChild(input);
+    form.appendChild(submit_btn);
     return form;
-
-    function posTextfield(s, left) {
-        if (debug_group_daniel) {
-            console.log("%cfunction: posTextfield", "color:white;background:salmon");
-        }
-    
-        // var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
-        // var row = left.parentNode;
-        // content.scrollTop = row.offsetTop - 30;
-    
-        // ---------------------> Not working anymore since swiper was removed!!!
-    }
 }
 
 function createCheckbox(component) {
@@ -441,11 +440,18 @@ function createInputElement(component, tag='span', cls='col-right-modules') {
 
 /* ---------------------------------------------------------------------------------- */
 
+// Hides all input elements (input text, pushbotton, enum, checkbox)
+// Changes all iconEditClose (cross) back to iconEdit (pen)
 function hideInputElements(){
     let input_elements = document.getElementsByClassName('input-element');
     for (let i = 0; i < input_elements.length; i++) {
         input_elements[i].classList.add('input-element-hidden');
     }
+
+    let array_icon_edit = document.getElementsByClassName('icon-edit');
+    for (let i = 0; i < array_icon_edit.length; i++) {
+        array_icon_edit[i].setAttribute('src', 'res/icon_edit.png');
+    }
 }
 
 function resizeTextfield(input) {

client/jsFiles/SEAWebClientMain.js

@@ -158,13 +158,13 @@ window.onload = function() {
         } else {
             if (window.wideGraphs) {
                 window.wideGraphs = false;
-                document.getElementsByClassName('graphics')[0].classList.remove('panel-grapics-wide');
+                document.getElementsByClassName('graphics')[0].classList.remove('panel-graphics-wide');
                 // icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_sinus.png">';
                 icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_close.png">';
                 icon_log_container.classList.remove("icon-main-container-hidden");
             } else {
                 window.wideGraphs = true;
-                document.getElementsByClassName('graphics')[0].classList.add('panel-grapics-wide');
+                document.getElementsByClassName('graphics')[0].classList.add('panel-graphics-wide');
                 // icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_modules.png">';
                 icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_close.png">';
                 icon_log_container.classList.add("icon-main-container-hidden");