changed programming style
This commit is contained in:
parent
5ff728d65d
commit
176a668e3e
1 changed files with 207 additions and 195 deletions
402
js/dashboard.js
402
js/dashboard.js
|
|
@ -3,160 +3,208 @@
|
|||
//var ctx = document.getElementById('myChart')
|
||||
//var mainContent = document.getElementById('mainContent')
|
||||
|
||||
function setPage(page) {
|
||||
document.getElementById("navbarPage" + currentPage + "Link").classList.remove("active")
|
||||
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
||||
currentPage = page
|
||||
// page: -1 for dashboard or sensor id
|
||||
var mainContent = document.getElementById('mainContent')
|
||||
class BlueWeatherDashboard {
|
||||
|
||||
// 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>"
|
||||
constructor() {
|
||||
// cunstruct xmlhttp
|
||||
this.blueweather = new BlueWeather()
|
||||
this.loc = this.blueweather.findGetParameter("locId")
|
||||
this.currentPage = -1
|
||||
this.setPage(this.currentPage)
|
||||
}
|
||||
|
||||
blueweather.getLocationData(thisLoc, undefined, true, function(locationData){
|
||||
setPage(page) {
|
||||
document.getElementById("navbarPage" + this.currentPage + "Link").classList.remove("active")
|
||||
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
||||
|
||||
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>"
|
||||
|
||||
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")
|
||||
// set acive page in navbar
|
||||
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
||||
|
||||
if(page === -1) {
|
||||
setPageTitle("Dashboard")
|
||||
mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
|
||||
}
|
||||
else if (page !== -1) {
|
||||
loadDiagram("mainContent", locationData, page)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function setTimeRange(from="", to=""){
|
||||
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>"
|
||||
|
||||
if(from !== "") {
|
||||
from = new Date().getTime() / 1000 - from
|
||||
}
|
||||
|
||||
if(to !== "") {
|
||||
to = new Date().getTime() / 1000 - parseInt(to)
|
||||
}
|
||||
|
||||
blueweather.getLocationData(thisLoc, {from: from, to: to}, true, function(locationData){
|
||||
loadDiagram("mainContent", locationData, currentPage)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function loadSensors(sensors) {
|
||||
|
||||
var sensorsList = document.getElementById("sensorsList")
|
||||
sensorsList.innerHTML = ""
|
||||
|
||||
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>"
|
||||
}
|
||||
|
||||
feather.replace()
|
||||
}
|
||||
|
||||
function loadDiagram(parentId, locationData, sensorId){
|
||||
mainContent = document.getElementById(parentId)
|
||||
// get all relevant meassurement values
|
||||
var vals = []
|
||||
|
||||
for (var i = 0; i < locationData["measvalues"].length; i++) {
|
||||
var thisValue = locationData["measvalues"][i]
|
||||
if (parseInt(thisValue['sensorid']) === sensorId) {
|
||||
vals.push(thisValue)
|
||||
}
|
||||
}
|
||||
|
||||
// get the current sensor
|
||||
var sensor;
|
||||
|
||||
for (i = 0; i < locationData['sensors'].length; i++) {
|
||||
var thisSensor = locationData['sensors'][i]
|
||||
if (parseInt(thisSensor.id) === sensorId) {
|
||||
sensor = thisSensor;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// get the value type
|
||||
var valueType;
|
||||
|
||||
for (i = 0; i < locationData['valuetypes'].length; i++) {
|
||||
var thisValType = locationData['valuetypes'][i]
|
||||
if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
|
||||
valueType = thisValType;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// build chart data array
|
||||
var chartData = {
|
||||
label: sensor.sensorname + " (" + valueType.valuetype + ")",
|
||||
data: [],
|
||||
range: locationData.range
|
||||
}
|
||||
|
||||
for (i = 0; i < vals.length; i++) {
|
||||
chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
|
||||
}
|
||||
|
||||
mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
|
||||
setPageTitle(chartData.label)
|
||||
|
||||
//blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
|
||||
|
||||
createDiagram("myChart", chartData)
|
||||
}
|
||||
|
||||
function createDiagram(canvasId, data, additional) {
|
||||
var pointradius = data.data.length > 500 ? 0:3
|
||||
// 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
|
||||
if (page === -1) {
|
||||
dashboard.setPageTitle("Dashboard")
|
||||
mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
|
||||
}
|
||||
]
|
||||
};
|
||||
else if (page !== -1) {
|
||||
dashboard.loadDiagram("mainContent", locationData, page)
|
||||
}
|
||||
})
|
||||
|
||||
var chartOptions = {
|
||||
responsive:true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [
|
||||
}
|
||||
|
||||
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>"
|
||||
|
||||
if (from !== "") {
|
||||
from = new Date().getTime() / 1000 - from
|
||||
}
|
||||
|
||||
if (to !== "") {
|
||||
to = new Date().getTime() / 1000 - parseInt(to)
|
||||
}
|
||||
|
||||
this.blueweather.getLocationData(this.loc, { from: from, to: to }, true, function (locationData) {
|
||||
dashboard.loadDiagram("mainContent", locationData, dashboard.currentPage)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
loadSensors(sensors) {
|
||||
|
||||
var sensorsList = document.getElementById("sensorsList")
|
||||
sensorsList.innerHTML = ""
|
||||
|
||||
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=\"dashboard.setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
|
||||
}
|
||||
|
||||
feather.replace()
|
||||
}
|
||||
|
||||
loadDiagram(parentId, locationData, sensorId) {
|
||||
mainContent = document.getElementById(parentId)
|
||||
// get all relevant meassurement values
|
||||
var vals = []
|
||||
|
||||
for (var i = 0; i < locationData["measvalues"].length; i++) {
|
||||
var thisValue = locationData["measvalues"][i]
|
||||
if (parseInt(thisValue['sensorid']) === sensorId) {
|
||||
vals.push(thisValue)
|
||||
}
|
||||
}
|
||||
|
||||
// get the current sensor
|
||||
var sensor;
|
||||
|
||||
for (i = 0; i < locationData['sensors'].length; i++) {
|
||||
var thisSensor = locationData['sensors'][i]
|
||||
if (parseInt(thisSensor.id) === sensorId) {
|
||||
sensor = thisSensor;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// get the value type
|
||||
var valueType;
|
||||
|
||||
for (i = 0; i < locationData['valuetypes'].length; i++) {
|
||||
var thisValType = locationData['valuetypes'][i]
|
||||
if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
|
||||
valueType = thisValType;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// build chart data array
|
||||
var chartData = {
|
||||
data: [],
|
||||
datasets: [
|
||||
{
|
||||
id: 'yAxis',
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
label: sensor.sensorname + " (" + valueType.valuetype + ")",
|
||||
yAxisID: 'yAxis',
|
||||
showLine: true,
|
||||
data: vals
|
||||
}
|
||||
],
|
||||
range: locationData.range
|
||||
}
|
||||
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
min: parseInt(data.range.from),
|
||||
max: parseInt(data.range.to),
|
||||
beginAtZero: false,
|
||||
stepSize: (data.range.to - data.range.from) / 10,
|
||||
userCallback: function (label, index, labels) {
|
||||
var d = new Date(parseInt(label) * 1000);
|
||||
|
||||
|
||||
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>"
|
||||
this.setPageTitle(sensor.sensorname + " (" + valueType.valuetype + ")")
|
||||
|
||||
//blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
|
||||
|
||||
this.createDiagram("myChart", chartData)
|
||||
}
|
||||
|
||||
createDiagram(canvasId, data) {
|
||||
// Graphs
|
||||
var ctx = document.getElementById(canvasId)
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
|
||||
var chartData = {
|
||||
//labels: time,
|
||||
datasets: data.datasets
|
||||
};
|
||||
|
||||
var chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
id: 'yAxis',
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
}
|
||||
],
|
||||
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
min: parseInt(data.range.from),
|
||||
max: parseInt(data.range.to),
|
||||
beginAtZero: false,
|
||||
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() + " " +
|
||||
("0" + d.getHours()).slice(-2) + ":" +
|
||||
("0" + d.getMinutes()).slice(-2) + ":" +
|
||||
("0" + d.getSeconds()).slice(-2)
|
||||
;
|
||||
return datestr;
|
||||
}
|
||||
},
|
||||
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'time'
|
||||
}
|
||||
}],
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function (tooltipItem, data) {
|
||||
|
||||
var label = [data.datasets[tooltipItem.datasetIndex].label || ''];
|
||||
|
||||
if (label) {
|
||||
label[0] += ': ';
|
||||
}
|
||||
|
||||
label[0] += Math.round(tooltipItem.yLabel * 100) / 100;
|
||||
|
||||
var time = Math.round(tooltipItem.xLabel * 100) / 100;
|
||||
|
||||
var d = new Date(time * 1000);
|
||||
var datestr =
|
||||
// ("0" + d.getDate()).slice(-2) + "-" +
|
||||
// ("0"+(d.getMonth()+1)).slice(-2) + "-" +
|
||||
|
|
@ -165,62 +213,26 @@ function createDiagram(canvasId, data, additional) {
|
|||
("0" + d.getMinutes()).slice(-2) + ":" +
|
||||
("0" + d.getSeconds()).slice(-2)
|
||||
;
|
||||
return datestr;
|
||||
|
||||
label.push("Time: " + datestr);
|
||||
|
||||
return label;
|
||||
}
|
||||
},
|
||||
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'time'
|
||||
}
|
||||
}],
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function (tooltipItem, data) {
|
||||
|
||||
var label = [data.datasets[tooltipItem.datasetIndex].label || ''];
|
||||
|
||||
if (label) {
|
||||
label[0] += ': ';
|
||||
}
|
||||
|
||||
label[0] += Math.round(tooltipItem.yLabel * 100) / 100;
|
||||
|
||||
var time = Math.round(tooltipItem.xLabel * 100) / 100;
|
||||
|
||||
var d = new Date(time * 1000);
|
||||
var datestr =
|
||||
// ("0" + d.getDate()).slice(-2) + "-" +
|
||||
// ("0"+(d.getMonth()+1)).slice(-2) + "-" +
|
||||
// d.getFullYear() + " " +
|
||||
("0" + d.getHours()).slice(-2) + ":" +
|
||||
("0" + d.getMinutes()).slice(-2) + ":" +
|
||||
("0" + d.getSeconds()).slice(-2)
|
||||
;
|
||||
|
||||
label.push("Time: " + datestr);
|
||||
|
||||
return label;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'scatter',
|
||||
data: chartData,
|
||||
options: chartOptions
|
||||
})
|
||||
}
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'scatter',
|
||||
data: chartData,
|
||||
options: chartOptions
|
||||
})
|
||||
}
|
||||
|
||||
function setPageTitle(title) {
|
||||
document.getElementById("titleH1").innerHTML = 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