From 326d8b0ccae2e980164ec2f39000da7dc7922d17 Mon Sep 17 00:00:00 2001
From: Joerg Lehmann <joerg.lehmann@nbit.ch>
Date: Sat, 6 Jul 2019 20:38:02 +0200
Subject: [PATCH] link to graphs

---
 snippets/graph.html            |  46 +++++++++++++++
 snippets/scales.html           | 102 ++++++++++-----------------------
 static/css/mini-beieli-web.css |   4 ++
 3 files changed, 80 insertions(+), 72 deletions(-)
 create mode 100644 snippets/graph.html

diff --git a/snippets/graph.html b/snippets/graph.html
new file mode 100644
index 0000000..d76e53e
--- /dev/null
+++ b/snippets/graph.html
@@ -0,0 +1,46 @@
+{{define "body_content"}}
+{{ if ne .UserName "" }}
+
+<div>
+  <section id="chart">
+    <!-- Content ... -->
+  </section>
+</div>
+
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+<script>
+
+var sPageURL = window.location.search.substring(1);
+
+$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL, function(mydata) {
+  var options = {
+    chart: {
+      type: 'line',
+      animations: {
+        enabled: false
+      }
+    },
+    xaxis: {
+      type: "datetime"
+    },
+    tooltip: {
+      x: {
+        format: 'dd.MM.yyyy HH:mm'
+      }
+    },
+    series: [{
+      name: 'Temperatur',
+      data: mydata
+    }]
+  }
+
+  var chart = new ApexCharts(document.querySelector("#chart"), options);
+
+  chart.render();
+});
+</script>
+
+{{ else }}
+<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
+{{end}}
+{{end}}
diff --git a/snippets/scales.html b/snippets/scales.html
index 143cca5..51b196f 100644
--- a/snippets/scales.html
+++ b/snippets/scales.html
@@ -1,21 +1,6 @@
 {{define "body_content"}}
 {{ if ne .UserName "" }}
 
-<button id="mybutton" class="button is-primary is-large">Launch example modal</button>
-
-<div class="modal">
-  <div class="modal-background"></div>
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <p class="modal-card-title">Modal title</p>
-      <button class="delete" aria-label="close"></button>
-    </header>
-    <section id="chart" class="modal-card-body">
-      <!-- Content ... -->
-    </section>
-  </div>
-</div>
-
 {{range .LastMetrics}}
 <div class="column is-full notification is-warning">
   <p id="alias_{{.Deveui}}" class="is-size-2 has-text-centered has-text-weight-bold">{{.Alias}}</p>
@@ -24,34 +9,44 @@
     <div class="colums is-full notification is-warning">
       <nav class="level">
       <div class="level-item has-text-centered">
-        <div>
-          <p class="icon"><i class="fa fa-thermometer-half"></i></p>
-          <p id="temp_{{.Deveui}}" class="title">{{.Temperature}}</p>
-        </div>
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=t">
+          <div>
+            <p class="icon"><i class="fa fa-thermometer-half"></i></p>
+            <p id="temp_{{.Deveui}}" class="title">{{.Temperature}} &deg;C</p>
+          </div>
+        </a>
       </div>
       <div class="level-item has-text-centered">
-        <div>
-          <p class="icon"><i class="fa fa-tint"></i></p>
-          <p id="humidity_{{.Deveui}}" class="title">{{.Humidity}}</p>
-        </div>
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=h">
+          <div>
+            <p class="icon"><i class="fa fa-tint"></i></p>
+            <p id="humidity_{{.Deveui}}" class="title">{{.Humidity}} %</p>
+          </div>
+        </a>
       </div>
       <div class="level-item has-text-centered">
-        <div>
-          <p class="icon"><i class="fa fa-balance-scale"></i></p>
-          <p id="weight_{{.Deveui}}" class="title is-size-1 has-text-weight-bold">{{.Weight}}</p>
-        </div>
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=w">
+          <div>
+            <p class="icon"><i class="fa fa-balance-scale"></i></p>
+            <p id="weight_{{.Deveui}}" class="title is-size-1 has-text-weight-bold">{{.Weight}} Gramm</p>
+          </div>
+        </a>
       </div>
       <div class="level-item has-text-centered">
-        <div>
-          <p class="icon"><i class="fa fa-cloud"></i></p>
-          <p id="pressure_{{.Deveui}}" class="title">{{.Pressure}}</p>
-        </div>
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=p">
+          <div>
+            <p class="icon"><i class="fa fa-cloud"></i></p>
+            <p id="pressure_{{.Deveui}}" class="title">{{.Pressure}} hP</p>
+          </div>
+        </a>
       </div>
       <div class="level-item has-text-centered">
-        <div>
-          <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
-          <p id="acculevel_{{.Deveui}}" class="title">{{.BatteryPercent}}/p>
-        </div>
+        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=vp">
+          <div>
+            <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
+            <p id="acculevel_{{.Deveui}}" class="title">{{.BatteryPercent}} %</p>
+          </div>
+        </a>
       </div>
       </nav>
     </div>
@@ -61,43 +56,6 @@
 </div>
 {{end}}
 
-    <script>
-$("#mybutton,.delete").click(function(){
-  console.log("Hallo Velo");
-  $(".modal").toggleClass("is-active");
-});
-    </script>
-
-    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-<script>
-$.getJSON('https://mini-beieli.ch/metrics?deveui=0002CC010000029D&property=t', function(mydata) {
-  var options = {
-    chart: {
-      type: 'line',
-      animations: {
-        enabled: false
-      }
-    },
-    xaxis: {
-      type: "datetime"
-    },
-    tooltip: {
-      x: {
-        format: 'dd.MM.yyyy HH:mm'
-      }
-    },
-    series: [{
-      name: 'vbat millivolt',
-      data: mydata
-    }]
-  }
-
-  var chart = new ApexCharts(document.querySelector("#chart"), options);
-
-  chart.render();
-});
-</script>
-
 {{ else }}
 <h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
 {{end}}
diff --git a/static/css/mini-beieli-web.css b/static/css/mini-beieli-web.css
index eb0c489..36c0456 100644
--- a/static/css/mini-beieli-web.css
+++ b/static/css/mini-beieli-web.css
@@ -27,3 +27,7 @@ hr {
   border: 1px solid rgba(255,255,255,0.3);
   border-radius: 10px;
 }
+
+.block-link {
+    text-decoration: none !important;
+}