enhance graph page

snippets/graph.html

@@ -9,10 +9,39 @@
 <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="column is-half is-gapless">
+<div class="columns">
-  <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
+  <div class="column is-half">
-    <i class="fa fa-calendar"></i>&nbsp;
+    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
-    <span></span> <i class="fa fa-caret-down"></i>
+      <i class="fa fa-calendar"></i>&nbsp;
+      <span></span> <i class="fa fa-caret-down"></i>
+    </div>
+  </div>
+  <div class="column is-half">
+    <a id="btn_w" class="button">
+      <span class="icon">
+        <i class="fa fa-balance-scale"></i>
+      </span>
+    </a>
+    <a id="btn_t" class="button">
+      <span class="icon">
+        <i class="fa fa-thermometer-half"></i>
+      </span>
+    </a>
+    <a id="btn_h" class="button">
+      <span class="icon">
+        <i class="fa fa-tint"></i>
+      </span>
+    </a>
+    <a id="btn_p" class="button">
+      <span class="icon">
+        <i class="fa fa-cloud"></i>
+      </span>
+    </a>
+    <a id="btn_vp" class="button">
+      <span class="icon">
+        <i class="fa fa-battery-three-quarters"></i>
+      </span>
+    </a>
   </div>
 </div>
 
@@ -22,6 +51,8 @@ $(function() {
 
     var start = moment({hour: 0});
     var end = moment();
+    var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+    var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
 
     console.log("XXX: "+start.format());
 
@@ -31,9 +62,29 @@ $(function() {
         s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
         s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
         console.log("Start: " + s_start + ' End: ' + s_end);
-        reloadGraph(s_start,s_end);
+        drawGraph(deveui, alias, property, s_start,s_end, false);
     }
 
+    $('#btn_w').on("click", function() {
+      drawGraph(deveui, alias, 'w', s_start,s_end, false);
+    });
+
+    $('#btn_t').on("click", function() {
+      drawGraph(deveui, alias, 't', s_start,s_end, false);
+    });
+
+    $('#btn_h').on("click", function() {
+      drawGraph(deveui, alias, 'h', s_start,s_end, false);
+    });
+
+    $('#btn_p').on("click", function() {
+      drawGraph(deveui, alias, 'p', s_start,s_end, false);
+    });
+
+    $('#btn_vp').on("click", function() {
+      drawGraph(deveui, alias, 'vp', s_start,s_end, false);
+    });
+
     $('#reportrange').daterangepicker({
         startDate: start,
         endDate: end,
@@ -98,19 +149,96 @@ $(function() {
 <script>
 var chart;
 
-function reloadGraph(start, stop) {
+function drawGraph(deveui, alias, property, start, stop, create_graph) {
   range = ""
   range = range + "&start=" + start;
   range = range + "&stop=" + stop;
-  $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
+
-    chart.updateSeries([{
+  var label;
-      data: mydata
+  $(".button").removeClass("is-success");
-    }])
+  if (property=="t") {
+    $("#btn_t").addClass("is-success");
+    label = 'Temperatur';
+    minfunc = function(min) { if (min > 0) { return 0 } else { return min } }
+    maxfunc = function(max) { return max + 5 }
+  } else if (property=="vp") {
+    $("#btn_vp").addClass("is-success");
+    label = 'Akkuladung';
+    minfunc = function(min) { return 0 }
+    maxfunc = function(max) { return 100 }
+  } else if (property=="w") {
+    $("#btn_w").addClass("is-success");
+    label = 'Gewicht';
+    minfunc = function(min) { if (min > 40000) { return min  - 2000 } else { return 0 } }
+    maxfunc = function(max) { return max + 2000 }
+  } else if (property==="h") {
+    $("#btn_h").addClass("is-success");
+    label = 'Luftfeuchtigkeit';
+    minfunc = function(min) { return 0 } 
+    maxfunc = function(max) { return 100 }
+  } else if (property=="p") {
+    $("#btn_p").addClass("is-success");
+    label = 'Luftdruck';
+    minfunc = function(min) { return 900 } 
+    maxfunc = function(max) { return 1060 }
+  } else {
+    label = 'Unknown';
+  }
+  
+  $.getJSON('https://mini-beieli.ch/metrics?deveui=' + deveui + '&alias=' + alias + '&property=' + property + range, function(mydata) {
+    var options = {
+      chart: {
+        type: 'line',
+        animations: {
+          enabled: false
+        }
+      },
+      stroke: {
+        curve: 'smooth'
+      },
+      title: {
+        text: urlParams.get('alias'),
+        align: 'center',
+        style: {
+          fontSize: '32px'
+        }
+      },
+      xaxis: {
+        type: "datetime",
+        labels: {
+          rotate: 0
+        }
+      },
+      yaxis: {
+        min: minfunc,
+        max: maxfunc
+      },
+      tooltip: {
+        x: {
+          format: 'dd.MM.yyyy HH:mm'
+        }
+      },
+      series: [{
+        name: label,
+        data: mydata
+      }]
+    }
+  
+    if (create_graph) {
+      chart = new ApexCharts(document.querySelector("#chart"), options);
+    } else {
+      chart.updateOptions(options);
+      chart.updateSeries(mydata);
+    }
+    
+    chart.render();
   });
 }
 
 var urlParams = new URLSearchParams(window.location.search);
 var deveui = urlParams.get('deveui');
+var alias = urlParams.get('alias');
+var property = urlParams.get('property');
 var start = urlParams.get('start');
 var stop = urlParams.get('stop');
 
@@ -127,72 +255,9 @@ if (stop == null) {
   range = range + "&stop=" + stop;
 }
 
-console.log("Start: "+start);
-console.log("Stop: "+stop);
 $('#reportrange span').html(moment(start).format('D. MMMM YYYY') + ' - ' + moment(stop).format('D. MMMM YYYY'));
 
-var sPageURL = window.location.search.substring(1);
+drawGraph(deveui, alias, property, start, stop, true);
-var label;
-if (sPageURL.search("property=t") > -1) {
-  label = 'Temperatur';
-  minfunc = function(min) { if (min > 0) { return 0 } else { return min } }
-  maxfunc = function(max) { return max + 5 }
-} else if (sPageURL.search("property=vp") > -1) {
-  label = 'Akkuladung';
-  minfunc = function(min) { return 0 }
-  maxfunc = function(max) { return 100 }
-} else if (sPageURL.search("property=w") > -1) {
-  label = 'Gewicht';
-  minfunc = function(min) { if (min > 40000) { return min  - 2000 } else { return 0 } }  
-  maxfunc = function(max) { return max + 2000 }
-} else if (sPageURL.search("property=h") > -1) {
-  label = 'Luftfeuchtigkeit';
-  minfunc = function(min) { return 0 } 
-  maxfunc = function(max) { return 100 }
-} else if (sPageURL.search("property=p") > -1) {
-  label = 'Luftdruck';
-  minfunc = function(min) { return 900 } 
-  maxfunc = function(max) { return 1060 }
-} else {
-  label = 'Unknown';
-}
-
-$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
-  var options = {
-    chart: {
-      type: 'line',
-      animations: {
-        enabled: false
-      }
-    },
-    stroke: {
-      curve: 'smooth'
-    },
-    xaxis: {
-      type: "datetime",
-      labels: {
-        rotate: 0
-      }
-    },
-    yaxis: {
-      min: minfunc,
-      max: maxfunc
-    },
-    tooltip: {
-      x: {
-        format: 'dd.MM.yyyy HH:mm'
-      }
-    },
-    series: [{
-      name: label,
-      data: mydata
-    }]
-  }
-
-  chart = new ApexCharts(document.querySelector("#chart"), options);
-  
-  chart.render();
-});
 
 </script>
 

snippets/graph.html.test

@@ -1,149 +0,0 @@
-{{define "body_content"}}
-{{ if ne .UserName "" }}
-
-<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>
-{{ index (index .QueryValues "deveui") 0 }}
-</div>
-
-<div>
-  <section id="chart">
-    <!-- Content ... -->
-  </section>
-</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');
-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) {
-  label = 'Temperatur';
-  minfunc = function(min) { if (min > 0) { return 0 } else { return min } }
-  maxfunc = function(max) { return max + 5 }
-} else if (sPageURL.search("property=vp") > -1) {
-  label = 'Akkuladung';
-  minfunc = function(min) { return 0 }
-  maxfunc = function(max) { return 100 }
-} else if (sPageURL.search("property=w") > -1) {
-  label = 'Gewicht';
-  minfunc = function(min) { if (min < 1000) { return 0 } else { return min - 1000 } } 
-  maxfunc = function(max) { return max + 1000 }
-} else if (sPageURL.search("property=h") > -1) {
-  label = 'Luftfeuchtigkeit';
-  minfunc = function(min) { return 0 } 
-  maxfunc = function(max) { return 100 }
-} else if (sPageURL.search("property=p") > -1) {
-  label = 'Luftdruck';
-  minfunc = function(min) { return 900 } 
-  maxfunc = function(max) { return 1060 }
-} else {
-  label = 'Unknown';
-}
-
-$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
-  var options = {
-    chart: {
-      type: 'line',
-      animations: {
-        enabled: false
-      }
-    },
-    stroke: {
-      curve: 'smooth'
-    },
-    xaxis: {
-      type: "datetime"
-    },
-    yaxis: {
-      min: minfunc,
-      max: maxfunc
-    },
-    tooltip: {
-      x: {
-        format: 'dd.MM.yyyy HH:mm'
-      }
-    },
-    series: [{
-      name: label,
-      data: mydata
-    }]
-  }
-
-  chart = new ApexCharts(document.querySelector("#chart"), options);
-  
-  chart.render();
-});
-
-</script>
-
-{{ else }}
-<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
-{{end}}
-{{end}}

snippets/graph2.html

@@ -1,276 +0,0 @@
-{{define "body_content"}}
-{{ if ne .UserName "" }}
-
-<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
-
-<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-half">
-    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
-      <i class="fa fa-calendar"></i>&nbsp;
-      <span></span> <i class="fa fa-caret-down"></i>
-    </div>
-  </div>
-  <div class="column is-half">
-    <a id="btn_w" class="button">
-      <span class="icon">
-        <i class="fa fa-balance-scale"></i>
-      </span>
-    </a>
-    <a id="btn_t" class="button">
-      <span class="icon">
-        <i class="fa fa-thermometer-half"></i>
-      </span>
-    </a>
-    <a id="btn_h" class="button">
-      <span class="icon">
-        <i class="fa fa-tint"></i>
-      </span>
-    </a>
-    <a id="btn_p" class="button">
-      <span class="icon">
-        <i class="fa fa-cloud"></i>
-      </span>
-    </a>
-    <a id="btn_vp" class="button">
-      <span class="icon">
-        <i class="fa fa-battery-three-quarters"></i>
-      </span>
-    </a>
-  </div>
-</div>
-
-<script type="text/javascript">
-
-$(function() {
-
-    var start = moment({hour: 0});
-    var end = moment();
-    var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-    var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-
-    console.log("XXX: "+start.format());
-
-    function cb(start, end) {
-        $('#reportrange span').html(start.format('D. MMMM YYYY') + ' - ' + end.format('D. MMMM YYYY'));
-        console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
-        s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-        s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-        console.log("Start: " + s_start + ' End: ' + s_end);
-        reloadGraph(s_start,s_end);
-    }
-
-    $('#btn_w').on("click", function() {
-      if (urlParams.toString().indexOf("property=w") == -1) {
-        location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=w');
-      }
-    });
-
-    $('#btn_t').on("click", function() {
-      if (urlParams.toString().indexOf("property=t") == -1) {
-        location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=t');
-      }
-    });
-
-    $('#btn_h').on("click", function() {
-      if (urlParams.toString().indexOf("property=h") == -1) {
-        location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=h');
-      }
-    });
-
-    $('#btn_p').on("click", function() {
-      if (urlParams.toString().indexOf("property=p") == -1) {
-        location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=p');
-      }
-    });
-
-    $('#btn_vp').on("click", function() {
-      if (urlParams.toString().indexOf("property=vp") == -1) {
-        location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=vp');
-      }
-    });
-
-    $('#reportrange').daterangepicker({
-        startDate: start,
-        endDate: end,
-        regional: [ "de" ],
-        "locale": {
-            format: 'DD.MM.YYYY',
-            "separator": " - ",
-            "applyLabel": "Anwenden",
-            "cancelLabel": "Abbrechen",
-            "fromLabel": "Von",
-            "toLabel": "Bis",
-            customRangeLabel: 'Benutzerdefiniert',
-            "weekLabel": "W",
-            "daysOfWeek": [
-                "So",
-                "Mo",
-                "Di",
-                "Mi",
-                "Do",
-                "Fr",
-                "Sa"
-            ],
-            "monthNames": [
-                "Januar",
-                "Februar",
-                "M&auml;rz",
-                "April",
-                "Mai",
-                "Juni",
-                "Juli",
-                "August",
-                "September",
-                "Oktober",
-                "November",
-                "Dezember"
-            ],
-            "firstDay": 1
-        },
-        ranges: {
-           'Heute': [moment(), moment()],
-           'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
-           'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
-           'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
-           'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
-           'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
-        }
-    }, cb);
-
-    //cb(start, end);
-
-});
-</script>
-
-<div>
-  <section id="chart">
-    <!-- Content ... -->
-  </section>
-</div>
-
-    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-
-<script>
-var chart;
-
-function reloadGraph(start, stop) {
-  range = ""
-  range = range + "&start=" + start;
-  range = range + "&stop=" + stop;
-  alert(sPageURL);
-  $.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');
-var start = urlParams.get('start');
-var stop = urlParams.get('stop');
-
-range="";
-if (start == null) {
-  var dstart = moment({hour: 0});
-  var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-  range = range + "&start=" + start;
-}
-
-if (stop == null) {
-  var dstop = moment();
-  var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-  range = range + "&stop=" + stop;
-}
-
-console.log("Start: "+start);
-console.log("Stop: "+stop);
-$('#reportrange span').html(moment(start).format('D. MMMM YYYY') + ' - ' + moment(stop).format('D. MMMM YYYY'));
-
-var sPageURL = window.location.search.substring(1);
-var label;
-if (sPageURL.search("property=t") > -1) {
-  $("#btn_t").addClass("is-success");
-  label = 'Temperatur';
-  minfunc = function(min) { if (min > 0) { return 0 } else { return min } }
-  maxfunc = function(max) { return max + 5 }
-} else if (sPageURL.search("property=vp") > -1) {
-  $("#btn_vp").addClass("is-success");
-  label = 'Akkuladung';
-  minfunc = function(min) { return 0 }
-  maxfunc = function(max) { return 100 }
-} else if (sPageURL.search("property=w") > -1) {
-  $("#btn_w").addClass("is-success");
-  label = 'Gewicht';
-  minfunc = function(min) { if (min > 40000) { return min  - 2000 } else { return 0 } }
-  maxfunc = function(max) { return max + 2000 }
-} else if (sPageURL.search("property=h") > -1) {
-  $("#btn_h").addClass("is-success");
-  label = 'Luftfeuchtigkeit';
-  minfunc = function(min) { return 0 } 
-  maxfunc = function(max) { return 100 }
-} else if (sPageURL.search("property=p") > -1) {
-  $("#btn_p").addClass("is-success");
-  label = 'Luftdruck';
-  minfunc = function(min) { return 900 } 
-  maxfunc = function(max) { return 1060 }
-} else {
-  label = 'Unknown';
-}
-
-$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
-  var options = {
-    chart: {
-      type: 'line',
-      animations: {
-        enabled: false
-      }
-    },
-    stroke: {
-      curve: 'smooth'
-    },
-    title: {
-      text: urlParams.get('alias'),
-      align: 'center',
-      style: {
-        fontSize: '32px'
-      }
-    },
-    xaxis: {
-      type: "datetime",
-      labels: {
-        rotate: 0
-      }
-    },
-    yaxis: {
-      min: minfunc,
-      max: maxfunc
-    },
-    tooltip: {
-      x: {
-        format: 'dd.MM.yyyy HH:mm'
-      }
-    },
-    series: [{
-      name: label,
-      data: mydata
-    }]
-  }
-
-  chart = new ApexCharts(document.querySelector("#chart"), options);
-  
-  chart.render();
-});
-
-</script>
-
-{{ else }}
-<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
-{{end}}
-{{end}}