implemented table
This commit is contained in:
parent
e0e810bd6b
commit
a5d7aa63c7
2 changed files with 81 additions and 13 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue