pushbutton changed to link in left column

client/cssFiles/SEAWebClientGroup.css

@@ -138,6 +138,18 @@
 	display: inline-block;
 }
 
+
+/* ------------------------------ pushbutton ------------------------------ */
+
+.push-button-active {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.push-button-active:hover {
+	color: blue;
+}
+
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 /* right */
 
@@ -165,9 +177,11 @@
 
 .icon-edit {
 	position: absolute;
-  	top: 4px;
+  	top: 7px;
-  	right: 2px;
+  	right: 0;
 	cursor: pointer;
+	width: 14px;
+	height: 14px;
 }
 
 .icon-edit:hover {
@@ -182,9 +196,9 @@
 /* ------------------------------ okay-icon ------------------------------ */
 
 .icon-okay {
-	width: 18px;
+	width: 14px;
-  	height: 18px;
+  	height: 14px;
-  	margin-top: 6px;
+  	margin-top: 7px;
   	margin-left: 4px;
 }
 
@@ -201,12 +215,7 @@
   	text-align: right;
 }
 
-.input-element-button {
+.input-element-hidden {
-	display: block;
-	text-align: right;
-}
-
-.input-element-hidden, .input-element-button-hidden {
 	display: none;
 }
 
@@ -303,19 +312,6 @@ option {
 	opacity: 0.85;
 }
 
-/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
-/* PUSH-BUTTON */
-
-.push-button {
-	border: 2px solid dimgray;
-	border-radius: 4px;
-	display: inline-block;
-  	width: 16px;
-  	height: 16px;
-  	top: 5px;
-	z-index: 50;
-}
-
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 /* PANEL <- moved here from SEAWebClientSwiper.css */
 .panel {

client/jsFiles/SEAWebClientCommunication.js

@@ -216,7 +216,6 @@ 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.classList.remove('row-waiting-for-answer');
 
@@ -229,8 +228,10 @@ function updateTarget(component) {
         }
     }
     elem.actualValue = component.value;
+    if(elem.__ctype__ == 'input') {
         resizeTextfield(elem);
     }
+}
 
 function updateStatus(component) {
     let matches = document.getElementsByName(component.name);

client/jsFiles/SEAWebClientGroup.js

@@ -88,6 +88,19 @@ function createLeftColumnForModules(component) {
     let modules_title = document.createElement('span');
     modules_title.classList.add('modules-title');
     modules_title.innerHTML = component.title;
+    if (component.type == 'pushbutton') {
+        modules_title.classList.add('push-button');
+        if (writePermission == true) {
+            modules_title.classList.add('push-button-active');
+        }
+        modules_title.onclick = function () {
+            if (writePermission == true) {
+                let row = button.closest('div');
+                row.classList.add('row-waiting-for-answer');
+                sendCommand(s, component.command);
+            }
+        }
+    }
     left.appendChild(modules_title);
     if (component.statusname) {
         let status_info = document.createElement('span');
@@ -135,8 +148,29 @@ function createLeftColumnForModules(component) {
 function createLeftColumnForParameters(component) {
     let left = document.createElement('span');
     left.classList.add('col-left');
+    if (component.type == 'pushbutton') {
+        left.appendChild(createPushButton (component));
+    } else {
         left.innerHTML = component.title;
+    }
     return left;
+
+    function createPushButton (component) {
+        let button = document.createElement('span');
+        button.classList.add('push-button');
+        if (writePermission == true) {
+            button.classList.add('push-button-active');
+        }
+        button.innerHTML = component.title;
+        button.onclick = function () {
+            if (writePermission == true) {
+                let row = button.closest('div');
+                row.classList.add('row-waiting-for-answer');
+                sendCommand(s, component.command);
+            }
+        }
+        return button;
+    }
 }
 
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
@@ -151,15 +185,12 @@ function createRightColumnForModules(component) {
     
     if (component.targetname) {
         if (component.type == 'input' ||
-            component.type == 'pushbutton' ||
             component.type == 'checkbox' ||
             component.type == 'enum'
         ) {
             let input_element = createType(component);
-            if (component.type != 'pushbutton') {
             let icon_edit = createIconEdit(input_element);
             right.appendChild(icon_edit);
-            }
             right.appendChild(input_element);
         }
     }
@@ -174,15 +205,12 @@ function createRightColumnForParameters(component) {
     right.appendChild(createValue(component));
     
     if (component.type == 'input' ||
-        component.type == 'pushbutton' ||
         component.type == 'checkbox' ||
         component.type == 'enum'
     ) {
         let input_element = createType(component);
-        if (component.type != 'pushbutton') {
         let icon_edit = createIconEdit(input_element);
         right.appendChild(icon_edit);
-        }
         right.appendChild(input_element);
     }
     return right;
@@ -227,13 +255,6 @@ function createType (component) {
             input_element = createEnum(component);
             input_element.classList.add('input-element', 'input-element-hidden');
             break; 
-        case 'pushbutton':
-            input_element = createPushbutton(component);
-            input_element.classList.add('input-element-button');
-            if (writePermission == false) {
-                input_element.classList.add('input-element-button-hidden');
-            }
-            break;  
         case 'input':
             input_element = createInputText(component);
             input_element.classList.add('input-element', 'input-element-hidden');
@@ -249,20 +270,6 @@ function createType (component) {
 /* ---------------------------------------------------------------------------------- */
 // input elements
 
-function createPushbutton(component) {
-    // Creates row-element containing a push button
-    var button = createInputElement(component, 'button', 'push-button');
-    button.setAttribute('type', 'button');
-    
-    button.onclick = function () {
-        let row = button.closest('div');
-        // row.classList.add('row-waiting-for-answer');
-        sendCommand(s, component.command);
-    }
-    let elem = document.createElement('span');
-    elem.appendChild(button);
-    return elem;
-}
 
 function createInputText(component) {
     // Creates row-element containing input-item.
@@ -270,19 +277,15 @@ function createInputText(component) {
     var input = createInputElement(component, 'input', 'input-text');
     input.type = "text";
     input.style.width = "100px";
-
+    input.onclick = function (e) {
+        e.stopPropagation();
+    }
     // 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
@@ -303,52 +306,6 @@ function createInputText(component) {
             }, 1);
     }
 
-    // input.onclick = function (e) {
-    //     e.stopPropagation();
-    // }
-
-    // input.onblur = function () {
-    //     if (prompt) {
-    //         return false;
-    //     }
-    //     var row = input.closest('div');
-    //     row.classList.add('row-waiting-for-answer');
-    //     var value = input.value;
-    //     let oldValue = 'oldValue' in input ? input.oldValue : value;
-    //     if (!('actualValue' in input)) input.actualValue = oldValue;
-    //         actualValue = input.actualValue;
-    //     if (value == actualValue || value == oldValue ||
-    //         parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
-    //         input.value = actualValue;
-    //         // nothing to do.
-    //         row.classList.remove('row-waiting-for-answer');
-    //         return false;
-    //     }
-    //     // User changed value and moved focus to other object.
-    //     alertify.confirm("", "You changed a field without pressing the return key.<br>"
-    //             + "Hint: press ESC for leaving a field unchanged.<b>"
-    //             + "You are connected with <b>" + clientTitle + "</b>.<br>"
-    //             + "Are you sure you want to change the value of<br><b>"
-    //             + component.name + "</b> from <b>" + actualValue
-    //             + "</b> to <b>" + value + "</b>?", 
-    //     function () {
-    //         // User decided to proceed.
-    //         row.classList.add('row-waiting-for-answer');
-    //         // Request for command
-    //         sendCommand(s, component.command + " " + value);
-    //         resizeTextfield(input);
-    //         prompt = false;
-    //         hideInputElements();
-    //     }, function () {
-    //         // User decided to cancel
-    //         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) {
         e.preventDefault();
@@ -361,11 +318,12 @@ function createInputText(component) {
         } else {
             sendCommand(s, component.name + " " + input.value);
         }
+        row.classList.add('row-waiting-for-answer');
         input.blur();
         hideInputElements();
     };
     form.appendChild(input);
-    form.appendChild(submit_btn);
+    form.appendChild(createSubmitButton());
     return form;
 }
 
@@ -373,21 +331,21 @@ function createCheckbox(component) {
     // Creates row-element containing checkbox-item
     var input = createInputElement(component, 'input', 'parameter-checkbox');
     input.type = "checkbox";
-    
+    input.onclick = function (e) {
-    input.onclick = function () {
+        e.stopPropagation;
-        handleCheckbox();
     }
 
-    function handleCheckbox() {
+    var form = document.createElement('form');
-        let row = input.closest('div');
+    form.onsubmit = function (e) {
+        e.preventDefault();
+        var row = form.closest('div');
         row.classList.add('row-waiting-for-answer');
         sendCommand(s, component.command + " " + input.checked);
-        // hideInputElements();
+        hideInputElements();
     };
-
+    form.appendChild(input);
-    let right = document.createElement('span');
+    form.appendChild(createSubmitButton());
-    right.appendChild(input);
+    return form;
-    return right;
 }
 
 function createEnum(component) {
@@ -438,6 +396,17 @@ function createInputElement(component, tag='span', cls='col-right-modules') {
     return input_element;
 }
 
+function createSubmitButton () {
+    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.onclick = function (e) {
+        e.stopPropagation();
+    }
+    return submit_btn;
+}
+
 /* ---------------------------------------------------------------------------------- */
 
 // Hides all input elements (input text, pushbotton, enum, checkbox)

client/jsFiles/SEAWebClientMain.js

@@ -185,24 +185,22 @@ window.onload = function() {
 
     icon_lock_container.onclick = function(){
         let array_icon_edit = document.getElementsByClassName('icon-edit');
-        let array_button = document.getElementsByClassName('input-element-button');
+        let array_pushbutton = document.getElementsByClassName('push-button');
+
         if (writePermission == false) { 
             alertify.prompt( "WRITE PERMISSION", "Current device: <b>"+ window.device + "</b><p>Please confirm the instrument:", ""
             , function(evt, value) {
                 // User decided to proceed
-                if (window.instrument.toUpperCase() === value.toUpperCase()) {
+                if (window.instrument.toUpperCase() == value.toUpperCase()) {
                     writePermission = true;
                     icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_open.png">';
                     for(i = 0; i < array_icon_edit.length; i++) {
                         array_icon_edit[i].classList.remove('icon-edit-hidden');
                     }
-                    for(i = 0; i < array_button.length; i++) {
+                    for(i = 0; i < array_pushbutton.length; i++) {
-                        array_button[i].classList.remove('input-element-button-hidden');
+                        array_pushbutton[i].classList.add('push-button-active');
                     }
-                } else {
-                    console.log(clientTitle);
                 }
-                // prompt = false;
             }
             , function() {
                 // User decided to cancel
@@ -214,8 +212,8 @@ window.onload = function() {
             for(i = 0; i < array_icon_edit.length; i++) {
                 array_icon_edit[i].classList.add('icon-edit-hidden');
             }
-            for(i = 0; i < array_button.length; i++) {
+            for(i = 0; i < array_pushbutton.length; i++) {
-                array_button[i].classList.add('input-element-button-hidden');
+                array_pushbutton[i].classList.remove('push-button-active');
             }
         }
     }