major rework
- modified chartjs for better zoom on touchpad - flexible number of charts - handle bool as checkbox - handle enum as select (pull down menu) - disable swiper where not needed and many more
This commit is contained in:
@ -13,7 +13,7 @@ function getGroup(s, name) {
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < swiper[s].slides.length; i++) {
|
||||
var slideType = swiper[s].slides[i].getAttribute("slide-type");
|
||||
var slideType = swiper[s].slides[i].slideType;
|
||||
if (slideType == name) {
|
||||
found = true;
|
||||
swiper[s].slideTo(i);
|
||||
@ -33,56 +33,20 @@ function sendCommand(s, command) {
|
||||
|
||||
function createContent(s, message) {
|
||||
// Depending on the message received from the server the content of the
|
||||
// group
|
||||
// is created dynamically. Handles draw-message.
|
||||
// group is created dynamically. Handles draw-message.
|
||||
|
||||
var content = document.createElement('div');
|
||||
content.setAttribute("class", "content");
|
||||
content.classList.add("content");
|
||||
// Process components of the message
|
||||
for (var i = 0; i < message.components.length; i++) {
|
||||
var component = message.components[i];
|
||||
var name = component.name;
|
||||
var type = component.type;
|
||||
var title = name;
|
||||
if ("title" in component)
|
||||
title = component.title;
|
||||
var info = component.info;
|
||||
switch (type) {
|
||||
case "group":
|
||||
content.appendChild(createLink(s, name, title));
|
||||
break;
|
||||
case "rdonly":
|
||||
if ("link" in component) {
|
||||
content.appendChild(createReadOnlyInstrLink(s, name, title,
|
||||
component.link, info));
|
||||
} else {
|
||||
content.appendChild(createReadOnly(s, name, title, info));
|
||||
}
|
||||
break;
|
||||
case "rdlink":
|
||||
content.appendChild(createReadOnlyGroupLink(s, name, title, info));
|
||||
break;
|
||||
case "input":
|
||||
content.appendChild(createInput(s, name, title,
|
||||
info));
|
||||
break;
|
||||
case "checkbox":
|
||||
content.appendChild(createCheckbox(s, name, title,
|
||||
info));
|
||||
break;
|
||||
case "enum":
|
||||
content.appendChild(createSelection(s, name, title,
|
||||
component.enum_names, info));
|
||||
break;
|
||||
case "pushbutton":
|
||||
console.log(component);
|
||||
console.log(component.info);
|
||||
content.appendChild(createPushButton(s, name, title,
|
||||
info));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (!("title" in component))
|
||||
component.title = name;
|
||||
if (!("command" in component))
|
||||
component.command = name;
|
||||
createFunc = window['create_' + component.type + '_row']
|
||||
if (createFunc)
|
||||
content.appendChild(createFunc(s, component))
|
||||
}
|
||||
return content;
|
||||
}
|
||||
@ -96,84 +60,50 @@ function gotoGroups(slideNames) {
|
||||
}
|
||||
}
|
||||
|
||||
function createLink(s, name, title) {
|
||||
function create_group_row(s, component) {
|
||||
// Creates row-element containing link.
|
||||
var title = component.title;
|
||||
|
||||
var row = document.createElement('row');
|
||||
row.setAttribute("id", name);
|
||||
row.setAttribute("name", title);
|
||||
row.setAttribute("class", "interactive row link");
|
||||
row.setAttribute("tabindex", 0);
|
||||
row.id = component.name;
|
||||
row.name = title;
|
||||
row.classList.add("interactive", "row", "link");
|
||||
row.tabIndex = "0";
|
||||
|
||||
row.onclick = function () {
|
||||
var slideNames = getSlideNames();
|
||||
slideNames[s] = name;
|
||||
slideNames[s] = component.name;
|
||||
document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
|
||||
history.pushState({func: "gotoGroups", funarg: slideNames.join("%20")}, document.title, "#" + slideNames.join("%20"));
|
||||
getGroup(s, name);
|
||||
}
|
||||
|
||||
if (title === "console" || title === "device config") {
|
||||
row.setAttribute("class", "interactive row link link-static");
|
||||
row.classList.add("interactive", "row", "link", "link-static");
|
||||
row.innerHTML = "console";
|
||||
}
|
||||
row.innerHTML = title;
|
||||
return row;
|
||||
}
|
||||
|
||||
function createReadOnly(s, name, title, info) {
|
||||
// Creates row-element containing read-only-item.
|
||||
|
||||
var left = createTitle(title, info);
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.setAttribute("name", name);
|
||||
right.setAttribute("__ctype__", "rdonly");
|
||||
|
||||
return appendToContent(info, left, right);
|
||||
}
|
||||
|
||||
function createReadOnlyGroupLink(s, name, title, info) {
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
// for secop
|
||||
|
||||
var left = createTitle(title, info);
|
||||
|
||||
left.setAttribute("id", name);
|
||||
left.setAttribute("name", title);
|
||||
left.setAttribute("class", "interactive link");
|
||||
|
||||
left.onclick = function () {
|
||||
getGroup(s, title);
|
||||
}
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.setAttribute("name", name);
|
||||
right.setAttribute("__ctype__", "rdonly");
|
||||
|
||||
return appendToContent(info, left, right);
|
||||
}
|
||||
|
||||
function createReadOnlyInstrLink(s, name, title, link, info) {
|
||||
function create_rdonly_row(s, component) {
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
|
||||
// var left = createTitle(title, info);
|
||||
var link = component.link;
|
||||
if (!link) // simple rdonly
|
||||
return appendToContent(component, createTitle(component),
|
||||
createParElement(component));
|
||||
|
||||
// with link
|
||||
var left = document.createElement('a');
|
||||
left.setAttribute("class", "col-left");
|
||||
left.innerHTML = title;
|
||||
left.classList.add("col-left");
|
||||
left.innerHTML = component.title;
|
||||
|
||||
left.setAttribute("id", name);
|
||||
left.setAttribute("name", title);
|
||||
left.setAttribute("class", "interactive link");
|
||||
left.id = component.name;
|
||||
left.name = component.title;
|
||||
left.classList.add("interactive", "link");
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.setAttribute("name", name);
|
||||
right.setAttribute("__ctype__", "rdonly");
|
||||
|
||||
row = appendToContent(info, left, right);
|
||||
row = appendToContent(component, left, createParElement(component));
|
||||
row.onclick = function () {
|
||||
this.style.backgroundColor = "orangered";
|
||||
left.click();
|
||||
@ -184,31 +114,46 @@ function createReadOnlyInstrLink(s, name, title, link, info) {
|
||||
left.href = link;
|
||||
}
|
||||
|
||||
row.setAttribute("class", "row clickable");
|
||||
row.classList.add("row", "clickable");
|
||||
return row;
|
||||
}
|
||||
|
||||
function createPushButton(s, name, title, info) {
|
||||
function create_rdlink_row(s, component) {
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
var name = component.name;
|
||||
|
||||
var left = createTitle(component);
|
||||
left.id = component.name;
|
||||
left.name = component.title; // or setAttribute('name'.. ?
|
||||
left.classList.add("interactive", "link");
|
||||
|
||||
left.onclick = function () {
|
||||
getGroup(s, component.title);
|
||||
}
|
||||
return appendToContent(component, left, createParElement(component));
|
||||
}
|
||||
|
||||
function create_pushbutton_row(s, component) {
|
||||
// Creates row-element containing a push button
|
||||
|
||||
var left = createTitle(title, info);
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var left = createTitle(component);
|
||||
console.log(info);
|
||||
|
||||
left.setAttribute("id", name);
|
||||
left.setAttribute("name", title);
|
||||
left.id = component.name;
|
||||
left.name = component.title;
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right clickable push-button");
|
||||
right.setAttribute("name", name);
|
||||
right.setAttribute("__ctype__", "rdonly");
|
||||
var right = createParElement(component);
|
||||
right.classList.add("clickable", "push-button");
|
||||
|
||||
row = appendToContent(info, left, right);
|
||||
row = appendToContent(component, left, right);
|
||||
right.onclick = function () {
|
||||
if (writePermission) {
|
||||
var row = left.parentNode;
|
||||
right.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name);
|
||||
sendCommand(s, command);
|
||||
} else {
|
||||
prompt = true;
|
||||
alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
@ -223,7 +168,7 @@ function createPushButton(s, name, title, info) {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name);
|
||||
sendCommand(s, command);
|
||||
prompt = false;
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
@ -232,23 +177,23 @@ function createPushButton(s, name, title, info) {
|
||||
}
|
||||
}
|
||||
|
||||
row.setAttribute("class", "row");
|
||||
row.classList.add("row");
|
||||
return row;
|
||||
}
|
||||
|
||||
function createInput(s, name, title, info) {
|
||||
function create_input_row(s, component) {
|
||||
// Creates row-element containing input-item.
|
||||
|
||||
if (info) {
|
||||
var infoBox = createInfo(title, info);
|
||||
}
|
||||
var left = createTitle(title, info);
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
|
||||
var input = document.createElement('input');
|
||||
input.setAttribute("type", "text");
|
||||
input.setAttribute("class", "input-text");
|
||||
input.setAttribute("name", name);
|
||||
input.setAttribute("__ctype__", "input");
|
||||
if (info) {
|
||||
var infoBox = createInfo(component);
|
||||
}
|
||||
var left = createTitle(component);
|
||||
|
||||
var input = createParElement(component, 'input', 'input-text');
|
||||
input.type = "text";
|
||||
input.style.width = "100px";
|
||||
input.addEventListener("focus", function(evt) {
|
||||
let elm = evt.target;
|
||||
@ -258,7 +203,7 @@ function createInput(s, name, title, info) {
|
||||
input.onkeydown = function (e) {
|
||||
if (e.which === 27 || e.key == "Escape") {
|
||||
// User decided to cancel
|
||||
input.value = input.getAttribute("oldValue");
|
||||
input.value = intput.oldValue;
|
||||
resizeTextfield(input);
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "white";
|
||||
@ -266,9 +211,9 @@ function createInput(s, name, title, info) {
|
||||
}
|
||||
|
||||
input.onfocus = function () {
|
||||
input.setAttribute("oldValue", input.value);
|
||||
input.oldValue = input.value;
|
||||
|
||||
if (isTouchDevice())
|
||||
if (isTouchDevice)
|
||||
setTimeout(function () {
|
||||
posTextfield(s, left);
|
||||
}, 1);
|
||||
@ -280,11 +225,9 @@ function createInput(s, name, title, info) {
|
||||
}
|
||||
var row = left.parentNode;
|
||||
var value = input.value;
|
||||
var oldValue = input.getAttribute("oldValue") || value;
|
||||
if (!input.hasAttribute("actualValue")) {
|
||||
input.setAttribute("actualValue", oldValue);
|
||||
}
|
||||
var actualValue = input.getAttribute("actualValue");
|
||||
let oldValue = 'oldValue' in input ? input.oldValue : value;
|
||||
if (!('actualValue' in input)) input.actualValue = oldValue;
|
||||
actualValue = input.actualValue;
|
||||
if (value == actualValue || value == oldValue ||
|
||||
parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
|
||||
input.value = actualValue;
|
||||
@ -306,12 +249,12 @@ function createInput(s, name, title, info) {
|
||||
}, 3600000);
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + value);
|
||||
sendCommand(s, command + " " + value);
|
||||
resizeTextfield(input);
|
||||
prompt = false;
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
input.value = input.getAttribute("actualValue");
|
||||
input.value = input.actualValue;
|
||||
resizeTextfield(input);
|
||||
row.style.backgroundColor = "white";
|
||||
prompt = false;
|
||||
@ -321,16 +264,12 @@ function createInput(s, name, title, info) {
|
||||
var form = document.createElement('form');
|
||||
form.onsubmit = function (e) {
|
||||
e.preventDefault();
|
||||
// remove following check: sometimes we want to send a command even with an unchanged value
|
||||
//if (input.value === input.getAttribute("oldValue")) {
|
||||
// // nothing to do.
|
||||
// return false;
|
||||
//}
|
||||
if (writePermission) {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + input.value);
|
||||
input.blur();
|
||||
} else {
|
||||
var value = input.value
|
||||
prompt = true;
|
||||
@ -346,23 +285,21 @@ function createInput(s, name, title, info) {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + value);
|
||||
sendCommand(s, command + " " + value);
|
||||
resizeTextfield(input);
|
||||
prompt = false;
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
input.value = input.getAttribute("oldValue");
|
||||
input.value = input.oldValue;
|
||||
resizeTextfield(input);
|
||||
prompt = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
form.appendChild(input);
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
var right = createParElement(component);
|
||||
right.appendChild(form);
|
||||
return appendToContent(info, left, right);
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
function posTextfield(s, left) {
|
||||
@ -383,16 +320,14 @@ function resizeTextfield(input) {
|
||||
}
|
||||
}
|
||||
|
||||
function createCheckbox(s, name, title, info) {
|
||||
function create_checkbox_row(s, component) {
|
||||
// Creates row-element containing checkbox-item
|
||||
var command = component.command;
|
||||
|
||||
var left = createTitle(title, info);
|
||||
var left = createTitle(component);
|
||||
|
||||
var input = document.createElement('input');
|
||||
input.setAttribute("type", "checkbox");
|
||||
input.setAttribute("name", name);
|
||||
input.setAttribute("__ctype__", "checkbox");
|
||||
input.setAttribute("class", "parameter-checkbox");
|
||||
var input = createParElement(component, 'input', 'parameter-checkbox');
|
||||
input.type = "checkbox";
|
||||
|
||||
input.onkeyup = function (e) {
|
||||
if (e.keyCode === 32) {
|
||||
@ -401,8 +336,8 @@ function createCheckbox(s, name, title, info) {
|
||||
}
|
||||
|
||||
var label = document.createElement('label');
|
||||
label.setAttribute("for", input);
|
||||
label.setAttribute("class", "parameter-label");
|
||||
label.for = input;
|
||||
label.classList.add("parameter-label");
|
||||
|
||||
label.onclick = function () {
|
||||
handleCheckbox();
|
||||
@ -420,7 +355,7 @@ function createCheckbox(s, name, title, info) {
|
||||
input.checked = true;
|
||||
}
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + value);
|
||||
sendCommand(s, command + " " + value);
|
||||
} else {
|
||||
alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
+ "</b>. <br>"
|
||||
@ -441,7 +376,7 @@ function createCheckbox(s, name, title, info) {
|
||||
input.checked = true;
|
||||
}
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + value);
|
||||
sendCommand(s, command + " " + value);
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
});
|
||||
@ -449,32 +384,32 @@ function createCheckbox(s, name, title, info) {
|
||||
};
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.classList.add("col-right");
|
||||
right.appendChild(input);
|
||||
right.appendChild(label);
|
||||
return appendToContent(info, left, right);
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
function createSelection(s, name, title, buttons, info) {
|
||||
function create_enum_row(s, component) {
|
||||
// Creates row-element containing dropdown-selection.
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var buttons = component.enum_names;
|
||||
|
||||
var left = createTitle(title, info);
|
||||
var left = createTitle(component);
|
||||
|
||||
var select = document.createElement('select');
|
||||
select.setAttribute("name", name);
|
||||
select.setAttribute("__ctype__", "enum");
|
||||
select.setAttribute("class", "select-params");
|
||||
var select = createParElement(component, 'select', 'select-params');
|
||||
|
||||
select.onfocus = function () {
|
||||
select.setAttribute("oldIndex", select.selectedIndex);
|
||||
select.oldIndex = select.selectedIndex;
|
||||
}
|
||||
|
||||
select.oninput = function () {
|
||||
if (writePermission && title != "device config") {
|
||||
if (writePermission && component.title != "device config") {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + this.value);
|
||||
sendCommand(s, command + " " + this.value);
|
||||
} else {
|
||||
alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
+ "</b>. <br>"
|
||||
@ -488,38 +423,37 @@ function createSelection(s, name, title, buttons, info) {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + select.value);
|
||||
sendCommand(s, command + " " + select.value);
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
select.value = select.options[select
|
||||
.getAttribute("oldIndex")].value;
|
||||
select.value = select.options[select.oldIndex].value
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
var option = document.createElement('option');
|
||||
option.setAttribute("type", "enum");
|
||||
option.setAttribute("class", "option-params");
|
||||
option.setAttribute("value", buttons[i].value);
|
||||
option.type = "enum";
|
||||
option.classList.add("option-params");
|
||||
option.value = buttons[i].value;
|
||||
option.appendChild(document.createTextNode(buttons[i].title));
|
||||
select.add(option);
|
||||
}
|
||||
select.style.display = "none";
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.classList.add("col-right");
|
||||
right.appendChild(select);
|
||||
return appendToContent(info, left, right);
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
function createTitle(title, info) {
|
||||
function createTitle(component) {
|
||||
// Creates left side of row-tag containing title. Title may hold additional
|
||||
// information, which is shown, when title-tag is clicked.
|
||||
|
||||
var left = document.createElement('span');
|
||||
if (info) {
|
||||
left.setAttribute("class", "col-left event-toggle-info");
|
||||
if (component.info) {
|
||||
left.classList.add("col-left", "event-toggle-info");
|
||||
|
||||
left.onclick = function () {
|
||||
var infoBox = left.parentNode.childNodes[0];
|
||||
@ -530,41 +464,48 @@ function createTitle(title, info) {
|
||||
}
|
||||
}
|
||||
|
||||
left.innerHTML = title + "<sup><b>(i)</b></sup>";
|
||||
left.innerHTML = component.title + "<sup><b>(i)</b></sup>";
|
||||
} else {
|
||||
left.setAttribute("class", "col-left");
|
||||
left.innerHTML = title;
|
||||
left.classList.add("col-left");
|
||||
left.innerHTML = component.title;
|
||||
}
|
||||
return left;
|
||||
}
|
||||
|
||||
function createInfo(info) {
|
||||
function createParElement(component, tag='span', cls='col-right') {
|
||||
var right = document.createElement(tag);
|
||||
if (cls)
|
||||
right.classList.add(cls);
|
||||
// right.name = is not sufficient, getElementsByName would not work
|
||||
right.setAttribute('name', component.name);
|
||||
right.__ctype__ = component.type;
|
||||
return right;
|
||||
}
|
||||
|
||||
function createInfo(component) {
|
||||
// Creates info-box, which isn't visible by default but can be displayed.
|
||||
|
||||
var infoBox = document.createElement('div');
|
||||
infoBox.setAttribute("class", "info-box");
|
||||
infoBox.classList.add("info-box");
|
||||
|
||||
infoBox.onclick = function () {
|
||||
infoBox.style.display = "none";
|
||||
}
|
||||
|
||||
infoBox.innerHTML = info;
|
||||
infoBox.innerHTML = component.info;
|
||||
return infoBox;
|
||||
}
|
||||
|
||||
function appendToContent(info, left, right) {
|
||||
// Cretees row-tag containing infoBox (not visible by default), left side
|
||||
// (span)
|
||||
// and right side (span).
|
||||
function appendToContent(component, left, right) {
|
||||
// Creates row-tag containing infoBox (not visible by default), left side
|
||||
// (span) and right side (span).
|
||||
|
||||
var row = document.createElement('div');
|
||||
row.setAttribute("class", "row");
|
||||
if (info) {
|
||||
row.appendChild(createInfo(info));
|
||||
row.classList.add("row");
|
||||
if (component.info) {
|
||||
row.appendChild(createInfo(component));
|
||||
}
|
||||
for (var i = 1; i < arguments.length; i++)
|
||||
if (arguments[i]) {
|
||||
row.appendChild(arguments[i]);
|
||||
}
|
||||
row.appendChild(left);
|
||||
row.appendChild(right);
|
||||
return row;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user