208 lines
7.3 KiB
JavaScript
208 lines
7.3 KiB
JavaScript
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
// % INIT
|
|
|
|
var MAXBLOCK = 4; // max number of blocks
|
|
var elements = []; // grid elements
|
|
var swiper = []; // This array contains main-swiper-Instances.
|
|
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 writePermission = false;
|
|
var menuMode = false;
|
|
var panelOn = true;
|
|
var firstState = 0;
|
|
|
|
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("showConsole", "sc", to_bool, true)
|
|
.treat("showOverview", "so", to_bool, true)
|
|
.treat("showGraphics", "sg", to_bool, true) // false)
|
|
.treat("hideRightPart", "hr", to_bool, true) //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)
|
|
|
|
function loadFirstBlocks() {
|
|
|
|
if (showMain) pushInitCommand("getblock?path=main&", "main")
|
|
if (showConsole) pushInitCommand("console?", "console")
|
|
if (nColumns == 1) { // probably mobile phone}
|
|
if (showGraphics) pushInitCommand("gettime?time=-1800,0&", "graphics")
|
|
if (showOverview) pushInitCommand("getblock?path=_overview&", "overview")
|
|
} else {
|
|
if (showOverview) pushInitCommand("getblock?path=_overview&", "overview")
|
|
if (showGraphics) pushInitCommand("gettime?time=-1800,0&", "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;
|
|
if (location.hash) { // there was a #hash part
|
|
var slideNames = location.hash.substr(1);
|
|
gotoGroups(slideNames);
|
|
}
|
|
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();
|
|
|
|
let crossElement = document.getElementById("close-cross");
|
|
|
|
if(window["hideRightPart"]){
|
|
document.body.removeChild(crossElement);
|
|
}else{
|
|
crossElement.onclick = function(){
|
|
if(nColumns == 1){ // if the screen is small, the cross always slides to the next slide
|
|
let someSwiper = swiper[0];
|
|
someSwiper.enableSwiping(true); // needed because someSwiper might be the graphs swiper, and swiping is disable by default
|
|
someSwiper.slideNext(); // someSwiper can be anything, it will swipe to the next slide
|
|
}else{ // else it toggles the graphs window's size and triggers the adjustGrid()
|
|
window["wideGraphs"] = !window['wideGraphs'];
|
|
adjustGrid();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Create swiper-instances.
|
|
for (var s = 0; s < MAXBLOCK; s++) {
|
|
swiper[s] = insertSwiper(s);
|
|
}
|
|
var homeButton = document.getElementById("home-icon");
|
|
|
|
// TODO : uncomment this code with the right URL to navigate to when the way to select the instrument will be decided.
|
|
// homeButton.onclick = function () {
|
|
// window.location = "http://" + location.hostname + ":8800/";
|
|
// };
|
|
buildUpdateConnection();
|
|
if (location.hash) {
|
|
console.log("hash in url", location.hash);
|
|
initSlides = location.hash.substring(1);
|
|
} else {
|
|
initSlides = "";
|
|
}
|
|
// Initialisation will be continued, when SSE-connection is established
|
|
// and id-message is obtained.
|
|
// (see also at SEAWebClientCommunication.js)
|
|
addEventListener("popstate", function (e) {
|
|
if (e.state) {
|
|
if (loadingShown) {
|
|
if (initSlides != e.state.funarg) {
|
|
console.log("hash mismatch", initSlides, e.state.funarg);
|
|
initSlides = e.state.funarg;
|
|
}
|
|
} else {
|
|
console.log("popstate", e.state.func, e.state.funarg);
|
|
window[e.state.func](e.state.funarg);
|
|
}
|
|
} else {
|
|
document.title = "SEA "+ clientTitle;
|
|
for (var s=0; s<MAXBLOCK; s++) {
|
|
swiper[s].slideTo(defaultSlidePos(s));
|
|
}
|
|
}
|
|
})
|
|
};
|
|
|
|
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;
|
|
}
|