From a5d7aa63c75d0657f550a21bfaeb0cc2cb80c653 Mon Sep 17 00:00:00 2001 From: dorian Date: Sun, 14 Jul 2019 21:38:37 +0200 Subject: [PATCH] implemented table --- dashboard.html | 13 ++++++-- js/dashboard.js | 81 +++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 81 insertions(+), 13 deletions(-) diff --git a/dashboard.html b/dashboard.html index 558d5f4..ef1c59b 100644 --- a/dashboard.html +++ b/dashboard.html @@ -121,17 +121,24 @@ diff --git a/js/dashboard.js b/js/dashboard.js index 3e204da..0314bf3 100644 --- a/js/dashboard.js +++ b/js/dashboard.js @@ -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 = "SensorMinimumMaximumAverage" + 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 = "" + sensor.sensorname + " (" + valueType.valuetype + ", " + valueType.valueunit + ")" + "" + min + "" + max + "" + (Math.round((sum / vals.length)*100)/100) + "" + 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)