minor changes

dashboard.html

@@ -6,12 +6,21 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>BlueWeather</title>
 
-  <!-- Bootstrap core CSS -->
+  <!-- Bootstrap core CSS >
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"-->
 
   <!-- Custom styles for this template -->
   <link href="css/dashboard.css" rel="stylesheet">
+  <link href="css/bootstrap.min.css" rel="stylesheet">
+
+  <!-- libs for datepicker -->
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
+    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+  <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
+  <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
+
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 
@@ -104,19 +113,21 @@
               <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 dropleft" class="h-100">
+            <div class="dropdown" class="h-100">
               <button id="dropdownMenuButton" type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"
                 data-toggle="dropdown">
                 <span data-feather="calendar"></span>
 
 
               </button>
-              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                <a class="dropdown-item" onclick="setTimeRange(86400)" href="#&range[from]=86400">Today</a>
+                <form class="px-4 py-3">
-                <a class="dropdown-item" onclick="setTimeRange(604800)" href="#&range[from]=604800">This Week</a>
+                    <div class="btn-group">
-                <a class="dropdown-item" onclick="setTimeRange(18144000)" href="#&range[from]=18144000">This Month</a>
+                        <button type="button" class="btn btn-light" onclick="setTimeRange(86400)">Today</button>
-                <a class="dropdown-item" onclick="setTimeRange(220752000)" href="#&range[from]=220752000">This Year</a>
+                        <button type="button" class="btn btn-light" onclick="setTimeRange(604800)">This Week</button>
-                <a class="dropdown-item">Custom</a>
+                        <button type="button" class="btn btn-light" onclick="setTimeRange(18144000)">This Month</button>
+                      </div>
+                </form>
               </div>
             </div>
           </div>
@@ -129,7 +140,7 @@
   </div>
 
   <!-- js -->
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script-->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
     integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
     crossorigin="anonymous"></script>
@@ -138,6 +149,36 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
   <script src="js/blueweather.js"></script>
   <script src="js/dashboard.js"></script>
+  <script src="js/jquery.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
+    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+  <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
+  <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
+
+  <script>
+    var today = new Date();
+    var val = new Date();
+    $('#startDate').datepicker({
+      uiLibrary: 'bootstrap4',
+      iconsLibrary: 'fontawesome',
+      minDate: today,
+      maxDate: function () {
+        return $('#endDate').val();
+      }
+    });
+    $('#endDate').datepicker({
+      uiLibrary: 'bootstrap4',
+      iconsLibrary: 'fontawesome',
+      value: val,
+      minDate: function () {
+        return $('#startDate').val();
+      }
+    });
+    val = new Date("2010/03/03")
+  </script>
 </body>
 
 </html>

js/blueweather.js

@@ -11,6 +11,7 @@ class BlueWeather {
     getLocationData(locId, range = {from:"", to:""}, async, processingFunction, errorFunction) {
         this.xhttp.abort()
         var thisObject = this
+        
         if(async) {
             this.xhttp.onreadystatechange = function () {
                 if (this.readyState === 4) {
@@ -27,10 +28,10 @@ class BlueWeather {
                     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)

js/dashboard.js

@@ -118,7 +118,7 @@ function loadDiagram(parentId, locationData, sensorId){
   createDiagram("myChart", chartData)
 }
 
-function createDiagram(canvasId, data) {
+function createDiagram(canvasId, data, additional) {
   var pointradius = data.data.length > 500 ? 0:3
   // Graphs
   var ctx = document.getElementById(canvasId)
@@ -130,7 +130,7 @@ function createDiagram(canvasId, data) {
       {
         label: data.label,
         yAxisID: 'yAxis',
-        fill: false, pointRadius: pointradius, backgroundColor: "rgba(29, 202, 255, 0.75)", borderColor: "rgba(29, 202, 255, 1)", pointHoverBackgroundColor: "rgba(29, 202, 255, 1)", pointHoverBorderColor: "rgba(29, 202, 255, 1)",
+        fill: true, pointRadius: pointradius, backgroundColor: "rgba(29, 202, 255, 0.75)", borderColor: "rgba(29, 202, 255, 1)", pointHoverBackgroundColor: "rgba(29, 202, 255, 1)", pointHoverBorderColor: "rgba(29, 202, 255, 1)",
         showLine: true,
         data: data.data
       }