- timespan can be changed now
- data loading is asyncronus now - the chart as always ten labels on the y axis now
This commit is contained in:
oliver
parent
9b31d50629
commit
2b5bba027d
3 changed files with 116 additions and 75 deletions
|
|
@ -104,15 +104,19 @@
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
|
||||
</div>
|
||||
<div class="dropdown" class="h-100">
|
||||
<button id="dropdownMenuButton" type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="dropdown dropleft" class="h-100">
|
||||
<button id="dropdownMenuButton" type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"
|
||||
data-toggle="dropdown">
|
||||
<span data-feather="calendar"></span>
|
||||
This week
|
||||
|
||||
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Link 1</a>
|
||||
<a class="dropdown-item" href="#">Link 2</a>
|
||||
<a class="dropdown-item" href="#">Link 3</a>
|
||||
<a class="dropdown-item" onclick="setTimeRange(86400)" href="#&range[from]=86400">Today</a>
|
||||
<a class="dropdown-item" onclick="setTimeRange(604800)" href="#&range[from]=604800">This Week</a>
|
||||
<a class="dropdown-item" onclick="setTimeRange(18144000)" href="#&range[from]=18144000">This Month</a>
|
||||
<a class="dropdown-item" onclick="setTimeRange(220752000)" href="#&range[from]=220752000">This Year</a>
|
||||
<a class="dropdown-item">Custom</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -129,7 +133,7 @@
|
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
|
||||
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
|
||||
<script src="js/blueweather.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,16 +8,33 @@ class BlueWeather {
|
|||
this.log("init done", 2)
|
||||
}
|
||||
|
||||
getLocationData(locId) {
|
||||
this.sendRequest("https://api.itsblue.de/weather/json.php?locId="+locId+"")
|
||||
getLocationData(locId, range = {from:"", to:""}, async, processingFunction, errorFunction) {
|
||||
this.xhttp.abort()
|
||||
var thisObject = this
|
||||
if(async) {
|
||||
this.xhttp.onreadystatechange = function () {
|
||||
if (this.readyState === 4) {
|
||||
// Typical action to be performed when the document is ready:
|
||||
if(this.status === 200) {
|
||||
thisObject.log("getting sensors response was: " + this.responseText, 3)
|
||||
var ret = JSON.parse(this.responseText)
|
||||
if(ret){
|
||||
processingFunction(ret);
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if(this.xhttp.status === 200) {
|
||||
this.log("getting sensors response was: " + this.xhttp.responseText, 3)
|
||||
var ret = JSON.parse(this.xhttp.responseText)
|
||||
if(ret){
|
||||
return ret
|
||||
}
|
||||
if(errorFunction !== null) {
|
||||
errorFunction(this.status, this.text)
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
var url = "https://api.itsblue.de/weather/json.php?locId="+locId+"&range[from]="+range.from + "&range[to]="+range.to
|
||||
this.log("starting location request; URL is: " + url, 3)
|
||||
this.xhttp.open("GET", url, async)
|
||||
this.xhttp.send()
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -30,14 +47,6 @@ class BlueWeather {
|
|||
// - helper functions -
|
||||
// --------------------
|
||||
|
||||
sendRequest(url) {
|
||||
this.log("starting request; URL is: " + url, 3)
|
||||
|
||||
this.xhttp.open("GET", url, false)
|
||||
this.xhttp.send()
|
||||
return this.xhttp
|
||||
}
|
||||
|
||||
getCookie(name) {
|
||||
var value = "; " + document.cookie;
|
||||
var parts = value.split("; " + name + "=");
|
||||
|
|
|
|||
132
js/dashboard.js
132
js/dashboard.js
|
|
@ -13,9 +13,8 @@ function setPage(page) {
|
|||
// set page to loading state
|
||||
mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
|
||||
|
||||
var locationData = blueweather.getLocationData(thisLoc)
|
||||
|
||||
// refresh sensors list
|
||||
blueweather.getLocationData(thisLoc, undefined, true, function(locationData){
|
||||
// refresh sensors list
|
||||
loadSensors(locationData.sensors)
|
||||
|
||||
// set acive page in navbar
|
||||
|
|
@ -26,57 +25,30 @@ function setPage(page) {
|
|||
mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
|
||||
}
|
||||
else if (page !== -1) {
|
||||
// get all relevant meassurement values
|
||||
var vals = []
|
||||
loadDiagram("mainContent", locationData, page)
|
||||
}
|
||||
})
|
||||
|
||||
for (var i = 0; i < locationData["measvalues"].length; i++) {
|
||||
var thisValue = locationData["measvalues"][i]
|
||||
if (parseInt(thisValue['sensorid']) === page) {
|
||||
vals.push(thisValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// get the current sensor
|
||||
var sensor;
|
||||
|
||||
for (i = 0; i < locationData['sensors'].length; i++) {
|
||||
var thisSensor = locationData['sensors'][i]
|
||||
if (parseInt(thisSensor.id) === page) {
|
||||
sensor = thisSensor;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// get the value type
|
||||
var valueType;
|
||||
|
||||
for (i = 0; i < locationData['valuetypes'].length; i++) {
|
||||
var thisValType = locationData['valuetypes'][i]
|
||||
if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
|
||||
valueType = thisValType;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// build chart data array
|
||||
var chartData = {
|
||||
label: sensor.sensorname + " (" + valueType.valuetype + ")",
|
||||
data: [],
|
||||
range: locationData.range
|
||||
}
|
||||
|
||||
for (i = 0; i < vals.length; i++) {
|
||||
chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
|
||||
}
|
||||
|
||||
mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
|
||||
setPageTitle(chartData.label)
|
||||
|
||||
blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
|
||||
|
||||
createDiagram("myChart", chartData)
|
||||
function setTimeRange(from="", to=""){
|
||||
blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
|
||||
|
||||
// set page to loading state
|
||||
mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
|
||||
|
||||
if(from !== "") {
|
||||
from = new Date().getTime() / 1000 - from
|
||||
}
|
||||
|
||||
if(to !== "") {
|
||||
to = new Date().getTime() / 1000 - parseInt(to)
|
||||
}
|
||||
|
||||
blueweather.getLocationData(thisLoc, {from: from, to: to}, true, function(locationData){
|
||||
loadDiagram("mainContent", locationData, currentPage)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function loadSensors(sensors) {
|
||||
|
|
@ -93,8 +65,61 @@ function loadSensors(sensors) {
|
|||
feather.replace()
|
||||
}
|
||||
|
||||
function loadDiagram(parentId, locationData, sensorId){
|
||||
mainContent = document.getElementById(parentId)
|
||||
// get all relevant meassurement values
|
||||
var vals = []
|
||||
|
||||
for (var i = 0; i < locationData["measvalues"].length; i++) {
|
||||
var thisValue = locationData["measvalues"][i]
|
||||
if (parseInt(thisValue['sensorid']) === sensorId) {
|
||||
vals.push(thisValue)
|
||||
}
|
||||
}
|
||||
|
||||
// get the current sensor
|
||||
var sensor;
|
||||
|
||||
for (i = 0; i < locationData['sensors'].length; i++) {
|
||||
var thisSensor = locationData['sensors'][i]
|
||||
if (parseInt(thisSensor.id) === sensorId) {
|
||||
sensor = thisSensor;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// get the value type
|
||||
var valueType;
|
||||
|
||||
for (i = 0; i < locationData['valuetypes'].length; i++) {
|
||||
var thisValType = locationData['valuetypes'][i]
|
||||
if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
|
||||
valueType = thisValType;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// build chart data array
|
||||
var chartData = {
|
||||
label: sensor.sensorname + " (" + valueType.valuetype + ")",
|
||||
data: [],
|
||||
range: locationData.range
|
||||
}
|
||||
|
||||
for (i = 0; i < vals.length; i++) {
|
||||
chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
|
||||
}
|
||||
|
||||
mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
|
||||
setPageTitle(chartData.label)
|
||||
|
||||
//blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
|
||||
|
||||
createDiagram("myChart", chartData)
|
||||
}
|
||||
|
||||
function createDiagram(canvasId, data) {
|
||||
var pointradius = 3
|
||||
var pointradius = data.data.length > 500 ? 0:3
|
||||
// Graphs
|
||||
var ctx = document.getElementById(canvasId)
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
|
|
@ -126,7 +151,10 @@ function createDiagram(canvasId, data) {
|
|||
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
max: data.range.from, min: data.range.to,
|
||||
min: parseInt(data.range.from),
|
||||
max: parseInt(data.range.to),
|
||||
beginAtZero: false,
|
||||
stepSize: (data.range.to - data.range.from) / 10,
|
||||
userCallback: function (label, index, labels) {
|
||||
var d = new Date(parseInt(label) * 1000);
|
||||
var datestr =
|
||||
|
|
|
|||
Loading…
Reference in a new issue