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

Some bugfixes for input elements

Browse Source
This commit is contained in:
Daniel
2025-04-24 18:12:38 +02:00
parent 0d5ffd72a8
commit ff0c00cabb
4 changed files with 151 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
client/jsFiles/SEAWebClientGroup.js
View File

@ -29,10 +29,10 @@ function createContent(message) {
component.command = component.name;
if (message.title == 'modules') {
let row = create_row_for_modules(component);
let row = createRowForModules(component);
content.appendChild(row);
} else {
let row = create_row_for_parameters(component);
let row = createRowForParameters(component);
content.appendChild(row);
}
}
@ -42,13 +42,13 @@ function createContent(message) {
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
// ROW
function create_row_for_modules(component) {
let left = create_left_column(component, 1);
function createRowForModules(component) {
let left = createLeftColumnForModules(component);
left.id = component.name;
left.setAttribute('name', 'component.title');
let right = create_right_column_for_modules(component);
let row = append_to_content(left, right);
let right = createRightColumnForModules(component);
let row = appendToContent(left, right);
row.onclick = function () {
getGroup(s, component.title);
@ -57,8 +57,10 @@ function create_row_for_modules(component) {
return row;
}
function create_row_for_parameters(component) {
let left = create_left_column(component);
function createRowForParameters(component) {
let left = document.createElement('span');
left.classList.add('col-left');
left.innerHTML = component.title;
let right = document.createElement('span');
right.classList.add('col-right-parameters');
let value = document.createElement('span');
@ -72,26 +74,40 @@ function create_row_for_parameters(component) {
component.type == 'checkbox' ||
component.type == 'enum'
) {
let edit = document.createElement('img');
edit.setAttribute('src', 'res/icon_edit.png');
edit.classList.add('modules-icon', 'edit-icon');
createFunc = window['create_' + component.type]
let input_element = createFunc(component);
let input_element;
switch (component.type) {
case 'enum':
input_element = createEnum(component);
break;
case 'pushbutton':
input_element = createPushbutton(component);
break;
case 'input':
input_element = createInput(component);
break;
case 'checkbox':
input_element = createCheckbox(component);
break;
}
input_element.classList.add('input-element', 'input-element-hidden');
edit.onclick = function () {
let icon_edit = document.createElement('img');
icon_edit.setAttribute('src', 'res/icon_edit.png');
icon_edit.classList.add('modules-icon', 'edit-icon');
icon_edit.onclick = function () {
let is_hidden = input_element.classList.contains('input-element-hidden');
hide_input_elements();
hideInputElements();
if (is_hidden) {
input_element.classList.remove('input-element-hidden');
}
}
right.appendChild(edit);
right.appendChild(icon_edit);
right.appendChild(input_element);
}
return append_to_content(left, right);
return appendToContent(left, right);
}
function append_to_content(left, right) {
function appendToContent(left, right) {
let row = document.createElement('div');
row.classList.add("row");
row.appendChild(left);
@ -102,32 +118,28 @@ function append_to_content(left, right) {
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
// LEFT COLUMN
function create_left_column(component, modules) {
function createLeftColumnForModules(component) {
var left = document.createElement('span');
left.classList.add('col-left');
if (modules) {
if (component.statusname) {
left.appendChild(create_status_icon(component));
}
let modules_title = document.createElement('span');
modules_title.classList.add('modules-title');
modules_title.innerHTML = component.title;
left.appendChild(modules_title);
if (component.statusname) {
let status_info = document.createElement('span');
status_info.classList.add('status-info');
status_info.setAttribute('name', component.title + '-info');
left.appendChild(status_info);
}
if (component.info) {
let btn_info = document.createElement('span');
btn_info.innerHTML = '(i)';
btn_info.classList.add('button-info');
left.appendChild(btn_info);
left.appendChild(createInfo(component));
}
} else {
left.innerHTML = component.title;
if (component.statusname) {
left.appendChild(create_status_icon(component));
}
let modules_title = document.createElement('span');
modules_title.classList.add('modules-title');
modules_title.innerHTML = component.title;
left.appendChild(modules_title);
if (component.statusname) {
let status_info = document.createElement('span');
status_info.classList.add('status-info');
status_info.setAttribute('name', component.title + '-info');
left.appendChild(status_info);
}
if (component.info) {
let btn_info = document.createElement('span');
btn_info.innerHTML = '(i)';
btn_info.classList.add('button-info');
left.appendChild(btn_info);
left.appendChild(create_info(component));
}
return left;
@ -139,20 +151,20 @@ function create_left_column(component, modules) {
icon_status.classList.add('status-icon');
return icon_status;
}
}
function createInfo(component) {
// Creates info-box, which isn't visible by default but can be displayed.
let infoBox = document.createElement('span');
infoBox.classList.add("info-box");
infoBox.innerHTML = '<b>' + component.title + '</b>: ' + component.info;
return infoBox;
function create_info(component) {
// Creates info-box, which isn't visible by default but can be displayed.
let infoBox = document.createElement('span');
infoBox.classList.add("info-box");
infoBox.innerHTML = '<b>' + component.title + '</b>: ' + component.info;
return infoBox;
}
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
// RIGHT COLUMN
function create_right_column_for_modules(component) {
function createRightColumnForModules(component) {
var right = document.createElement('span');
right.classList.add('col-right', 'col-right-modules');
let value = document.createElement('span');
@ -173,9 +185,9 @@ function create_right_column_for_modules(component) {
/* ---------------------------------------------------------------------------------- */
// input elements
function create_pushbutton(component) {
function createPushbutton(component) {
// Creates row-element containing a push button
var elem = create_input_element(component);
var elem = createInputElement(component);
elem.classList.add("push-button");
elem.onclick = function (e) {
console.log('click pushbutton');
@ -188,10 +200,10 @@ function create_pushbutton(component) {
return elem;
}
function create_input(component) {
function createInput(component) {
// Creates row-element containing input-item.
var command = component.command;
var input = create_input_element(component, 'input', 'input-text');
var input = createInputElement(component, 'input', 'input-text');
input.type = "text";
input.style.width = "100px";
input.addEventListener("focus", function(evt) {
@ -204,10 +216,10 @@ function create_input(component) {
// User decided to cancel
let input = e.target;
input.value = input.oldValue;
resize_textfield(input);
resizeTextfield(input);
var row = input.closest('div');
row.style.backgroundColor = "white";
hide_input_elements();
hideInputElements();
}
}
@ -247,16 +259,16 @@ function create_input(component) {
row.style.backgroundColor = "orangered";
// Request for command
sendCommand(s, command + " " + value);
resize_textfield(input);
resizeTextfield(input);
prompt = false;
hide_input_elements();
hideInputElements();
}, function () {
// User decided to cancel
input.value = input.actualValue;
resize_textfield(input);
resizeTextfield(input);
row.style.backgroundColor = "white";
prompt = false;
hide_input_elements();
hideInputElements();
});
}
@ -269,7 +281,7 @@ function create_input(component) {
input.actualValue = input.value;
sendCommand(s, component.name + " " + input.value);
input.blur();
hide_input_elements();
hideInputElements();
};
form.appendChild(input);
return form;
@ -287,9 +299,9 @@ function create_input(component) {
}
}
function create_checkbox(component) {
function createCheckbox(component) {
// Creates row-element containing checkbox-item
var input = create_input_element(component, 'input', 'parameter-checkbox');
var input = createInputElement(component, 'input', 'parameter-checkbox');
input.type = "checkbox";
input.onclick = function () {
@ -302,7 +314,7 @@ function create_checkbox(component) {
row.style.backgroundColor = "orangered";
console.log('send ', input.checked);
sendCommand(s, component.command + " " + input.checked);
// hide_input_elements();
// hideInputElements();
};
let right = document.createElement('span');
@ -310,10 +322,10 @@ function create_checkbox(component) {
return right;
}
function create_enum(component) {
function createEnum(component) {
// Creates row-element containing dropdown-selection.
var buttons = component.enum_names;
var select = create_input_element(component, 'select', 'select-params');
var select = createInputElement(component, 'select', 'select-params');
for (var i = 0; i < buttons.length; i++) {
var option = document.createElement('option');
@ -330,7 +342,7 @@ function create_enum(component) {
let index = select.value - 1;
console.log('send', buttons[index].title);
sendCommand(s, component.command + " " + select.value);
// hide_input_elements();
// hideInputElements();
};
select.onfocus = function () {
@ -343,7 +355,7 @@ function create_enum(component) {
return right;
}
function create_input_element(component, tag='span', cls='col-right-modules') {
function createInputElement(component, tag='span', cls='col-right-modules') {
var input_element = document.createElement(tag);
input_element.classList.add('col-right');
if (cls)
@ -356,14 +368,14 @@ function create_input_element(component, tag='span', cls='col-right-modules') {
/* ---------------------------------------------------------------------------------- */
function hide_input_elements(){
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');
}
}
function resize_textfield(input) {
function resizeTextfield(input) {
if (input.value.length > input.size * 12 / 20) {
var str0 = window.getComputedStyle(input).fontSize;
var str1 = str0.substring(0, str0.length - 2);
@ -404,7 +416,7 @@ function appendToGridElement(s, title, type, content) {
/* ---------------------------------------------------------------------------------- */
// obsolete...
// function create_pushbutton_row(component) {
// function createPushbutton_row(component) {
// // Creates row-element containing a push button
// var name = component.name;
// var command = component.command;
@ -413,10 +425,10 @@ function appendToGridElement(s, title, type, content) {
// left.id = component.name;
// left.name = component.title;
// var right = create_input_element(component);
// var right = createInputElement(component);
// right.classList.add("push-button");
// row = append_to_content(left, right);
// row = appendToContent(left, right);
// right.onclick = function () {
// if (writePermission) {
// var row = left.parentNode;
@ -456,7 +468,7 @@ function appendToGridElement(s, title, type, content) {
// var command = component.command;
// var left = createTitle(component);
// var input = create_input_element(component, 'input', 'input-text');
// var input = createInputElement(component, 'input', 'input-text');
// input.type = "text";
// input.style.width = "100px";
// input.addEventListener("focus", function(evt) {
@ -468,7 +480,7 @@ function appendToGridElement(s, title, type, content) {
// if (e.which === 27 || e.key == "Escape") {
// // User decided to cancel
// input.value = intput.oldValue;
// resize_textfield(input);
// resizeTextfield(input);
// var row = left.parentNode;
// row.style.backgroundColor = "white";
// }
@ -514,12 +526,12 @@ function appendToGridElement(s, title, type, content) {
// row.style.backgroundColor = "orangered";
// // Request for command
// sendCommand(s, command + " " + value);
// resize_textfield(input);
// resizeTextfield(input);
// prompt = false;
// }, function () {
// // User decided to cancel
// input.value = input.actualValue;
// resize_textfield(input);
// resizeTextfield(input);
// row.style.backgroundColor = "white";
// prompt = false;
// });
@ -552,20 +564,20 @@ function appendToGridElement(s, title, type, content) {
// input.actualValue = value;
// // Request for command
// sendCommand(s, command + " " + value);
// resize_textfield(input);
// resizeTextfield(input);
// prompt = false;
// }, function () {
// // User decided to cancel
// input.value = input.oldValue;
// resize_textfield(input);
// resizeTextfield(input);
// prompt = false;
// });
// }
// };
// form.appendChild(input);
// var right = create_input_element(component);
// var right = createInputElement(component);
// right.appendChild(form);
// return append_to_content(left, right);
// return appendToContent(left, right);
// function posTextfield(s, left) {
// if (debug_group_daniel) {
@ -580,11 +592,11 @@ function appendToGridElement(s, title, type, content) {
// }
// }
// function create_checkbox_row(component) {
// function createCheckbox_row(component) {
// // Creates row-element containing checkbox-item
// var command = component.command;
// var left = createTitle(component);
// var input = create_input_element(component, 'input', 'parameter-checkbox');
// var input = createInputElement(component, 'input', 'parameter-checkbox');
// input.type = "checkbox";
// input.onkeyup = function (e) {
// if (e.keyCode === 32) {
@ -644,16 +656,16 @@ function appendToGridElement(s, title, type, content) {
// right.classList.add("col-right");
// right.appendChild(input);
// right.appendChild(label);
// return append_to_content(left, right);
// return appendToContent(left, right);
// }
// function create_enum_row(component) {
// function createEnum_row(component) {
// // Creates row-element containing dropdown-selection.
// var name = component.name;
// var command = component.command;
// var buttons = component.enum_names;
// var left = createTitle(component);
// var select = create_input_element(component, 'select', 'select-params');
// var select = createInputElement(component, 'select', 'select-params');
// select.onfocus = function () {
// select.oldIndex = select.selectedIndex;
// }
@ -698,7 +710,7 @@ function appendToGridElement(s, title, type, content) {
// var right = document.createElement('span');
// right.classList.add("col-right");
// right.appendChild(select);
// return append_to_content(left, right);
// return appendToContent(left, right);
// }
// ...obsolete
@ -738,8 +750,8 @@ function appendToGridElement(s, title, type, content) {
// // Creates row-element containing link AND read-only-item.
// var link = component.link;
// if (!link) // simple rdonly
// return append_to_content(createTitle(component),
// create_input_element(component));
// return appendToContent(createTitle(component),
// createInputElement(component));
// // with link
// var left = document.createElement('a');
@ -749,7 +761,7 @@ function appendToGridElement(s, title, type, content) {
// left.id = component.name;
// row = append_to_content(left, create_input_element(component));
// row = appendToContent(left, createInputElement(component));
// row.onclick = function () {
// this.style.backgroundColor = "orangered";
// left.click();