modifications

minify-fa.sh

@@ -0,0 +1 @@
+cat /home/beieli/mini-beieli-web/static/js/fontawesome-5.11.2/all.js |~/minify-fa-js.py home,address-card,balance-scale,sign-out-alt,sign-in-alt,calendar,balance-scale,thermometer-half,tint,cloud,battery-three-quarters,envelope,check,lock,exclamation-triangle,cog,plus,shopping-cart,minus,arrow-right,caret-down >/home/beieli/mini-beieli-web/static/js/fontawesome-5.11.2/all-minified.js

snippets/graph.html

@@ -9,14 +9,13 @@
 <link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
 <script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
 
-<div>
+<div class="column is-half is-gapless">
   <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>
 
-
 <script type="text/javascript">
 
 $(function() {
@@ -144,7 +143,7 @@ if (sPageURL.search("property=t") > -1) {
   maxfunc = function(max) { return 100 }
 } else if (sPageURL.search("property=w") > -1) {
   label = 'Gewicht';
-  minfunc = function(min) { if (min < 5000000) { return min - 2000 } else { return min - 1000 } }  
+  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';

snippets/graph2.html

@@ -0,0 +1,231 @@
+{{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 class="button is-success">
+      <span class="icon">
+        <i class="fa fa-balance-scale"></i>
+      </span>
+    </a>
+    <a class="button">
+      <span class="icon">
+        <i class="fa fa-thermometer-half"></i>
+      </span>
+    </a>
+    <a class="button">
+      <span class="icon">
+        <i class="fa fa-tint"></i>
+      </span>
+    </a>
+    <a class="button">
+      <span class="icon">
+        <i class="fa fa-cloud"></i>
+      </span>
+    </a>
+    <a 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();
+
+    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);
+    }
+
+    $('#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;
+  $.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) {
+  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 < 5000000) { return min - 2000 } else { return min - 1000 } }  
+  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>
+
+{{ else }}
+<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
+{{end}}
+{{end}}

templates/layout.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="/static/css/bulma-0.7.4/bulma.min.css">
     <link rel="stylesheet" href="static/css/mini-beieli-web.css">
 
-    <script defer src="/static/js/fontawesome-5.1.0/all.js"></script>
+    <script src="/static/js/fontawesome-5.11.2/all-minified.js"></script>
     <script src="/static/js/jquery-3.3.1/jquery.min.js"></script>
 {{template "header_additions" . }}
   </head>