modify graph

snippets/graph2.html

@@ -17,27 +17,27 @@
     </div>
   </div>
   <div class="column is-half">
-    <a class="button is-success">
+    <a id="btn_w" class="button">
       <span class="icon">
         <i class="fa fa-balance-scale"></i>
       </span>
     </a>
-    <a class="button">
+    <a id="btn_t" class="button">
       <span class="icon">
         <i class="fa fa-thermometer-half"></i>
       </span>
     </a>
-    <a class="button">
+    <a id="btn_h" class="button">
       <span class="icon">
         <i class="fa fa-tint"></i>
       </span>
     </a>
-    <a class="button">
+    <a id="btn_p" class="button">
       <span class="icon">
         <i class="fa fa-cloud"></i>
       </span>
     </a>
-    <a class="button">
+    <a id="btn_vp" class="button">
       <span class="icon">
         <i class="fa fa-battery-three-quarters"></i>
       </span>
@@ -51,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());
 
@@ -63,6 +65,36 @@ $(function() {
         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,
@@ -131,6 +163,7 @@ 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
@@ -163,22 +196,27 @@ $('#reportrange span').html(moment(start).format('D. MMMM YYYY') + ' - ' + momen
 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 < 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) {
+  $("#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 }
@@ -197,6 +235,13 @@ $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata)
     stroke: {
       curve: 'smooth'
     },
+    title: {
+      text: urlParams.get('alias'),
+      align: 'center',
+      style: {
+        fontSize: '32px'
+      }
+    },
     xaxis: {
       type: "datetime",
       labels: {

snippets/scales.html

@@ -76,7 +76,7 @@ Device ID: <span id="deveui"></span>
     <div class="column is-full notification is-warning">
       <nav class="level">
       <div class="level-item has-text-centered">
-        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=t">
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=t">
           <div>
             <p class="icon"><i class="fa fa-thermometer-half"></i></p>
             <p id="temp_{{.Deveui}}" class="title">{{.Temperature}} &deg;C</p>
@@ -84,7 +84,7 @@ Device ID: <span id="deveui"></span>
         </a>
       </div>
       <div class="level-item has-text-centered">
-        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=h">
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=h">
           <div>
             <p class="icon"><i class="fa fa-tint"></i></p>
             <p id="humidity_{{.Deveui}}" class="title">{{.Humidity}} %</p>
@@ -92,7 +92,7 @@ Device ID: <span id="deveui"></span>
         </a>
       </div>
       <div class="level-item has-text-centered">
-        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=w">
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=w">
           <div>
             <p class="icon"><i class="fa fa-balance-scale"></i></p>
             <p id="weight_{{.Deveui}}" class="title is-size-2 has-text-weight-bold">{{.Weight}} g</p>
@@ -100,7 +100,7 @@ Device ID: <span id="deveui"></span>
         </a>
       </div>
       <div class="level-item has-text-centered">
-        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=p">
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=p">
           <div>
             <p class="icon"><i class="fa fa-cloud"></i></p>
             <p id="pressure_{{.Deveui}}" class="title">{{.Pressure}} hP</p>
@@ -108,7 +108,7 @@ Device ID: <span id="deveui"></span>
         </a>
       </div>
       <div class="level-item has-text-centered">
-        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=vp">
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=vp">
           <div>
             <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
             <p id="acculevel_{{.Deveui}}" class="title">{{.BatteryPercent}} %</p>