Initial commit
This commit is contained in:
l_samenv
198
client/jsFiles/SEAWebClientMain.js
Normal file
198
client/jsFiles/SEAWebClientMain.js
Normal file
@ -0,0 +1,198 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % 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)
|
||||
.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();
|
||||
// Create swiper-instances.
|
||||
for (var s = 0; s < MAXBLOCK; s++) {
|
||||
swiper[s] = insertSwiper(s);
|
||||
}
|
||||
var homeButton = document.getElementById("home-icon");
|
||||
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.setAttribute("style", "width: auto;"); */
|
||||
main_panel.setAttribute("style", "display: block;");
|
||||
} else {
|
||||
/* header.setAttribute("style", "width: 30px;"); */
|
||||
main_panel.setAttribute("style", "display: none;");
|
||||
}
|
||||
return true;
|
||||
}
|
||||
Reference in New Issue
Block a user