date range - not done yet...

main.go

@@ -55,6 +55,8 @@ func serveTemplate(w http.ResponseWriter, r *http.Request) {
         var scales = getMyDevs(userName)
         var last_metrics []OneMetric
         
+        query_values := r.URL.Query()
+
 	if (r.URL.Path == "/scales.html") {
                 // wir holen noch die letzten Metriken
                 for _, v := range scales {
@@ -68,11 +70,13 @@ func serveTemplate(w http.ResponseWriter, r *http.Request) {
             DateTimeString string
             Scales []string
             LastMetrics []OneMetric
+            QueryValues map[string][]string
         } {
             userName,
             datetimestring,
             scales,
             last_metrics,
+            query_values,
         }
 
 	if err := tmpl.ExecuteTemplate(w, "layout", &data); err != nil {

metrics.go

@@ -24,6 +24,7 @@ type OneMetric struct {
     BatteryPercent  string
 }
 
+
 // metrics handler
 
 func metricsHandler(response http.ResponseWriter, request *http.Request) {
@@ -56,8 +57,40 @@ func metricsHandler(response http.ResponseWriter, request *http.Request) {
 
            log.Println("Url Param 'deveui' is: " + string(mydeveui))
 
+           // Format of start and stop: YYYY-MM-DDTHH:MI:SSZ
+
+           stop, ok := request.URL.Query()["stop"]
+           var mystop string
+           if !ok || len(stop[0]) < 1 {
+             log.Println("Url Param 'stop' is missing, set it to now")
+             mystop = time.Now().Format("2006-01-02T15:04:05Z")
+           }
+
+           if ok {
+             mystop = stop[0]
+           }
+
+           layout := "2006-01-02T15:04:05Z"
+           stopDate, err := time.Parse(layout, mystop)
+
+           if err != nil {
+             fmt.Println(err)
+           }
+
+           start, ok := request.URL.Query()["start"]
+           var mystart string
+           if !ok || len(start[0]) < 1 {
+             log.Println("Url Param 'start' is missing, set it to stop  minus one day")
+             t := stopDate.AddDate(0,0,-1)
+             mystart = t.Format("2006-01-02T15:04:05Z")
+           } 
+
+           if ok {
+             mystart = start[0]
+           }
+
            url := "http://localhost:9999/api/v2/query?org=beieliorg"
-           data := []byte(fmt.Sprintf(`from(bucket:"beielibucket") |> range(start:-24h) |> filter(fn: (r) => r._field == "%s") |> filter(fn: (r) => r.deveui == "%s")`,property[0],mydeveui))
+           data := []byte(fmt.Sprintf(`from(bucket:"beielibucket") |> range(start: %s, stop: %s) |> filter(fn: (r) => r._field == "%s") |> filter(fn: (r) => r.deveui == "%s")`,mystart,mystop,property[0],mydeveui))
 
            req, err := http.NewRequest("POST", url, bytes.NewBuffer(data))
 	   if err != nil {

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,7 +137,7 @@ $.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();
 });