diff --git a/client/components/states_indicator/dates/dates.js b/client/components/states_indicator/dates/dates.js
index 4b08874..0d88d10 100644
--- a/client/components/states_indicator/dates/dates.js
+++ b/client/components/states_indicator/dates/dates.js
@@ -40,7 +40,6 @@ class DateIndicator extends HTMLElement{
}
showPopup(){
- console.log("clicked");
this.datePopup.show();
}
diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js
index f76f1fa..bbae654 100644
--- a/client/jsFiles/SEAWebClientCommunication.js
+++ b/client/jsFiles/SEAWebClientCommunication.js
@@ -345,7 +345,7 @@ function successHandler(s, message) {
begin = timeRange[0] - timeRange[1];
select.value = begin;
// Server-request for variable-list.*/
- reqJSON(0, "http://" + hostPort + "/getvars?time=" + timeRange + "&id="
+ reqJSON(0, "http://" + hostPort + "/getvars?time=" + timeRange + "&all=False&id="
+ clientID, successHandler, errorHandler);
break;
// Response to a "getvars"-server-request.
@@ -365,7 +365,8 @@ function successHandler(s, message) {
} else {
nextInitCommand();
}*/
- graphs.receivedVars(message.blocks);
+ // graphs.receivedVars(message.blocks);
+ graphs.initGraphs(message.blocks);
nextInitCommand();
break;
// Response to a "graph"-server-request.
diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js
index ae81280..ea633db 100644
--- a/client/jsFiles/SEAWebClientGraphics.js
+++ b/client/jsFiles/SEAWebClientGraphics.js
@@ -446,7 +446,7 @@ let graphs = (function (){
}*/
}
}
- graph.setMinMax(minTime,maxTime);
+ graph.setMinMax(currentMinTime,currentMaxTime);
graph.autoScaleIf();
graph.update();
showLegends(legendFlag, false);
@@ -804,11 +804,49 @@ let graphs = (function (){
}
function jumpToDate(dateTimestampMs, timeValueMs, mode){
- let msLeftTimestamp = dateTimestampMs + timeValueMs;
- let msRightTimestamp = msLeftTimestamp + 24*60*60*1000;
- if (liveMode && msRightTimestamp < lastTime) setLiveMode(false);
- setMinMax(msLeftTimestamp, msRightTimestamp);
- updateAuto();
+
+ cursorLine(null);
+
+ let msLeftTimestampGetVars = 0, msLeftTimestampGetGraph = 0 , msRightTimestampGetVars = 0, msRightTimestampGetGraph = 0;
+
+ msLeftTimestampGetVars = dateTimestampMs;
+ msLeftTimestampGetGraph = dateTimestampMs;
+
+ if(mode == DatesPopup.TIME){
+ msRightTimestampGetVars = dateTimestampMs + timeValueMs;
+ }
+ else if(mode == DatesPopup.ALL){ // we ignore time
+ msRightTimestampGetVars = dateTimestampMs + 24*60*60*1000 - 1000; // we exclude the very beginning of the next day
+ }
+
+ msRightTimestampGetGraph = dateTimestampMs + 24*60*60*1000 - 1000;
+
+ AJAX("http://" + hostPort + "/getvars?time=" + msLeftTimestampGetVars/1000 + "," + msRightTimestampGetVars/1000 + "&all=" +allQueryParameterRepresentation(mode) + "&id="+ clientID).getJSON().then(function(data){
+ blocks = data.blocks;
+
+ maxTime = msRightTimestampGetGraph;
+ minTime = msLeftTimestampGetGraph;
+
+ currentMaxTime = maxTime + 60000;
+ currentMinTime = minTime;
+
+ globalIndicators.getIndicatorsMap()[datesKey].update(currentMinTime);
+
+ ngraphs = 0; // forces all the graphs to reset
+ createGraphs();
+
+ if (liveMode && msRightTimestampGetGraph < lastTime) setLiveMode(false);
+ });
+
+ }
+
+ function allQueryParameterRepresentation(mode){
+ if(mode == DatesPopup.ALL){
+ return "True";
+ }
+ else {
+ return "False";
+ }
}
function shiftOlder(){
@@ -881,15 +919,28 @@ let graphs = (function (){
}
/**
- * Removes the cursor, sets the window visualisation to [now-previousDelta, now], goes for live mode and updates
+ * Removes the cursor, gets the var + graphs for now (window visualisation to [now-30min, now]) and ask for updates
*/
function gotoNow() {
- cursorLine(null);
- if (!liveMode) {
- setMinMax(graphs.now() - (currentMaxTime - currentMinTime), graphs.now());
- }
- setLiveMode(true);
- updateAuto();
+ let msRightTimestamp = graphs.now();
+ let msLeftTimestamp = msRightTimestamp - 30*60*1000;
+ cursorLine(null);
+
+ AJAX("http://" + hostPort + "/getvars?time=" + msLeftTimestamp/1000 + "," + msRightTimestamp/1000 + "&all=False&id="+ clientID).getJSON().then(function(data){
+ currentMaxTime = msRightTimestamp + 60000;
+ currentMinTime = msLeftTimestamp;
+
+ maxTime = msRightTimestamp;
+ minTime = msLeftTimestamp;
+
+ blocks = data.blocks;
+
+ ngraphs = 0;
+ createGraphs();
+ globalIndicators.getIndicatorsMap()[datesKey].update(currentMinTime);
+ activateUpdates();
+
+ });
}
/*
@@ -906,6 +957,62 @@ let graphs = (function (){
}
*/
+ function buildGraphicsUI(){
+
+ let f = 0;
+ insertSlide(f, " ", "graphics", container);
+
+ let currentSwiper = swiper[f];
+
+ function setSlidingMode(mode) {
+ currentSwiper.params.noSwipingClass = mode ? "allow-swipe" : "swiper-slide-main";
+ }
+
+ currentSwiper.enableSwiping(false);
+ currentSwiper.on('reachBeginning', function () {
+ currentSwiper.enableSwiping(false);
+ })
+
+ let graphicsPanel = container.parentNode.querySelector('.panel')
+ graphicsPanel.classList.add('graphics');
+ graphicsPanel.childNodes[0].style.visibility = "hidden"; // hides the span added by the swippers
+ // The cross to display "main" panel at the location of the graphs
+ let gotoMainElm = document.createElement('div');
+ gotoMainElm.innerHTML = "×";
+ gotoMainElm.addEventListener('click', function () {
+ currentSwiper.enableSwiping(true);
+ console.log("MAIN")
+ currentSwiper.slideNext();
+ });
+
+ globalIndicators.loadIndicators(graphicsPanel);
+ globalControls.loadControls(graphicsPanel);
+ loadGraphicsMenu(graphicsPanel);
+ graphicsPanel.appendChild(gotoMainElm);
+ gotoMainElm.style.marginTop = "auto";
+ gotoMainElm.style.marginBottom = "auto";
+ gotoMainElm.style.marginRight = "6px";
+ gotoMainElm.style.color = "white";
+ gotoMainElm.style.cursor = "pointer";
+ created = true;
+
+ if (isTouchDevice) {
+ doubleTap(removeCursor);
+ } else {
+ window.addEventListener('dblclick', removeCursor);
+ showLegends(true, false);
+ adjustLegends();
+ }
+ }
+
+ function initGraphs(blocks){
+ if(!created){
+ buildGraphicsUI();
+ created = true;
+ }
+ receivedVars(blocks);
+ }
+
/**
* Holds the received variables from the /getvars call, gets the server time, insert slide (?),
* create the graphs, activate SSE graph-update messages, sets the different event listeners
@@ -920,104 +1027,18 @@ let graphs = (function (){
}
AJAX("http://" + hostPort + "/gettime?time=-1800,0&id="+ clientID).getJSON().then(function(data){
startTime = data.time[1]*1000;
- maxTime = startTime + 60000;
- console.log('MAXTIME', maxTime - Date.now());
+ maxTime = startTime;
+ currentMaxTime = maxTime + 60000;
+ // console.log('MAXTIME', currentMaxTime - Date.now());
minTime = data.time[0]*1000;
recvTime = performance.now();
+
+ blocks = blocks_arg;
+
+ createGraphs();
+
+ activateUpdates();
});
-
-
- // g_varlist = getVarlist(nblocks)
- let f = 0;
- insertSlide(f, " ", "graphics", container);
- blocks = blocks_arg;
-
- createGraphs();
-
- activateUpdates();
-
- let graphicsPanel = container.parentNode.querySelector('.panel')
- graphicsPanel.classList.add('graphics');
- graphicsPanel.childNodes[0].style.visibility = "hidden"; // hides the span added by the swippers
- // The cross to display "main" panel at the location of the graphs
- let gotoMainElm = document.createElement('div');
- gotoMainElm.innerHTML = "×";
- gotoMainElm.addEventListener('click', function () {
- currentSwiper.enableSwiping(true);
- console.log("MAIN")
- currentSwiper.slideNext();
- });
-
- if(!created){
- globalIndicators.loadIndicators(graphicsPanel);
- globalControls.loadControls(graphicsPanel);
- loadGraphicsMenu(graphicsPanel);
- graphicsPanel.appendChild(gotoMainElm);
- gotoMainElm.style.marginTop = "auto";
- gotoMainElm.style.marginBottom = "auto";
- gotoMainElm.style.marginRight = "6px";
- gotoMainElm.style.color = "white";
- gotoMainElm.style.cursor = "pointer";
- created = true;
- }
-
- // gotoNowElm.addEventListener('click', gotoNow);
- //gotoNowElm.innerHTML = "go to now";
- // container.parentNode.querySelector('.panel span').appendChild(gotoNowElm);
-
- // Removes the cursor then applies the changes
- // function removeCursor(evt=null) {
- // graphs.cursorLine(null);
- // graphs.update();
- // }
- if (isTouchDevice) {
- doubleTap(removeCursor);
- } else {
- window.addEventListener('dblclick', removeCursor);
- showLegends(true, false);
- adjustLegends();
- // let zoomMode = document.createElement('div');
- /**
- * Sets the HTML button for the y-zoom depending on the current mode
- */
- // function setInnerZoomMode(){
- // if (currentZoomMode == 'y') {
- // zoomMode.innerHTML = "