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 ctx = document.getElementById('myChart')
|
||||||
//var mainContent = document.getElementById('mainContent')
|
//var mainContent = document.getElementById('mainContent')
|
||||||
|
|
||||||
function setPage(page) {
|
class BlueWeatherDashboard {
|
||||||
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')
|
|
||||||
|
|
||||||
// set page to loading state
|
constructor() {
|
||||||
mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
|
// 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
|
// refresh sensors list
|
||||||
loadSensors(locationData.sensors)
|
dashboard.loadSensors(locationData.sensors)
|
||||||
|
|
||||||
// set acive page in navbar
|
// set acive page in navbar
|
||||||
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
||||||
|
|
||||||
if(page === -1) {
|
if (page === -1) {
|
||||||
setPageTitle("Dashboard")
|
dashboard.setPageTitle("Dashboard")
|
||||||
mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
|
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
|
|
||||||
}
|
}
|
||||||
]
|
else if (page !== -1) {
|
||||||
};
|
dashboard.loadDiagram("mainContent", locationData, page)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
var chartOptions = {
|
}
|
||||||
responsive:true,
|
|
||||||
maintainAspectRatio: false,
|
setTimeRange(from = "", to = "") {
|
||||||
scales: {
|
this.blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
|
||||||
yAxes: [
|
|
||||||
|
// 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',
|
label: sensor.sensorname + " (" + valueType.valuetype + ")",
|
||||||
type: 'linear',
|
yAxisID: 'yAxis',
|
||||||
position: 'left',
|
showLine: true,
|
||||||
|
data: vals
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
range: locationData.range
|
||||||
|
}
|
||||||
|
|
||||||
xAxes: [{
|
|
||||||
ticks: {
|
|
||||||
min: parseInt(data.range.from),
|
for (i = 0; i < vals.length; i++) {
|
||||||
max: parseInt(data.range.to),
|
chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
|
||||||
beginAtZero: false,
|
}
|
||||||
stepSize: (data.range.to - data.range.from) / 10,
|
|
||||||
userCallback: function (label, index, labels) {
|
Object.assign(chartData.datasets[0], JSON.parse(valueType.displayproperty))
|
||||||
var d = new Date(parseInt(label) * 1000);
|
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 =
|
var datestr =
|
||||||
// ("0" + d.getDate()).slice(-2) + "-" +
|
// ("0" + d.getDate()).slice(-2) + "-" +
|
||||||
// ("0"+(d.getMonth()+1)).slice(-2) + "-" +
|
// ("0"+(d.getMonth()+1)).slice(-2) + "-" +
|
||||||
|
|
@ -165,62 +213,26 @@ function createDiagram(canvasId, data, additional) {
|
||||||
("0" + d.getMinutes()).slice(-2) + ":" +
|
("0" + d.getMinutes()).slice(-2) + ":" +
|
||||||
("0" + d.getSeconds()).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, {
|
var myChart = new Chart(ctx, {
|
||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
data: chartData,
|
data: chartData,
|
||||||
options: chartOptions
|
options: chartOptions
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function setPageTitle(title) {
|
setPageTitle(title) {
|
||||||
document.getElementById("titleH1").innerHTML = title
|
document.getElementById("titleH1").innerHTML = title
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var blueweather = new BlueWeather()
|
dashboard = new BlueWeatherDashboard()
|
||||||
var thisLoc = blueweather.findGetParameter("locId")
|
|
||||||
var currentPage = -1
|
|
||||||
setPage(currentPage)
|
|
||||||
Loading…
Reference in a new issue