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

Changed some icons, modules block: different input elements (not tested), write permission promt

Browse Source
This commit is contained in:
Daniel
2025-04-27 12:39:26 +02:00
parent a9ca113f2c
commit 2eaced4283
9 changed files with 134 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
client/jsFiles/SEAWebClientGroup.js
View File

@ -1,8 +1,11 @@
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % GROUP
var writePermission = false;
var showParams = false;
var showConsole = false;
var prompt = false // True while a prompt is opened.
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// COMMUNICATION
function getGroup(s, name) {
console.log('name: ',name, ', id: '.ClientID);
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
@ -14,6 +17,9 @@ function sendCommand(s, command) {
+ "&id=" + clientID, successHandler, errorHandler);
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// GROUP
function createContent(message) {
// Depending on the message received from the server the content of the
// group is created dynamically. Handles draw-message.
@ -58,64 +64,9 @@ function createRowForModules(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');
value.classList.add('col-right-value');
value.setAttribute('name', component.name);
value.__ctype__ = 'rdonly';
right.appendChild(value);
if (component.type == 'input' ||
component.type == 'pushbutton' ||
component.type == 'checkbox' ||
component.type == 'enum'
) {
var input_element;
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', 'input-element-button-hidden');
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;
}
if (component.type != 'pushbutton') {
let icon_edit = createIconEdit();
right.appendChild(icon_edit);
}
right.appendChild(input_element);
}
let left = createLeftColumnForParameters(component);
let right = createRightColumnForParameters(component);
return appendToContent(left, right);
function createIconEdit () {
let icon_edit = document.createElement('img');
icon_edit.setAttribute('src', 'res/icon_edit.png');
icon_edit.classList.add('icon-modules', 'icon-edit', 'icon-edit-hidden');
icon_edit.onclick = function () {
let is_hidden = input_element.classList.contains('input-element-hidden');
hideInputElements();
if (is_hidden) {
input_element.classList.remove('input-element-hidden');
}
}
return icon_edit;
}
}
function appendToContent(left, right) {
@ -182,43 +133,115 @@ function createLeftColumnForModules(component) {
}
}
function createLeftColumnForParameters(component) {
let left = document.createElement('span');
left.classList.add('col-left');
left.innerHTML = component.title;
return left;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
// RIGHT COLUMN
function createRightColumnForModules(component) {
var right = document.createElement('span');
right.classList.add('col-right', 'col-right-modules');
let value = document.createElement('span');
value.classList.add('col-right-value');
value.setAttribute('name', component.name);
// value.__ctype__ = component.type;
value.__ctype__ = 'rdonly';
right.appendChild(value);
right.appendChild(createValue(component));
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);
if (component.type == 'input' ||
component.type == 'pushbutton' ||
component.type == 'checkbox' ||
component.type == 'enum'
) {
let input_element = createType(component);
if (component.type != 'pushbutton') {
let icon_edit = createIconEdit(input_element);
right.appendChild(icon_edit);
}
right.appendChild(input_element);
}
}
return right;
}
function createRightColumnForParameters(component) {
let right = document.createElement('span');
right.classList.add('col-right-parameters');
right.appendChild(createValue(component));
if (component.type == 'input' ||
component.type == 'pushbutton' ||
component.type == 'checkbox' ||
component.type == 'enum'
) {
let input_element = createType(component);
if (component.type != 'pushbutton') {
let icon_edit = createIconEdit(input_element);
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('icon-modules', 'icon-edit', 'icon-edit-hidden');
function createValue (component) {
let value = document.createElement('span');
value.classList.add('col-right-value');
value.setAttribute('name', component.name);
value.__ctype__ = 'rdonly';
return value;
}
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;
function createIconEdit (input_element) {
let icon_edit = document.createElement('img');
icon_edit.setAttribute('src', 'res/icon_edit.png');
icon_edit.classList.add('icon-modules', 'icon-edit');
if (writePermission == false) {
icon_edit.classList.add('icon-edit-hidden');
}
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;
}
function createType (component) {
let input_element;
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');
if (writePermission == false) {
input_element.classList.add('input-element-button-hidden');
}
break;
case 'input':
input_element = createInputText(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;
}
return input_element;
}
/* ---------------------------------------------------------------------------------- */
@ -239,7 +262,7 @@ function createPushbutton(component) {
return elem;
}
function createInput(component) {
function createInputText(component) {
// Creates row-element containing input-item.
var command = component.command;
var input = createInputElement(component, 'input', 'input-text');