89 lines
2.1 KiB
HTML
89 lines
2.1 KiB
HTML
{{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ück</a>
|
|
<br />
|
|
</div>
|
|
|
|
<div>
|
|
<section id="chart">
|
|
<!-- Content ... -->
|
|
</section>
|
|
</div>
|
|
|
|
<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 = {
|
|
chart: {
|
|
type: 'line',
|
|
animations: {
|
|
enabled: false
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'smooth'
|
|
},
|
|
xaxis: {
|
|
type: "datetime"
|
|
},
|
|
yaxis: {
|
|
min: minfunc,
|
|
max: maxfunc
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'dd.MM.yyyy HH:mm'
|
|
}
|
|
},
|
|
series: [{
|
|
name: label,
|
|
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}}
|