From 2b5bba027ddc9dc5fbf1fd7f4cf5015e924dec1f Mon Sep 17 00:00:00 2001 From: oliver Date: Fri, 12 Jul 2019 13:24:06 +0200 Subject: [PATCH] - timespan can be changed now - data loading is asyncronus now - the chart as always ten labels on the y axis now --- dashboard.html | 18 ++++--- js/blueweather.js | 41 ++++++++------ js/dashboard.js | 132 ++++++++++++++++++++++++++++------------------ 3 files changed, 116 insertions(+), 75 deletions(-) diff --git a/dashboard.html b/dashboard.html index f6866f5..1cbd37a 100644 --- a/dashboard.html +++ b/dashboard.html @@ -104,15 +104,19 @@ -
-
- Link 1 - Link 2 - Link 3 + Today + This Week + This Month + This Year + Custom
@@ -129,7 +133,7 @@ - + diff --git a/js/blueweather.js b/js/blueweather.js index c37fdca..45a8e0e 100644 --- a/js/blueweather.js +++ b/js/blueweather.js @@ -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 + "="); diff --git a/js/dashboard.js b/js/dashboard.js index 3138d44..f1674ad 100644 --- a/js/dashboard.js +++ b/js/dashboard.js @@ -13,9 +13,8 @@ function setPage(page) { // set page to loading state mainContent.innerHTML = "
" - 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 = "

This is your great dashboard :))

" } 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 = "" - 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 = "
" + + 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 = "" + 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 =