diff --git a/dashboard.html b/dashboard.html
index f6866f5..1cbd37a 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -104,15 +104,19 @@
-
-
@@ -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 =