- 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(async) {
+            this.xhttp.onreadystatechange = function () {
+                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){
+                            processingFunction(ret);
+                            return
+                        }
+                    }
 
-        if(this.xhttp.status === 200) {
+                    if(errorFunction !== null) {
-            this.log("getting sensors response was: " + this.xhttp.responseText, 3)
+                        errorFunction(this.status, this.text)
-            var ret = JSON.parse(this.xhttp.responseText)
+                    }
-            if(ret){
+                    
-                return ret
+                }
-            }
+            };    
         }
+        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,9 +13,8 @@ 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
-  // refresh sensors list
   loadSensors(locationData.sensors)
 
   // set acive page in navbar
@@ -26,56 +25,29 @@ function setPage(page) {
     mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
   }
   else if (page !== -1) {
-    // get all relevant  meassurement values
+    loadDiagram("mainContent", locationData, page)
-    var vals = []
-
-    for (var i = 0; i < locationData["measvalues"].length; i++) {
-      var thisValue = locationData["measvalues"][i]
-      if (parseInt(thisValue['sensorid']) === page) {
-        vals.push(thisValue)
-      }
-    }
-
-    // get the current sensor
-    var sensor;
-
-    for (i = 0; i < locationData['sensors'].length; i++) {
-      var thisSensor = locationData['sensors'][i]
-      if (parseInt(thisSensor.id) === page) {
-        sensor = thisSensor;
-        break;
-      }
-    }
-
-    // get the value type
-    var valueType;
-
-    for (i = 0; i < locationData['valuetypes'].length; i++) {
-      var thisValType = locationData['valuetypes'][i]
-      if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
-        valueType = thisValType;
-        break;
-      }
-    }
-
-    // build chart data array
-    var chartData = {
-      label: sensor.sensorname + " (" + valueType.valuetype + ")",
-      data: [],
-      range: locationData.range
-    }
-
-    for (i = 0; i < vals.length; i++) {
-      chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
-    }
-
-    mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
-    setPageTitle(chartData.label)
-
-    blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
-
-    createDiagram("myChart", chartData)
   }
+  })
+
+}
+
+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)
+  })
   
 }
 
@@ -93,8 +65,61 @@ function loadSensors(sensors) {
   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']) === sensorId) {
+      vals.push(thisValue)
+    }
+  }
+
+  // get the current sensor
+  var sensor;
+
+  for (i = 0; i < locationData['sensors'].length; i++) {
+    var thisSensor = locationData['sensors'][i]
+    if (parseInt(thisSensor.id) === sensorId) {
+      sensor = thisSensor;
+      break;
+    }
+  }
+
+  // get the value type
+  var valueType;
+
+  for (i = 0; i < locationData['valuetypes'].length; i++) {
+    var thisValType = locationData['valuetypes'][i]
+    if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
+      valueType = thisValType;
+      break;
+    }
+  }
+
+  // build chart data array
+  var chartData = {
+    label: sensor.sensorname + " (" + valueType.valuetype + ")",
+    data: [],
+    range: locationData.range
+  }
+
+  for (i = 0; i < vals.length; i++) {
+    chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
+  }
+
+  mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
+  setPageTitle(chartData.label)
+
+  //blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
+
+  createDiagram("myChart", chartData)
+}
+
 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 =