implemented table

dashboard.html

@@ -121,17 +121,24 @@
                   <span data-feather="calendar"></span>
                 </button>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                  <form class="px-4 py-3">
+                  <!--form class="px-4 py-3">
                     <div class="btn-group">
                       <button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(86400)">Today</button>
                       <button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(604800)">This
                         Week</button>
-                      <button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(18144000)">This
+                      <button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(2678400)">This
                         Month</button>
                       <button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(18144000)">This
                         Year</button>
                     </div>
-                  </form>
+                  </form-->
+                      <a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(86400)">Today</a>
+                      <a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(604800)">This
+                          Week</a>
+                      <a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(2678400)">This
+                          Month</a>
+                      <a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(31536000)">This
+                          Year</a>
                 </div>
               </div>
             </div>

js/dashboard.js

@@ -18,7 +18,6 @@ class BlueWeatherDashboard {
 
     this.restoreParms(this.params)
 
-    this.setTimeRange()
     this.loadDashboard(this.params)
     this.initDone = true
   }
@@ -46,9 +45,24 @@ class BlueWeatherDashboard {
       if (page === -1) {
         dashboard.setPageTitle("Dashboard")
 
+        // create widget row
         var firstRow = document.createElement("div")
         firstRow.classList.add("card-deck")
 
+        // create table
+        var tableContainer = document.createElement("div")
+        tableContainer.style = "overflow-x:auto;margin-top:20px;"
+        var table = document.createElement("table")
+        tableContainer.appendChild(table)
+        table.classList.add("table", "table-hover")
+        
+        // create forst row of table
+        var tableHead = document.createElement("thead")
+        table.appendChild(tableHead)
+        tableHead.innerHTML = "<tr><th>Sensor</th><th>Minimum</th><th>Maximum</th><th>Average</th></tr>"
+        var tableBody = document.createElement("tbody")
+        table.appendChild(tableBody)
+        
         for (var i = 0; i < locationData.sensors.length; i++) {
           var sensor = locationData.sensors[i]
 
@@ -65,11 +79,21 @@ class BlueWeatherDashboard {
 
           // get all relevant  meassurement values
           var vals = []
+          var sum = 0
+          var min
+          var max
 
           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(thisValue.measvalue < min || min === undefined) {
+                min = thisValue.measvalue
+              }
+              if(thisValue.measvalue > max || max === undefined) {
+                max = thisValue.measvalue
+              }
             }
           }
 
@@ -81,9 +105,14 @@ class BlueWeatherDashboard {
             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>"
+          tableBody.appendChild(tableRow)
+
+          // - create widget card -
           var latestVal = vals[0]
 
-          // - create html widget -
           // create card
           var thisWidget = document.createElement("div")
           thisWidget.classList.add("card")
@@ -152,8 +181,11 @@ class BlueWeatherDashboard {
           firstRow.appendChild(thisWidget)
         }
 
+        
+
         mainContent.innerHTML = "";
         mainContent.appendChild(firstRow)
+        mainContent.appendChild(tableContainer)
       }
       else if (page !== -1) {
         dashboard.loadDiagram("mainContent", locationData, page)
@@ -177,6 +209,7 @@ class BlueWeatherDashboard {
 
     Object.assign(this.params, newParams)
 
+    window.history.pushState("object or string", "Title", this.buildUrl({ "params": JSON.stringify(this.params) }));
     this.loadDashboard()
   }
 
@@ -337,14 +370,42 @@ class BlueWeatherDashboard {
             stepSize: (data.range.to - data.range.from) / 10,
             userCallback: function (label, index, labels) {
               var d = new Date(parseInt(label) * 1000);
-              var datestr =
+              var datestr = "";
-                //  ("0" + d.getDate()).slice(-2) + "-" +
+
-                //  ("0"+(d.getMonth()+1)).slice(-2) + "-" +
+              var to = data.range.to
-                //  d.getFullYear() + " " +
+              var from = data.range.from
+
+              if(to === ""){
+                to = new Date().getTime()
+              }
+
+              var range = data.range.to - data.range.from
+
+              if(range <= 60 * 60 * 24){
+                // covers one day or less
+                datestr = ("0" + d.getHours()).slice(-2) + ":" +
+                ("0" + d.getMinutes()).slice(-2) + ":" +
+                ("0" + d.getSeconds()).slice(-2)
+              }
+              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.getHours()).slice(-2) + ":" +
                 ("0" + d.getMinutes()).slice(-2) + ":" +
                 ("0" + d.getSeconds()).slice(-2)
-                ;
+              }
+              else {
+                // covers more than a month
+
+                datestr = 
+                d.getFullYear() + "-" +
+                ("0" + d.getDate()).slice(-2) + "-" +
+                ("0"+(d.getMonth()+1)).slice(-2)
+              }
+
+                
               return datestr;
             }
           },
@@ -372,9 +433,9 @@ class BlueWeatherDashboard {
 
             var d = new Date(time * 1000);
             var datestr =
-              //  ("0" + d.getDate()).slice(-2) + "-" +
+            d.getFullYear() + "-" +
-              //  ("0"+(d.getMonth()+1)).slice(-2) + "-" +
+              ("0" + d.getDate()).slice(-2) + "-" +
-              //  d.getFullYear() + " " +
+              ("0"+(d.getMonth()+1)).slice(-2) + " " +
               ("0" + d.getHours()).slice(-2) + ":" +
               ("0" + d.getMinutes()).slice(-2) + ":" +
               ("0" + d.getSeconds()).slice(-2)