151 lines
3.9 KiB
HTML
151 lines
3.9 KiB
HTML
{{define "body_content"}}
|
|
{{ if ne .UserName "" }}
|
|
|
|
{{ index (index .QueryValues "deveui") 0 }}
|
|
|
|
<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
|
|
<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
|
|
|
|
<div class="columns">
|
|
<div class="column is-one-third">
|
|
<input type="date" id="daterangepicker" data-type="date" data-display-mode="dialog" data-lang="de" data-is-range="true" data-close-on-select="true" data-date-format="DD.MM.YYYY">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<section id="chart">
|
|
<!-- Content ... -->
|
|
</section>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
console.log('Initialize Bulma Calendar');
|
|
// Initialize all input of type date
|
|
var calendars = bulmaCalendar.attach('[type="date"]', {});
|
|
|
|
// To access to bulmaCalendar instance of an element
|
|
var element = document.querySelector('#daterangepicker');
|
|
if (element) {
|
|
// bulmaCalendar instance is available as element.bulmaCalendar
|
|
element.bulmaCalendar.on('select', function(datepicker) {
|
|
console.log(datepicker.data.value());
|
|
s = datepicker.data.value();
|
|
// 04.08.2019 - 08.08.2019
|
|
start = s.substring(6,10).concat("-",s.substring(3,5),"-",s.substring(0,2),"T00:00:00Z");
|
|
end = s.substring(19,23).concat("-",s.substring(16,18),"-",s.substring(13,15),"T00:00:00Z");
|
|
console.log("Reload Graph start:"+start);
|
|
console.log("Reload Graph end:"+end);
|
|
reloadGraph(start,end);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var chart;
|
|
|
|
function reloadGraph(start, stop) {
|
|
range = ""
|
|
range = range + "&start=" + start;
|
|
range = range + "&stop=" + stop;
|
|
$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
|
|
chart.updateSeries([{
|
|
data: mydata
|
|
}])
|
|
});
|
|
}
|
|
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
var deveui = urlParams.get('deveui');
|
|
var start = urlParams.get('start');
|
|
var stop = urlParams.get('stop');
|
|
|
|
range="";
|
|
if (start == null) {
|
|
var d = new Date();
|
|
d.setHours(0,0,0,0);
|
|
d.setSeconds(0,0);
|
|
var start = d.toISOString().substring(0,19)+'Z';
|
|
range = range + "&start=" + start;
|
|
}
|
|
|
|
if (stop == null) {
|
|
var d = new Date();
|
|
var stop = d.toISOString().substring(0,19)+'Z';
|
|
range = range + "&stop=" + stop;
|
|
}
|
|
|
|
console.log("Start: "+start);
|
|
console.log("Stop: "+stop);
|
|
|
|
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 + range, 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
|
|
}]
|
|
}
|
|
|
|
chart = new ApexCharts(document.querySelector("#chart"), options);
|
|
|
|
chart.render();
|
|
});
|
|
|
|
</script>
|
|
|
|
{{ else }}
|
|
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
|
|
{{end}}
|
|
{{end}}
|