time range is now displayed in the time range button

js/dashboard.js

@@ -29,6 +29,8 @@ class BlueWeatherDashboard {
   loadDashboard() {
     window.history.pushState("object or string", "Title", this.buildUrl({ "params": JSON.stringify(this.params) }));
 
+    this.setTimeRange(this.params.from, this.params.to, false, false)
+
     // page: -1 for dashboard or sensor id
     var mainContent = document.getElementById('mainContent')
     var loader = document.getElementById('loader')
@@ -39,6 +41,10 @@ class BlueWeatherDashboard {
 
     var page = this.params.page
 
+    if(this.initDone){
+    document.getElementById("navbarPage" + page + "Link").classList.add("active")
+    }
+
     this.blueweather.getLocationData(this.params.loc, { from: this.params.range.from, to: this.params.range.to }, this.params.maxVals, true, function (locationData) {
       // refresh sensors list
       dashboard.loadSensors(locationData.sensors)
@@ -84,34 +90,38 @@ class BlueWeatherDashboard {
           // get all relevant  meassurement values
           var vals = []
           var sum = 0
-          var min
+          var min = undefined
-          var max
+          var max = undefined
+          var avg = 0
 
           for (s = 0; s < locationData["measvalues"].length; s++) {
             var thisValue = locationData["measvalues"][s]
             if (parseInt(thisValue['sensorid']) === parseInt(sensor.id)) {
               vals.push(thisValue)
-              sum += thisValue.measvalue
+              if (parseFloat(thisValue.measvalue) < min || min === undefined) {
-              if(thisValue.measvalue < min || min === undefined) {
+                min = parseFloat(thisValue.measvalue)
-                min = thisValue.measvalue
               }
-              if(thisValue.measvalue > max || max === undefined) {
+              if (parseFloat(thisValue.measvalue) > max || max === undefined) {
-                max = thisValue.measvalue
+                max = parseFloat(thisValue.measvalue)
               }
             }
           }
 
-          if(vals.length < 1) {
+          for (s = 0; s < vals.length; s++) {
+            avg += vals[s].measvalue / vals.length
+          }
+
+          if (vals.length < 1) {
             continue
           }
 
-          vals.sort(function(a,b){
+          vals.sort(function (a, b) {
             return b.timestamp - a.timestamp
           })
 
           // create table col
           var tableRow = document.createElement("tr")
-          tableRow.innerHTML = "<td>" + sensor.sensorname + " (" + valueType.valuetype + ", " + valueType.valueunit + ")" + "</td><td>" + min + "</td><td>" + max + "</td><td>" + (Math.round((sum / vals.length)*100)/100) + "</td>"
+          tableRow.innerHTML = "<td>" + sensor.sensorname + " (" + valueType.valuetype + ", " + valueType.valueunit + ")" + "</td><td>" + min + "</td><td>" + max + "</td><td>" + (Math.round((avg) * 100) / 100) + "</td>"
           tableBody.appendChild(tableRow)
 
           // - create widget card -
@@ -139,7 +149,7 @@ class BlueWeatherDashboard {
           var thisUpdateTime = document.createElement("small")
           thisUpdateTime.classList.add("text-muted")
           var lastUpdated = new Date(latestVal.timestamp * 1000)
-          thisUpdateTime.innerHTML = "last updated " + (lastUpdated.getDate() === new Date().getDate() ? "today" : lastUpdated.getFullYear+"-"+lastUpdated.getMonth()+"-"+lastUpdated.getDate()) + " at " + lastUpdated.getHours() + ":" + lastUpdated.getMinutes()
+          thisUpdateTime.innerHTML = "last updated " + (lastUpdated.getDate() === new Date().getDate() ? "today" : lastUpdated.getFullYear + "-" + lastUpdated.getMonth() + "-" + lastUpdated.getDate()) + " at " + lastUpdated.getHours() + ":" + lastUpdated.getMinutes()
           thisFooter.appendChild(thisUpdateTime)
           thisWidget.appendChild(thisFooter)
 
@@ -148,38 +158,38 @@ class BlueWeatherDashboard {
 
           switch (displayProperties.type) {
             case "doughnut":
-                // the widget is gauge-like
+              // the widget is gauge-like
-                var thisChart = document.createElement("canvas")
+              var thisChart = document.createElement("canvas")
-                thisChart.id = "chartOf" + sensor.sensorname
+              thisChart.id = "chartOf" + sensor.sensorname
 
-                var chartData = {
+              var chartData = {
-                  datasets: [
+                datasets: [
-                    {
+                  {
-                      label: sensor.sensorname + " (" + valueType.valuetype + ")",
+                    label: sensor.sensorname + " (" + valueType.valuetype + ")",
-                      data: [
+                    data: [
-                        parseInt(latestVal.measvalue),
+                      parseInt(latestVal.measvalue),
-                        100 -parseInt( latestVal.measvalue)
+                      100 - parseInt(latestVal.measvalue)
-                      ]
+                    ]
-                    }
+                  }
-                  ],
+                ],
-                  labels: false
+                labels: false
-                }
+              }
 
-                Object.assign(chartData.datasets[0], displayProperties.properties)
+              Object.assign(chartData.datasets[0], displayProperties.properties)
 
-                dashboard.createPercentCircle(thisChart, chartData)
+              dashboard.createPercentCircle(thisChart, chartData)
 
-                thisBody.appendChild(thisChart)
+              thisBody.appendChild(thisChart)
 
               break
-              case "text":
+            case "text":
-                // the widget is pure text
+              // the widget is pure text
-                thisWidget.classList.add("text-center")
+              thisWidget.classList.add("text-center")
-                thisBody.innerHTML = '<h1 class="align-self-center mx-auto" style="font-size:10vw;margin-top: auto;margin-bottom: auto;">' + latestVal.measvalue + valueType.valueunit + '</h1>'
+              thisBody.innerHTML = '<h1 class="align-self-center mx-auto" style="font-size:10vw;margin-top: auto;margin-bottom: auto;">' + latestVal.measvalue + valueType.valueunit + '</h1>'
 
 
-                //thisBody.innerHTML = '<svg viewBox="0 0 56 18"><text x="0" y="15">Fit Meeeeeeeeeeee</text></svg>'
+              //thisBody.innerHTML = '<svg viewBox="0 0 56 18"><text x="0" y="15">Fit Meeeeeeeeeeee</text></svg>'
-                break
+              break
           }
 
           firstRow.appendChild(thisWidget)
@@ -218,18 +228,49 @@ class BlueWeatherDashboard {
     this.loadDashboard()
   }
 
-  setTimeRange(from = "", to = "") {
+  setTimeRange(from = "", to = "", offset = true, autoReload = true) {
+    // offset: if true the gien times will be substracted from the current time to get the target time
     this.blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
 
-    if (from !== "") {
+    if (offset) {
-      from = new Date().getTime() / 1000 - from
+      if (from !== "") {
+        from = new Date().getTime() / 1000 - from
+      }
+
+      if (to !== "") {
+        to = new Date().getTime() / 1000 - parseInt(to)
+      }
+    }
+    else {
+      if(from !== ""){
+      from = parseInt(from)
+      }
+      if(to !== ""){
+      to = parseInt(to)
+      }
     }
 
-    if (to !== "") {
+    var tmpFrom = from
-      to = new Date().getTime() / 1000 - parseInt(to)
+    var tmpTo = to
+
+    if(tmpFrom === "") {
+      tmpFrom = Math.round( new Date().getTime() / 1000 - 60 * 60 * 24 )
     }
 
-    this.updateParams({ range: { to: to, from: from } })
+    if(tmpTo === "") {
+      tmpTo = Math.round(new Date().getTime() / 1000)
+    }
+
+    var dateFromString = this.getDateTimeString(tmpFrom, tmpTo-tmpFrom)
+    var dateToString = this.getDateTimeString(tmpTo, tmpTo-tmpFrom)
+    
+    dropdownMenuButton.innerHTML = "<span data-feather=\"calendar\"></span> " + dateFromString + " - " + dateToString
+    feather.replace()
+
+
+    if (this.initDone && autoReload) {
+      this.updateParams({ range: { to: to, from: from } })
+    }
 
   }
 
@@ -248,7 +289,7 @@ class BlueWeatherDashboard {
   }
 
   loadDiagram(parentId, locationData, sensorId) {
-    if(typeof(parentId) === "string"){
+    if (typeof (parentId) === "string") {
       var mainContent = document.getElementById(parentId)
     }
     else {
@@ -386,34 +427,34 @@ class BlueWeatherDashboard {
               var to = data.range.to
               var from = data.range.from
 
-              if(to === ""){
+              if (to === "") {
                 to = new Date().getTime()
               }
 
               var range = data.range.to - data.range.from
 
-              if(range <= 60 * 60 * 24){
+              if (range <= 60 * 60 * 24) {
                 // covers one day or less
                 datestr = ("0" + d.getHours()).slice(-2) + ":" +
-                ("0" + d.getMinutes()).slice(-2) + ":" +
+                  ("0" + d.getMinutes()).slice(-2) + ":" +
-                ("0" + d.getSeconds()).slice(-2)
+                  ("0" + d.getSeconds()).slice(-2)
               }
-              else if(range <= 60 * 60 * 24 * 31){
+              else if (range <= 60 * 60 * 24 * 31) {
                 // covers one month or less
 
                 datestr = ("0" + d.getDate()).slice(-2) + "-" +
-                ("0"+(d.getMonth()+1)).slice(-2) + " " +
+                  ("0" + (d.getMonth() + 1)).slice(-2) + " " +
-                ("0" + d.getHours()).slice(-2) + ":" +
+                  ("0" + d.getHours()).slice(-2) + ":" +
-                ("0" + d.getMinutes()).slice(-2) + ":" +
+                  ("0" + d.getMinutes()).slice(-2) + ":" +
-                ("0" + d.getSeconds()).slice(-2)
+                  ("0" + d.getSeconds()).slice(-2)
               }
               else {
                 // covers more than a month
 
                 datestr =
-                d.getFullYear() + "-" +
+                  d.getFullYear() + "-" +
-                ("0" + d.getDate()).slice(-2) + "-" +
+                  ("0" + d.getDate()).slice(-2) + "-" +
-                ("0"+(d.getMonth()+1)).slice(-2)
+                  ("0" + (d.getMonth() + 1)).slice(-2)
               }
 
 
@@ -444,9 +485,9 @@ class BlueWeatherDashboard {
 
             var d = new Date(time * 1000);
             var datestr =
-            d.getFullYear() + "-" +
+              d.getFullYear() + "-" +
               ("0" + d.getDate()).slice(-2) + "-" +
-              ("0"+(d.getMonth()+1)).slice(-2) + " " +
+              ("0" + (d.getMonth() + 1)).slice(-2) + " " +
               ("0" + d.getHours()).slice(-2) + ":" +
               ("0" + d.getMinutes()).slice(-2) + ":" +
               ("0" + d.getSeconds()).slice(-2)
@@ -468,6 +509,35 @@ class BlueWeatherDashboard {
     })
   }
 
+  getDateTimeString(unixTime, range = 0) {
+
+    if(Math.abs(unixTime - new Date().getTime() / 1000) <= 60 ) {
+      return "now"
+    }
+
+    var d = new Date(parseInt(unixTime) * 1000);
+    var datestr = ""
+    if (range <= 60 * 60 * 24 * 31) {
+      // covers one month or less
+
+      datestr = 
+      ("0" + d.getDate()).slice(-2) + "-" +
+        ("0" + (d.getMonth() + 1)).slice(-2) + " " +
+        ("0" + d.getHours()).slice(-2) + ":" +
+        ("0" + d.getMinutes()).slice(-2)
+    }
+    else {
+      // covers more than a month
+
+      datestr =
+        d.getFullYear() + "-" +
+        ("0" + d.getDate()).slice(-2) + "-" +
+        ("0" + (d.getMonth() + 1)).slice(-2)
+    }
+
+    return datestr
+  }
+
   setPageTitle(title) {
     document.getElementById("titleH1").innerHTML = title
   }