diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css
index 0b37705..4f34c37 100644
--- a/client/cssFiles/SEAWebClientGroup.css
+++ b/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 */
diff --git a/client/cssFiles/SEAWebClientMain.css b/client/cssFiles/SEAWebClientMain.css
index 1c25a6d..ad1c523 100644
--- a/client/cssFiles/SEAWebClientMain.css
+++ b/client/cssFiles/SEAWebClientMain.css
@@ -177,7 +177,7 @@ meta, body {
justify-content: flex-end;
}
-.panel-grapics-wide {
+.panel-graphics-wide {
padding-right: 28px;
}
diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js
index 28f998c..89db5b7 100644
--- a/client/jsFiles/SEAWebClientCommunication.js
+++ b/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-idle');
- status_icon.classList.remove('icon-status-warn');
- status_icon.classList.remove('icon-status-busy');
- status_icon.classList.remove('icon-status-error');
+ status_icon.classList.remove('icon-status-disabled', 'icon-status-idle', 'icon-status-warn', 'icon-status-busy', 'icon-status-error');
row.classList.remove('row-disabled');
right.classList.remove = 'col-right-disabled';
diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js
index 15fb741..d8c1af2 100644
--- a/client/jsFiles/SEAWebClientGroup.js
+++ b/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 () {
- 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.
"
- + "Hint: press ESC for leaving a field unchanged."
- + "You are connected with " + clientTitle + ".
"
- + "Are you sure you want to change the value of
"
- + component.name + " from " + actualValue
- + " to " + value + "?",
- function () {
- // User decided to proceed.
- row.classList.add('row-waiting-for-answer');
- // Request for command
- sendCommand(s, 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();
- });
- }
+ // 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.
"
+ // + "Hint: press ESC for leaving a field unchanged."
+ // + "You are connected with " + clientTitle + ".
"
+ // + "Are you sure you want to change the value of
"
+ // + component.name + " from " + actualValue
+ // + " to " + value + "?",
+ // 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) {
@@ -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) {
diff --git a/client/jsFiles/SEAWebClientMain.js b/client/jsFiles/SEAWebClientMain.js
index 07cf96d..1526fbc 100644
--- a/client/jsFiles/SEAWebClientMain.js
+++ b/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 = '
';
icon_close_container.innerHTML = '
';
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 = '
';
icon_close_container.innerHTML = '';
icon_log_container.classList.add("icon-main-container-hidden");
diff --git a/client/res/icon_edit_close.png b/client/res/icon_edit_close.png
new file mode 100644
index 0000000..8a180c5
Binary files /dev/null and b/client/res/icon_edit_close.png differ
diff --git a/client/res/icon_okay.png b/client/res/icon_okay.png
new file mode 100644
index 0000000..c1f16b3
Binary files /dev/null and b/client/res/icon_okay.png differ