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

modifications

Browse Source
This commit is contained in:
jlehmann
2019-12-26 16:36:31 +01:00
parent f42d5bca64
commit 41592fba38
7 changed files with 7473 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
snippets/graph2.html
+231
View File
@@ -0,0 +1,231 @@
{{define "body_content"}}
{{ if ne .UserName "" }}
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<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-half">
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>&nbsp;
<span></span> <i class="fa fa-caret-down"></i>
</div>
</div>
<div class="column is-half">
<a class="button is-success">
<span class="icon">
<i class="fa fa-balance-scale"></i>
</span>
</a>
<a class="button">
<span class="icon">
<i class="fa fa-thermometer-half"></i>
</span>
</a>
<a class="button">
<span class="icon">
<i class="fa fa-tint"></i>
</span>
</a>
<a class="button">
<span class="icon">
<i class="fa fa-cloud"></i>
</span>
</a>
<a class="button">
<span class="icon">
<i class="fa fa-battery-three-quarters"></i>
</span>
</a>
</div>
</div>
<script type="text/javascript">
$(function() {
var start = moment({hour: 0});
var end = moment();
console.log("XXX: "+start.format());
function cb(start, end) {
$('#reportrange span').html(start.format('D. MMMM YYYY') + ' - ' + end.format('D. MMMM YYYY'));
console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
console.log("Start: " + s_start + ' End: ' + s_end);
reloadGraph(s_start,s_end);
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
regional: [ "de" ],
"locale": {
format: 'DD.MM.YYYY',
"separator": " - ",
"applyLabel": "Anwenden",
"cancelLabel": "Abbrechen",
"fromLabel": "Von",
"toLabel": "Bis",
customRangeLabel: 'Benutzerdefiniert',
"weekLabel": "W",
"daysOfWeek": [
"So",
"Mo",
"Di",
"Mi",
"Do",
"Fr",
"Sa"
],
"monthNames": [
"Januar",
"Februar",
"M&auml;rz",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
"firstDay": 1
},
ranges: {
'Heute': [moment(), moment()],
'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
//cb(start, end);
});
</script>
<div>
<section id="chart">
<!-- Content ... -->
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></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 dstart = moment({hour: 0});
var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
range = range + "&start=" + start;
}
if (stop == null) {
var dstop = moment();
var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
range = range + "&stop=" + stop;
}
console.log("Start: "+start);
console.log("Stop: "+stop);
$('#reportrange span').html(moment(start).format('D. MMMM YYYY') + ' - ' + moment(stop).format('D. MMMM YYYY'));
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 < 5000000) { return min - 2000 } else { return min - 1000 } }
maxfunc = function(max) { return max + 2000 }
} 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",
labels: {
rotate: 0
}
},
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}}