changed programming style

js/dashboard.js

@@ -3,55 +3,66 @@
 //var ctx = document.getElementById('myChart')
 //var mainContent = document.getElementById('mainContent')
 
-function setPage(page) {
+class BlueWeatherDashboard {
-  document.getElementById("navbarPage" + currentPage + "Link").classList.remove("active")
+
+  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) {
+      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=""){
+  setTimeRange(from = "", to = "") {
-  blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
+    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 !== "") {
+    if (from !== "") {
       from = new Date().getTime() / 1000 - from
     }
 
-  if(to !== "") {
+    if (to !== "") {
       to = new Date().getTime() / 1000 - parseInt(to)
     }
 
-  blueweather.getLocationData(thisLoc, {from: from, to: to}, true, function(locationData){
+    this.blueweather.getLocationData(this.loc, { from: from, to: to }, true, function (locationData) {
-    loadDiagram("mainContent", locationData, currentPage)
+      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,44 +112,47 @@ 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) {
+  createDiagram(canvasId, data) {
-  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: [
+      datasets: data.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
-      }
-    ]
     };
 
     var chartOptions = {
-    responsive:true,
+      responsive: true,
       maintainAspectRatio: false,
       scales: {
         yAxes: [
@@ -214,13 +228,11 @@ function createDiagram(canvasId, data, additional) {
       data: chartData,
       options: chartOptions
     })
-}
+  }
 
-function setPageTitle(title) {
+  setPageTitle(title) {
     document.getElementById("titleH1").innerHTML = title
+  }
 } 
 
-var blueweather = new BlueWeather()
+dashboard = new BlueWeatherDashboard()
-var thisLoc = blueweather.findGetParameter("locId")
-var currentPage = -1
-setPage(currentPage)