modifications
This commit is contained in:
parent
f42d5bca64
commit
41592fba38
|
|
@ -0,0 +1 @@
|
|||
cat /home/beieli/mini-beieli-web/static/js/fontawesome-5.11.2/all.js |~/minify-fa-js.py home,address-card,balance-scale,sign-out-alt,sign-in-alt,calendar,balance-scale,thermometer-half,tint,cloud,battery-three-quarters,envelope,check,lock,exclamation-triangle,cog,plus,shopping-cart,minus,arrow-right,caret-down >/home/beieli/mini-beieli-web/static/js/fontawesome-5.11.2/all-minified.js
|
||||
|
|
@ -9,14 +9,13 @@
|
|||
<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
|
||||
<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
|
||||
|
||||
<div>
|
||||
<div class="column is-half is-gapless">
|
||||
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
|
||||
<i class="fa fa-calendar"></i>
|
||||
<span></span> <i class="fa fa-caret-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -144,7 +143,7 @@ if (sPageURL.search("property=t") > -1) {
|
|||
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 } }
|
||||
minfunc = function(min) { if (min > 40000) { return min - 2000 } else { return 0 } }
|
||||
maxfunc = function(max) { return max + 2000 }
|
||||
} else if (sPageURL.search("property=h") > -1) {
|
||||
label = 'Luftfeuchtigkeit';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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ä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}}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="/static/css/bulma-0.7.4/bulma.min.css">
|
||||
<link rel="stylesheet" href="static/css/mini-beieli-web.css">
|
||||
|
||||
<script defer src="/static/js/fontawesome-5.1.0/all.js"></script>
|
||||
<script src="/static/js/fontawesome-5.11.2/all-minified.js"></script>
|
||||
<script src="/static/js/jquery-3.3.1/jquery.min.js"></script>
|
||||
{{template "header_additions" . }}
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in New Issue