From cd9012bf699b7aa0f812773cadf68be8f3917510 Mon Sep 17 00:00:00 2001
From: dorian <dorian@itsblue.de>
Date: Thu, 11 Jul 2019 21:08:24 +0200
Subject: [PATCH] viewing charts now works (without time scaling and valuetype
 specific charts)

---
 css/dashboard.css |  15 +++
 dashboard.html    | 107 ++++++++-------------
 js/blueweather.js |  87 +++++++++++++++++
 js/dashboard.js   | 237 +++++++++++++++++++++++++++++++++++++---------
 4 files changed, 330 insertions(+), 116 deletions(-)
 create mode 100644 js/blueweather.js
diff --git a/css/dashboard.css b/css/dashboard.css
index 37e350f..3ba90fa 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -105,3 +105,18 @@ body {
   box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
 
+.bd-placeholder-img {
+  font-size: 1.125rem;
+  text-anchor: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@media (min-width: 768px) {
+  .bd-placeholder-img-lg {
+    font-size: 3.5rem;
+  }
+}
+
diff --git a/dashboard.html b/dashboard.html
index 029d776..98f8d37 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -4,96 +4,57 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="description" content="">
-  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-  <meta name="generator" content="Jekyll v3.8.5">
   <title>BlueWeather</title>
 
-  <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/dashboard/">
-
   <!-- Bootstrap core CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
     integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
-
-  <style>
-    .bd-placeholder-img {
-      font-size: 1.125rem;
-      text-anchor: middle;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-    }
-
-    @media (min-width: 768px) {
-      .bd-placeholder-img-lg {
-        font-size: 3.5rem;
-      }
-    }
-  </style>
   <!-- Custom styles for this template -->
   <link href="css/dashboard.css" rel="stylesheet">
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+
 </head>
 
 <body>
   <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
     <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">BlueWeather</a>
-  
+
     <ul class="navbar-nav px-3">
       <li class="nav-item text-nowrap">
-        <a class="nav-link"  href="#">Sign out</a>
+        <a class="nav-link" href="#">Sign out</a>
       </li>
     </ul>
   </nav>
 
   <div class="container-fluid">
     <div class="row">
+      <!-- Nav bar on the right side -->
       <nav class="col-md-2 d-none d-md-block bg-light sidebar">
         <div class="sidebar-sticky">
           <ul class="nav flex-column">
             <li class="nav-item">
-              <a class="nav-link active" href="#">
+              <a class="nav-link" id="navbarPage-1Link" onclick="setPage(-1)" href="#">
                 <span data-feather="home"></span>
                 Dashboard <span class="sr-only">(current)</span>
               </a>
             </li>
-            
-            <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+          </ul>
+          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
             <span>Sensors</span>
+
             <a class="d-flex align-items-center text-muted" href="#">
               <span data-feather="plus-circle"></span>
             </a>
           </h6>
-            
+
+          <ul class="nav flex-column mb-2" id="sensorsList">
             <li class="nav-item">
               <a class="nav-link" href="#">
-                <span data-feather="file"></span>
-                temperature
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">
-                <span data-feather="shopping-cart"></span>
-                sensor2
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">
-                <span data-feather="users"></span>
-                sensor3
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">
-                <span data-feather="bar-chart-2"></span>
-                sensor3
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">
-                <span data-feather="layers"></span>
-                sensor4
+                <div class="spinner-border spinner-border-sm" role="status">
+                  <span class="sr-only">Loading...</span>
+                </div>
               </a>
             </li>
           </ul>
@@ -133,38 +94,46 @@
         </div>
       </nav>
 
+      <!-- Main content area -->
       <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
         <div
           class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
-          <h1 class="h2">Dashboard</h1>
+          <h1 class="h2" id="titleH1">Dashboard</h1>
           <div class="btn-toolbar mb-2 mb-md-0">
             <div class="btn-group mr-2">
               <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
               <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
             </div>
-            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
-              <span data-feather="calendar"></span>
-              This week
-            </button>
+            <div class="dropdown">
+              <button id="dropdownMenuButton" type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
+                <span data-feather="calendar"></span>
+                This week
+              </button>
+              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="#">Link 1</a>
+                <a class="dropdown-item" href="#">Link 2</a>
+                <a class="dropdown-item" href="#">Link 3</a>
+              </div>
+            </div>
           </div>
         </div>
 
-        <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
-
+        <div id="mainContent">
         </div>
-      </main>
     </div>
+    </main>
   </div>
-  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-    crossorigin="anonymous"></script>
-  <script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
-  <script src="/docs/4.3/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
+
+  <!-- js -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
     crossorigin="anonymous"></script>
+    
   <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
+  <script src="js/blueweather.js"></script>
   <script src="js/dashboard.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/js/blueweather.js b/js/blueweather.js
new file mode 100644
index 0000000..c37fdca
--- /dev/null
+++ b/js/blueweather.js
@@ -0,0 +1,87 @@
+class BlueWeather {
+
+    constructor() {
+        // cunstruct xmlhttp
+        this.xhttp = new XMLHttpRequest();
+        this.host =  window.location.href.substring(0, window.location.href.lastIndexOf("/"));
+
+        this.log("init done", 2)
+    }
+
+    getLocationData(locId) {
+        this.sendRequest("https://api.itsblue.de/weather/json.php?locId="+locId+"")
+
+        if(this.xhttp.status === 200) {
+            this.log("getting sensors response was: " + this.xhttp.responseText, 3)
+            var ret = JSON.parse(this.xhttp.responseText)
+            if(ret){
+                return ret
+            }
+        }
+    }
+
+
+    endSession() {
+        document.cookie = "session=;"
+        window.location.href = "./index.html"
+    }
+
+    // --------------------
+    // - helper functions -
+    // --------------------
+
+    sendRequest(url) {
+        this.log("starting request; URL is: " + url, 3)
+
+        this.xhttp.open("GET", url, false)
+        this.xhttp.send()
+        return this.xhttp
+    }
+
+    getCookie(name) {
+        var value = "; " + document.cookie;
+        var parts = value.split("; " + name + "=");
+        if (parts.length == 2) return parts.pop().split(";").shift();
+    }
+
+    findGetParameter(parameterName) {
+        var result = null,
+            tmp = [];
+        location.search
+            .substr(1)
+            .split("&")
+            .forEach(function (item) {
+                tmp = item.split("=");
+                if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
+            });
+        return result;
+    }
+
+    log(text, level){
+        // levels:
+        // 0: error
+        // 1: warning
+        // 2: info
+        // 3: debug
+
+        var preString = "[BlueWeather]"
+
+        switch(level){
+            case 0:
+                preString += "[error] "
+                console.error(preString+text)
+                break
+            case 1:
+                preString += "[warining] "
+                console.warn(preString+text)
+                break
+            case 2:
+                preString += "[info] "
+                console.log(preString+text)
+                break
+            case 3:
+                preString += "[debug] "
+                console.debug(preString+text)
+        }
+    }
+}
diff --git a/js/dashboard.js b/js/dashboard.js
index 5fa4259..46b272d 100644
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -1,54 +1,197 @@
 /* globals Chart:false, feather:false */
 
-(function () {
-  'use strict'
+//var ctx = document.getElementById('myChart')
+//var mainContent = document.getElementById('mainContent')
 
-  feather.replace()
+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')
 
-  // Graphs
-  var ctx = document.getElementById('myChart')
-  // eslint-disable-next-line no-unused-vars
-  var myChart = new Chart(ctx, {
-    type: 'line',
-    data: {
-      labels: [
-        'Sunday',
-        'Monday',
-        'Tuesday',
-        'Wednesday',
-        'Thursday',
-        'Friday',
-        'Saturday'
-      ],
-      datasets: [{
-        data: [
-          15339,
-          21345,
-          18483,
-          24003,
-          23489,
-          24092,
-          12034
-        ],
-        lineTension: 0,
-        backgroundColor: 'transparent',
-        borderColor: '#007bff',
-        borderWidth: 4,
-        pointBackgroundColor: '#007bff'
-      }]
-    },
-    options: {
-      scales: {
-        yAxes: [{
-          ticks: {
-            beginAtZero: false
-          }
-        }]
-      },
-      legend: {
-        display: false
+  // 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>"
+
+  var locationData = blueweather.getLocationData(thisLoc)
+
+  // refresh sensors list
+  loadSensors(locationData.sensors)
+
+  // 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) {
+    // 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']) === page) {
+        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) === page) {
+        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\" width=\"900\" height=\"380\"></canvas>"
+    setPageTitle(chartData.label)
+
+    blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
+
+    createDiagram("myChart", chartData)
+  }
+
+}
+
+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 createDiagram(canvasId, data) {
+  var pointradius = 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: false, 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 = {
+
+    scales: {
+      yAxes: [
+        {
+          id: 'yAxis',
+          type: 'linear',
+          position: 'left',
+        }
+      ],
+
+      xAxes: [{
+        ticks: {
+          max: data.range.from, min: data.range.to,
+          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) + "-" +
+            //  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
+  })
+}
+
+function setPageTitle(title) {
+  document.getElementById("titleH1").innerHTML = title
+}
+
+var blueweather = new BlueWeather()
+var thisLoc = blueweather.findGetParameter("locId")
+var currentPage = -1
+setPage(currentPage)
\ No newline at end of file
