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

implemented table

Browse source
This commit is contained in:
Dorian Zedler 2019-07-14 21:38:37 +02:00
parent e0e810bd6b
commit a5d7aa63c7
2 changed files with 81 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
dashboard.html
View file

@ -121,17 +121,24 @@
<span data-feather="calendar"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<form class="px-4 py-3">
<!--form class="px-4 py-3">
<div class="btn-group">
<button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(86400)">Today</button>
<button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(604800)">This
Week</button>
<button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(18144000)">This
<button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(2678400)">This
Month</button>
<button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(18144000)">This
Year</button>
</div>
</form>
</form-->
<a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(86400)">Today</a>
<a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(604800)">This
Week</a>
<a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(2678400)">This
Month</a>
<a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(31536000)">This
Year</a>
</div>
</div>
</div>

81
js/dashboard.js
View file

@ -18,7 +18,6 @@ class BlueWeatherDashboard {
this.restoreParms(this.params)
this.setTimeRange()
this.loadDashboard(this.params)
this.initDone = true
}
@ -46,9 +45,24 @@ class BlueWeatherDashboard {
if (page === -1) {
dashboard.setPageTitle("Dashboard")
// create widget row
var firstRow = document.createElement("div")
firstRow.classList.add("card-deck")
// create table
var tableContainer = document.createElement("div")
tableContainer.style = "overflow-x:auto;margin-top:20px;"
var table = document.createElement("table")
tableContainer.appendChild(table)
table.classList.add("table", "table-hover")
// create forst row of table
var tableHead = document.createElement("thead")
table.appendChild(tableHead)
tableHead.innerHTML = "<tr><th>Sensor</th><th>Minimum</th><th>Maximum</th><th>Average</th></tr>"
var tableBody = document.createElement("tbody")
table.appendChild(tableBody)
for (var i = 0; i < locationData.sensors.length; i++) {
var sensor = locationData.sensors[i]
@ -65,11 +79,21 @@ class BlueWeatherDashboard {
// get all relevant meassurement values
var vals = []
var sum = 0
var min
var max
for (s = 0; s < locationData["measvalues"].length; s++) {
var thisValue = locationData["measvalues"][s]
if (parseInt(thisValue['sensorid']) === parseInt(sensor.id)) {
vals.push(thisValue)
sum += thisValue.measvalue
if(thisValue.measvalue < min || min === undefined) {
min = thisValue.measvalue
}
if(thisValue.measvalue > max || max === undefined) {
max = thisValue.measvalue
}
}
}
@ -81,9 +105,14 @@ class BlueWeatherDashboard {
return b.timestamp - a.timestamp
})
// create table col
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>"
tableBody.appendChild(tableRow)
// - create widget card -
var latestVal = vals[0]
// - create html widget -
// create card
var thisWidget = document.createElement("div")
thisWidget.classList.add("card")
@ -152,8 +181,11 @@ class BlueWeatherDashboard {
firstRow.appendChild(thisWidget)
}
mainContent.innerHTML = "";
mainContent.appendChild(firstRow)
mainContent.appendChild(tableContainer)
}
else if (page !== -1) {
dashboard.loadDiagram("mainContent", locationData, page)
@ -177,6 +209,7 @@ class BlueWeatherDashboard {
Object.assign(this.params, newParams)
window.history.pushState("object or string", "Title", this.buildUrl({ "params": JSON.stringify(this.params) }));
this.loadDashboard()
}
@ -337,14 +370,42 @@ class BlueWeatherDashboard {
stepSize: (data.range.to - data.range.from) / 10,
userCallback: function (label, index, labels) {
var d = new Date(parseInt(label) * 1000);
var datestr =
// ("0" + d.getDate()).slice(-2) + "-" +
// ("0"+(d.getMonth()+1)).slice(-2) + "-" +
// d.getFullYear() + " " +
var datestr = "";
var to = data.range.to
var from = data.range.from
if(to === ""){
to = new Date().getTime()
}
var range = data.range.to - data.range.from
if(range <= 60 * 60 * 24){
// covers one day or less
datestr = ("0" + d.getHours()).slice(-2) + ":" +
("0" + d.getMinutes()).slice(-2) + ":" +
("0" + d.getSeconds()).slice(-2)
}
else 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) + ":" +
("0" + d.getSeconds()).slice(-2)
;
}
else {
// covers more than a month
datestr =
d.getFullYear() + "-" +
("0" + d.getDate()).slice(-2) + "-" +
("0"+(d.getMonth()+1)).slice(-2)
}
return datestr;
}
},
@ -372,9 +433,9 @@ class BlueWeatherDashboard {
var d = new Date(time * 1000);
var datestr =
// ("0" + d.getDate()).slice(-2) + "-" +
// ("0"+(d.getMonth()+1)).slice(-2) + "-" +
// d.getFullYear() + " " +
d.getFullYear() + "-" +
("0" + d.getDate()).slice(-2) + "-" +
("0"+(d.getMonth()+1)).slice(-2) + " " +
("0" + d.getHours()).slice(-2) + ":" +
("0" + d.getMinutes()).slice(-2) + ":" +
("0" + d.getSeconds()).slice(-2)