add metrics - just a start

2019-06-26 16:48:13 +02:00
parent 10993b9209
commit 172212f0a8
3 changed files with 166 additions and 1 deletions
@@ -1,6 +1,95 @@
 {{define "body_content"}}
 {{ if ne .UserName "" }}
-<p>Datenauswertung</p>
+
+<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>
+
+<div class="column is-full notification is-warning">
+<p class="is-size-2 has-text-centered has-text-weight-bold">Waage 1</p>
+<p class="has-text-centered">letzte Messung: 1.1.2000 19:20</p>
+<div>
+<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 class="title">22.0 &deg;C</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="icon"><i class="fa fa-tint"></i></p>
+      <p class="title">50 %</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="icon"><i class="fa fa-balance-scale"></i></p>
+      <p class="title is-size-1 has-text-weight-bold">456K</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="icon"><i class="fa fa-cloud"></i></p>
+      <p class="title">789</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
+      <p class="title">90%</p>
+    </div>
+  </div>
+</nav>
+</div>
+    <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', 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}}