drpuur
/
mini-beieli-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

link to graphs

This commit is contained in:
Joerg Lehmann 2019-07-06 20:38:02 +02:00
parent 05e21aed4e
commit 326d8b0cca
3 changed files with 80 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
snippets/graph.html Normal file
View File

@ -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}}

72
snippets/scales.html
View File

@ -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">
<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}}</p>
<p id="temp_{{.Deveui}}" class="title">{{.Temperature}} &deg;C</p>
</div>
</a>
</div>
<div class="level-item has-text-centered">
<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>
<p id="humidity_{{.Deveui}}" class="title">{{.Humidity}} %</p>
</div>
</a>
</div>
<div class="level-item has-text-centered">
<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}}</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">
<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}}</p>
<p id="pressure_{{.Deveui}}" class="title">{{.Pressure}} hP</p>
</div>
</a>
</div>
<div class="level-item has-text-centered">
<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>
<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}}

4
static/css/mini-beieli-web.css
View File

@ -27,3 +27,7 @@ hr {
border: 1px solid rgba(255,255,255,0.3);
border-radius: 10px;
}
.block-link {
text-decoration: none !important;
}