269 lines
10 KiB
JavaScript
269 lines
10 KiB
JavaScript
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
// % INIT
|
|
var hostPort = ""; // Address and port of static html-file.
|
|
var clientID = ""; // ID given by server when SSE-connection is established.
|
|
var clientTitle = ""; // Contains name of instrument and device.
|
|
var getUpdates = true;
|
|
var getUpdatesGraphics = true;
|
|
var initCommands = [];
|
|
var loadingShown = true;
|
|
var panelOn = true;
|
|
|
|
function Settings() {
|
|
// get key/value pairs from search part of the URL and fill into query
|
|
var qstr = location.search;
|
|
// console.log(qstr);
|
|
if (qstr) {
|
|
var a = (qstr[0] === '?' ? qstr.substr(1) : qstr).split('&');
|
|
for (var i = 0; i < a.length; i++) {
|
|
var b = a[i].split('=');
|
|
key = decodeURIComponent(b[0]);
|
|
value = decodeURIComponent(b.slice(1).join("=").replace(/\+/g, '%20'));
|
|
this[key] = value;
|
|
}
|
|
}
|
|
this.treat = function (variable, shortcut, convert, defaultValue) {
|
|
// the third argument should be:
|
|
// None or omitted for a string
|
|
// to_bool for converting to boolean
|
|
// Number for converting to a number
|
|
if (shortcut in this) {
|
|
value = this[shortcut];
|
|
if (convert) {
|
|
value = convert(value);
|
|
}
|
|
} else {
|
|
value = defaultValue;
|
|
}
|
|
//console.log(variable, value);
|
|
window[variable] = value;
|
|
return this;
|
|
}
|
|
this.add_init = function (shortcut, command, defaultValue) {
|
|
if (shortcut in this) {
|
|
value = to_bool(this[shortcut]);
|
|
console.log(shortcut, value);
|
|
} else {
|
|
value = defaultValue;
|
|
console.log(shortcut, value);
|
|
}
|
|
if (value) {
|
|
initCommands.push(command);
|
|
}
|
|
return this;
|
|
}
|
|
}
|
|
|
|
function to_bool(string) {
|
|
// everything else than false, 0 or an empty string is considered as true
|
|
return !/^(false|FALSE|False|0|)$/.test(string);
|
|
}
|
|
|
|
// example: localhost:5000/SEAWebClient.html?hp=ldmzolliker:5000&dc=1
|
|
// hostPort given and debugCommunication switched on
|
|
new Settings()
|
|
.treat("debugCommunication", "dc", 0, 0) // 1: debug synchronous comm. 2: debug syn and asyn comm
|
|
.treat("debugGraphics", "dg", to_bool, false)
|
|
.treat("hostPort", "hp", 0, location.hostname + ":" + location.port)
|
|
.treat("showMain", "sm", to_bool, true)
|
|
.treat("initConsole", "ic", to_bool, true)
|
|
.treat("showGraphics", "sg", to_bool, true) // false)
|
|
.treat("hideRightPart", "hr", to_bool, false) //used to completely disable the right part
|
|
.treat("wideGraphs", "wg", to_bool, false) //used to toggle the size of the graphs part
|
|
.treat("showAsync", "sa", to_bool, false)
|
|
.treat("device", "device", 0, "")
|
|
.treat("stream", "stream", 0, "")
|
|
.treat("instrument", "instrument", 0, "")
|
|
.treat("timerange", "time", 0, "-1800,0")
|
|
.treat("lazyPermission", "wr", to_bool, true);
|
|
|
|
|
|
if (window.instrument) {
|
|
window.clientTags = "&instrument=" + window.instrument;
|
|
} else {
|
|
let args = '';
|
|
if (window.stream) { args += "&stream=" + window.stream; }
|
|
if (window.device) { args += "&device=" + window.device; }
|
|
window.clientTags = args;
|
|
}
|
|
|
|
// console.log('TAGS', window.clientTags);
|
|
|
|
function loadFirstBlocks() {
|
|
if (showMain) pushInitCommand("getblock?path=main&", "main")
|
|
if (initConsole) pushInitCommand("console?", "console")
|
|
if (nColumns == 1) { // probably mobile phone}
|
|
if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics")
|
|
var goFS = document.getElementById('header');
|
|
goFS.addEventListener(
|
|
'click',
|
|
function () {
|
|
document.body.requestFullscreen();
|
|
},
|
|
false,
|
|
);
|
|
} else {
|
|
if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics")
|
|
// last is shown first
|
|
}
|
|
}
|
|
|
|
function nextInitCommand() {
|
|
// do the next init request
|
|
if (initCommands.length > 0) {
|
|
next = initCommands.shift();
|
|
cmd = next[0]
|
|
text = next[1]
|
|
var loadingSpan = document.getElementsByClassName("loading-span")[0];
|
|
loadingSpan.innerHTML = loadingSpan.innerHTML + "<br>loading " + htmlEscape(text) + " ...";
|
|
reqJSON(0, "http://" + hostPort + "/" + cmd + "id=" + clientID, successHandler, errorHandler);
|
|
} else if (loadingShown) {
|
|
var loadingScreen = document.getElementsByClassName("loading-div")[0];
|
|
loadingScreen.style.display = "none";
|
|
loadingShown = false;
|
|
console.log("loading finished");
|
|
}
|
|
}
|
|
|
|
function pushInitCommand(cmd, text) {
|
|
initCommands.push([cmd, text]);
|
|
}
|
|
|
|
window.onload = function() {
|
|
// Executed when loading of page is completed.
|
|
|
|
// Create grid-elements. (see also at
|
|
// 'SEAWebClientResponsivity.js')
|
|
elements = createGrid();
|
|
// Number of shown columns 'm' and rows 'n' is determined depending on
|
|
// available viewport-size.
|
|
determineViewportSize();
|
|
// Determine size of grid-elements depending on number of columns 'm' and
|
|
// rows 'n'
|
|
adjustGrid();
|
|
|
|
/* ----------------------------------------------------------------------------------------------------- */
|
|
/* MIAN ICONS */
|
|
|
|
let icon_close_container = document.getElementsByClassName("icon-close-container")[0];
|
|
let icon_log_container = document.getElementsByClassName("icon-log-container")[0];
|
|
let icon_lock_container = document.getElementsByClassName("icon-lock-container")[0];
|
|
|
|
if (window.hideRightPart){
|
|
document.body.removeChild(icon_close_container);
|
|
} else {
|
|
icon_close_container.onclick = function(){
|
|
if (showParams) {
|
|
showParams = false;
|
|
// icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_sinus.png">';
|
|
icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_close.png">';
|
|
} else {
|
|
if (window.wideGraphs) {
|
|
window.wideGraphs = false;
|
|
document.getElementsByClassName('graphics')[0].classList.remove('panel-graphics-wide');
|
|
// icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_sinus.png">';
|
|
icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_close.png">';
|
|
icon_log_container.classList.remove("icon-main-container-hidden");
|
|
} else {
|
|
window.wideGraphs = true;
|
|
document.getElementsByClassName('graphics')[0].classList.add('panel-graphics-wide');
|
|
// icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_modules.png">';
|
|
icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_close.png">';
|
|
icon_log_container.classList.add("icon-main-container-hidden");
|
|
}
|
|
}
|
|
adjustGrid();
|
|
}
|
|
}
|
|
|
|
icon_log_container.onclick = function(){
|
|
if (showConsole) {
|
|
showConsole = false;
|
|
} else {
|
|
showConsole = true;
|
|
}
|
|
adjustGrid();
|
|
}
|
|
|
|
function changeWritePermission(flag) {
|
|
let array_icon_edit = document.getElementsByClassName('icon-edit');
|
|
let array_pushbutton = document.getElementsByClassName('push-button');
|
|
let array_col_right_value = document.getElementsByClassName('col-right-value');
|
|
|
|
writePermission = flag;
|
|
if (writePermission) {
|
|
icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_open.png">';
|
|
for(i = 0; i < array_icon_edit.length; i++) {
|
|
array_icon_edit[i].classList.remove('icon-edit-hidden');
|
|
}
|
|
for(i = 0; i < array_pushbutton.length; i++) {
|
|
array_pushbutton[i].classList.add('push-button-active');
|
|
}
|
|
for (let i = 0; i < array_col_right_value.length; i++) {
|
|
array_col_right_value[i].classList.add('col-right-value-with-write-permission');
|
|
}
|
|
} else {
|
|
icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_closed.png">';
|
|
for(i = 0; i < array_icon_edit.length; i++) {
|
|
array_icon_edit[i].classList.add('icon-edit-hidden');
|
|
}
|
|
for(i = 0; i < array_pushbutton.length; i++) {
|
|
array_pushbutton[i].classList.remove('push-button-active');
|
|
}
|
|
for (let i = 0; i < array_col_right_value.length; i++) {
|
|
array_col_right_value[i].classList.remove('col-right-value-with-write-permission');
|
|
}
|
|
}
|
|
}
|
|
|
|
if (window.lazyPermission) {
|
|
changeWritePermission(true);
|
|
}
|
|
|
|
icon_lock_container.onclick = function(){
|
|
if (writePermission == false) {
|
|
if (window.lazyPermission) {
|
|
changeWritePermission(true);
|
|
} else {
|
|
alertify.prompt( "WRITE PERMISSION", "Current device: <b>"+ window.device + "</b><p>Please confirm the instrument:", ""
|
|
, function(evt, value) {
|
|
// User decided to proceed
|
|
if (window.instrument.toUpperCase() == value.toUpperCase()) {
|
|
changeWritePermission(true);
|
|
}
|
|
}
|
|
, function() {
|
|
// User decided to cancel
|
|
prompt = false;
|
|
});
|
|
}
|
|
} else {
|
|
changeWritePermission(false);
|
|
}
|
|
}
|
|
|
|
|
|
var homeButton = document.getElementById("home-icon");
|
|
|
|
homeButton.onclick = function () {
|
|
window.location = "/select_experiment";
|
|
};
|
|
buildUpdateConnection();
|
|
};
|
|
|
|
function toggleHeader() {
|
|
// Show and hide box showing name of the current device ('see also
|
|
// SEAWebClient.html')
|
|
var main_panel = document.getElementById("main-panel");
|
|
panelOn = !panelOn;
|
|
if (panelOn) {
|
|
// header.innerHTML = clientTitle
|
|
/* header.style.width = "auto;"; */
|
|
main_panel.style.display = "block";
|
|
} else {
|
|
/* header.style.width = "30px"; */
|
|
main_panel.style.display = "none";
|
|
}
|
|
return true;
|
|
}
|