changed programming style
This commit is contained in:
parent
5ff728d65d
commit
176a668e3e
1 changed files with 207 additions and 195 deletions
|
|
@ -3,36 +3,47 @@
|
|||
//var ctx = document.getElementById('myChart')
|
||||
//var mainContent = document.getElementById('mainContent')
|
||||
|
||||
function setPage(page) {
|
||||
document.getElementById("navbarPage" + currentPage + "Link").classList.remove("active")
|
||||
class BlueWeatherDashboard {
|
||||
|
||||
constructor() {
|
||||
// cunstruct xmlhttp
|
||||
this.blueweather = new BlueWeather()
|
||||
this.loc = this.blueweather.findGetParameter("locId")
|
||||
this.currentPage = -1
|
||||
this.setPage(this.currentPage)
|
||||
}
|
||||
|
||||
setPage(page) {
|
||||
document.getElementById("navbarPage" + this.currentPage + "Link").classList.remove("active")
|
||||
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
||||
currentPage = page
|
||||
|
||||
this.currentPage = page
|
||||
// page: -1 for dashboard or sensor id
|
||||
var mainContent = document.getElementById('mainContent')
|
||||
|
||||
// set page to loading state
|
||||
mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
|
||||
|
||||
blueweather.getLocationData(thisLoc, undefined, true, function(locationData){
|
||||
this.blueweather.getLocationData(this.loc, undefined, true, function (locationData) {
|
||||
// refresh sensors list
|
||||
loadSensors(locationData.sensors)
|
||||
dashboard.loadSensors(locationData.sensors)
|
||||
|
||||
// set acive page in navbar
|
||||
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
||||
|
||||
if (page === -1) {
|
||||
setPageTitle("Dashboard")
|
||||
dashboard.setPageTitle("Dashboard")
|
||||
mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
|
||||
}
|
||||
else if (page !== -1) {
|
||||
loadDiagram("mainContent", locationData, page)
|
||||
dashboard.loadDiagram("mainContent", locationData, page)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function setTimeRange(from="", to=""){
|
||||
blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
|
||||
setTimeRange(from = "", to = "") {
|
||||
this.blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
|
||||
|
||||
// set page to loading state
|
||||
mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
|
||||
|
|
@ -45,13 +56,13 @@ function setTimeRange(from="", to=""){
|
|||
to = new Date().getTime() / 1000 - parseInt(to)
|
||||
}
|
||||
|
||||
blueweather.getLocationData(thisLoc, {from: from, to: to}, true, function(locationData){
|
||||
loadDiagram("mainContent", locationData, currentPage)
|
||||
this.blueweather.getLocationData(this.loc, { from: from, to: to }, true, function (locationData) {
|
||||
dashboard.loadDiagram("mainContent", locationData, dashboard.currentPage)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function loadSensors(sensors) {
|
||||
loadSensors(sensors) {
|
||||
|
||||
var sensorsList = document.getElementById("sensorsList")
|
||||
sensorsList.innerHTML = ""
|
||||
|
|
@ -59,13 +70,13 @@ function loadSensors(sensors) {
|
|||
for (var i = 0; i < sensors.length; i++) {
|
||||
var currentHTML = sensorsList.innerHTML
|
||||
sensorsList.innerHTML = currentHTML +
|
||||
"<li class=\"nav-item\"><a class=\"nav-link\" id=\"navbarPage" + sensors[i]["id"] + "Link\" href=\"#\" onclick=\"setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
|
||||
"<li class=\"nav-item\"><a class=\"nav-link\" id=\"navbarPage" + sensors[i]["id"] + "Link\" href=\"#\" onclick=\"dashboard.setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
|
||||
}
|
||||
|
||||
feather.replace()
|
||||
}
|
||||
|
||||
function loadDiagram(parentId, locationData, sensorId){
|
||||
loadDiagram(parentId, locationData, sensorId) {
|
||||
mainContent = document.getElementById(parentId)
|
||||
// get all relevant meassurement values
|
||||
var vals = []
|
||||
|
|
@ -101,40 +112,43 @@ function loadDiagram(parentId, locationData, sensorId){
|
|||
|
||||
// build chart data array
|
||||
var chartData = {
|
||||
label: sensor.sensorname + " (" + valueType.valuetype + ")",
|
||||
data: [],
|
||||
datasets: [
|
||||
{
|
||||
label: sensor.sensorname + " (" + valueType.valuetype + ")",
|
||||
yAxisID: 'yAxis',
|
||||
showLine: true,
|
||||
data: vals
|
||||
}
|
||||
],
|
||||
range: locationData.range
|
||||
}
|
||||
|
||||
|
||||
|
||||
for (i = 0; i < vals.length; i++) {
|
||||
chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
|
||||
}
|
||||
|
||||
Object.assign(chartData.datasets[0], JSON.parse(valueType.displayproperty))
|
||||
Object.assign(chartData.datasets[0], {data: chartData.data, pointRadius: chartData.data.length > 500 ? 0 : 3})
|
||||
|
||||
mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
|
||||
setPageTitle(chartData.label)
|
||||
this.setPageTitle(sensor.sensorname + " (" + valueType.valuetype + ")")
|
||||
|
||||
//blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
|
||||
|
||||
createDiagram("myChart", chartData)
|
||||
this.createDiagram("myChart", chartData)
|
||||
}
|
||||
|
||||
function createDiagram(canvasId, data, additional) {
|
||||
var pointradius = data.data.length > 500 ? 0:3
|
||||
createDiagram(canvasId, data) {
|
||||
// Graphs
|
||||
var ctx = document.getElementById(canvasId)
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
|
||||
var chartData = {
|
||||
//labels: time,
|
||||
datasets: [
|
||||
{
|
||||
label: data.label,
|
||||
yAxisID: 'yAxis',
|
||||
fill: true, pointRadius: pointradius, backgroundColor: "rgba(29, 202, 255, 0.75)", borderColor: "rgba(29, 202, 255, 1)", pointHoverBackgroundColor: "rgba(29, 202, 255, 1)", pointHoverBorderColor: "rgba(29, 202, 255, 1)",
|
||||
showLine: true,
|
||||
data: data.data
|
||||
}
|
||||
]
|
||||
datasets: data.datasets
|
||||
};
|
||||
|
||||
var chartOptions = {
|
||||
|
|
@ -216,11 +230,9 @@ function createDiagram(canvasId, data, additional) {
|
|||
})
|
||||
}
|
||||
|
||||
function setPageTitle(title) {
|
||||
setPageTitle(title) {
|
||||
document.getElementById("titleH1").innerHTML = title
|
||||
}
|
||||
}
|
||||
|
||||
var blueweather = new BlueWeather()
|
||||
var thisLoc = blueweather.findGetParameter("locId")
|
||||
var currentPage = -1
|
||||
setPage(currentPage)
|
||||
dashboard = new BlueWeatherDashboard()
|
||||
Loading…
Reference in a new issue