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

input element display:block instead of float -> displayed in the same row

Browse Source
This commit is contained in:
Daniel
2025-04-25 18:29:00 +02:00
committed by Markus Zolliker
parent b9a1e7db99
commit 8119f221bd
3 changed files with 37 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/cssFiles/SEAWebClientGroup.css
View File

@ -32,7 +32,6 @@
min-height: 24px; min-height: 24px;
display: block; display: block;
border-bottom: dotted darkgray 2px; border-bottom: dotted darkgray 2px;
/* overflow: hidden; */
transition: 0.2s; transition: 0.2s;
position: relative; position: relative;
} }
@ -43,15 +42,17 @@
.row-clickable:hover { .row-clickable:hover {
background-color:lightgray; background-color:lightgray;
/* opacity: .7; */
} }
.row-disabled { .row-disabled {
/* opacity: .3; */
background-color: WhiteSmoke; background-color: WhiteSmoke;
color: dimgray color: dimgray
} }
.row-waiting-for-answer {
background-color: orangered;
}
.modules-icon { .modules-icon {
display: inline-block; display: inline-block;
width: 12px; width: 12px;
@ -178,10 +179,13 @@
/* INPUT ELEMENTS */ /* INPUT ELEMENTS */
.input-element { .input-element {
z-index: 100; display: block;
position: absolute; text-align: right;
right: 0; }
top: 20px;
.input-element-button {
display: block;
text-align: right;
} }
.input-element-hidden { .input-element-hidden {

14
client/jsFiles/SEAWebClientCommunication.js
View File

@ -212,12 +212,12 @@ function updateTarget(component) {
elem.value = component.value; elem.value = component.value;
let row = elem.closest('div'); 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; let oldValue = ('oldValue' in elem) ? elem.oldValue : elem.value;
if (component.value != elem.value && parseFloat(component.value) != parseFloat(elem.value) && component.value != oldValue) { if (component.value != elem.value && parseFloat(component.value) != parseFloat(elem.value) && component.value != oldValue) {
if (elem == document.activeElement || oldValue != elem.value) { if (elem == document.activeElement || oldValue != elem.value) {
row.style.backgroundColor = "orange"; row.classList.add('row-waiting-for-answer');
} else { } else {
elem.value = component.value; elem.value = component.value;
} }
@ -272,7 +272,6 @@ function updateStatus(component) {
function updateValue(component) { function updateValue(component) {
let matches = document.getElementsByName(component.name); let matches = document.getElementsByName(component.name);
for (var j = 0; j < matches.length; j++) { for (var j = 0; j < matches.length; j++) {
let elem = matches[j]; let elem = matches[j];
let type = elem.__ctype__; // -> Show Dom-Properties let type = elem.__ctype__; // -> Show Dom-Properties
@ -284,12 +283,12 @@ function updateValue(component) {
} }
} else if (type == "input") { } else if (type == "input") {
let row = elem.closest('div'); 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; let oldValue = ('oldValue' in elem) ? elem.oldValue : elem.value;
if (component.value != elem.value && parseFloat(component.value) != parseFloat(elem.value) && component.value != oldValue) { if (component.value != elem.value && parseFloat(component.value) != parseFloat(elem.value) && component.value != oldValue) {
if (elem == document.activeElement || oldValue != elem.value) { if (elem == document.activeElement || oldValue != elem.value) {
row.style.backgroundColor = "orange"; row.classList.add('row-waiting-for-answer');
} else { } else {
elem.value = component.value; elem.value = component.value;
} }
@ -298,7 +297,7 @@ function updateValue(component) {
resizeTextfield(elem); resizeTextfield(elem);
} else if (type == "checkbox") { } else if (type == "checkbox") {
let row = elem.closest('div'); let row = elem.closest('div');
row.style.backgroundColor = "white"; row.classList.remove('row-waiting-for-answer');
console.log('receive: ', component.value); console.log('receive: ', component.value);
if (component.value == 'False' || component.value == 'false' || component.value == 0) { if (component.value == 'False' || component.value == 'false' || component.value == 0) {
@ -307,9 +306,8 @@ function updateValue(component) {
elem.checked = true; elem.checked = true;
} }
} else if (type == "enum") { } else if (type == "enum") {
elem.style.display = "block";
let row = elem.closest('div'); let row = elem.closest('div');
row.style.backgroundColor = "white"; row.classList.remove('row-waiting-for-answer');
let options = elem.childNodes; let options = elem.childNodes;
for (var j = 0; j < options.length; j++) { for (var j = 0; j < options.length; j++) {

35
client/jsFiles/SEAWebClientGroup.js
View File

@ -78,18 +78,21 @@ function createRowForParameters(component) {
switch (component.type) { switch (component.type) {
case 'enum': case 'enum':
input_element = createEnum(component); input_element = createEnum(component);
input_element.classList.add('input-element', 'input-element-hidden');
break; break;
case 'pushbutton': case 'pushbutton':
input_element = createPushbutton(component); input_element = createPushbutton(component);
input_element.classList.add('input-element-button');
break; break;
case 'input': case 'input':
input_element = createInput(component); input_element = createInput(component);
input_element.classList.add('input-element', 'input-element-hidden');
break; break;
case 'checkbox': case 'checkbox':
input_element = createCheckbox(component); input_element = createCheckbox(component);
input_element.classList.add('input-element', 'input-element-hidden');
break; break;
} }
input_element.classList.add('input-element', 'input-element-hidden');
if (component.type != 'pushbutton') { if (component.type != 'pushbutton') {
let icon_edit = createIconEdit(); let icon_edit = createIconEdit();
right.appendChild(icon_edit); right.appendChild(icon_edit);
@ -188,16 +191,14 @@ function createRightColumnForModules(component) {
let value = document.createElement('span'); let value = document.createElement('span');
value.classList.add('col-right-value'); value.classList.add('col-right-value');
value.setAttribute('name', component.name); value.setAttribute('name', component.name);
value.__ctype__ = component.type; // value.__ctype__ = component.type;
value.__ctype__ = 'rdonly';
right.appendChild(value); right.appendChild(value);
if (component.targetname) { if (component.targetname) {
var input_element = createInput(component); var input_element = createInput(component);
input_element.classList.add('input-element', 'input-element-hidden'); input_element.classList.add('input-element', 'input-element-hidden');
let icon_edit = createIconEdit(); let icon_edit = createIconEdit();
right.appendChild(icon_edit); right.appendChild(icon_edit);
right.appendChild(input_element); right.appendChild(input_element);
} }
return right; return right;
@ -229,10 +230,13 @@ function createPushbutton(component) {
button.setAttribute('type', 'button'); button.setAttribute('type', 'button');
button.onclick = function () { button.onclick = function () {
console.log('click pushbutton'); let row = button.closest('div');
row.classList.add('row-waiting-for-answer');
sendCommand(s, component.command); sendCommand(s, component.command);
} }
return button; let elem = document.createElement('span');
elem.appendChild(button);
return elem;
} }
function createInput(component) { function createInput(component) {
@ -253,7 +257,7 @@ function createInput(component) {
input.value = input.oldValue; input.value = input.oldValue;
resizeTextfield(input); resizeTextfield(input);
var row = input.closest('div'); var row = input.closest('div');
row.style.backgroundColor = "white"; row.classList.remove('row-waiting-for-answer');
hideInputElements(); hideInputElements();
} }
} }
@ -275,15 +279,16 @@ function createInput(component) {
return false; return false;
} }
var row = input.closest('div'); var row = input.closest('div');
row.classList.add('row-waiting-for-answer');
var value = input.value; var value = input.value;
let oldValue = 'oldValue' in input ? input.oldValue : value; let oldValue = 'oldValue' in input ? input.oldValue : value;
if (!('actualValue' in input)) input.actualValue = oldValue; if (!('actualValue' in input)) input.actualValue = oldValue;
actualValue = input.actualValue; actualValue = input.actualValue;
if (value == actualValue || value == oldValue || if (value == actualValue || value == oldValue ||
parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) { parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
input.value = actualValue; input.value = actualValue;
// nothing to do. // nothing to do.
row.style.backgroundColor = "white"; row.classList.remove('row-waiting-for-answer');
return false; return false;
} }
// User changed value and moved focus to other object. // User changed value and moved focus to other object.
@ -295,7 +300,7 @@ function createInput(component) {
+ "</b> to <b>" + value + "</b>?", + "</b> to <b>" + value + "</b>?",
function () { function () {
// User decided to proceed. // User decided to proceed.
row.style.backgroundColor = "orangered"; row.classList.add('row-waiting-for-answer');
// Request for command // Request for command
sendCommand(s, command + " " + value); sendCommand(s, command + " " + value);
resizeTextfield(input); resizeTextfield(input);
@ -305,7 +310,7 @@ function createInput(component) {
// User decided to cancel // User decided to cancel
input.value = input.actualValue; input.value = input.actualValue;
resizeTextfield(input); resizeTextfield(input);
row.style.backgroundColor = "white"; row.classList.remove('row-waiting-for-answer');
prompt = false; prompt = false;
hideInputElements(); hideInputElements();
}); });
@ -315,7 +320,7 @@ function createInput(component) {
form.onsubmit = function (e) { form.onsubmit = function (e) {
e.preventDefault(); e.preventDefault();
var row = form.closest('div'); var row = form.closest('div');
row.style.backgroundColor = "orangered"; row.classList.add('row-waiting-for-answer');
// Request for command // Request for command
input.actualValue = input.value; input.actualValue = input.value;
if (component.targetname) { if (component.targetname) {
@ -354,7 +359,7 @@ function createCheckbox(component) {
function handleCheckbox() { function handleCheckbox() {
console.log('handle checkbox'); console.log('handle checkbox');
let row = input.closest('div'); let row = input.closest('div');
row.style.backgroundColor = "orangered"; row.classList.add('row-waiting-for-answer');
console.log('send ', input.checked); console.log('send ', input.checked);
sendCommand(s, component.command + " " + input.checked); sendCommand(s, component.command + " " + input.checked);
// hideInputElements(); // hideInputElements();
@ -381,7 +386,7 @@ function createEnum(component) {
select.oninput = function () { select.oninput = function () {
let row = select.closest('div'); let row = select.closest('div');
row.style.backgroundColor = "orangered"; row.classList.add('row-waiting-for-answer');
let index = select.value - 1; let index = select.value - 1;
console.log('send', buttons[index].title); console.log('send', buttons[index].title);
sendCommand(s, component.command + " " + select.value); sendCommand(s, component.command + " " + select.value);