modify graph

This commit is contained in:
Joerg Lehmann 2019-12-26 19:58:53 +01:00
parent 3e4874dd79
commit e707723250
2 changed files with 56 additions and 11 deletions

View File

@ -17,27 +17,27 @@
</div>
</div>
<div class="column is-half">
<a class="button is-success">
<a id="btn_w" class="button">
<span class="icon">
<i class="fa fa-balance-scale"></i>
</span>
</a>
<a class="button">
<a id="btn_t" class="button">
<span class="icon">
<i class="fa fa-thermometer-half"></i>
</span>
</a>
<a class="button">
<a id="btn_h" class="button">
<span class="icon">
<i class="fa fa-tint"></i>
</span>
</a>
<a class="button">
<a id="btn_p" class="button">
<span class="icon">
<i class="fa fa-cloud"></i>
</span>
</a>
<a class="button">
<a id="btn_vp" class="button">
<span class="icon">
<i class="fa fa-battery-three-quarters"></i>
</span>
@ -51,6 +51,8 @@ $(function() {
var start = moment({hour: 0});
var end = moment();
var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
console.log("XXX: "+start.format());
@ -63,6 +65,36 @@ $(function() {
reloadGraph(s_start,s_end);
}
$('#btn_w').on("click", function() {
if (urlParams.toString().indexOf("property=w") == -1) {
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=w');
}
});
$('#btn_t').on("click", function() {
if (urlParams.toString().indexOf("property=t") == -1) {
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=t');
}
});
$('#btn_h').on("click", function() {
if (urlParams.toString().indexOf("property=h") == -1) {
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=h');
}
});
$('#btn_p').on("click", function() {
if (urlParams.toString().indexOf("property=p") == -1) {
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=p');
}
});
$('#btn_vp').on("click", function() {
if (urlParams.toString().indexOf("property=vp") == -1) {
location.href = location.href.replace(/property=w|property=t|property=p|property=h|property=vp/, 'property=vp');
}
});
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
@ -131,6 +163,7 @@ function reloadGraph(start, stop) {
range = ""
range = range + "&start=" + start;
range = range + "&stop=" + stop;
alert(sPageURL);
$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
chart.updateSeries([{
data: mydata
@ -163,22 +196,27 @@ $('#reportrange span').html(moment(start).format('D. MMMM YYYY') + ' - ' + momen
var sPageURL = window.location.search.substring(1);
var label;
if (sPageURL.search("property=t") > -1) {
$("#btn_t").addClass("is-success");
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) {
$("#btn_vp").addClass("is-success");
label = 'Akkuladung';
minfunc = function(min) { return 0 }
maxfunc = function(max) { return 100 }
} else if (sPageURL.search("property=w") > -1) {
$("#btn_w").addClass("is-success");
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) {
$("#btn_h").addClass("is-success");
label = 'Luftfeuchtigkeit';
minfunc = function(min) { return 0 }
maxfunc = function(max) { return 100 }
} else if (sPageURL.search("property=p") > -1) {
$("#btn_p").addClass("is-success");
label = 'Luftdruck';
minfunc = function(min) { return 900 }
maxfunc = function(max) { return 1060 }
@ -197,6 +235,13 @@ $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata)
stroke: {
curve: 'smooth'
},
title: {
text: urlParams.get('alias'),
align: 'center',
style: {
fontSize: '32px'
}
},
xaxis: {
type: "datetime",
labels: {

View File

@ -76,7 +76,7 @@ Device ID: <span id="deveui"></span>
<div class="column 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">
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=t">
<div>
<p class="icon"><i class="fa fa-thermometer-half"></i></p>
<p id="temp_{{.Deveui}}" class="title">{{.Temperature}} &deg;C</p>
@ -84,7 +84,7 @@ Device ID: <span id="deveui"></span>
</a>
</div>
<div class="level-item has-text-centered">
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=h">
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=h">
<div>
<p class="icon"><i class="fa fa-tint"></i></p>
<p id="humidity_{{.Deveui}}" class="title">{{.Humidity}} %</p>
@ -92,7 +92,7 @@ Device ID: <span id="deveui"></span>
</a>
</div>
<div class="level-item has-text-centered">
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=w">
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=w">
<div>
<p class="icon"><i class="fa fa-balance-scale"></i></p>
<p id="weight_{{.Deveui}}" class="title is-size-2 has-text-weight-bold">{{.Weight}} g</p>
@ -100,7 +100,7 @@ Device ID: <span id="deveui"></span>
</a>
</div>
<div class="level-item has-text-centered">
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=p">
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=p">
<div>
<p class="icon"><i class="fa fa-cloud"></i></p>
<p id="pressure_{{.Deveui}}" class="title">{{.Pressure}} hP</p>
@ -108,7 +108,7 @@ Device ID: <span id="deveui"></span>
</a>
</div>
<div class="level-item has-text-centered">
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=vp">
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=vp">
<div>
<p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
<p id="acculevel_{{.Deveui}}" class="title">{{.BatteryPercent}} %</p>