first steps to allow change of settings

snippets/graph.html

@@ -1,6 +1,11 @@
 {{define "body_content"}}
 {{ if ne .UserName "" }}
 
+<div class="has-text-centered">
+  <a id="back-button" name="back-button" type="button" class="form-button button is-primary is-centered" href="#">Zur&uuml;ck</a>
+  <br />
+</div>
+
 <div>
   <section id="chart">
     <!-- Content ... -->
@@ -9,8 +14,37 @@
 
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 <script>
+var urlParams = new URLSearchParams(window.location.search);
+var deveui = urlParams.get('deveui');
+if (deveui != null) {
+  document.getElementById("back-button").href= '/scales.html#' + deveui; 
+}
 
 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, function(mydata) {
   var options = {
@@ -20,16 +54,23 @@ $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL, function(mydata) {
         enabled: false
       }
     },
+    stroke: {
+      curve: 'smooth'
+    },
     xaxis: {
       type: "datetime"
     },
+    yaxis: {
+      min: minfunc,
+      max: maxfunc
+    },
     tooltip: {
       x: {
         format: 'dd.MM.yyyy HH:mm'
       }
     },
     series: [{
-      name: 'Temperatur',
+      name: label,
       data: mydata
     }]
   }
@@ -38,6 +79,7 @@ $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL, function(mydata) {
 
   chart.render();
 });
+
 </script>
 
 {{ else }}

snippets/scales.html

@@ -1,11 +1,49 @@
 {{define "body_content"}}
 {{ if ne .UserName "" }}
 
+<div id="modal" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Einstellungen</p>
+    </header>
+    <section class="modal-card-body">
+      <!-- Content ... -->
+      <div class="field">
+        <label class="label">Bezeichnung (1234567812345678)</label>
+        <div class="control">
+          <input class="input" type="text" placeholder="Waage Volk 1">
+        </div>
+      </div>
+
+      <div class="field">
+        <div class="control">
+        <label class="checkbox">
+          <input type="checkbox">
+           SMS Alarmierung aktiv
+        </label>
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">Alarmnummer (SMS)</label>
+        <div class="control">
+          <input class="input" type="text" placeholder="+41791234567">
+        </div>
+      </div>
+    </section>
+    <footer class="modal-card-foot">
+      <button id="modal-save" class="button is-success">OK</button>
+      <button id="modal-close" class="button">Cancel</button>
+    </footer>
+  </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>
-  <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte Messung: {{.Timestamp}}</p>
-  <div>
+  <p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span id="alias_{{.Deveui}}">{{.Alias}}</span><a class="show-modal" class="block-link"><span style="float:right;" class="icon is-size-4 is-size-5-mobile"><i class="fa fa-cog"></i></span></a></p>
+  <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Messung: {{.Timestamp}}</p>
+  <div id="{{.Deveui}}">
     <div class="colums is-full notification is-warning">
       <nav class="level">
       <div class="level-item has-text-centered">
@@ -28,7 +66,7 @@
         <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>
+            <p id="weight_{{.Deveui}}" class="title is-size-2 has-text-weight-bold">{{.Weight}} g</p>
           </div>
         </a>
       </div>
@@ -54,8 +92,29 @@
 </div>
 <div>
 </div>
+
 {{end}}
 
+<script>
+// A $( document ).ready() block.
+$( document ).ready(function() {
+$(".show-modal").click(function() {
+  $("#modal").addClass("is-active");  
+});
+
+$("#modal-close").click(function() {
+   console.log("blabla");
+   $("#modal").removeClass("is-active");
+});
+
+$("#modal-save").click(function() {
+   console.log("save");
+   $("#modal").removeClass("is-active");
+});
+
+});
+</script>
+
 {{ else }}
 <h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
 {{end}}

templates/layout.html

@@ -4,6 +4,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="format-detection" content="telephone=no">
     <title>mini-beieli.ch - die besondere Bienenstockwaage</title>
     <link rel="stylesheet" href="/static/css/bulma-0.7.4/bulma.min.css">
     <link rel="stylesheet" href="static/css/mini-beieli-web.css">