dorian/blueweather
dorian/blueweather
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

time range is now displayed in the time range button

Browse source
This commit is contained in:
Dorian Zedler 2019-07-15 18:05:18 +02:00
parent 72ea619f6d
commit 9899b27e5f
1 changed files with 133 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
js/dashboard.js
View file

@ -29,6 +29,8 @@ class BlueWeatherDashboard {
loadDashboard() { loadDashboard() {
window.history.pushState("object or string", "Title", this.buildUrl({ "params": JSON.stringify(this.params) })); window.history.pushState("object or string", "Title", this.buildUrl({ "params": JSON.stringify(this.params) }));
this.setTimeRange(this.params.from, this.params.to, false, false)
// page: -1 for dashboard or sensor id // page: -1 for dashboard or sensor id
var mainContent = document.getElementById('mainContent') var mainContent = document.getElementById('mainContent')
var loader = document.getElementById('loader') var loader = document.getElementById('loader')
@ -39,6 +41,10 @@ class BlueWeatherDashboard {
var page = this.params.page var page = this.params.page
if(this.initDone){
document.getElementById("navbarPage" + page + "Link").classList.add("active")
}
this.blueweather.getLocationData(this.params.loc, { from: this.params.range.from, to: this.params.range.to }, this.params.maxVals, true, function (locationData) { this.blueweather.getLocationData(this.params.loc, { from: this.params.range.from, to: this.params.range.to }, this.params.maxVals, true, function (locationData) {
// refresh sensors list // refresh sensors list
dashboard.loadSensors(locationData.sensors) dashboard.loadSensors(locationData.sensors)
@ -59,14 +65,14 @@ class BlueWeatherDashboard {
var table = document.createElement("table") var table = document.createElement("table")
tableContainer.appendChild(table) tableContainer.appendChild(table)
table.classList.add("table", "table-hover") table.classList.add("table", "table-hover")
// create forst row of table // create forst row of table
var tableHead = document.createElement("thead") var tableHead = document.createElement("thead")
table.appendChild(tableHead) table.appendChild(tableHead)
tableHead.innerHTML = "<tr><th>Sensor</th><th>Minimum</th><th>Maximum</th><th>Average</th></tr>" tableHead.innerHTML = "<tr><th>Sensor</th><th>Minimum</th><th>Maximum</th><th>Average</th></tr>"
var tableBody = document.createElement("tbody") var tableBody = document.createElement("tbody")
table.appendChild(tableBody) table.appendChild(tableBody)
for (var i = 0; i < locationData.sensors.length; i++) { for (var i = 0; i < locationData.sensors.length; i++) {
var sensor = locationData.sensors[i] var sensor = locationData.sensors[i]
@ -84,34 +90,38 @@ class BlueWeatherDashboard {
// get all relevant meassurement values // get all relevant meassurement values
var vals = [] var vals = []
var sum = 0 var sum = 0
var min var min = undefined
var max var max = undefined
var avg = 0
for (s = 0; s < locationData["measvalues"].length; s++) { for (s = 0; s < locationData["measvalues"].length; s++) {
var thisValue = locationData["measvalues"][s] var thisValue = locationData["measvalues"][s]
if (parseInt(thisValue['sensorid']) === parseInt(sensor.id)) { if (parseInt(thisValue['sensorid']) === parseInt(sensor.id)) {
vals.push(thisValue) vals.push(thisValue)
sum += thisValue.measvalue if (parseFloat(thisValue.measvalue) < min || min === undefined) {
if(thisValue.measvalue < min || min === undefined) { min = parseFloat(thisValue.measvalue)
min = thisValue.measvalue
} }
if(thisValue.measvalue > max || max === undefined) { if (parseFloat(thisValue.measvalue) > max || max === undefined) {
max = thisValue.measvalue max = parseFloat(thisValue.measvalue)
} }
} }
} }
if(vals.length < 1) { for (s = 0; s < vals.length; s++) {
avg += vals[s].measvalue / vals.length
}
if (vals.length < 1) {
continue continue
} }
vals.sort(function(a,b){ vals.sort(function (a, b) {
return b.timestamp - a.timestamp return b.timestamp - a.timestamp
}) })
// create table col // create table col
var tableRow = document.createElement("tr") var tableRow = document.createElement("tr")
tableRow.innerHTML = "<td>" + sensor.sensorname + " (" + valueType.valuetype + ", " + valueType.valueunit + ")" + "</td><td>" + min + "</td><td>" + max + "</td><td>" + (Math.round((sum / vals.length)*100)/100) + "</td>" tableRow.innerHTML = "<td>" + sensor.sensorname + " (" + valueType.valuetype + ", " + valueType.valueunit + ")" + "</td><td>" + min + "</td><td>" + max + "</td><td>" + (Math.round((avg) * 100) / 100) + "</td>"
tableBody.appendChild(tableRow) tableBody.appendChild(tableRow)
// - create widget card - // - create widget card -
@ -139,7 +149,7 @@ class BlueWeatherDashboard {
var thisUpdateTime = document.createElement("small") var thisUpdateTime = document.createElement("small")
thisUpdateTime.classList.add("text-muted") thisUpdateTime.classList.add("text-muted")
var lastUpdated = new Date(latestVal.timestamp * 1000) var lastUpdated = new Date(latestVal.timestamp * 1000)
thisUpdateTime.innerHTML = "last updated " + (lastUpdated.getDate() === new Date().getDate() ? "today" : lastUpdated.getFullYear+"-"+lastUpdated.getMonth()+"-"+lastUpdated.getDate()) + " at " + lastUpdated.getHours() + ":" + lastUpdated.getMinutes() thisUpdateTime.innerHTML = "last updated " + (lastUpdated.getDate() === new Date().getDate() ? "today" : lastUpdated.getFullYear + "-" + lastUpdated.getMonth() + "-" + lastUpdated.getDate()) + " at " + lastUpdated.getHours() + ":" + lastUpdated.getMinutes()
thisFooter.appendChild(thisUpdateTime) thisFooter.appendChild(thisUpdateTime)
thisWidget.appendChild(thisFooter) thisWidget.appendChild(thisFooter)
@ -148,44 +158,44 @@ class BlueWeatherDashboard {
switch (displayProperties.type) { switch (displayProperties.type) {
case "doughnut": case "doughnut":
// the widget is gauge-like // the widget is gauge-like
var thisChart = document.createElement("canvas") var thisChart = document.createElement("canvas")
thisChart.id = "chartOf" + sensor.sensorname thisChart.id = "chartOf" + sensor.sensorname
var chartData = { var chartData = {
datasets: [ datasets: [
{ {
label: sensor.sensorname + " (" + valueType.valuetype + ")", label: sensor.sensorname + " (" + valueType.valuetype + ")",
data: [ data: [
parseInt(latestVal.measvalue), parseInt(latestVal.measvalue),
100 -parseInt( latestVal.measvalue) 100 - parseInt(latestVal.measvalue)
] ]
} }
], ],
labels: false labels: false
} }
Object.assign(chartData.datasets[0], displayProperties.properties) Object.assign(chartData.datasets[0], displayProperties.properties)
dashboard.createPercentCircle(thisChart, chartData)
thisBody.appendChild(thisChart) dashboard.createPercentCircle(thisChart, chartData)
thisBody.appendChild(thisChart)
break break
case "text": case "text":
// the widget is pure text // the widget is pure text
thisWidget.classList.add("text-center") thisWidget.classList.add("text-center")
thisBody.innerHTML = '<h1 class="align-self-center mx-auto" style="font-size:10vw;margin-top: auto;margin-bottom: auto;">' + latestVal.measvalue + valueType.valueunit + '</h1>' thisBody.innerHTML = '<h1 class="align-self-center mx-auto" style="font-size:10vw;margin-top: auto;margin-bottom: auto;">' + latestVal.measvalue + valueType.valueunit + '</h1>'
//thisBody.innerHTML = '<svg viewBox="0 0 56 18"><text x="0" y="15">Fit Meeeeeeeeeeee</text></svg>' //thisBody.innerHTML = '<svg viewBox="0 0 56 18"><text x="0" y="15">Fit Meeeeeeeeeeee</text></svg>'
break break
} }
firstRow.appendChild(thisWidget) firstRow.appendChild(thisWidget)
} }
mainContent.innerHTML = ""; mainContent.innerHTML = "";
mainContent.appendChild(firstRow) mainContent.appendChild(firstRow)
@ -218,18 +228,49 @@ class BlueWeatherDashboard {
this.loadDashboard() this.loadDashboard()
} }
setTimeRange(from = "", to = "") { setTimeRange(from = "", to = "", offset = true, autoReload = true) {
// offset: if true the gien times will be substracted from the current time to get the target time
this.blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3) this.blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
if (from !== "") { if (offset) {
from = new Date().getTime() / 1000 - from if (from !== "") {
from = new Date().getTime() / 1000 - from
}
if (to !== "") {
to = new Date().getTime() / 1000 - parseInt(to)
}
}
else {
if(from !== ""){
from = parseInt(from)
}
if(to !== ""){
to = parseInt(to)
}
} }
if (to !== "") { var tmpFrom = from
to = new Date().getTime() / 1000 - parseInt(to) var tmpTo = to
if(tmpFrom === "") {
tmpFrom = Math.round( new Date().getTime() / 1000 - 60 * 60 * 24 )
} }
this.updateParams({ range: { to: to, from: from } }) if(tmpTo === "") {
tmpTo = Math.round(new Date().getTime() / 1000)
}
var dateFromString = this.getDateTimeString(tmpFrom, tmpTo-tmpFrom)
var dateToString = this.getDateTimeString(tmpTo, tmpTo-tmpFrom)
dropdownMenuButton.innerHTML = "<span data-feather=\"calendar\"></span> " + dateFromString + " - " + dateToString
feather.replace()
if (this.initDone && autoReload) {
this.updateParams({ range: { to: to, from: from } })
}
} }
@ -248,13 +289,13 @@ class BlueWeatherDashboard {
} }
loadDiagram(parentId, locationData, sensorId) { loadDiagram(parentId, locationData, sensorId) {
if(typeof(parentId) === "string"){ if (typeof (parentId) === "string") {
var mainContent = document.getElementById(parentId) var mainContent = document.getElementById(parentId)
} }
else { else {
var mainContent = parentId var mainContent = parentId
} }
// get all relevant meassurement values // get all relevant meassurement values
var vals = [] var vals = []
@ -386,37 +427,37 @@ class BlueWeatherDashboard {
var to = data.range.to var to = data.range.to
var from = data.range.from var from = data.range.from
if(to === ""){ if (to === "") {
to = new Date().getTime() to = new Date().getTime()
} }
var range = data.range.to - data.range.from var range = data.range.to - data.range.from
if(range <= 60 * 60 * 24){ if (range <= 60 * 60 * 24) {
// covers one day or less // covers one day or less
datestr = ("0" + d.getHours()).slice(-2) + ":" + datestr = ("0" + d.getHours()).slice(-2) + ":" +
("0" + d.getMinutes()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + ":" +
("0" + d.getSeconds()).slice(-2) ("0" + d.getSeconds()).slice(-2)
} }
else if(range <= 60 * 60 * 24 * 31){ else if (range <= 60 * 60 * 24 * 31) {
// covers one month or less // covers one month or less
datestr = ("0" + d.getDate()).slice(-2) + "-" + datestr = ("0" + d.getDate()).slice(-2) + "-" +
("0"+(d.getMonth()+1)).slice(-2) + " " + ("0" + (d.getMonth() + 1)).slice(-2) + " " +
("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getHours()).slice(-2) + ":" +
("0" + d.getMinutes()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + ":" +
("0" + d.getSeconds()).slice(-2) ("0" + d.getSeconds()).slice(-2)
} }
else { else {
// covers more than a month // covers more than a month
datestr = datestr =
d.getFullYear() + "-" + d.getFullYear() + "-" +
("0" + d.getDate()).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + "-" +
("0"+(d.getMonth()+1)).slice(-2) ("0" + (d.getMonth() + 1)).slice(-2)
} }
return datestr; return datestr;
} }
}, },
@ -444,9 +485,9 @@ class BlueWeatherDashboard {
var d = new Date(time * 1000); var d = new Date(time * 1000);
var datestr = var datestr =
d.getFullYear() + "-" + d.getFullYear() + "-" +
("0" + d.getDate()).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + "-" +
("0"+(d.getMonth()+1)).slice(-2) + " " + ("0" + (d.getMonth() + 1)).slice(-2) + " " +
("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getHours()).slice(-2) + ":" +
("0" + d.getMinutes()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + ":" +
("0" + d.getSeconds()).slice(-2) ("0" + d.getSeconds()).slice(-2)
@ -468,6 +509,35 @@ class BlueWeatherDashboard {
}) })
} }
getDateTimeString(unixTime, range = 0) {
if(Math.abs(unixTime - new Date().getTime() / 1000) <= 60 ) {
return "now"
}
var d = new Date(parseInt(unixTime) * 1000);
var datestr = ""
if (range <= 60 * 60 * 24 * 31) {
// covers one month or less
datestr =
("0" + d.getDate()).slice(-2) + "-" +
("0" + (d.getMonth() + 1)).slice(-2) + " " +
("0" + d.getHours()).slice(-2) + ":" +
("0" + d.getMinutes()).slice(-2)
}
else {
// covers more than a month
datestr =
d.getFullYear() + "-" +
("0" + d.getDate()).slice(-2) + "-" +
("0" + (d.getMonth() + 1)).slice(-2)
}
return datestr
}
setPageTitle(title) { setPageTitle(title) {
document.getElementById("titleH1").innerHTML = title document.getElementById("titleH1").innerHTML = title
} }