date range - not done yet...

snippets/graph.html

@@ -1,9 +1,15 @@
 {{define "body_content"}}
 {{ if ne .UserName "" }}
 
-<div class="has-text-centered">
-  <a id="back-button" name="back-button" type="button" class="form-button button is-primary is-centered" href="#">Zur&uuml;ck</a>
-  <br />
+{{ index (index .QueryValues "deveui") 0 }}
+
+<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
+<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
+
+<div class="columns">
+  <div class="column is-one-third">
+    <input type="date" id="daterangepicker" data-type="date" data-display-mode="dialog" data-lang="de" data-is-range="true" data-close-on-select="true" data-date-format="DD.MM.YYYY">
+  </div>
 </div>
 
 <div>
@@ -13,13 +19,69 @@
 </div>
 
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+
+
+
+
 <script>
+console.log('Initialize Bulma Calendar');
+// Initialize all input of type date
+var calendars = bulmaCalendar.attach('[type="date"]', {});
+
+// To access to bulmaCalendar instance of an element
+var element = document.querySelector('#daterangepicker');
+if (element) {
+  // bulmaCalendar instance is available as element.bulmaCalendar
+  element.bulmaCalendar.on('select', function(datepicker) {
+     console.log(datepicker.data.value());
+     s = datepicker.data.value();
+     // 04.08.2019 - 08.08.2019
+     start = s.substring(6,10).concat("-",s.substring(3,5),"-",s.substring(0,2),"T00:00:00Z");
+     end = s.substring(19,23).concat("-",s.substring(16,18),"-",s.substring(13,15),"T00:00:00Z");
+     console.log("Reload Graph start:"+start);
+     console.log("Reload Graph end:"+end);
+     reloadGraph(start,end);
+  });
+}
+</script>	
+
+<script>
+var chart;
+
+function reloadGraph(start, stop) {
+  range = ""
+  range = range + "&start=" + start;
+  range = range + "&stop=" + stop;
+  $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
+    chart.updateSeries([{
+      data: mydata
+    }])
+  });
+}
+
 var urlParams = new URLSearchParams(window.location.search);
 var deveui = urlParams.get('deveui');
-if (deveui != null) {
-  document.getElementById("back-button").href= '/scales.html#' + deveui; 
+var start = urlParams.get('start');
+var stop = urlParams.get('stop');
+
+range="";
+if (start == null) {
+  var d = new Date();
+  d.setHours(0,0,0,0);
+  d.setSeconds(0,0);
+  var start = d.toISOString().substring(0,19)+'Z';
+  range = range + "&start=" + start;
 }
 
+if (stop == null) {
+  var d = new Date();
+  var stop = d.toISOString().substring(0,19)+'Z';
+  range = range + "&stop=" + stop;
+}
+
+console.log("Start: "+start);
+console.log("Stop: "+stop);
+
 var sPageURL = window.location.search.substring(1);
 var label;
 if (sPageURL.search("property=t") > -1) {
@@ -46,7 +108,7 @@ if (sPageURL.search("property=t") > -1) {
   label = 'Unknown';
 }
 
-$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL, function(mydata) {
+$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
   var options = {
     chart: {
       type: 'line',
@@ -75,8 +137,8 @@ $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL, function(mydata) {
     }]
   }
 
-  var chart = new ApexCharts(document.querySelector("#chart"), options);
-
+  chart = new ApexCharts(document.querySelector("#chart"), options);
+  
   chart.render();
 });