Some bugfixes for input elements
This commit is contained in:
@ -34,8 +34,6 @@
|
|||||||
|
|
||||||
<!-- CSS-Files -->
|
<!-- CSS-Files -->
|
||||||
<link rel="stylesheet" href="externalFiles/alertify.css">
|
<link rel="stylesheet" href="externalFiles/alertify.css">
|
||||||
<!-- <link rel="stylesheet" href="externalFiles/swiper-bundle.min.css"> -->
|
|
||||||
<!-- <link rel="stylesheet" href="cssFiles/SEAWebClientSwiper.css"> -->
|
|
||||||
<link rel="stylesheet" href="cssFiles/SEAWebClientGroup.css">
|
<link rel="stylesheet" href="cssFiles/SEAWebClientGroup.css">
|
||||||
<link rel="stylesheet" href="cssFiles/SEAWebClientConsole.css">
|
<link rel="stylesheet" href="cssFiles/SEAWebClientConsole.css">
|
||||||
<link rel="stylesheet" href="cssFiles/SEAWebClientGraphics.css">
|
<link rel="stylesheet" href="cssFiles/SEAWebClientGraphics.css">
|
||||||
@ -43,8 +41,6 @@
|
|||||||
<!-- JS-Files -->
|
<!-- JS-Files -->
|
||||||
<script src="externalFiles/alertify.js"></script>
|
<script src="externalFiles/alertify.js"></script>
|
||||||
<script src="externalFiles/eventsource.js"></script>
|
<script src="externalFiles/eventsource.js"></script>
|
||||||
<!-- <script src="externalFiles/d3.min.js"></script> -->
|
|
||||||
<!-- <script src="externalFiles/swiper-bundle.min.js"></script> -->
|
|
||||||
<!-- <script src="externalFiles/Chart.bundle.min.js"></script> -->
|
<!-- <script src="externalFiles/Chart.bundle.min.js"></script> -->
|
||||||
<script src="externalFiles/chart.umd.min.js"></script>
|
<script src="externalFiles/chart.umd.min.js"></script>
|
||||||
<script src="externalFiles/luxon.min.js"></script>
|
<script src="externalFiles/luxon.min.js"></script>
|
||||||
@ -55,7 +51,6 @@
|
|||||||
<!-- <script src="externalFiles/chartjs-zoom.js"></script> -->
|
<!-- <script src="externalFiles/chartjs-zoom.js"></script> -->
|
||||||
<script src="jsFiles/SEAWebClientLocalStorage.js"></script>
|
<script src="jsFiles/SEAWebClientLocalStorage.js"></script>
|
||||||
<script src="jsFiles/SEAWebClientResponsivity.js"></script>
|
<script src="jsFiles/SEAWebClientResponsivity.js"></script>
|
||||||
<!-- <script src="jsFiles/SEAWebClientSwiper.js"></script> -->
|
|
||||||
<script src="jsFiles/SEAWebClientGroup.js"></script>
|
<script src="jsFiles/SEAWebClientGroup.js"></script>
|
||||||
<script src="jsFiles/SEAWebClientConsole.js"></script>
|
<script src="jsFiles/SEAWebClientConsole.js"></script>
|
||||||
<script src="jsFiles/SEAWebClientGraphics.js"></script>
|
<script src="jsFiles/SEAWebClientGraphics.js"></script>
|
||||||
|
@ -57,7 +57,7 @@
|
|||||||
height: 12px;
|
height: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
text-align: top;
|
vertical-align: top;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -66,7 +66,8 @@
|
|||||||
|
|
||||||
.col-left {
|
.col-left {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 140px;
|
width: 155px;
|
||||||
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ------------------------------ info ------------------------------ */
|
/* ------------------------------ info ------------------------------ */
|
||||||
@ -131,15 +132,18 @@
|
|||||||
/* right */
|
/* right */
|
||||||
|
|
||||||
.col-right-modules {
|
.col-right-modules {
|
||||||
float: right;
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-right-parameters {
|
.col-right-parameters {
|
||||||
float: right;
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-right-value {
|
.col-right-value {
|
||||||
padding-right: 4px;
|
display: block;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-right-disabled {
|
.col-right-disabled {
|
||||||
@ -149,7 +153,9 @@
|
|||||||
/* ------------------------------ edit-icon ------------------------------ */
|
/* ------------------------------ edit-icon ------------------------------ */
|
||||||
|
|
||||||
.edit-icon {
|
.edit-icon {
|
||||||
float: right;
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -270,3 +276,27 @@ option {
|
|||||||
border: 2px solid dimgray;
|
border: 2px solid dimgray;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||||
|
/* PANEL <- moved here from SEAWebClientSwiper.css */
|
||||||
|
.panel {
|
||||||
|
background-color: #303030;
|
||||||
|
/* position: absolute; */
|
||||||
|
z-index: 20;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
.panel:not(.graphics) {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 6px 6px 6px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel.graphics{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-updates-graphics {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
@ -192,7 +192,7 @@ function updateValues(message, src) {
|
|||||||
// Handles changes of parameter-values
|
// Handles changes of parameter-values
|
||||||
for (var i = 0; i < message.updates.length; i++) {
|
for (var i = 0; i < message.updates.length; i++) {
|
||||||
let component = message.updates[i];
|
let component = message.updates[i];
|
||||||
let value = component.value;
|
let comp_value = component.value;
|
||||||
let matches = document.getElementsByName(component.name);
|
let matches = document.getElementsByName(component.name);
|
||||||
|
|
||||||
// Check for status updates
|
// Check for status updates
|
||||||
@ -210,27 +210,25 @@ function updateValues(message, src) {
|
|||||||
elem.innerHTML = text;
|
elem.innerHTML = text;
|
||||||
}
|
}
|
||||||
} else if (type == "input") {
|
} else if (type == "input") {
|
||||||
let row = elem.parentNode.parentNode.parentNode;
|
let row = elem.closest('div');
|
||||||
row.style.backgroundColor = "white";
|
row.style.backgroundColor = "white";
|
||||||
let mval = elem.value;
|
|
||||||
let oldValue = ('oldValue' in elem) ? elem.oldValue : mval;
|
let oldValue = ('oldValue' in elem) ? elem.oldValue : elem.value;
|
||||||
if (value != mval && parseFloat(value) != parseFloat(mval) && value != oldValue) {
|
if (comp_value != elem.value && parseFloat(comp_value) != parseFloat(elem.value) && comp_value != oldValue) {
|
||||||
if (elem == document.activeElement
|
if (elem == document.activeElement || oldValue != elem.value) {
|
||||||
|| oldValue != mval) {
|
|
||||||
row.style.backgroundColor = "orange";
|
row.style.backgroundColor = "orange";
|
||||||
} else {
|
} else {
|
||||||
elem.value = value;
|
elem.value = comp_value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
elem.actualValue = value;
|
elem.actualValue = comp_value;
|
||||||
resize_textfield(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.style.backgroundColor = "white";
|
||||||
console.log('receive: ', value);
|
|
||||||
// console.log('CBX', elem.name, message, Boolean(value && value != 'false'));
|
console.log('receive: ', comp_value);
|
||||||
// elem.checked = Boolean(value && value != 'false');
|
if (comp_value == 'False' || comp_value == 'false' || comp_value == 0) {
|
||||||
if (value === 'False') {
|
|
||||||
elem.checked = false;
|
elem.checked = false;
|
||||||
} else {
|
} else {
|
||||||
elem.checked = true;
|
elem.checked = true;
|
||||||
@ -242,7 +240,7 @@ function updateValues(message, src) {
|
|||||||
|
|
||||||
let options = elem.childNodes;
|
let options = elem.childNodes;
|
||||||
for (var j = 0; j < options.length; j++) {
|
for (var j = 0; j < options.length; j++) {
|
||||||
if (options[j].label == value) {
|
if (options[j].label == comp_value) {
|
||||||
elem.value = j + 1;
|
elem.value = j + 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -370,16 +368,8 @@ function successHandler(s, message) {
|
|||||||
isl = appendToGridElement(2, message.title, 'parameters', createContent(message));
|
isl = appendToGridElement(2, message.title, 'parameters', createContent(message));
|
||||||
adjustGrid();
|
adjustGrid();
|
||||||
if (nColumns == 1 || nColumns == 2 || nColumns == 3) {
|
if (nColumns == 1 || nColumns == 2 || nColumns == 3) {
|
||||||
// elements[1].style.display = "none"; // hide modules
|
|
||||||
// elements[2].style.display = "inline-block"; // show parameters
|
|
||||||
// style(2,"100vw","100vh");
|
|
||||||
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_close.png">';
|
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_close.png">';
|
||||||
}
|
}
|
||||||
// else if (nColumns == 2 || nColumns == 3) {
|
|
||||||
// adjustGrid();
|
|
||||||
// } else {
|
|
||||||
// adjustGrid();
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
nextInitCommand();
|
nextInitCommand();
|
||||||
// Request for updates.
|
// Request for updates.
|
||||||
|
@ -29,10 +29,10 @@ function createContent(message) {
|
|||||||
component.command = component.name;
|
component.command = component.name;
|
||||||
|
|
||||||
if (message.title == 'modules') {
|
if (message.title == 'modules') {
|
||||||
let row = create_row_for_modules(component);
|
let row = createRowForModules(component);
|
||||||
content.appendChild(row);
|
content.appendChild(row);
|
||||||
} else {
|
} else {
|
||||||
let row = create_row_for_parameters(component);
|
let row = createRowForParameters(component);
|
||||||
content.appendChild(row);
|
content.appendChild(row);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -42,13 +42,13 @@ function createContent(message) {
|
|||||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||||
// ROW
|
// ROW
|
||||||
|
|
||||||
function create_row_for_modules(component) {
|
function createRowForModules(component) {
|
||||||
let left = create_left_column(component, 1);
|
let left = createLeftColumnForModules(component);
|
||||||
left.id = component.name;
|
left.id = component.name;
|
||||||
left.setAttribute('name', 'component.title');
|
left.setAttribute('name', 'component.title');
|
||||||
|
|
||||||
let right = create_right_column_for_modules(component);
|
let right = createRightColumnForModules(component);
|
||||||
let row = append_to_content(left, right);
|
let row = appendToContent(left, right);
|
||||||
|
|
||||||
row.onclick = function () {
|
row.onclick = function () {
|
||||||
getGroup(s, component.title);
|
getGroup(s, component.title);
|
||||||
@ -57,8 +57,10 @@ function create_row_for_modules(component) {
|
|||||||
return row;
|
return row;
|
||||||
}
|
}
|
||||||
|
|
||||||
function create_row_for_parameters(component) {
|
function createRowForParameters(component) {
|
||||||
let left = create_left_column(component);
|
let left = document.createElement('span');
|
||||||
|
left.classList.add('col-left');
|
||||||
|
left.innerHTML = component.title;
|
||||||
let right = document.createElement('span');
|
let right = document.createElement('span');
|
||||||
right.classList.add('col-right-parameters');
|
right.classList.add('col-right-parameters');
|
||||||
let value = document.createElement('span');
|
let value = document.createElement('span');
|
||||||
@ -72,26 +74,40 @@ function create_row_for_parameters(component) {
|
|||||||
component.type == 'checkbox' ||
|
component.type == 'checkbox' ||
|
||||||
component.type == 'enum'
|
component.type == 'enum'
|
||||||
) {
|
) {
|
||||||
let edit = document.createElement('img');
|
let input_element;
|
||||||
edit.setAttribute('src', 'res/icon_edit.png');
|
switch (component.type) {
|
||||||
edit.classList.add('modules-icon', 'edit-icon');
|
case 'enum':
|
||||||
createFunc = window['create_' + component.type]
|
input_element = createEnum(component);
|
||||||
let input_element = createFunc(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');
|
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');
|
let is_hidden = input_element.classList.contains('input-element-hidden');
|
||||||
hide_input_elements();
|
hideInputElements();
|
||||||
if (is_hidden) {
|
if (is_hidden) {
|
||||||
input_element.classList.remove('input-element-hidden');
|
input_element.classList.remove('input-element-hidden');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
right.appendChild(edit);
|
right.appendChild(icon_edit);
|
||||||
right.appendChild(input_element);
|
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');
|
let row = document.createElement('div');
|
||||||
row.classList.add("row");
|
row.classList.add("row");
|
||||||
row.appendChild(left);
|
row.appendChild(left);
|
||||||
@ -102,32 +118,28 @@ function append_to_content(left, right) {
|
|||||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||||
// LEFT COLUMN
|
// LEFT COLUMN
|
||||||
|
|
||||||
function create_left_column(component, modules) {
|
function createLeftColumnForModules(component) {
|
||||||
var left = document.createElement('span');
|
var left = document.createElement('span');
|
||||||
left.classList.add('col-left');
|
left.classList.add('col-left');
|
||||||
if (modules) {
|
if (component.statusname) {
|
||||||
if (component.statusname) {
|
left.appendChild(create_status_icon(component));
|
||||||
left.appendChild(create_status_icon(component));
|
}
|
||||||
}
|
let modules_title = document.createElement('span');
|
||||||
let modules_title = document.createElement('span');
|
modules_title.classList.add('modules-title');
|
||||||
modules_title.classList.add('modules-title');
|
modules_title.innerHTML = component.title;
|
||||||
modules_title.innerHTML = component.title;
|
left.appendChild(modules_title);
|
||||||
left.appendChild(modules_title);
|
if (component.statusname) {
|
||||||
if (component.statusname) {
|
let status_info = document.createElement('span');
|
||||||
let status_info = document.createElement('span');
|
status_info.classList.add('status-info');
|
||||||
status_info.classList.add('status-info');
|
status_info.setAttribute('name', component.title + '-info');
|
||||||
status_info.setAttribute('name', component.title + '-info');
|
left.appendChild(status_info);
|
||||||
left.appendChild(status_info);
|
}
|
||||||
}
|
if (component.info) {
|
||||||
if (component.info) {
|
let btn_info = document.createElement('span');
|
||||||
let btn_info = document.createElement('span');
|
btn_info.innerHTML = '(i)';
|
||||||
btn_info.innerHTML = '(i)';
|
btn_info.classList.add('button-info');
|
||||||
btn_info.classList.add('button-info');
|
left.appendChild(btn_info);
|
||||||
left.appendChild(btn_info);
|
left.appendChild(create_info(component));
|
||||||
left.appendChild(createInfo(component));
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
left.innerHTML = component.title;
|
|
||||||
}
|
}
|
||||||
return left;
|
return left;
|
||||||
|
|
||||||
@ -139,20 +151,20 @@ function create_left_column(component, modules) {
|
|||||||
icon_status.classList.add('status-icon');
|
icon_status.classList.add('status-icon');
|
||||||
return icon_status;
|
return icon_status;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function createInfo(component) {
|
function create_info(component) {
|
||||||
// Creates info-box, which isn't visible by default but can be displayed.
|
// Creates info-box, which isn't visible by default but can be displayed.
|
||||||
let infoBox = document.createElement('span');
|
let infoBox = document.createElement('span');
|
||||||
infoBox.classList.add("info-box");
|
infoBox.classList.add("info-box");
|
||||||
infoBox.innerHTML = '<b>' + component.title + '</b>: ' + component.info;
|
infoBox.innerHTML = '<b>' + component.title + '</b>: ' + component.info;
|
||||||
return infoBox;
|
return infoBox;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||||
// RIGHT COLUMN
|
// RIGHT COLUMN
|
||||||
|
|
||||||
function create_right_column_for_modules(component) {
|
function createRightColumnForModules(component) {
|
||||||
var right = document.createElement('span');
|
var right = document.createElement('span');
|
||||||
right.classList.add('col-right', 'col-right-modules');
|
right.classList.add('col-right', 'col-right-modules');
|
||||||
let value = document.createElement('span');
|
let value = document.createElement('span');
|
||||||
@ -173,9 +185,9 @@ function create_right_column_for_modules(component) {
|
|||||||
/* ---------------------------------------------------------------------------------- */
|
/* ---------------------------------------------------------------------------------- */
|
||||||
// input elements
|
// input elements
|
||||||
|
|
||||||
function create_pushbutton(component) {
|
function createPushbutton(component) {
|
||||||
// Creates row-element containing a push button
|
// Creates row-element containing a push button
|
||||||
var elem = create_input_element(component);
|
var elem = createInputElement(component);
|
||||||
elem.classList.add("push-button");
|
elem.classList.add("push-button");
|
||||||
elem.onclick = function (e) {
|
elem.onclick = function (e) {
|
||||||
console.log('click pushbutton');
|
console.log('click pushbutton');
|
||||||
@ -188,10 +200,10 @@ function create_pushbutton(component) {
|
|||||||
return elem;
|
return elem;
|
||||||
}
|
}
|
||||||
|
|
||||||
function create_input(component) {
|
function createInput(component) {
|
||||||
// Creates row-element containing input-item.
|
// Creates row-element containing input-item.
|
||||||
var command = component.command;
|
var command = component.command;
|
||||||
var input = create_input_element(component, 'input', 'input-text');
|
var input = createInputElement(component, 'input', 'input-text');
|
||||||
input.type = "text";
|
input.type = "text";
|
||||||
input.style.width = "100px";
|
input.style.width = "100px";
|
||||||
input.addEventListener("focus", function(evt) {
|
input.addEventListener("focus", function(evt) {
|
||||||
@ -204,10 +216,10 @@ function create_input(component) {
|
|||||||
// User decided to cancel
|
// User decided to cancel
|
||||||
let input = e.target;
|
let input = e.target;
|
||||||
input.value = input.oldValue;
|
input.value = input.oldValue;
|
||||||
resize_textfield(input);
|
resizeTextfield(input);
|
||||||
var row = input.closest('div');
|
var row = input.closest('div');
|
||||||
row.style.backgroundColor = "white";
|
row.style.backgroundColor = "white";
|
||||||
hide_input_elements();
|
hideInputElements();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -247,16 +259,16 @@ function create_input(component) {
|
|||||||
row.style.backgroundColor = "orangered";
|
row.style.backgroundColor = "orangered";
|
||||||
// Request for command
|
// Request for command
|
||||||
sendCommand(s, command + " " + value);
|
sendCommand(s, command + " " + value);
|
||||||
resize_textfield(input);
|
resizeTextfield(input);
|
||||||
prompt = false;
|
prompt = false;
|
||||||
hide_input_elements();
|
hideInputElements();
|
||||||
}, function () {
|
}, function () {
|
||||||
// User decided to cancel
|
// User decided to cancel
|
||||||
input.value = input.actualValue;
|
input.value = input.actualValue;
|
||||||
resize_textfield(input);
|
resizeTextfield(input);
|
||||||
row.style.backgroundColor = "white";
|
row.style.backgroundColor = "white";
|
||||||
prompt = false;
|
prompt = false;
|
||||||
hide_input_elements();
|
hideInputElements();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -269,7 +281,7 @@ function create_input(component) {
|
|||||||
input.actualValue = input.value;
|
input.actualValue = input.value;
|
||||||
sendCommand(s, component.name + " " + input.value);
|
sendCommand(s, component.name + " " + input.value);
|
||||||
input.blur();
|
input.blur();
|
||||||
hide_input_elements();
|
hideInputElements();
|
||||||
};
|
};
|
||||||
form.appendChild(input);
|
form.appendChild(input);
|
||||||
return form;
|
return form;
|
||||||
@ -287,9 +299,9 @@ function create_input(component) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function create_checkbox(component) {
|
function createCheckbox(component) {
|
||||||
// Creates row-element containing checkbox-item
|
// 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.type = "checkbox";
|
||||||
|
|
||||||
input.onclick = function () {
|
input.onclick = function () {
|
||||||
@ -302,7 +314,7 @@ function create_checkbox(component) {
|
|||||||
row.style.backgroundColor = "orangered";
|
row.style.backgroundColor = "orangered";
|
||||||
console.log('send ', input.checked);
|
console.log('send ', input.checked);
|
||||||
sendCommand(s, component.command + " " + input.checked);
|
sendCommand(s, component.command + " " + input.checked);
|
||||||
// hide_input_elements();
|
// hideInputElements();
|
||||||
};
|
};
|
||||||
|
|
||||||
let right = document.createElement('span');
|
let right = document.createElement('span');
|
||||||
@ -310,10 +322,10 @@ function create_checkbox(component) {
|
|||||||
return right;
|
return right;
|
||||||
}
|
}
|
||||||
|
|
||||||
function create_enum(component) {
|
function createEnum(component) {
|
||||||
// Creates row-element containing dropdown-selection.
|
// Creates row-element containing dropdown-selection.
|
||||||
var buttons = component.enum_names;
|
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++) {
|
for (var i = 0; i < buttons.length; i++) {
|
||||||
var option = document.createElement('option');
|
var option = document.createElement('option');
|
||||||
@ -330,7 +342,7 @@ function create_enum(component) {
|
|||||||
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);
|
||||||
// hide_input_elements();
|
// hideInputElements();
|
||||||
};
|
};
|
||||||
|
|
||||||
select.onfocus = function () {
|
select.onfocus = function () {
|
||||||
@ -343,7 +355,7 @@ function create_enum(component) {
|
|||||||
return right;
|
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);
|
var input_element = document.createElement(tag);
|
||||||
input_element.classList.add('col-right');
|
input_element.classList.add('col-right');
|
||||||
if (cls)
|
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');
|
let input_elements = document.getElementsByClassName('input-element');
|
||||||
for (let i = 0; i < input_elements.length; i++) {
|
for (let i = 0; i < input_elements.length; i++) {
|
||||||
input_elements[i].classList.add('input-element-hidden');
|
input_elements[i].classList.add('input-element-hidden');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function resize_textfield(input) {
|
function resizeTextfield(input) {
|
||||||
if (input.value.length > input.size * 12 / 20) {
|
if (input.value.length > input.size * 12 / 20) {
|
||||||
var str0 = window.getComputedStyle(input).fontSize;
|
var str0 = window.getComputedStyle(input).fontSize;
|
||||||
var str1 = str0.substring(0, str0.length - 2);
|
var str1 = str0.substring(0, str0.length - 2);
|
||||||
@ -404,7 +416,7 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
/* ---------------------------------------------------------------------------------- */
|
/* ---------------------------------------------------------------------------------- */
|
||||||
// obsolete...
|
// obsolete...
|
||||||
|
|
||||||
// function create_pushbutton_row(component) {
|
// function createPushbutton_row(component) {
|
||||||
// // Creates row-element containing a push button
|
// // Creates row-element containing a push button
|
||||||
// var name = component.name;
|
// var name = component.name;
|
||||||
// var command = component.command;
|
// var command = component.command;
|
||||||
@ -413,10 +425,10 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
// left.id = component.name;
|
// left.id = component.name;
|
||||||
// left.name = component.title;
|
// left.name = component.title;
|
||||||
|
|
||||||
// var right = create_input_element(component);
|
// var right = createInputElement(component);
|
||||||
// right.classList.add("push-button");
|
// right.classList.add("push-button");
|
||||||
|
|
||||||
// row = append_to_content(left, right);
|
// row = appendToContent(left, right);
|
||||||
// right.onclick = function () {
|
// right.onclick = function () {
|
||||||
// if (writePermission) {
|
// if (writePermission) {
|
||||||
// var row = left.parentNode;
|
// var row = left.parentNode;
|
||||||
@ -456,7 +468,7 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
// var command = component.command;
|
// var command = component.command;
|
||||||
// var left = createTitle(component);
|
// var left = createTitle(component);
|
||||||
|
|
||||||
// var input = create_input_element(component, 'input', 'input-text');
|
// var input = createInputElement(component, 'input', 'input-text');
|
||||||
// input.type = "text";
|
// input.type = "text";
|
||||||
// input.style.width = "100px";
|
// input.style.width = "100px";
|
||||||
// input.addEventListener("focus", function(evt) {
|
// input.addEventListener("focus", function(evt) {
|
||||||
@ -468,7 +480,7 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
// if (e.which === 27 || e.key == "Escape") {
|
// if (e.which === 27 || e.key == "Escape") {
|
||||||
// // User decided to cancel
|
// // User decided to cancel
|
||||||
// input.value = intput.oldValue;
|
// input.value = intput.oldValue;
|
||||||
// resize_textfield(input);
|
// resizeTextfield(input);
|
||||||
// var row = left.parentNode;
|
// var row = left.parentNode;
|
||||||
// row.style.backgroundColor = "white";
|
// row.style.backgroundColor = "white";
|
||||||
// }
|
// }
|
||||||
@ -514,12 +526,12 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
// row.style.backgroundColor = "orangered";
|
// row.style.backgroundColor = "orangered";
|
||||||
// // Request for command
|
// // Request for command
|
||||||
// sendCommand(s, command + " " + value);
|
// sendCommand(s, command + " " + value);
|
||||||
// resize_textfield(input);
|
// resizeTextfield(input);
|
||||||
// prompt = false;
|
// prompt = false;
|
||||||
// }, function () {
|
// }, function () {
|
||||||
// // User decided to cancel
|
// // User decided to cancel
|
||||||
// input.value = input.actualValue;
|
// input.value = input.actualValue;
|
||||||
// resize_textfield(input);
|
// resizeTextfield(input);
|
||||||
// row.style.backgroundColor = "white";
|
// row.style.backgroundColor = "white";
|
||||||
// prompt = false;
|
// prompt = false;
|
||||||
// });
|
// });
|
||||||
@ -552,20 +564,20 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
// input.actualValue = value;
|
// input.actualValue = value;
|
||||||
// // Request for command
|
// // Request for command
|
||||||
// sendCommand(s, command + " " + value);
|
// sendCommand(s, command + " " + value);
|
||||||
// resize_textfield(input);
|
// resizeTextfield(input);
|
||||||
// prompt = false;
|
// prompt = false;
|
||||||
// }, function () {
|
// }, function () {
|
||||||
// // User decided to cancel
|
// // User decided to cancel
|
||||||
// input.value = input.oldValue;
|
// input.value = input.oldValue;
|
||||||
// resize_textfield(input);
|
// resizeTextfield(input);
|
||||||
// prompt = false;
|
// prompt = false;
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
// };
|
// };
|
||||||
// form.appendChild(input);
|
// form.appendChild(input);
|
||||||
// var right = create_input_element(component);
|
// var right = createInputElement(component);
|
||||||
// right.appendChild(form);
|
// right.appendChild(form);
|
||||||
// return append_to_content(left, right);
|
// return appendToContent(left, right);
|
||||||
|
|
||||||
// function posTextfield(s, left) {
|
// function posTextfield(s, left) {
|
||||||
// if (debug_group_daniel) {
|
// 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
|
// // Creates row-element containing checkbox-item
|
||||||
// var command = component.command;
|
// var command = component.command;
|
||||||
// var left = createTitle(component);
|
// var left = createTitle(component);
|
||||||
// var input = create_input_element(component, 'input', 'parameter-checkbox');
|
// var input = createInputElement(component, 'input', 'parameter-checkbox');
|
||||||
// input.type = "checkbox";
|
// input.type = "checkbox";
|
||||||
// input.onkeyup = function (e) {
|
// input.onkeyup = function (e) {
|
||||||
// if (e.keyCode === 32) {
|
// if (e.keyCode === 32) {
|
||||||
@ -644,16 +656,16 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
// right.classList.add("col-right");
|
// right.classList.add("col-right");
|
||||||
// right.appendChild(input);
|
// right.appendChild(input);
|
||||||
// right.appendChild(label);
|
// 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.
|
// // Creates row-element containing dropdown-selection.
|
||||||
// var name = component.name;
|
// var name = component.name;
|
||||||
// var command = component.command;
|
// var command = component.command;
|
||||||
// var buttons = component.enum_names;
|
// var buttons = component.enum_names;
|
||||||
// var left = createTitle(component);
|
// var left = createTitle(component);
|
||||||
// var select = create_input_element(component, 'select', 'select-params');
|
// var select = createInputElement(component, 'select', 'select-params');
|
||||||
// select.onfocus = function () {
|
// select.onfocus = function () {
|
||||||
// select.oldIndex = select.selectedIndex;
|
// select.oldIndex = select.selectedIndex;
|
||||||
// }
|
// }
|
||||||
@ -698,7 +710,7 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
// var right = document.createElement('span');
|
// var right = document.createElement('span');
|
||||||
// right.classList.add("col-right");
|
// right.classList.add("col-right");
|
||||||
// right.appendChild(select);
|
// right.appendChild(select);
|
||||||
// return append_to_content(left, right);
|
// return appendToContent(left, right);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// ...obsolete
|
// ...obsolete
|
||||||
@ -738,8 +750,8 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
// // Creates row-element containing link AND read-only-item.
|
// // Creates row-element containing link AND read-only-item.
|
||||||
// var link = component.link;
|
// var link = component.link;
|
||||||
// if (!link) // simple rdonly
|
// if (!link) // simple rdonly
|
||||||
// return append_to_content(createTitle(component),
|
// return appendToContent(createTitle(component),
|
||||||
// create_input_element(component));
|
// createInputElement(component));
|
||||||
|
|
||||||
// // with link
|
// // with link
|
||||||
// var left = document.createElement('a');
|
// var left = document.createElement('a');
|
||||||
@ -749,7 +761,7 @@ function appendToGridElement(s, title, type, content) {
|
|||||||
|
|
||||||
// left.id = component.name;
|
// left.id = component.name;
|
||||||
|
|
||||||
// row = append_to_content(left, create_input_element(component));
|
// row = appendToContent(left, createInputElement(component));
|
||||||
// row.onclick = function () {
|
// row.onclick = function () {
|
||||||
// this.style.backgroundColor = "orangered";
|
// this.style.backgroundColor = "orangered";
|
||||||
// left.click();
|
// left.click();
|
||||||
|
Reference in New Issue
Block a user