From 8119f221bd37339fcf25e3206d0cec079c1041ad Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 25 Apr 2025 18:29:00 +0200 Subject: [PATCH] input element display:block instead of float -> displayed in the same row --- client/cssFiles/SEAWebClientGroup.css | 18 ++++++----- client/jsFiles/SEAWebClientCommunication.js | 14 ++++----- client/jsFiles/SEAWebClientGroup.js | 35 ++++++++++++--------- 3 files changed, 37 insertions(+), 30 deletions(-) diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css index 0973739..e6caf1e 100644 --- a/client/cssFiles/SEAWebClientGroup.css +++ b/client/cssFiles/SEAWebClientGroup.css @@ -32,7 +32,6 @@ min-height: 24px; display: block; border-bottom: dotted darkgray 2px; - /* overflow: hidden; */ transition: 0.2s; position: relative; } @@ -43,15 +42,17 @@ .row-clickable:hover { background-color:lightgray; - /* opacity: .7; */ } .row-disabled { - /* opacity: .3; */ background-color: WhiteSmoke; color: dimgray } +.row-waiting-for-answer { + background-color: orangered; +} + .modules-icon { display: inline-block; width: 12px; @@ -178,10 +179,13 @@ /* INPUT ELEMENTS */ .input-element { - z-index: 100; - position: absolute; - right: 0; - top: 20px; + display: block; + text-align: right; +} + +.input-element-button { + display: block; + text-align: right; } .input-element-hidden { diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js index c73a54d..41a9e32 100644 --- a/client/jsFiles/SEAWebClientCommunication.js +++ b/client/jsFiles/SEAWebClientCommunication.js @@ -212,12 +212,12 @@ function updateTarget(component) { elem.value = component.value; let row = elem.closest('div'); - row.style.backgroundColor = "white"; + row.classList.remove('row-waiting-for-answer'); 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"; + row.classList.add('row-waiting-for-answer'); } else { elem.value = component.value; } @@ -272,7 +272,6 @@ 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 @@ -284,12 +283,12 @@ function updateValue(component) { } } else if (type == "input") { let row = elem.closest('div'); - row.style.backgroundColor = "white"; + row.classList.remove('row-waiting-for-answer'); 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"; + row.classList.add('row-waiting-for-answer'); } else { elem.value = component.value; } @@ -298,7 +297,7 @@ function updateValue(component) { resizeTextfield(elem); } else if (type == "checkbox") { let row = elem.closest('div'); - row.style.backgroundColor = "white"; + row.classList.remove('row-waiting-for-answer'); console.log('receive: ', component.value); if (component.value == 'False' || component.value == 'false' || component.value == 0) { @@ -307,9 +306,8 @@ function updateValue(component) { elem.checked = true; } } else if (type == "enum") { - elem.style.display = "block"; let row = elem.closest('div'); - row.style.backgroundColor = "white"; + row.classList.remove('row-waiting-for-answer'); let options = elem.childNodes; for (var j = 0; j < options.length; j++) { diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index f9a9ffe..2748bef 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/client/jsFiles/SEAWebClientGroup.js @@ -78,18 +78,21 @@ function createRowForParameters(component) { switch (component.type) { case 'enum': 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'); break; case 'input': input_element = createInput(component); + input_element.classList.add('input-element', 'input-element-hidden'); break; case 'checkbox': input_element = createCheckbox(component); + input_element.classList.add('input-element', 'input-element-hidden'); break; } - input_element.classList.add('input-element', 'input-element-hidden'); if (component.type != 'pushbutton') { let icon_edit = createIconEdit(); right.appendChild(icon_edit); @@ -188,16 +191,14 @@ function createRightColumnForModules(component) { let value = document.createElement('span'); value.classList.add('col-right-value'); value.setAttribute('name', component.name); - value.__ctype__ = component.type; + // value.__ctype__ = component.type; + value.__ctype__ = 'rdonly'; right.appendChild(value); if (component.targetname) { - var input_element = createInput(component); input_element.classList.add('input-element', 'input-element-hidden'); - let icon_edit = createIconEdit(); right.appendChild(icon_edit); - right.appendChild(input_element); } return right; @@ -229,10 +230,13 @@ function createPushbutton(component) { button.setAttribute('type', 'button'); button.onclick = function () { - console.log('click pushbutton'); + let row = button.closest('div'); + row.classList.add('row-waiting-for-answer'); sendCommand(s, component.command); } - return button; + let elem = document.createElement('span'); + elem.appendChild(button); + return elem; } function createInput(component) { @@ -253,7 +257,7 @@ function createInput(component) { input.value = input.oldValue; resizeTextfield(input); var row = input.closest('div'); - row.style.backgroundColor = "white"; + row.classList.remove('row-waiting-for-answer'); hideInputElements(); } } @@ -275,15 +279,16 @@ function createInput(component) { 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; + actualValue = input.actualValue; if (value == actualValue || value == oldValue || parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) { input.value = actualValue; // nothing to do. - row.style.backgroundColor = "white"; + row.classList.remove('row-waiting-for-answer'); return false; } // User changed value and moved focus to other object. @@ -295,7 +300,7 @@ function createInput(component) { + " to " + value + "?", function () { // User decided to proceed. - row.style.backgroundColor = "orangered"; + row.classList.add('row-waiting-for-answer'); // Request for command sendCommand(s, command + " " + value); resizeTextfield(input); @@ -305,7 +310,7 @@ function createInput(component) { // User decided to cancel input.value = input.actualValue; resizeTextfield(input); - row.style.backgroundColor = "white"; + row.classList.remove('row-waiting-for-answer'); prompt = false; hideInputElements(); }); @@ -315,7 +320,7 @@ function createInput(component) { form.onsubmit = function (e) { e.preventDefault(); var row = form.closest('div'); - row.style.backgroundColor = "orangered"; + row.classList.add('row-waiting-for-answer'); // Request for command input.actualValue = input.value; if (component.targetname) { @@ -354,7 +359,7 @@ function createCheckbox(component) { function handleCheckbox() { console.log('handle checkbox'); let row = input.closest('div'); - row.style.backgroundColor = "orangered"; + row.classList.add('row-waiting-for-answer'); console.log('send ', input.checked); sendCommand(s, component.command + " " + input.checked); // hideInputElements(); @@ -381,7 +386,7 @@ function createEnum(component) { select.oninput = function () { let row = select.closest('div'); - row.style.backgroundColor = "orangered"; + row.classList.add('row-waiting-for-answer'); let index = select.value - 1; console.log('send', buttons[index].title); sendCommand(s, component.command + " " + select.value);