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
parent 13e8570afd
commit bd9efaa3de
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;
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 {

14
client/jsFiles/SEAWebClientCommunication.js
View File

@ -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++) {

35
client/jsFiles/SEAWebClientGroup.js
View File

@ -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) {
+ "</b> to <b>" + value + "</b>?",
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);