linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

okay-button for input

Browse Source
This commit is contained in:
Daniel
2025-05-01 11:18:58 +02:00
parent 744184eb54
commit 023145ca3d
7 changed files with 84 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/cssFiles/SEAWebClientGroup.css
View File

@ -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 */

2
client/cssFiles/SEAWebClientMain.css
View File

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

6
client/jsFiles/SEAWebClientCommunication.js
View File

@ -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';

126
client/jsFiles/SEAWebClientGroup.js
View File

@ -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.<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, 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.<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) {
@ -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) {

4
client/jsFiles/SEAWebClientMain.js
View File

@ -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");

BIN
client/res/icon_edit_close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
client/res/icon_okay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB