- timespan can be changed now

- data loading is asyncronus now
- the chart as always ten labels on the y axis now

dashboard.html

@@ -104,15 +104,19 @@
               <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
               <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
             </div>
-            <div class="dropdown" class="h-100">
+            <div class="dropdown dropleft" class="h-100">
-              <button id="dropdownMenuButton" type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
+              <button id="dropdownMenuButton" type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"
+                data-toggle="dropdown">
                 <span data-feather="calendar"></span>
-                This week
+
+
               </button>
               <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                <a class="dropdown-item" href="#">Link 1</a>
+                <a class="dropdown-item" onclick="setTimeRange(86400)" href="#&range[from]=86400">Today</a>
-                <a class="dropdown-item" href="#">Link 2</a>
+                <a class="dropdown-item" onclick="setTimeRange(604800)" href="#&range[from]=604800">This Week</a>
-                <a class="dropdown-item" href="#">Link 3</a>
+                <a class="dropdown-item" onclick="setTimeRange(18144000)" href="#&range[from]=18144000">This Month</a>
+                <a class="dropdown-item" onclick="setTimeRange(220752000)" href="#&range[from]=220752000">This Year</a>
+                <a class="dropdown-item">Custom</a>
               </div>
             </div>
           </div>

js/blueweather.js

@@ -8,16 +8,33 @@ class BlueWeather {
         this.log("init done", 2)
     }
 
-    getLocationData(locId) {
+    getLocationData(locId, range = {from:"", to:""}, async, processingFunction, errorFunction) {
-        this.sendRequest("https://api.itsblue.de/weather/json.php?locId="+locId+"")
+        this.xhttp.abort()
-
+        var thisObject = this
-        if(this.xhttp.status === 200) {
+        if(async) {
-            this.log("getting sensors response was: " + this.xhttp.responseText, 3)
+            this.xhttp.onreadystatechange = function () {
-            var ret = JSON.parse(this.xhttp.responseText)
+                if (this.readyState === 4) {
+                    // Typical action to be performed when the document is ready:
+                    if(this.status === 200) {
+                        thisObject.log("getting sensors response was: " + this.responseText, 3)
+                        var ret = JSON.parse(this.responseText)
                         if(ret){
-                return ret
+                            processingFunction(ret);
+                            return
                         }
                     }
+
+                    if(errorFunction !== null) {
+                        errorFunction(this.status, this.text)
+                    }
+                    
+                }
+            };    
+        }
+        var url = "https://api.itsblue.de/weather/json.php?locId="+locId+"&range[from]="+range.from + "&range[to]="+range.to
+        this.log("starting location request; URL is: " + url, 3)
+        this.xhttp.open("GET", url, async)
+        this.xhttp.send()
     }
 
 
@@ -30,14 +47,6 @@ class BlueWeather {
     // - helper functions -
     // --------------------
 
-    sendRequest(url) {
-        this.log("starting request; URL is: " + url, 3)
-
-        this.xhttp.open("GET", url, false)
-        this.xhttp.send()
-        return this.xhttp
-    }
-
     getCookie(name) {
         var value = "; " + document.cookie;
         var parts = value.split("; " + name + "=");

js/dashboard.js

@@ -13,8 +13,7 @@ function setPage(page) {
   // set page to loading state
   mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
 
-  var locationData = blueweather.getLocationData(thisLoc)
+  blueweather.getLocationData(thisLoc, undefined, true, function(locationData){
-
       // refresh sensors list
   loadSensors(locationData.sensors)
 
@@ -26,12 +25,54 @@ function setPage(page) {
     mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
   }
   else if (page !== -1) {
+    loadDiagram("mainContent", locationData, page)
+  }
+  })
+
+}
+
+function setTimeRange(from="", to=""){
+  blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
+  
+  // set page to loading state
+  mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
+  
+  if(from !== "") {
+    from = new Date().getTime() / 1000 - from
+  }
+  
+  if(to !== "") {
+    to = new Date().getTime() / 1000 - parseInt(to)
+  }
+
+  blueweather.getLocationData(thisLoc, {from: from, to: to}, true, function(locationData){
+    loadDiagram("mainContent", locationData, currentPage)
+  })
+  
+}
+
+function loadSensors(sensors) {
+
+  var sensorsList = document.getElementById("sensorsList")
+  sensorsList.innerHTML = ""
+
+  for (var i = 0; i < sensors.length; i++) {
+    var currentHTML = sensorsList.innerHTML
+    sensorsList.innerHTML = currentHTML +
+      "<li class=\"nav-item\"><a class=\"nav-link\" id=\"navbarPage" + sensors[i]["id"] + "Link\" href=\"#\" onclick=\"setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
+  }
+
+  feather.replace()
+}
+
+function loadDiagram(parentId, locationData, sensorId){
+  mainContent = document.getElementById(parentId)
   // get all relevant  meassurement values
   var vals = []
 
   for (var i = 0; i < locationData["measvalues"].length; i++) {
     var thisValue = locationData["measvalues"][i]
-      if (parseInt(thisValue['sensorid']) === page) {
+    if (parseInt(thisValue['sensorid']) === sensorId) {
       vals.push(thisValue)
     }
   }
@@ -41,7 +82,7 @@ function setPage(page) {
 
   for (i = 0; i < locationData['sensors'].length; i++) {
     var thisSensor = locationData['sensors'][i]
-      if (parseInt(thisSensor.id) === page) {
+    if (parseInt(thisSensor.id) === sensorId) {
       sensor = thisSensor;
       break;
     }
@@ -72,29 +113,13 @@ function setPage(page) {
   mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
   setPageTitle(chartData.label)
 
-    blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
+  //blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
 
   createDiagram("myChart", chartData)
-  }
-
-}
-
-function loadSensors(sensors) {
-
-  var sensorsList = document.getElementById("sensorsList")
-  sensorsList.innerHTML = ""
-
-  for (var i = 0; i < sensors.length; i++) {
-    var currentHTML = sensorsList.innerHTML
-    sensorsList.innerHTML = currentHTML +
-      "<li class=\"nav-item\"><a class=\"nav-link\" id=\"navbarPage" + sensors[i]["id"] + "Link\" href=\"#\" onclick=\"setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
-  }
-
-  feather.replace()
 }
 
 function createDiagram(canvasId, data) {
-  var pointradius = 3
+  var pointradius = data.data.length > 500 ? 0:3
   // Graphs
   var ctx = document.getElementById(canvasId)
   // eslint-disable-next-line no-unused-vars
@@ -126,7 +151,10 @@ function createDiagram(canvasId, data) {
 
       xAxes: [{
         ticks: {
-          max: data.range.from, min: data.range.to,
+          min: parseInt(data.range.from), 
+          max: parseInt(data.range.to),
+          beginAtZero: false,
+          stepSize: (data.range.to - data.range.from) / 10,
           userCallback: function (label, index, labels) {
             var d = new Date(parseInt(label) * 1000);
             var datestr =