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

Edit button for module block

Browse Source
This commit is contained in:
Daniel
2025-04-25 13:02:49 +02:00
parent 924116627f
commit a4b9ad17cd
3 changed files with 146 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
client/jsFiles/SEAWebClientGroup.js
View File

@ -51,7 +51,7 @@ function createRowForModules(component) {
let row = appendToContent(left, right);
row.onclick = function () {
getGroup(s, component.title);
getGroup(s, component.title);
}
row.classList.add('row-clickable');
return row;
@ -74,8 +74,7 @@ function createRowForParameters(component) {
component.type == 'checkbox' ||
component.type == 'enum'
) {
let input_element;
console.log(component);
var input_element;
switch (component.type) {
case 'enum':
input_element = createEnum(component);
@ -91,10 +90,19 @@ function createRowForParameters(component) {
break;
}
input_element.classList.add('input-element', 'input-element-hidden');
if (component.type != 'pushbutton') {
let icon_edit = createIconEdit();
right.appendChild(icon_edit);
}
right.appendChild(input_element);
}
return appendToContent(left, right);
function createIconEdit () {
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');
hideInputElements();
@ -102,10 +110,9 @@ function createRowForParameters(component) {
input_element.classList.remove('input-element-hidden');
}
}
right.appendChild(icon_edit);
right.appendChild(input_element);
return icon_edit;
}
return appendToContent(left, right);
}
function appendToContent(left, right) {
@ -153,7 +160,6 @@ function createLeftColumnForModules(component) {
function createInfoIcon(component) {
let icon_info = document.createElement('img');
icon_info.setAttribute('src', 'res/icon_info.png');
icon_info.setAttribute('name', component.title + ':status');
icon_info.classList.add('modules-icon', 'icon-info');
if (isTouchDevice) {
icon_info.onclick = function (event) {
@ -185,13 +191,33 @@ function createRightColumnForModules(component) {
value.__ctype__ = component.type;
right.appendChild(value);
if (component.targetname) {
let edit = document.createElement('img');
edit.setAttribute('src', 'res/icon_edit.png');
edit.classList.add('modules-icon');
edit.classList.add('edit-icon');
right.appendChild(edit);
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;
function createIconEdit () {
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 (event) {
event.stopPropagation()
let is_hidden = input_element.classList.contains('input-element-hidden');
hideInputElements();
if (is_hidden) {
input_element.classList.remove('input-element-hidden');
}
}
return icon_edit;
}
}
/* ---------------------------------------------------------------------------------- */
@ -199,18 +225,14 @@ function createRightColumnForModules(component) {
function createPushbutton(component) {
// Creates row-element containing a push button
console.log ('create pushbutton');
var elem = createInputElement(component);
elem.classList.add("push-button");
elem.onclick = function (e) {
var button = createInputElement(component, 'button', 'push-button');
button.setAttribute('type', 'button');
button.onclick = function () {
console.log('click pushbutton');
let elem = e.target;
let row = elem.closest('div');
elem.style.backgroundColor = "orangered";
// Request for command
sendCommand(s, component.command);
}
return elem;
return button;
}
function createInput(component) {
@ -236,6 +258,10 @@ function createInput(component) {
}
}
input.onclick = function (e) {
e.stopPropagation();
}
input.onfocus = function () {
input.oldValue = input.value;
if (isTouchDevice)
@ -292,7 +318,11 @@ function createInput(component) {
row.style.backgroundColor = "orangered";
// Request for command
input.actualValue = input.value;
sendCommand(s, component.name + " " + input.value);
if (component.targetname) {
sendCommand(s, component.targetname + " " + input.value);
} else {
sendCommand(s, component.name + " " + input.value);
}
input.blur();
hideInputElements();
};
@ -373,7 +403,11 @@ function createInputElement(component, tag='span', cls='col-right-modules') {
input_element.classList.add('col-right');
if (cls)
input_element.classList.add(cls);
input_element.setAttribute('name', component.name);
if (component.targetname) {
input_element.setAttribute('name', component.targetname);
} else {
input_element.setAttribute('name', component.name);
}
// Add DOM-property
input_element.__ctype__ = component.type;
return input_element;