566 lines
19 KiB
JavaScript
566 lines
19 KiB
JavaScript
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
// % GROUP
|
|
|
|
var writePermissionTimeout; // Sets writePermission to 'false, restarts by
|
|
// user-interaction.
|
|
|
|
var prompt = false // True while a prompt is opened.
|
|
|
|
function getGroup(s, name) {
|
|
var found = false;
|
|
if (name == "") {
|
|
swiper[s].slideTo(defaultSlidePos(s));
|
|
return;
|
|
}
|
|
for (var i = 0; i < swiper[s].slides.length; i++) {
|
|
var slideType = swiper[s].slides[i].getAttribute("slide-type");
|
|
if (slideType == name) {
|
|
found = true;
|
|
swiper[s].slideTo(i);
|
|
}
|
|
}
|
|
if (!found && name != "console" && name != "graphics") {
|
|
// Server-request for group.
|
|
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
|
|
+ "&id=" + clientID, successHandler, errorHandler);
|
|
}
|
|
}
|
|
|
|
function sendCommand(s, command) {
|
|
reqJSON(s, "http://" + hostPort + "/sendcommand?command=" + command
|
|
+ "&id=" + clientID, successHandler, errorHandler);
|
|
}
|
|
|
|
function createContent(s, message) {
|
|
// Depending on the message received from the server the content of the
|
|
// group
|
|
// is created dynamically. Handles draw-message.
|
|
|
|
var content = document.createElement('div');
|
|
content.setAttribute("class", "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;
|
|
}
|
|
}
|
|
return content;
|
|
}
|
|
|
|
function gotoGroups(slideNames) {
|
|
slideNames = slideNames.split("%20");
|
|
var l = Math.min(MAXBLOCK,slideNames.length);
|
|
document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
|
|
for (var s=0; s<l; s++) {
|
|
getGroup(s, slideNames[s]);
|
|
}
|
|
}
|
|
|
|
function createLink(s, name, title) {
|
|
// Creates row-element containing link.
|
|
|
|
var row = document.createElement('row');
|
|
row.setAttribute("id", name);
|
|
row.setAttribute("name", title);
|
|
row.setAttribute("class", "interactive row link");
|
|
row.setAttribute("tabindex", 0);
|
|
|
|
row.onclick = function () {
|
|
var slideNames = getSlideNames();
|
|
slideNames[s] = 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.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) {
|
|
// Creates row-element containing link AND read-only-item.
|
|
|
|
// var left = createTitle(title, info);
|
|
var left = document.createElement('a');
|
|
left.setAttribute("class", "col-left");
|
|
left.innerHTML = title;
|
|
|
|
left.setAttribute("id", name);
|
|
left.setAttribute("name", title);
|
|
left.setAttribute("class", "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.onclick = function () {
|
|
this.style.backgroundColor = "orangered";
|
|
left.click();
|
|
}
|
|
if (link.charAt(0) == ':') {
|
|
left.href = "http://" + location.hostname + link + "/";
|
|
} else {
|
|
left.href = link;
|
|
}
|
|
|
|
row.setAttribute("class", "row clickable");
|
|
return row;
|
|
}
|
|
|
|
function createPushButton(s, name, title, info) {
|
|
// Creates row-element containing a push button
|
|
|
|
var left = createTitle(title, info);
|
|
console.log(info);
|
|
|
|
left.setAttribute("id", name);
|
|
left.setAttribute("name", title);
|
|
|
|
var right = document.createElement('span');
|
|
right.setAttribute("class", "col-right clickable push-button");
|
|
right.setAttribute("name", name);
|
|
right.setAttribute("__ctype__", "rdonly");
|
|
|
|
row = appendToContent(info, left, right);
|
|
right.onclick = function () {
|
|
if (writePermission) {
|
|
var row = left.parentNode;
|
|
right.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, name);
|
|
} else {
|
|
prompt = true;
|
|
alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
+ "</b>. <br>"
|
|
+ "Are you sure you want to modify things here?",
|
|
function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, name);
|
|
prompt = false;
|
|
}, function () {
|
|
// User decided to cancel
|
|
prompt = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
row.setAttribute("class", "row");
|
|
return row;
|
|
}
|
|
|
|
function createInput(s, name, title, info) {
|
|
// Creates row-element containing input-item.
|
|
|
|
if (info) {
|
|
var infoBox = createInfo(title, info);
|
|
}
|
|
var left = createTitle(title, info);
|
|
|
|
var input = document.createElement('input');
|
|
input.setAttribute("type", "text");
|
|
input.setAttribute("class", "input-text");
|
|
input.setAttribute("name", name);
|
|
input.setAttribute("__ctype__", "input");
|
|
input.style.width = "100px";
|
|
|
|
input.onkeydown = function (e) {
|
|
if (e.which === 27 || e.key == "Escape") {
|
|
// User decided to cancel
|
|
input.value = input.getAttribute("oldValue");
|
|
resizeTextfield(input);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "white";
|
|
}
|
|
}
|
|
|
|
input.onfocus = function () {
|
|
input.setAttribute("oldValue", input.value);
|
|
|
|
if (isTouchDevice())
|
|
setTimeout(function () {
|
|
posTextfield(s, left);
|
|
}, 1);
|
|
}
|
|
|
|
input.onblur = function () {
|
|
if (prompt) {
|
|
return false;
|
|
}
|
|
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");
|
|
if (value === actualValue || value === oldValue) {
|
|
input.value = actualValue;
|
|
// nothing to do.
|
|
row.style.backgroundColor = "white";
|
|
return false;
|
|
}
|
|
// User changed value and moved focus to other object.
|
|
alertify.confirm("", "You changed a field without pressing the return key.<br>"
|
|
+ "Hint: press ESC for leaving a field unchanged.<b>"
|
|
+ "You are connected with <b>" + clientTitle + "</b>.<br>"
|
|
+ "Are you sure you want to change the value of<br><b>"
|
|
+ name + "</b> from <b>" + actualValue
|
|
+ "</b> to <b>" + value + "</b>?", function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, name + " " + value);
|
|
resizeTextfield(input);
|
|
prompt = false;
|
|
}, function () {
|
|
// User decided to cancel
|
|
input.value = input.getAttribute("actualValue");
|
|
resizeTextfield(input);
|
|
row.style.backgroundColor = "white";
|
|
prompt = false;
|
|
});
|
|
}
|
|
|
|
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);
|
|
} else {
|
|
var value = input.value
|
|
prompt = true;
|
|
alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
+ "</b>. <br>"
|
|
+ "Are you sure you want to modify things here?",
|
|
function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, name + " " + value);
|
|
resizeTextfield(input);
|
|
prompt = false;
|
|
}, function () {
|
|
// User decided to cancel
|
|
input.value = input.getAttribute("oldValue");
|
|
resizeTextfield(input);
|
|
prompt = false;
|
|
});
|
|
}
|
|
};
|
|
form.appendChild(input);
|
|
|
|
var right = document.createElement('span');
|
|
right.setAttribute("class", "col-right");
|
|
right.appendChild(form);
|
|
return appendToContent(info, left, right);
|
|
}
|
|
|
|
function posTextfield(s, left) {
|
|
var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
|
|
var row = left.parentNode;
|
|
content.scrollTop = row.offsetTop - 30;
|
|
}
|
|
|
|
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);
|
|
if (input.value.length < 43) {
|
|
input.style.width = input.value.length * str1 * 12 / 20 + "px";
|
|
}
|
|
} else {
|
|
input.style.width = "100px";
|
|
}
|
|
}
|
|
|
|
function createCheckbox(s, name, title, info) {
|
|
// Creates row-element containing checkbox-item
|
|
|
|
var left = createTitle(title, info);
|
|
|
|
var input = document.createElement('input');
|
|
input.setAttribute("type", "checkbox");
|
|
input.setAttribute("name", name);
|
|
input.setAttribute("__ctype__", "checkbox");
|
|
input.setAttribute("class", "parameter-checkbox");
|
|
|
|
input.onkeyup = function (e) {
|
|
if (e.keyCode === 32) {
|
|
handleCheckbox();
|
|
}
|
|
}
|
|
|
|
var label = document.createElement('label');
|
|
label.setAttribute("for", input);
|
|
label.setAttribute("class", "parameter-label");
|
|
|
|
label.onclick = function () {
|
|
handleCheckbox();
|
|
}
|
|
|
|
function handleCheckbox() {
|
|
if (writePermission) {
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
if (input.checked) {
|
|
var value = "0";
|
|
input.checked = false;
|
|
} else {
|
|
var value = "1";
|
|
input.checked = true;
|
|
}
|
|
// Request for command
|
|
sendCommand(s, name + " " + value);
|
|
} else {
|
|
alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
+ "</b>. <br>"
|
|
+ "Are you sure you want to modify things here?",
|
|
function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
if (input.checked) {
|
|
var value = "0";
|
|
input.checked = false;
|
|
} else {
|
|
var value = "1";
|
|
input.checked = true;
|
|
}
|
|
// Request for command
|
|
sendCommand(s, name + " " + value);
|
|
}, function () {
|
|
// User decided to cancel
|
|
});
|
|
}
|
|
};
|
|
|
|
var right = document.createElement('span');
|
|
right.setAttribute("class", "col-right");
|
|
right.appendChild(input);
|
|
right.appendChild(label);
|
|
return appendToContent(info, left, right);
|
|
}
|
|
|
|
function createSelection(s, name, title, buttons, info) {
|
|
// Creates row-element containing dropdown-selection.
|
|
|
|
var left = createTitle(title, info);
|
|
|
|
var select = document.createElement('select');
|
|
select.setAttribute("name", name);
|
|
select.setAttribute("__ctype__", "enum");
|
|
select.setAttribute("class", "select-params");
|
|
|
|
select.onfocus = function () {
|
|
select.setAttribute("oldIndex", select.selectedIndex);
|
|
}
|
|
|
|
select.oninput = function () {
|
|
if (writePermission && title != "device config") {
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, name + " " + this.value);
|
|
} else {
|
|
alertify.confirm("", "You are connected with <b>" + clientTitle
|
|
+ "</b>. <br>"
|
|
+ "Are you sure you want to modify things here?",
|
|
function () {
|
|
// User decided to proceed.
|
|
writePermission = true;
|
|
writePermissionTimeout = setTimeout(function () {
|
|
writePermission = false;
|
|
}, 3600000);
|
|
var row = left.parentNode;
|
|
row.style.backgroundColor = "orangered";
|
|
// Request for command
|
|
sendCommand(s, name + " " + select.value);
|
|
}, function () {
|
|
// User decided to cancel
|
|
select.value = select.options[select
|
|
.getAttribute("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.appendChild(document.createTextNode(buttons[i].title));
|
|
select.add(option);
|
|
}
|
|
select.style.display = "none";
|
|
|
|
var right = document.createElement('span');
|
|
right.setAttribute("class", "col-right");
|
|
right.appendChild(select);
|
|
return appendToContent(info, left, right);
|
|
}
|
|
|
|
function createTitle(title, info) {
|
|
// 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");
|
|
|
|
left.onclick = function () {
|
|
var infoBox = left.parentNode.childNodes[0];
|
|
if (infoBox.style.display == "none") {
|
|
infoBox.style.display = "block";
|
|
} else {
|
|
infoBox.style.display = "none";
|
|
}
|
|
}
|
|
|
|
left.innerHTML = title + "<sup><b>(i)</b></sup>";
|
|
} else {
|
|
left.setAttribute("class", "col-left");
|
|
left.innerHTML = title;
|
|
}
|
|
return left;
|
|
}
|
|
|
|
function createInfo(info) {
|
|
// Creates info-box, which isn't visible by default but can be displayed.
|
|
|
|
var infoBox = document.createElement('div');
|
|
infoBox.setAttribute("class", "info-box");
|
|
|
|
infoBox.onclick = function () {
|
|
infoBox.style.display = "none";
|
|
}
|
|
|
|
infoBox.innerHTML = info;
|
|
return infoBox;
|
|
}
|
|
|
|
function appendToContent(info, left, right) {
|
|
// Cretees 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));
|
|
}
|
|
for (var i = 1; i < arguments.length; i++)
|
|
if (arguments[i]) {
|
|
row.appendChild(arguments[i]);
|
|
}
|
|
return row;
|
|
}
|