diff --git a/mean-app/dist/favicon.ico b/mean-app/dist/favicon.ico
index 8081c7c..695f12c 100644
Binary files a/mean-app/dist/favicon.ico and b/mean-app/dist/favicon.ico differ
diff --git a/mean-app/dist/index.html b/mean-app/dist/index.html
index 5a0ed8f..1ce37f5 100644
--- a/mean-app/dist/index.html
+++ b/mean-app/dist/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>MeanApp</title>
+  <title>Energiemeter</title>
 
   <style>
 
diff --git a/mean-app/dist/inline.bundle.map b/mean-app/dist/inline.bundle.map
index 751212e..17b8397 100644
--- a/mean-app/dist/inline.bundle.map
+++ b/mean-app/dist/inline.bundle.map
@@ -1 +1 @@
-{"version":3,"sources":["webpack:///webpack/bootstrap 67c6767f88d43bb74a81"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAY,2BAA2B;AACvC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,YAAI;AACJ;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,mDAA2C,cAAc;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA,kDAA0C,oBAAoB,WAAW","file":"inline.bundle.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length)\n \t\t\tresolves.shift()();\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t4: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn Promise.resolve();\n\n \t\t// an Promise means \"currently loading\".\n \t\tif(installedChunks[chunkId]) {\n \t\t\treturn installedChunks[chunkId][2];\n \t\t}\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"\" + chunkId + \".chunk.js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunks[chunkId][2] = promise;\n\n \t\thead.appendChild(script);\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 67c6767f88d43bb74a81"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack:///webpack/bootstrap c41fdae17a68f1fc4a6e"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAY,2BAA2B;AACvC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,YAAI;AACJ;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,mDAA2C,cAAc;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA,kDAA0C,oBAAoB,WAAW","file":"inline.bundle.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length)\n \t\t\tresolves.shift()();\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t4: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn Promise.resolve();\n\n \t\t// an Promise means \"currently loading\".\n \t\tif(installedChunks[chunkId]) {\n \t\t\treturn installedChunks[chunkId][2];\n \t\t}\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"\" + chunkId + \".chunk.js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunks[chunkId][2] = promise;\n\n \t\thead.appendChild(script);\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap c41fdae17a68f1fc4a6e"],"sourceRoot":""}
\ No newline at end of file
diff --git a/mean-app/dist/main.bundle.js b/mean-app/dist/main.bundle.js
index 7bc968b..d93e840 100644
--- a/mean-app/dist/main.bundle.js
+++ b/mean-app/dist/main.bundle.js
@@ -80,13 +80,13 @@ function mapData(response) {
     var HTV = response.json().map(htvToData);
     var HT = response.json().map(htToData);
     var times = response.json().map(timeToData);
-    var Toe1Line = ({ data: TOE1S, label: "Totaal Energieverbruik tarief 1" });
-    var Toe2Line = ({ data: TOE2S, label: "Totaal Energieverbruik tarief 2" });
-    var HovLine = ({ data: HOV, label: "Huidig Energieverbruik" });
-    var Tte1Line = ({ data: TTE1S, label: "Totaal terug Energieverbruik tarief 1" });
-    var Tte2Line = ({ data: TTE2S, label: "Totaal terug Energieverbruik tarief 2" });
-    var HtvLine = ({ data: HTV, label: "Huidig terug Energieverbruik" });
-    var HtLine = ({ data: HT, label: "Huidig Tarief" });
+    var Toe1Line = ({ data: TOE1S, label: "Totaal opgenomen energie (T1)" });
+    var Toe2Line = ({ data: TOE2S, label: "Totaal opgenomen energie (T2)" });
+    var HovLine = ({ data: HOV, label: "Huidig opgenomen energie" });
+    var Tte1Line = ({ data: TTE1S, label: "Totaal teruggeleverde energie (T1)" });
+    var Tte2Line = ({ data: TTE2S, label: "Totaal teruggeleverde energie (T2)" });
+    var HtvLine = ({ data: HTV, label: "Huidig teruggeleverde energie" });
+    var HtLine = ({ data: HT, label: "Huidig tarief" });
     var label = ({ data: times });
     var graph = ({ TOE1: Toe1Line, TOE2: Toe2Line, HOV: HovLine, TTE1: Tte1Line, TTE2: Tte2Line, HTV: HtvLine, HT: HtLine, labels: label });
     return graph;
@@ -160,7 +160,8 @@ function mapDevice(response) {
 function toDevice(r) {
     var device = ({
         sn: r.SN,
-        name: r.name
+        name: r.name,
+        desc: r.desc
     });
     return device;
 }
@@ -250,12 +251,16 @@ var DashboardComponent = (function () {
         this.dataService
             .get("4530303235303030303636383733323136")
             .subscribe(function (res) {
+            //Kenneth
+            res.HOV.label = "Gebruik Kenneth";
             _this.data3 = res.HOV;
             _this.label2 = res.labels;
         });
         this.dataService
             .get("4530303035303031353538313833363134")
             .subscribe(function (res) {
+            //Martijn
+            res.HOV.label = "Gebruik Martijn";
             _this.data4 = res.HOV;
             _this.dbloaded = true;
         });
@@ -306,7 +311,7 @@ var DetailComponent = (function () {
         this.hov = 0;
         this.htv = 0;
         this.ht = "loading";
-        this.money = 0;
+        this.money = "calculating";
         this.loaded = false;
         this.pieloaded = false;
     }
@@ -321,10 +326,10 @@ var DetailComponent = (function () {
     };
     DetailComponent.prototype.refreshData = function (id) {
         var _this = this;
-        this.labelpie = ({ data: ["Totaal opgenomen 2", "Totaal opgenomen 1"] });
-        this.labelpie1 = ({ data: ["Huidig opgenomen", "Huidig terug"] });
-        this.labelpie2 = ({ data: ["Totaal opgenomen 2", "Totaal terug 2"] });
-        this.labelpie3 = ({ data: ["Totaal opgenomen 1", "Totaal terug 1"] });
+        this.labelpie = ({ data: ["Totaal opgenomen energie (T2)", "Totaal opgenomen energie (T1)"] });
+        this.labelpie1 = ({ data: ["Huidig opgenomen energie", "Huidig teruggeleverde energie"] });
+        this.labelpie2 = ({ data: ["Totaal opgenomen energie (T2)", "Totaal teruggeleverde energie (T2)"] });
+        this.labelpie3 = ({ data: ["Totaal opgenomen energie (T1)", "Totaal teruggeleverde energie (T1)"] });
         this.dataService
             .get(id)
             .subscribe(function (res) {
@@ -343,7 +348,7 @@ var DetailComponent = (function () {
             _this.hov = res.HOV;
             _this.htv = res.HTV;
             _this.ht = res.HTN;
-            _this.money = ((res.TOE1 - res.TTE1) * res.tarief1) + ((res.TOE2 - res.TTE2) * res.tarief2);
+            _this.money = ((res.TOE1 - res.TTE1) * res.tarief1) + ((res.TOE2 - res.TTE2) * res.tarief2).toFixed(3);
             _this.datapie = ({ data: [res.TOE2, res.TOE1], label: "Opgenomen" });
             _this.datapie1 = ({ data: [res.HOV, res.HTV], label: "Huidig verbruik" });
             _this.datapie2 = ({ data: [res.TOE2, res.TTE2], label: "Totaal 2" });
@@ -950,7 +955,7 @@ module.exports = ""
 /***/ 674:
 /***/ (function(module, exports) {
 
-module.exports = "<div class=\"container\">\r\n\r\n  <nav class=\"navbar navbar-default\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"navbar-header\">\r\n        <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#navbar\" aria-expanded=\"false\" aria-controls=\"navbar\">\r\n          <span class=\"sr-only\">Toggle navigation</span>\r\n          <span class=\"icon-bar\"></span>\r\n          <span class=\"icon-bar\"></span>\r\n          <span class=\"icon-bar\"></span>\r\n        </button>\r\n        <a class=\"navbar-brand\">Energiemeter</a>\r\n      </div>\r\n      <div id=\"navbar\" class=\"navbar-collapse collapse\">\r\n        <ul class=\"nav navbar-nav\">\r\n          <li routerLink=\"/dashboard\" routerLinkActive=\"active\"><a routerLink=\"/dashboard\" routerLinkActive=\"active\">Dashboard</a></li>\r\n          <li routerLink=\"/device\" routerLinkActive=\"active\"><a routerLink=\"/device\" routerLinkActive=\"active\">Device</a></li>\r\n          <li routerLink=\"/picker\" routerLinkActive=\"active\"><a routerLink=\"/picker\" routerLinkActive=\"active\">Picker</a></li>\r\n        </ul>\r\n      </div><!--/.nav-collapse -->\r\n    </div><!--/.container-fluid -->\r\n  </nav>\r\n\r\n  <div class=\"row\">\r\n\r\n    <div class=\"col-md-12\">\r\n      <div class=\"page-header\">\r\n        <h1>Energiemeter <small>Avans</small></h1>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"row\">\r\n    <router-outlet></router-outlet>\r\n  </div>\r\n\r\n</div>\r\n"
+module.exports = "<div class=\"container\">\r\n\r\n  <nav class=\"navbar navbar-default\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"navbar-header\">\r\n        <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#navbar\" aria-expanded=\"false\" aria-controls=\"navbar\">\r\n          <span class=\"sr-only\">Toggle navigation</span>\r\n          <span class=\"icon-bar\"></span>\r\n          <span class=\"icon-bar\"></span>\r\n          <span class=\"icon-bar\"></span>\r\n        </button>\r\n        <a class=\"navbar-brand\">Energiemeter</a>\r\n      </div>\r\n      <div id=\"navbar\" class=\"navbar-collapse collapse\">\r\n        <ul class=\"nav navbar-nav\">\r\n          <li routerLink=\"/dashboard\" routerLinkActive=\"active\"><a routerLink=\"/dashboard\" routerLinkActive=\"active\">Dashboard</a></li>\r\n          <li routerLink=\"/device\" routerLinkActive=\"active\"><a routerLink=\"/device\" routerLinkActive=\"active\">Device</a></li>\r\n          <li routerLink=\"/picker\" routerLinkActive=\"active\"><a routerLink=\"/picker\" routerLinkActive=\"active\">Picker</a></li>\r\n        </ul>\r\n      </div><!--/.nav-collapse -->\r\n    </div><!--/.container-fluid -->\r\n  </nav>\r\n\r\n  \r\n  <router-outlet></router-outlet>\r\n  \r\n</div>\r\n"
 
 /***/ }),
 
@@ -964,21 +969,21 @@ module.exports = "<div style=\"display: block;\">\r\n<canvas baseChart width=\"4
 /***/ 676:
 /***/ (function(module, exports) {
 
-module.exports = "<span *ngIf=\"mloaded\">\r\n\r\n\t<div class=\"col-md-6\">\r\n    \t<h3>Martijn</h3>\r\n\t\t<pie-chart [label]=\"label\" [data]=\"data1\"></pie-chart>\r\n\t</div>\r\n\r\n</span>\r\n\r\n<span *ngIf=\"kloaded\">\r\n\t<div class=\"col-md-6\">\r\n    \t<h3>Kenneth</h3>\r\n\t\t<pie-chart [label]=\"label\" [data]=\"data2\"></pie-chart>\r\n\t</div>\r\n\r\n</span>\r\n\r\n<span *ngIf=\"dbloaded\">\r\n\t<div class=\"col-md-12\">\r\n\t\t<br>\r\n    \t<h3>Vergelijking</h3>\r\n\t\t<doubleline-chart [label]=\"label2\" [data]=\"data3\" [data2]=\"data4\"></doubleline-chart>\r\n\t</div>\r\n\r\n</span>"
+module.exports = "<div class=\"row\">\r\n\r\n    <div class=\"col-md-12\">\r\n      <div class=\"page-header\">\r\n        <h1>Energiemeter <small>Dashboard</small></h1>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n<div class=\"row\">\r\n\r\n    <span *ngIf=\"mloaded\">\r\n\r\n    \t<div class=\"col-md-6\">\r\n        \t<h3 routerLink=\"/detail/4530303035303031353538313833363134\">Martijn</h3>\r\n        \t<p>\r\n        \tDe slimme meter van Martijn staat bij zijn ouders thuis in Zeeland. Het huis is ook voorzien van zonnepanelen.\r\n        \t</p>\r\n    \t\t<pie-chart [label]=\"label\" [data]=\"data1\"></pie-chart>\r\n    \t</div>\r\n\r\n    </span>\r\n\r\n    <span *ngIf=\"kloaded\">\r\n    \t<div class=\"col-md-6\">\r\n        \t<h3 routerLink=\"/detail/4530303235303030303636383733323136\">Kenneth</h3>\r\n        \t<p>\r\n        \tDe slimme meter van Kenneth staat in zijn appartement in Breda.\r\n        \t</p>\r\n    \t\t<pie-chart [label]=\"label\" [data]=\"data2\"></pie-chart>\r\n    \t</div>\r\n\r\n    </span>\r\n\r\n    <span *ngIf=\"dbloaded\">\r\n    \t<div class=\"col-md-12\">\r\n    \t\t<br>\r\n        \t<h3>Vergelijking</h3>\r\n        \t<p>\r\n        \tIn de onderstaane grafiek is het verschil in huidig gebruik te zien van Kenneth en Martijn.\r\n        \t</p>\r\n    \t\t<doubleline-chart [label]=\"label2\" [data]=\"data3\" [data2]=\"data4\"></doubleline-chart>\r\n    \t</div>\r\n\r\n    </span>\r\n\r\n</div>"
 
 /***/ }),
 
 /***/ 677:
 /***/ (function(module, exports) {
 
-module.exports = "<div class=\"col-md-12\">\r\n\t<h2>{{name}}</h2>\r\n</div>\r\n\r\n<div class=\"col-md-12\">\r\n\t<br>\r\n\t<div class=\"well\">\r\n\t\t<b>Huidig opgenomen vermogen:</b> {{hov}} kW <br>\r\n\t\t<b>Huidig teruggeleverd vermogen:</b> {{htv}} kW <br>\r\n\t\t<b>Huidig tarief:</b> {{ht}} <br>\r\n\t\t<b>Totale kosten:</b> €{{money}}\r\n\t</div>\r\n\t<br>\r\n</div>\r\n\r\n<span *ngIf=\"pieloaded\">\r\n\r\n\t<div class=\"col-md-3 col-xs-6\">\r\n\t\t<br>\r\n\t\t<pie-chart [label]=\"labelpie\" [data]=\"datapie\"></pie-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-3 col-xs-6\">\r\n\t\t<br>\r\n\t\t<pie-chart [label]=\"labelpie1\" [data]=\"datapie1\"></pie-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-3 col-xs-6\">\r\n\t\t<br>\r\n\t\t<pie-chart [label]=\"labelpie2\" [data]=\"datapie2\"></pie-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-3 col-xs-6\">\r\n\t\t<br>\r\n\t\t<pie-chart [label]=\"labelpie3\" [data]=\"datapie3\"></pie-chart>\r\n\t</div>\r\n\r\n</span>\r\n\r\n<span *ngIf=\"loaded\">\r\n\r\n\t<div class=\"col-md-12\">\r\n\t\t<br>\r\n\t\t<doubleline-chart [label]=\"label\" [data]=\"data1\" [data2]=\"data2\"></doubleline-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<br>\r\n\t\t<line-chart [label]=\"label\" [data]=\"data3\"></line-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<br>\r\n\t\t<line-chart [label]=\"label\" [data]=\"data4\"></line-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<br>\r\n\t\t<line-chart [label]=\"label\" [data]=\"data5\"></line-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<br>\r\n\t\t<line-chart [label]=\"label\" [data]=\"data6\"></line-chart>\r\n\t</div>\r\n</span>\r\n\r\n"
+module.exports = "<div class=\"row\">\r\n\r\n    <div class=\"col-md-12\">\r\n      <div class=\"page-header\">\r\n        <h1>Energiemeter <small>{{name}}</small></h1>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n<div class=\"row\">\r\n\r\n\t<div class=\"col-md-12\">\r\n\t\t<br>\r\n\t\t<div class=\"well\">\r\n\t\t\t<b>Huidig opgenomen vermogen:</b> {{hov}} kW <br>\r\n\t\t\t<b>Huidig teruggeleverd vermogen:</b> {{htv}} kW <br>\r\n\t\t\t<b>Huidig tarief:</b> {{ht}} <br>\r\n\t\t\t<b>Totale kosten:</b> €{{money}}\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n\r\n\t<span *ngIf=\"!pieloaded\">\r\n\t\t<div class=\"col-md-12\">\r\n\t\t\tLoading...\r\n\t\t</div>\r\n\t</span>\r\n\r\n\r\n\t<span *ngIf=\"pieloaded\">\r\n\r\n\t\t<div class=\"col-md-3 col-sm-6 col-xs-12\">\r\n\t\t\t<p>De totaal opgenomen energie overdag samen met de totaal opgenomen energie 's nachts.</p>\r\n\t\t\t<br>\r\n\t\t\t<pie-chart [label]=\"labelpie\" [data]=\"datapie\"></pie-chart>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-3 col-sm-6 col-xs-12\">\r\n\t\t\t<p>De huidige opgenomen energie samen met de huidig teruggeleverde energie.</p>\r\n\t\t\t<br>\r\n\t\t\t<pie-chart [label]=\"labelpie1\" [data]=\"datapie1\"></pie-chart>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-3 col-sm-6 col-xs-12\">\r\n\t\t\t<p>De totaal opgenomen energie samen met de totaal teruggeleverde energie tijdens tarief 2</p>\r\n\t\t\t<br>\r\n\t\t\t<pie-chart [label]=\"labelpie2\" [data]=\"datapie2\"></pie-chart>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-3 col-sm-6 col-xs-12\">\r\n\t\t\t<p>De totaal opgenomen energie samen met de totaal teruggeleverde energie tijdens tarief 1</p>\r\n\t\t\t<br>\r\n\t\t\t<pie-chart [label]=\"labelpie3\" [data]=\"datapie3\"></pie-chart>\r\n\t\t</div>\r\n\r\n\t</span>\r\n\r\n</div>\r\n\r\n<div class=\"row\">\r\n\r\n\t<span *ngIf=\"!loaded\">\r\n\t\t<div class=\"col-md-12\">\r\n\t\t\tLoading...\r\n\t\t</div>\r\n\t</span>\r\n\r\n\t<span *ngIf=\"loaded\">\r\n\r\n\t\t<div class=\"col-md-12\">\r\n\t\t\t<p>Huidig opgenomen energie tegen de huidig teruggeleverde energie van de laatste 24 uur.</p>\r\n\t\t\t<br>\r\n\t\t\t<doubleline-chart [label]=\"label\" [data]=\"data1\" [data2]=\"data2\"></doubleline-chart>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-6\">\r\n\t\t\t<p>Totaal opgenomen energie tijdens tarief 2.</p>\r\n\t\t\t<br>\r\n\t\t\t<line-chart [label]=\"label\" [data]=\"data3\"></line-chart>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-6\">\r\n\t\t\t<p>Totaal teruggeleverde energie tijdens tarief 2.</p>\r\n\t\t\t<br>\r\n\t\t\t<line-chart [label]=\"label\" [data]=\"data4\"></line-chart>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-6\">\r\n\t\t\t<p>Totaal opgenomen energie tijdens tarief 1.</p>\r\n\t\t\t<br>\r\n\t\t\t<line-chart [label]=\"label\" [data]=\"data5\"></line-chart>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"col-md-6\">\r\n\t\t\t<p>Totaal teruggeleverde energie tijdens tarief 1.</p>\r\n\t\t\t<br>\r\n\t\t\t<line-chart [label]=\"label\" [data]=\"data6\"></line-chart>\r\n\t\t</div>\r\n\t</span>\r\n\r\n</div>\r\n"
 
 /***/ }),
 
 /***/ 678:
 /***/ (function(module, exports) {
 
-module.exports = "<div class=\"col-md-12\">\r\n\r\n <div class=\"row\">\r\n\r\n    <div class=\"col-md-4\" *ngFor=\"let device of devices\">\r\n\r\n    \t<div class=\"well\" style=\"cursor:pointer;\" (click)=\"goToDetails(device.sn)\">\r\n\r\n      \t\t<h3>{{device.name}}</h3>\r\n\r\n      \t</div>\r\n    </div>\r\n\r\n </div>\r\n</div>"
+module.exports = "<div class=\"row\">\r\n\r\n    <div class=\"col-md-12\">\r\n      <div class=\"page-header\">\r\n        <h1>Energiemeter <small>Devices</small></h1>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n<div class=\"row\">\r\n\r\n\t<div class=\"col-md-12\">\r\n\r\n\t <div class=\"row\">\r\n\r\n\t    <div class=\"col-md-4\" *ngFor=\"let device of devices\">\r\n\r\n\t    \t<div class=\"well\" style=\"cursor:pointer;\" (click)=\"goToDetails(device.sn)\">\r\n\r\n\t      \t\t<h3>{{device.name}}</h3>\r\n\t      \t\t<p>\r\n\t      \t\t\t{{device.description}}\r\n\t      \t\t</p>\r\n\r\n\t      \t</div>\r\n\t    </div>\r\n\r\n\t </div>\r\n\t</div>\r\n\r\n</div>"
 
 /***/ }),
 
@@ -992,7 +997,7 @@ module.exports = "<div style=\"display: block;\">\r\n  <canvas baseChart width=\
 /***/ 680:
 /***/ (function(module, exports) {
 
-module.exports = "\r\n<div class=\"col-md-12\">\r\n\r\n <form #form=\"ngForm\" (ngSubmit)=\"onSubmit(form.value)\">\r\n\r\n  <div class=\"form-group\">  \r\n    <label>Meter</label>  \r\n    <select name=\"meter\" class=\"form-control\" required ngModel>\r\n    \t<option value=\"4530303035303031353538313833363134\" selected>Martijn</option>\r\n    \t<option value=\"4530303235303030303636383733323136\">Kenneth</option>\r\n    </select>\r\n  </div>\r\n\r\n  <div class=\"form-group\">  \r\n    <label>Data type</label>  \r\n    <select name=\"datatype\" class=\"form-control\" required ngModel>\r\n    \t<optgroup label=\"Huidig\">\r\n        \t<option value=\"HOV\" selected>Huidig opgenomen vermogen</option>\r\n        \t<option value=\"HTV\">Huidig teruggeleverd vermogen</option>\r\n        </optgroup>\r\n    \t<optgroup label=\"Tarief 1\">\r\n        \t<option value=\"TOE1\">Totaal opgenomen energie</option>\r\n        \t<option value=\"TTE1\">Totaal teruggeleverde energie</option>\r\n        </optgroup>\r\n        <optgroup label=\"Tarief 2\">\r\n        \t<option value=\"TOE2\">Totaal opgenomen energie</option>\r\n        \t<option value=\"TTE2\">Totaal teruggeleverde energie</option>\r\n        </optgroup>\r\n    </select>\r\n  </div>\r\n\r\n  <div class=\"form-group\">  \r\n    <label>Groupering</label>  \r\n    <select name=\"group\" class=\"form-control\" required ngModel>\r\n    \t<option value=\"minute\">Minuut</option>\r\n    \t<option value=\"hour\" selected>Uur</option>\r\n    \t<option value=\"day\">Dag</option>\r\n    \t<option value=\"month\">Maand</option>\r\n    \t<option value=\"year\">Jaar</option>\r\n    </select>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n  \t<label>Startdatum</label>\r\n  \t<input type=\"date\" name=\"date1\" class=\"form-control\" required ngModel>\r\n  </div>\r\n\r\n  <div class=\"form-group\">\r\n  \t<label>Einddatum</label>\r\n  \t<input type=\"date\" name=\"date2\" class=\"form-control\" required ngModel>\r\n  </div>\r\n\r\n  <input type=\"submit\" class=\"btn btn-primary\" value=\"Update\" />\r\n\r\n  </form>\r\n</div>\r\n\r\n<span *ngIf=\"loaded\">\r\n\r\n\t<div class=\"col-md-12\">\r\n\t\t<line-chart [label]=\"label\" [data]=\"data\"></line-chart>\r\n\t</div>\r\n\r\n</span>\r\n"
+module.exports = "<div class=\"row\">\r\n\r\n    <div class=\"col-md-12\">\r\n      <div class=\"page-header\">\r\n        <h1>Energiemeter <small>Picker</small></h1>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n<div class=\"row\">\r\n\r\n  <form #form=\"ngForm\" (ngSubmit)=\"onSubmit(form.value)\">\r\n\r\n    <div class=\"col-md-4\">\r\n\r\n      <div class=\"form-group\">  \r\n        <label>Meter</label>  \r\n        <select name=\"meter\" class=\"form-control\" required ngModel>\r\n        \t<option value=\"4530303035303031353538313833363134\">Martijn</option>\r\n        \t<option value=\"4530303235303030303636383733323136\">Kenneth</option>\r\n        </select>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col-md-4\">\r\n\r\n      <div class=\"form-group\">  \r\n        <label>Data type</label>  \r\n        <select name=\"datatype\" class=\"form-control\" required ngModel>\r\n        \t<optgroup label=\"Huidig\">\r\n            \t<option value=\"HOV\">Huidig opgenomen vermogen</option>\r\n            \t<option value=\"HTV\">Huidig teruggeleverd vermogen</option>\r\n            </optgroup>\r\n        \t<optgroup label=\"Tarief 1\">\r\n            \t<option value=\"TOE1\">Totaal opgenomen energie</option>\r\n            \t<option value=\"TTE1\">Totaal teruggeleverde energie</option>\r\n            </optgroup>\r\n            <optgroup label=\"Tarief 2\">\r\n            \t<option value=\"TOE2\">Totaal opgenomen energie</option>\r\n            \t<option value=\"TTE2\">Totaal teruggeleverde energie</option>\r\n            </optgroup>\r\n        </select>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col-md-4\">\r\n\r\n      <div class=\"form-group\">  \r\n        <label>Groupering</label>  \r\n        <select name=\"group\" class=\"form-control\" required ngModel>\r\n        \t<option value=\"minute\">Minuut</option>\r\n        \t<option value=\"hour\">Uur</option>\r\n        \t<option value=\"day\">Dag</option>\r\n        \t<option value=\"month\">Maand</option>\r\n        \t<option value=\"year\">Jaar</option>\r\n        </select>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col-md-6\">\r\n\r\n      <div class=\"form-group\">\r\n      \t<label>Startdatum</label>\r\n      \t<input type=\"date\" name=\"date1\" class=\"form-control\" required ngModel>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col-md-6\">\r\n\r\n      <div class=\"form-group\">\r\n      \t<label>Einddatum</label>\r\n      \t<input type=\"date\" name=\"date2\" class=\"form-control\" required ngModel>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col-md-12\">\r\n\r\n      <input type=\"submit\" class=\"btn btn-primary\" value=\"Update\" />\r\n\r\n    </div>\r\n\r\n    </div>\r\n\r\n  </form>\r\n\r\n</div>\r\n\r\n<div class=\"row\">\r\n\r\n  <span *ngIf=\"loaded\">\r\n\r\n  \t<div class=\"col-md-12\">\r\n      <br>\r\n  \t\t<line-chart [label]=\"label\" [data]=\"data\"></line-chart>\r\n  \t</div>\r\n\r\n  </span>\r\n</div>"
 
 /***/ }),
 
diff --git a/mean-app/dist/main.bundle.map b/mean-app/dist/main.bundle.map
index 65f0e0b..e5f2545 100644
--- a/mean-app/dist/main.bundle.map
+++ b/mean-app/dist/main.bundle.map
@@ -1 +1 @@
-{"version":3,"sources":["webpack:///./src/app/data.service.ts","webpack:///./src/app/label-data.ts","webpack:///./src/app/line-data.ts","webpack:///./src/app/dashboard.component.ts","webpack:///./src/app/detail.component.ts","webpack:///./src/app/device.component.ts","webpack:///./src/app/picker.component.ts","webpack:///./src async","webpack:///./src/main.ts","webpack:///./src/app/app-routing.module.ts","webpack:///./src/app/app.component.ts","webpack:///./src/app/app.module.ts","webpack:///./src/app/chart.component.ts","webpack:///./src/app/doublelinechart.component.ts","webpack:///./src/app/piechart.component.ts","webpack:///./src/environments/environment.ts","webpack:///./src/app/app.component.css","webpack:///./src/app/app.component.html","webpack:///./src/app/chart.component.html","webpack:///./src/app/dashboard.component.html","webpack:///./src/app/detail.component.html","webpack:///./src/app/device.component.html","webpack:///./src/app/doublelinechart.component.html","webpack:///./src/app/picker.component.html","webpack:///./src/app/piechart.component.html"],"names":[],"mappings":"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","file":"main.bundle.js","sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { Observable } from 'rxjs/Rx';\r\nimport 'rxjs/add/operator/map'\r\nimport { Http, Response, Headers } from '@angular/http';\r\n\r\nimport { LineData } from './line-data';\r\nimport { GraphData } from './graph-data';\r\nimport { LabelData } from './label-data';\r\n\r\nimport { Device } from './device';\r\nimport { Usage } from './usage';\r\n\r\n@Injectable()\r\nexport class DataService {\r\n  private getUrl: string = '/webapi/data';\r\n  private usageUrl: string = '/webapi/usage';\r\n  private nameUrl: string = '/webapi/name';\r\n  private deviceUrl: string = '/webapi/device';\r\n\r\n  constructor(private http : Http){}\r\n\r\n  get(id:string): Observable<GraphData> {\r\n    let lineChartData$ =\r\n      this.http\r\n        .get((`${this.getUrl}/${id}/group/hour`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapData);\r\n\r\n    return lineChartData$;\r\n  }\r\n\r\n  pick(id:string, group:string, date1:string, date2:string): Observable<GraphData> {\r\n    let lineChartData$ =\r\n      this.http\r\n        .get((`${this.getUrl}/${id}/group/${group}/${date1}/${date2}`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapData);\r\n\r\n    return lineChartData$;\r\n  }\r\n\r\n  usage(id:string): Observable<Usage> {\r\n    let usageData$ =\r\n      this.http\r\n        .get((`${this.usageUrl}/${id}`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapUsage);\r\n\r\n    return usageData$;\r\n  }\r\n\r\n  name(id:string): Observable<string> {\r\n    let nameData$ =\r\n      this.http\r\n        .get((`${this.nameUrl}/${id}`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapName);\r\n\r\n    return nameData$;\r\n  }\r\n\r\n\r\n  devices(): Observable<Device[]> {\r\n    let devices$ =\r\n      this.http\r\n        .get((`${this.deviceUrl}`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapDevice);\r\n\r\n    return devices$;\r\n  }\r\n\r\n  private getHeaders(){\r\n    let headers = new Headers();\r\n    headers.append('Accept', 'application/json');\r\n    return headers;\r\n  }\r\n}\r\n\r\nfunction mapData(response:Response): GraphData {\r\n  let TOE1S = response.json().map(toe1ToData);\r\n  let TOE2S = response.json().map(toe2ToData);\r\n  let HOV = response.json().map(hovToData);\r\n  let TTE1S = response.json().map(tte1ToData);\r\n  let TTE2S = response.json().map(tte2ToData);\r\n  let HTV = response.json().map(htvToData);\r\n  let HT = response.json().map(htToData);\r\n  let times = response.json().map(timeToData);\r\n\r\n  let Toe1Line:LineData = <LineData>({data: TOE1S, label: \"Totaal Energieverbruik tarief 1\"});\r\n  let Toe2Line:LineData = <LineData>({data: TOE2S, label: \"Totaal Energieverbruik tarief 2\"});\r\n  let HovLine:LineData = <LineData>({data: HOV, label: \"Huidig Energieverbruik\"});\r\n  let Tte1Line:LineData = <LineData>({data: TTE1S, label: \"Totaal terug Energieverbruik tarief 1\"});\r\n  let Tte2Line:LineData = <LineData>({data: TTE2S, label: \"Totaal terug Energieverbruik tarief 2\"});\r\n  let HtvLine:LineData = <LineData>({data: HTV, label: \"Huidig terug Energieverbruik\"});\r\n  let HtLine:LineData = <LineData>({data: HT, label: \"Huidig Tarief\"});\r\n  let label:LabelData = <LabelData>({data: times});\r\n  let graph:GraphData = <GraphData>({TOE1:Toe1Line,TOE2:Toe2Line,HOV:HovLine,TTE1:Tte1Line,TTE2:Tte2Line,HTV:HtvLine,HT:HtLine,labels:label});\r\n  return graph;\r\n}\r\n\r\nfunction toe1ToData(r:any){\r\n  let TOE1 = r.TOE1;\r\n  return TOE1;\r\n}\r\n\r\nfunction toe2ToData(r:any){\r\n  let TOE2 = r.TOE2;\r\n  return TOE2;\r\n}\r\n\r\nfunction hovToData(r:any){\r\n  let HOV = r.HOV;\r\n  return HOV;\r\n}\r\n\r\nfunction tte1ToData(r:any){\r\n  let TTE1 = r.TTE1;\r\n  return TTE1;\r\n}\r\n\r\nfunction tte2ToData(r:any){\r\n  let TTE2 = r.TTE2;\r\n  return TTE2;\r\n}\r\n\r\nfunction htvToData(r:any){\r\n  let HTV = r.HTV;\r\n  return HTV;\r\n}\r\n\r\nfunction htToData(r:any){\r\n  let HT = r.HT;\r\n  return HT;\r\n}\r\n\r\nfunction timeToData(r:any){\r\n  let times = r.time.substring(11,19);\r\n  return times;\r\n}\r\n\r\n\r\nfunction mapUsage(response:Response): Usage {\r\n  let usage = response.json().map(toUsage);\r\n  return usage[0];\r\n}\r\n\r\nfunction toUsage(r:any): Usage\r\n{\r\n    let htname = \"nacht\";\r\n\r\n    if(r.HT == 2)\r\n    {\r\n        htname = \"dag\";\r\n    }\r\n\r\n    let usage = <Usage>({\r\n      HOV: r.HOV,\r\n      HTV: r.HTV,\r\n      HT: r.HT,\r\n      HTN: htname,\r\n      TOE1: r.TOE1,\r\n      TOE2: r.TOE2,\r\n      TTE1: r.TTE1,\r\n      TTE2: r.TTE2,\r\n      tarief1: r.tarief1,\r\n      tarief2: r.tarief2\r\n    });\r\n\r\n    return usage;\r\n}\r\n\r\nfunction mapName(response:Response): string {\r\n  let name = response.json().map(toName);\r\n  return name[0];\r\n}\r\n\r\nfunction toName(r:any): string\r\n{\r\n    return r.name;\r\n}\r\n\r\n\r\nfunction mapDevice(response:Response): Device[] {\r\n  let devices = response.json().map(toDevice);\r\n  return devices;\r\n}\r\n\r\n\r\nfunction toDevice(r:any){\r\n  let device = <Device>({\r\n      sn: r.SN,\r\n      name: r.name\r\n  });\r\n\r\n  return device;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/data.service.ts","export class LabelData {\r\n  public data: string[];\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/label-data.ts","export class LineData {\r\n  public data: number[];\r\n  public label:string;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/line-data.ts","import {Component, OnDestroy, OnInit} from '@angular/core';\r\n\r\nimport { IntervalObservable } from 'rxjs/observable/IntervalObservable';\r\nimport { Subscription } from 'rxjs/Subscription';\r\n\r\nimport { DataService } from './data.service';\r\nimport {LineChartComponent} from \"./chart.component\";\r\nimport {LineData} from \"./line-data\";\r\nimport {LabelData} from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'dashboard',\r\n  templateUrl: './dashboard.component.html'\r\n})\r\n\r\nexport class DashboardComponent implements OnInit, OnDestroy {\r\n  public data1:LineData;\r\n  public data2:LineData;\r\n\r\n  public data3:LineData;\r\n  public data4:LineData;\r\n\r\n  public label:LabelData;\r\n  public label2:LabelData;\r\n\r\n  public mloaded:boolean = false;\r\n  public kloaded:boolean = false;\r\n  public dbloaded:boolean = false;\r\n\r\n  public subscription:Subscription;\r\n\r\n  constructor(private dataService: DataService) {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.refreshData();\r\n\r\n    this.subscription = IntervalObservable.create(7500).subscribe(n => this.refreshData());\r\n\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.subscription.unsubscribe();\r\n  }\r\n\r\n  refreshData()\r\n  {\r\n    this.label = <LabelData> ({data: [\"Totaal tarief 1\", \"Totaal tarief 2\"]});\r\n\r\n    this.dataService\r\n      .usage(\"4530303035303031353538313833363134\")\r\n      .subscribe(res => {\r\n\r\n        this.data1 = <LineData> ({data: [res.TOE1, res.TOE2], label: \"Verbruik Martijn\"});\r\n        this.mloaded = true;\r\n\r\n      });\r\n\r\n    this.dataService\r\n      .usage(\"4530303235303030303636383733323136\")\r\n      .subscribe(res => {\r\n\r\n        this.data2 = <LineData> ({data: [res.TOE1, res.TOE2], label: \"Verbruik Kenneth\"});\r\n        this.kloaded = true;\r\n\r\n      });\r\n\r\n    this.dataService\r\n      .get(\"4530303235303030303636383733323136\")\r\n      .subscribe(res => {\r\n\r\n          this.data3 = res.HOV;\r\n          this.label2 = res.labels;\r\n\r\n      });\r\n\r\n    this.dataService\r\n      .get(\"4530303035303031353538313833363134\")\r\n      .subscribe(res => {\r\n\r\n          this.data4 = res.HOV;\r\n          this.dbloaded = true;\r\n\r\n      });\r\n\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/dashboard.component.ts","import { Component, OnInit, OnDestroy } from '@angular/core';\r\nimport { ActivatedRoute, Params }   from '@angular/router';\r\n\r\nimport { IntervalObservable } from 'rxjs/observable/IntervalObservable';\r\nimport { Subscription } from 'rxjs/Subscription';\r\n\r\nimport { DataService } from './data.service';\r\nimport {LineChartComponent} from \"./chart.component\";\r\nimport {LineData} from \"./line-data\";\r\nimport {LabelData} from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'detail',\r\n  templateUrl: './detail.component.html'\r\n})\r\n\r\nexport class DetailComponent implements OnInit, OnDestroy {\r\n\r\n  public id:string = 'Loading';\r\n  public name:string = \"Loading\";\r\n\r\n  public label:LabelData;\r\n  \r\n  public data1:LineData;\r\n  public data2:LineData;\r\n  public data3:LineData;\r\n  public data4:LineData;\r\n  public data5:LineData;\r\n  public data6:LineData;\r\n\r\n  public datapie:LineData;\r\n  public datapie1:LineData;\r\n  public datapie2:LineData;\r\n  public datapie3:LineData;\r\n\r\n  public labelpie:LabelData;\r\n  public labelpie1:LabelData;\r\n  public labelpie2:LabelData;\r\n  public labelpie3:LabelData;\r\n\r\n  public hov:number = 0;\r\n  public htv:number = 0;\r\n  public ht:string = \"loading\";  \r\n  public money:number = 0;\r\n\r\n  public loaded:boolean = false;\r\n  public pieloaded:boolean = false;\r\n\r\n  public subscription:Subscription;\r\n\r\n  constructor(private dataService: DataService,\r\n             private route: ActivatedRoute) {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.id = this.route.snapshot.params['id'];\r\n\r\n    this.refreshData(this.id);\r\n\r\n    this.subscription = IntervalObservable.create(7500).subscribe(n => this.refreshData(this.id));\r\n\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.subscription.unsubscribe();\r\n  }\r\n\r\n  refreshData(id:string)\r\n  {\r\n      this.labelpie  = <LabelData> ({data: [\"Totaal opgenomen 2\", \"Totaal opgenomen 1\"]});\r\n      this.labelpie1 = <LabelData> ({data: [\"Huidig opgenomen\", \"Huidig terug\"]});\r\n      this.labelpie2 = <LabelData> ({data: [\"Totaal opgenomen 2\", \"Totaal terug 2\"]});\r\n      this.labelpie3 = <LabelData> ({data: [\"Totaal opgenomen 1\", \"Totaal terug 1\"]});\r\n\r\n      this.dataService\r\n      .get(id)\r\n      .subscribe(res => {\r\n\r\n        this.label = res.labels;\r\n\r\n        this.data1 = res.HOV;\r\n        this.data2 = res.HTV;\r\n\r\n        this.data3 = res.TOE2;\r\n        this.data4 = res.TTE2;\r\n\r\n        this.data5 = res.TOE1;\r\n        this.data6 = res.TTE1;\r\n\r\n        this.loaded = true;\r\n\r\n      });\r\n\r\n      this.dataService\r\n      .usage(id)\r\n      .subscribe(res => {\r\n\r\n        this.hov = res.HOV;\r\n        this.htv = res.HTV;\r\n        this.ht = res.HTN;\r\n\r\n        this.money = ((res.TOE1 - res.TTE1) * res.tarief1) + ((res.TOE2 - res.TTE2) * res.tarief2);\r\n\r\n        this.datapie  = <LineData> ({data: [res.TOE2, res.TOE1], label: \"Opgenomen\"});\r\n        this.datapie1 = <LineData> ({data: [res.HOV, res.HTV], label: \"Huidig verbruik\"});\r\n        this.datapie2 = <LineData> ({data: [res.TOE2, res.TTE2], label: \"Totaal 2\"});\r\n        this.datapie3 = <LineData> ({data: [res.TOE1, res.TTE1], label: \"Totaal 1\"});\r\n\r\n        this.pieloaded = true;\r\n\r\n      });\r\n\r\n      this.dataService\r\n      .name(id)\r\n      .subscribe(res => {\r\n\r\n        this.name = res;\r\n\r\n      });\r\n  }\r\n\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/detail.component.ts","import { Component, OnInit } from '@angular/core';\r\nimport { Device } from './device';\r\n\r\nimport { DataService } from './data.service';\r\nimport { Router } from '@angular/router'\r\n\r\n@Component({\r\n  selector: 'device',\r\n  templateUrl: './device.component.html'\r\n})\r\n\r\nexport class DeviceComponent implements OnInit {\r\n\r\n  public devices:Device[];\r\n\r\n  constructor(private router: Router, private dataService: DataService) {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.dataService\r\n      .devices()\r\n      .subscribe(res => {\r\n        \r\n      \t\tthis.devices = res;\r\n\r\n      });\r\n\r\n  }\r\n\r\n  goToDetails(id:string): void {\r\n    this.router.navigate(['/detail', id]);\r\n  }\r\n\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/device.component.ts","import { Component } from '@angular/core';\r\n\r\nimport { DataService } from './data.service';\r\nimport {LineChartComponent} from \"./chart.component\";\r\nimport {LineData} from \"./line-data\";\r\nimport {LabelData} from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'picker',\r\n  templateUrl: './picker.component.html'\r\n})\r\n\r\nexport class PickerComponent {\r\n\r\n  public label:LabelData;\r\n  public data:LineData;\r\n\r\n  public loaded:boolean = false;\r\n\r\n  constructor(private dataService: DataService) {}\r\n\r\n  refreshData(id:string, group:string, date1:string, date2:string, property:string)\r\n  {\r\n\r\n      this.dataService\r\n      .pick(id, group, date1, date2)\r\n      .subscribe(res => {\r\n\r\n        this.label = res.labels;\r\n        this.data = res[property];\r\n\r\n        this.loaded = true;\r\n\r\n      });\r\n  }\r\n\r\n  onSubmit(form:any)\r\n  {\r\n     this.loaded = false;\r\n     this.refreshData(form.meter, form.group, form.date1, form.date2, form.datatype);\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/picker.component.ts","function webpackEmptyContext(req) {\n\tthrow new Error(\"Cannot find module '\" + req + \"'.\");\n}\nwebpackEmptyContext.keys = function() { return []; };\nwebpackEmptyContext.resolve = webpackEmptyContext;\nmodule.exports = webpackEmptyContext;\nwebpackEmptyContext.id = 393;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src async\n// module id = 393\n// module chunks = 1","import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\r\nimport { enableProdMode } from '@angular/core';\r\nimport { environment } from './environments/environment';\r\nimport { AppModule } from './app/app.module';\r\n\r\nif (environment.production) {\r\n  enableProdMode();\r\n}\r\n\r\nplatformBrowserDynamic().bootstrapModule(AppModule);\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.ts","import { NgModule }             from '@angular/core';\r\nimport { RouterModule, Routes } from '@angular/router';\r\nimport { DashboardComponent }   from './dashboard.component';\r\nimport { DeviceComponent } from './device.component';\r\nimport { DetailComponent } from './detail.component';\r\nimport { PickerComponent } from './picker.component';\r\n\r\nconst routes: Routes = [\r\n  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },\r\n  { path: 'dashboard',  component: DashboardComponent },\r\n  { path: 'device', component: DeviceComponent },\r\n  { path: 'picker', component: PickerComponent},\r\n  { path: 'detail/:id', component: DetailComponent }\r\n];\r\n@NgModule({\r\n  imports: [ RouterModule.forRoot(routes) ],\r\n  exports: [ RouterModule ]\r\n})\r\nexport class AppRoutingModule {}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/app-routing.module.ts","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html',\r\n  styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n  \r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/app.component.ts","import { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { HttpModule } from '@angular/http';\r\nimport { ChartsModule } from 'ng2-charts/ng2-charts';\r\n\r\nimport { AppRoutingModule } from './app-routing.module';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { LineChartComponent } from './chart.component';\r\nimport { PieChartComponent } from './piechart.component';\r\nimport { DoubleLineChartComponent } from \"./doublelinechart.component\";\r\nimport { DashboardComponent } from './dashboard.component';\r\nimport { DeviceComponent } from './device.component';\r\nimport { DetailComponent } from './detail.component';\r\nimport { PickerComponent } from './picker.component';\r\n\r\nimport { DataService } from './data.service';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    LineChartComponent,\r\n    DoubleLineChartComponent,\r\n    PieChartComponent,\r\n    DashboardComponent,\r\n    DeviceComponent,\r\n    DetailComponent,\r\n    PickerComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    HttpModule,\r\n    ChartsModule,\r\n    AppRoutingModule\r\n  ],\r\n  providers: [DataService],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/app.module.ts","import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';\r\n\r\nimport { LineData } from './line-data';\r\nimport { BaseChartDirective } from 'ng2-charts/ng2-charts';\r\nimport { LabelData } from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'line-chart',\r\n  templateUrl: './chart.component.html'\r\n})\r\nexport class LineChartComponent implements OnInit, OnChanges {\r\n\r\n  @Input()data:LineData;\r\n  @Input()label:LabelData;\r\n\r\n  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;\r\n\r\n  // lineChart\r\n  public lineChartData:Array<any> = [\r\n    {data: [0,0,0,0,0,0,0], label: 'Verbruik'}\r\n  ];\r\n  public lineChartLabels:Array<any> = ['-1', '-2', '-3', '-4', '-5', '-6', '-7'];\r\n  public lineChartOptions:any = {\r\n    responsive: true,\r\n    title: {\r\n      display: true,\r\n      position: 'left',\r\n      text: 'KiloWatt'\r\n    }\r\n  };\r\n  public lineChartColors:Array<any> = [\r\n    { // grey\r\n      backgroundColor: 'rgba(148,159,177,0.2)',\r\n      borderColor: 'rgba(148,159,177,1)',\r\n      pointBackgroundColor: 'rgba(148,159,177,1)',\r\n      pointBorderColor: '#fff',\r\n      pointHoverBackgroundColor: '#fff',\r\n      pointHoverBorderColor: 'rgba(148,159,177,0.8)'\r\n    }\r\n  ];\r\n  public lineChartLegend:boolean = true;\r\n  public lineChartType:string = 'line';\r\n\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n\r\n        this.lineChartLabels = this.label.data.slice();\r\n\r\n        const newDataSet = [];\r\n        const newLine = {data: this.data.data, label: this.data.label};\r\n        newDataSet.push(newLine);\r\n        this.lineChartData = newDataSet;\r\n  }\r\n\r\n  ngOnChanges(): void {\r\n    if(this.chart.chart != undefined){\r\n      this.chart.chart.update();\r\n    }\r\n\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/chart.component.ts","import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';\r\n\r\nimport { LineData } from './line-data';\r\nimport { BaseChartDirective } from 'ng2-charts/ng2-charts';\r\nimport { LabelData } from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'doubleline-chart',\r\n  templateUrl: './doublelinechart.component.html'\r\n})\r\nexport class DoubleLineChartComponent implements OnInit, OnChanges {\r\n\r\n  @Input()data:LineData;\r\n  @Input()data2:LineData;\r\n  @Input()label:LabelData;\r\n\r\n  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;\r\n\r\n  // line2Chart\r\n  public doublelineChartData:Array<any> = [\r\n    {data: [0,0,0,0,0,0,0], label: 'Verbruik'},\r\n    {data: [0,0,0,0,0,0,0], label: 'Verbruik2'}\r\n];\r\n  public doublelineChartLabels:Array<any> = ['-1', '-2', '-3', '-4', '-5', '-6', '-7'];\r\n  public doublelineChartOptions:any = {\r\n    responsive: true,\r\n    title: {\r\n      display: true,\r\n      position: 'left',\r\n      text: 'KiloWatt'\r\n    }\r\n  };\r\n  public doublelineChartColors:Array<any> = [\r\n    { // grey\r\n      backgroundColor: 'rgba(148,159,177,0.2)',\r\n      borderColor: 'rgba(148,159,177,1)',\r\n      pointBackgroundColor: 'rgba(148,159,177,1)',\r\n      pointBorderColor: '#fff',\r\n      pointHoverBackgroundColor: '#fff',\r\n      pointHoverBorderColor: 'rgba(148,159,177,0.8)'\r\n    },\r\n    { // grey\r\n      backgroundColor: 'rgba(148,159,255,0.2)',\r\n      borderColor: 'rgba(148,159,255,1)',\r\n      pointBackgroundColor: 'rgba(148,159,255,1)',\r\n      pointBorderColor: '#fff',\r\n      pointHoverBackgroundColor: '#fff',\r\n      pointHoverBorderColor: 'rgba(148,159,255,0.8)'\r\n    }\r\n  ];\r\n  public doublelineChartLegend:boolean = true;\r\n  public doublelineChartType:string = 'line';\r\n\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.doublelineChartLabels = this.label.data.slice();\r\n\r\n    const newDataSet = [];\r\n    const newLine =  {data: this.data.data, label: this.data.label};\r\n    const newLine2 = {data: this.data2.data, label: this.data2.label};\r\n    newDataSet.push(newLine);\r\n    newDataSet.push(newLine2);\r\n    this.doublelineChartData = newDataSet;\r\n  }\r\n\r\n  ngOnChanges(): void {\r\n    if(this.chart.chart != undefined){\r\n      this.chart.chart.update();\r\n    }\r\n\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/doublelinechart.component.ts","import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';\r\n\r\nimport { LineData } from './line-data';\r\nimport { BaseChartDirective } from 'ng2-charts/ng2-charts';\r\nimport { LabelData } from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'pie-chart',\r\n  templateUrl: './piechart.component.html'\r\n})\r\nexport class PieChartComponent implements OnInit, OnChanges {\r\n\r\n  @Input()data:LineData;\r\n  @Input()label:LabelData;\r\n\r\n  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;\r\n\r\n  // lineChart\r\n  public pieChartData:number[] = [0,0];\r\n  public pieChartLabels:string[] = ['-1', '-2'];\r\n  public pieChartType:string = 'pie';\r\n\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.pieChartLabels = this.label.data.slice();\r\n    this.pieChartData = this.data.data.slice();\r\n  }\r\n\r\n  ngOnChanges(): void {\r\n    if(this.chart.chart != undefined){\r\n      this.chart.chart.update();\r\n    }\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/piechart.component.ts","// The file contents for the current environment will overwrite these during build.\r\n// The build system defaults to the dev environment which uses `environment.ts`, but if you do\r\n// `ng build --env=prod` then `environment.prod.ts` will be used instead.\r\n// The list of which env maps to which file can be found in `angular-cli.json`.\r\n\r\nexport const environment = {\r\n  production: false\r\n};\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/environments/environment.ts","module.exports = \"\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/app.component.css\n// module id = 673\n// module chunks = 1","module.exports = \"<div class=\\\"container\\\">\\r\\n\\r\\n  <nav class=\\\"navbar navbar-default\\\">\\r\\n    <div class=\\\"container-fluid\\\">\\r\\n      <div class=\\\"navbar-header\\\">\\r\\n        <button type=\\\"button\\\" class=\\\"navbar-toggle collapsed\\\" data-toggle=\\\"collapse\\\" data-target=\\\"#navbar\\\" aria-expanded=\\\"false\\\" aria-controls=\\\"navbar\\\">\\r\\n          <span class=\\\"sr-only\\\">Toggle navigation</span>\\r\\n          <span class=\\\"icon-bar\\\"></span>\\r\\n          <span class=\\\"icon-bar\\\"></span>\\r\\n          <span class=\\\"icon-bar\\\"></span>\\r\\n        </button>\\r\\n        <a class=\\\"navbar-brand\\\">Energiemeter</a>\\r\\n      </div>\\r\\n      <div id=\\\"navbar\\\" class=\\\"navbar-collapse collapse\\\">\\r\\n        <ul class=\\\"nav navbar-nav\\\">\\r\\n          <li routerLink=\\\"/dashboard\\\" routerLinkActive=\\\"active\\\"><a routerLink=\\\"/dashboard\\\" routerLinkActive=\\\"active\\\">Dashboard</a></li>\\r\\n          <li routerLink=\\\"/device\\\" routerLinkActive=\\\"active\\\"><a routerLink=\\\"/device\\\" routerLinkActive=\\\"active\\\">Device</a></li>\\r\\n          <li routerLink=\\\"/picker\\\" routerLinkActive=\\\"active\\\"><a routerLink=\\\"/picker\\\" routerLinkActive=\\\"active\\\">Picker</a></li>\\r\\n        </ul>\\r\\n      </div><!--/.nav-collapse -->\\r\\n    </div><!--/.container-fluid -->\\r\\n  </nav>\\r\\n\\r\\n  <div class=\\\"row\\\">\\r\\n\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"page-header\\\">\\r\\n        <h1>Energiemeter <small>Avans</small></h1>\\r\\n      </div>\\r\\n    </div>\\r\\n\\r\\n  </div>\\r\\n\\r\\n  <div class=\\\"row\\\">\\r\\n    <router-outlet></router-outlet>\\r\\n  </div>\\r\\n\\r\\n</div>\\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/app.component.html\n// module id = 674\n// module chunks = 1","module.exports = \"<div style=\\\"display: block;\\\">\\r\\n<canvas baseChart width=\\\"400\\\" height=\\\"200\\\"\\r\\n            [datasets]=\\\"lineChartData\\\"\\r\\n            [labels]=\\\"lineChartLabels\\\"\\r\\n            [options]=\\\"lineChartOptions\\\"\\r\\n            [colors]=\\\"lineChartColors\\\"\\r\\n            [legend]=\\\"lineChartLegend\\\"\\r\\n            [chartType]=\\\"lineChartType\\\"></canvas>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/chart.component.html\n// module id = 675\n// module chunks = 1","module.exports = \"<span *ngIf=\\\"mloaded\\\">\\r\\n\\r\\n\\t<div class=\\\"col-md-6\\\">\\r\\n    \\t<h3>Martijn</h3>\\r\\n\\t\\t<pie-chart [label]=\\\"label\\\" [data]=\\\"data1\\\"></pie-chart>\\r\\n\\t</div>\\r\\n\\r\\n</span>\\r\\n\\r\\n<span *ngIf=\\\"kloaded\\\">\\r\\n\\t<div class=\\\"col-md-6\\\">\\r\\n    \\t<h3>Kenneth</h3>\\r\\n\\t\\t<pie-chart [label]=\\\"label\\\" [data]=\\\"data2\\\"></pie-chart>\\r\\n\\t</div>\\r\\n\\r\\n</span>\\r\\n\\r\\n<span *ngIf=\\\"dbloaded\\\">\\r\\n\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t<br>\\r\\n    \\t<h3>Vergelijking</h3>\\r\\n\\t\\t<doubleline-chart [label]=\\\"label2\\\" [data]=\\\"data3\\\" [data2]=\\\"data4\\\"></doubleline-chart>\\r\\n\\t</div>\\r\\n\\r\\n</span>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/dashboard.component.html\n// module id = 676\n// module chunks = 1","module.exports = \"<div class=\\\"col-md-12\\\">\\r\\n\\t<h2>{{name}}</h2>\\r\\n</div>\\r\\n\\r\\n<div class=\\\"col-md-12\\\">\\r\\n\\t<br>\\r\\n\\t<div class=\\\"well\\\">\\r\\n\\t\\t<b>Huidig opgenomen vermogen:</b> {{hov}} kW <br>\\r\\n\\t\\t<b>Huidig teruggeleverd vermogen:</b> {{htv}} kW <br>\\r\\n\\t\\t<b>Huidig tarief:</b> {{ht}} <br>\\r\\n\\t\\t<b>Totale kosten:</b> €{{money}}\\r\\n\\t</div>\\r\\n\\t<br>\\r\\n</div>\\r\\n\\r\\n<span *ngIf=\\\"pieloaded\\\">\\r\\n\\r\\n\\t<div class=\\\"col-md-3 col-xs-6\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<pie-chart [label]=\\\"labelpie\\\" [data]=\\\"datapie\\\"></pie-chart>\\r\\n\\t</div>\\r\\n\\r\\n\\t<div class=\\\"col-md-3 col-xs-6\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<pie-chart [label]=\\\"labelpie1\\\" [data]=\\\"datapie1\\\"></pie-chart>\\r\\n\\t</div>\\r\\n\\r\\n\\t<div class=\\\"col-md-3 col-xs-6\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<pie-chart [label]=\\\"labelpie2\\\" [data]=\\\"datapie2\\\"></pie-chart>\\r\\n\\t</div>\\r\\n\\r\\n\\t<div class=\\\"col-md-3 col-xs-6\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<pie-chart [label]=\\\"labelpie3\\\" [data]=\\\"datapie3\\\"></pie-chart>\\r\\n\\t</div>\\r\\n\\r\\n</span>\\r\\n\\r\\n<span *ngIf=\\\"loaded\\\">\\r\\n\\r\\n\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<doubleline-chart [label]=\\\"label\\\" [data]=\\\"data1\\\" [data2]=\\\"data2\\\"></doubleline-chart>\\r\\n\\t</div>\\r\\n\\r\\n\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data3\\\"></line-chart>\\r\\n\\t</div>\\r\\n\\r\\n\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data4\\\"></line-chart>\\r\\n\\t</div>\\r\\n\\r\\n\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data5\\\"></line-chart>\\r\\n\\t</div>\\r\\n\\r\\n\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data6\\\"></line-chart>\\r\\n\\t</div>\\r\\n</span>\\r\\n\\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/detail.component.html\n// module id = 677\n// module chunks = 1","module.exports = \"<div class=\\\"col-md-12\\\">\\r\\n\\r\\n <div class=\\\"row\\\">\\r\\n\\r\\n    <div class=\\\"col-md-4\\\" *ngFor=\\\"let device of devices\\\">\\r\\n\\r\\n    \\t<div class=\\\"well\\\" style=\\\"cursor:pointer;\\\" (click)=\\\"goToDetails(device.sn)\\\">\\r\\n\\r\\n      \\t\\t<h3>{{device.name}}</h3>\\r\\n\\r\\n      \\t</div>\\r\\n    </div>\\r\\n\\r\\n </div>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/device.component.html\n// module id = 678\n// module chunks = 1","module.exports = \"<div style=\\\"display: block;\\\">\\r\\n  <canvas baseChart width=\\\"400\\\" height=\\\"200\\\"\\r\\n          [datasets]=\\\"doublelineChartData\\\"\\r\\n          [labels]=\\\"doublelineChartLabels\\\"\\r\\n          [options]=\\\"doublelineChartOptions\\\"\\r\\n          [colors]=\\\"doublelineChartColors\\\"\\r\\n          [legend]=\\\"doublelineChartLegend\\\"\\r\\n          [chartType]=\\\"doublelineChartType\\\"></canvas>\\r\\n</div>\\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/doublelinechart.component.html\n// module id = 679\n// module chunks = 1","module.exports = \"\\r\\n<div class=\\\"col-md-12\\\">\\r\\n\\r\\n <form #form=\\\"ngForm\\\" (ngSubmit)=\\\"onSubmit(form.value)\\\">\\r\\n\\r\\n  <div class=\\\"form-group\\\">  \\r\\n    <label>Meter</label>  \\r\\n    <select name=\\\"meter\\\" class=\\\"form-control\\\" required ngModel>\\r\\n    \\t<option value=\\\"4530303035303031353538313833363134\\\" selected>Martijn</option>\\r\\n    \\t<option value=\\\"4530303235303030303636383733323136\\\">Kenneth</option>\\r\\n    </select>\\r\\n  </div>\\r\\n\\r\\n  <div class=\\\"form-group\\\">  \\r\\n    <label>Data type</label>  \\r\\n    <select name=\\\"datatype\\\" class=\\\"form-control\\\" required ngModel>\\r\\n    \\t<optgroup label=\\\"Huidig\\\">\\r\\n        \\t<option value=\\\"HOV\\\" selected>Huidig opgenomen vermogen</option>\\r\\n        \\t<option value=\\\"HTV\\\">Huidig teruggeleverd vermogen</option>\\r\\n        </optgroup>\\r\\n    \\t<optgroup label=\\\"Tarief 1\\\">\\r\\n        \\t<option value=\\\"TOE1\\\">Totaal opgenomen energie</option>\\r\\n        \\t<option value=\\\"TTE1\\\">Totaal teruggeleverde energie</option>\\r\\n        </optgroup>\\r\\n        <optgroup label=\\\"Tarief 2\\\">\\r\\n        \\t<option value=\\\"TOE2\\\">Totaal opgenomen energie</option>\\r\\n        \\t<option value=\\\"TTE2\\\">Totaal teruggeleverde energie</option>\\r\\n        </optgroup>\\r\\n    </select>\\r\\n  </div>\\r\\n\\r\\n  <div class=\\\"form-group\\\">  \\r\\n    <label>Groupering</label>  \\r\\n    <select name=\\\"group\\\" class=\\\"form-control\\\" required ngModel>\\r\\n    \\t<option value=\\\"minute\\\">Minuut</option>\\r\\n    \\t<option value=\\\"hour\\\" selected>Uur</option>\\r\\n    \\t<option value=\\\"day\\\">Dag</option>\\r\\n    \\t<option value=\\\"month\\\">Maand</option>\\r\\n    \\t<option value=\\\"year\\\">Jaar</option>\\r\\n    </select>\\r\\n  </div>\\r\\n\\r\\n  <div class=\\\"form-group\\\">\\r\\n  \\t<label>Startdatum</label>\\r\\n  \\t<input type=\\\"date\\\" name=\\\"date1\\\" class=\\\"form-control\\\" required ngModel>\\r\\n  </div>\\r\\n\\r\\n  <div class=\\\"form-group\\\">\\r\\n  \\t<label>Einddatum</label>\\r\\n  \\t<input type=\\\"date\\\" name=\\\"date2\\\" class=\\\"form-control\\\" required ngModel>\\r\\n  </div>\\r\\n\\r\\n  <input type=\\\"submit\\\" class=\\\"btn btn-primary\\\" value=\\\"Update\\\" />\\r\\n\\r\\n  </form>\\r\\n</div>\\r\\n\\r\\n<span *ngIf=\\\"loaded\\\">\\r\\n\\r\\n\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data\\\"></line-chart>\\r\\n\\t</div>\\r\\n\\r\\n</span>\\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/picker.component.html\n// module id = 680\n// module chunks = 1","module.exports = \"<div style=\\\"display: block;\\\">\\r\\n  <canvas baseChart\\r\\n          [data]=\\\"pieChartData\\\"\\r\\n          [labels]=\\\"pieChartLabels\\\"\\r\\n          [chartType]=\\\"pieChartType\\\"></canvas>\\r\\n</div>\\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/piechart.component.html\n// module id = 681\n// module chunks = 1"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack:///./src/app/data.service.ts","webpack:///./src/app/label-data.ts","webpack:///./src/app/line-data.ts","webpack:///./src/app/dashboard.component.ts","webpack:///./src/app/detail.component.ts","webpack:///./src/app/device.component.ts","webpack:///./src/app/picker.component.ts","webpack:///./src async","webpack:///./src/main.ts","webpack:///./src/app/app-routing.module.ts","webpack:///./src/app/app.component.ts","webpack:///./src/app/app.module.ts","webpack:///./src/app/chart.component.ts","webpack:///./src/app/doublelinechart.component.ts","webpack:///./src/app/piechart.component.ts","webpack:///./src/environments/environment.ts","webpack:///./src/app/app.component.css","webpack:///./src/app/app.component.html","webpack:///./src/app/chart.component.html","webpack:///./src/app/dashboard.component.html","webpack:///./src/app/detail.component.html","webpack:///./src/app/device.component.html","webpack:///./src/app/doublelinechart.component.html","webpack:///./src/app/picker.component.html","webpack:///./src/app/piechart.component.html"],"names":[],"mappings":"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","file":"main.bundle.js","sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { Observable } from 'rxjs/Rx';\r\nimport 'rxjs/add/operator/map'\r\nimport { Http, Response, Headers } from '@angular/http';\r\n\r\nimport { LineData } from './line-data';\r\nimport { GraphData } from './graph-data';\r\nimport { LabelData } from './label-data';\r\n\r\nimport { Device } from './device';\r\nimport { Usage } from './usage';\r\n\r\n@Injectable()\r\nexport class DataService {\r\n  private getUrl: string = '/webapi/data';\r\n  private usageUrl: string = '/webapi/usage';\r\n  private nameUrl: string = '/webapi/name';\r\n  private deviceUrl: string = '/webapi/device';\r\n\r\n  constructor(private http : Http){}\r\n\r\n  get(id:string): Observable<GraphData> {\r\n    let lineChartData$ =\r\n      this.http\r\n        .get((`${this.getUrl}/${id}/group/hour`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapData);\r\n\r\n    return lineChartData$;\r\n  }\r\n\r\n  pick(id:string, group:string, date1:string, date2:string): Observable<GraphData> {\r\n    let lineChartData$ =\r\n      this.http\r\n        .get((`${this.getUrl}/${id}/group/${group}/${date1}/${date2}`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapData);\r\n\r\n    return lineChartData$;\r\n  }\r\n\r\n  usage(id:string): Observable<Usage> {\r\n    let usageData$ =\r\n      this.http\r\n        .get((`${this.usageUrl}/${id}`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapUsage);\r\n\r\n    return usageData$;\r\n  }\r\n\r\n  name(id:string): Observable<string> {\r\n    let nameData$ =\r\n      this.http\r\n        .get((`${this.nameUrl}/${id}`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapName);\r\n\r\n    return nameData$;\r\n  }\r\n\r\n\r\n  devices(): Observable<Device[]> {\r\n    let devices$ =\r\n      this.http\r\n        .get((`${this.deviceUrl}`)\r\n          , {headers: this.getHeaders()})\r\n        .map(mapDevice);\r\n\r\n    return devices$;\r\n  }\r\n\r\n  private getHeaders(){\r\n    let headers = new Headers();\r\n    headers.append('Accept', 'application/json');\r\n    return headers;\r\n  }\r\n}\r\n\r\nfunction mapData(response:Response): GraphData {\r\n  let TOE1S = response.json().map(toe1ToData);\r\n  let TOE2S = response.json().map(toe2ToData);\r\n  let HOV = response.json().map(hovToData);\r\n  let TTE1S = response.json().map(tte1ToData);\r\n  let TTE2S = response.json().map(tte2ToData);\r\n  let HTV = response.json().map(htvToData);\r\n  let HT = response.json().map(htToData);\r\n  let times = response.json().map(timeToData);\r\n\r\n  let Toe1Line:LineData = <LineData>({data: TOE1S, label: \"Totaal opgenomen energie (T1)\"});\r\n  let Toe2Line:LineData = <LineData>({data: TOE2S, label: \"Totaal opgenomen energie (T2)\"});\r\n  let HovLine:LineData = <LineData>({data: HOV, label: \"Huidig opgenomen energie\"});\r\n  let Tte1Line:LineData = <LineData>({data: TTE1S, label: \"Totaal teruggeleverde energie (T1)\"});\r\n  let Tte2Line:LineData = <LineData>({data: TTE2S, label: \"Totaal teruggeleverde energie (T2)\"});\r\n  let HtvLine:LineData = <LineData>({data: HTV, label: \"Huidig teruggeleverde energie\"});\r\n  let HtLine:LineData = <LineData>({data: HT, label: \"Huidig tarief\"});\r\n  let label:LabelData = <LabelData>({data: times});\r\n  let graph:GraphData = <GraphData>({TOE1:Toe1Line,TOE2:Toe2Line,HOV:HovLine,TTE1:Tte1Line,TTE2:Tte2Line,HTV:HtvLine,HT:HtLine,labels:label});\r\n  return graph;\r\n}\r\n\r\nfunction toe1ToData(r:any){\r\n  let TOE1 = r.TOE1;\r\n  return TOE1;\r\n}\r\n\r\nfunction toe2ToData(r:any){\r\n  let TOE2 = r.TOE2;\r\n  return TOE2;\r\n}\r\n\r\nfunction hovToData(r:any){\r\n  let HOV = r.HOV;\r\n  return HOV;\r\n}\r\n\r\nfunction tte1ToData(r:any){\r\n  let TTE1 = r.TTE1;\r\n  return TTE1;\r\n}\r\n\r\nfunction tte2ToData(r:any){\r\n  let TTE2 = r.TTE2;\r\n  return TTE2;\r\n}\r\n\r\nfunction htvToData(r:any){\r\n  let HTV = r.HTV;\r\n  return HTV;\r\n}\r\n\r\nfunction htToData(r:any){\r\n  let HT = r.HT;\r\n  return HT;\r\n}\r\n\r\nfunction timeToData(r:any){\r\n  let times = r.time.substring(11,19);\r\n  return times;\r\n}\r\n\r\n\r\nfunction mapUsage(response:Response): Usage {\r\n  let usage = response.json().map(toUsage);\r\n  return usage[0];\r\n}\r\n\r\nfunction toUsage(r:any): Usage\r\n{\r\n    let htname = \"nacht\";\r\n\r\n    if(r.HT == 2)\r\n    {\r\n        htname = \"dag\";\r\n    }\r\n\r\n    let usage = <Usage>({\r\n      HOV: r.HOV,\r\n      HTV: r.HTV,\r\n      HT: r.HT,\r\n      HTN: htname,\r\n      TOE1: r.TOE1,\r\n      TOE2: r.TOE2,\r\n      TTE1: r.TTE1,\r\n      TTE2: r.TTE2,\r\n      tarief1: r.tarief1,\r\n      tarief2: r.tarief2\r\n    });\r\n\r\n    return usage;\r\n}\r\n\r\nfunction mapName(response:Response): string {\r\n  let name = response.json().map(toName);\r\n  return name[0];\r\n}\r\n\r\nfunction toName(r:any): string\r\n{\r\n    return r.name;\r\n}\r\n\r\n\r\nfunction mapDevice(response:Response): Device[] {\r\n  let devices = response.json().map(toDevice);\r\n  return devices;\r\n}\r\n\r\n\r\nfunction toDevice(r:any){\r\n  let device = <Device>({\r\n      sn: r.SN,\r\n      name: r.name,\r\n      desc: r.desc\r\n  });\r\n\r\n  return device;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/data.service.ts","export class LabelData {\r\n  public data: string[];\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/label-data.ts","export class LineData {\r\n  public data: number[];\r\n  public label:string;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/line-data.ts","import {Component, OnDestroy, OnInit} from '@angular/core';\r\n\r\nimport { IntervalObservable } from 'rxjs/observable/IntervalObservable';\r\nimport { Subscription } from 'rxjs/Subscription';\r\n\r\nimport { DataService } from './data.service';\r\nimport {LineChartComponent} from \"./chart.component\";\r\nimport {LineData} from \"./line-data\";\r\nimport {LabelData} from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'dashboard',\r\n  templateUrl: './dashboard.component.html'\r\n})\r\n\r\nexport class DashboardComponent implements OnInit, OnDestroy {\r\n  public data1:LineData;\r\n  public data2:LineData;\r\n\r\n  public data3:LineData;\r\n  public data4:LineData;\r\n\r\n  public label:LabelData;\r\n  public label2:LabelData;\r\n\r\n  public mloaded:boolean = false;\r\n  public kloaded:boolean = false;\r\n  public dbloaded:boolean = false;\r\n\r\n  public subscription:Subscription;\r\n\r\n  constructor(private dataService: DataService) {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.refreshData();\r\n\r\n    this.subscription = IntervalObservable.create(7500).subscribe(n => this.refreshData());\r\n\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.subscription.unsubscribe();\r\n  }\r\n\r\n  refreshData()\r\n  {\r\n    this.label = <LabelData> ({data: [\"Totaal tarief 1\", \"Totaal tarief 2\"]});\r\n\r\n    this.dataService\r\n      .usage(\"4530303035303031353538313833363134\")\r\n      .subscribe(res => {\r\n\r\n        this.data1 = <LineData> ({data: [res.TOE1, res.TOE2], label: \"Verbruik Martijn\"});\r\n        this.mloaded = true;\r\n\r\n      });\r\n\r\n    this.dataService\r\n      .usage(\"4530303235303030303636383733323136\")\r\n      .subscribe(res => {\r\n\r\n        this.data2 = <LineData> ({data: [res.TOE1, res.TOE2], label: \"Verbruik Kenneth\"});\r\n        this.kloaded = true;\r\n\r\n      });\r\n\r\n    this.dataService\r\n      .get(\"4530303235303030303636383733323136\")\r\n      .subscribe(res => {\r\n\r\n          //Kenneth\r\n          res.HOV.label = \"Gebruik Kenneth\";\r\n          this.data3 = res.HOV;\r\n          this.label2 = res.labels;\r\n\r\n      });\r\n\r\n    this.dataService\r\n      .get(\"4530303035303031353538313833363134\")\r\n      .subscribe(res => {\r\n\r\n          //Martijn\r\n          res.HOV.label = \"Gebruik Martijn\";\r\n          this.data4 = res.HOV;\r\n          this.dbloaded = true;\r\n\r\n      });\r\n\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/dashboard.component.ts","import { Component, OnInit, OnDestroy } from '@angular/core';\r\nimport { ActivatedRoute, Params }   from '@angular/router';\r\n\r\nimport { IntervalObservable } from 'rxjs/observable/IntervalObservable';\r\nimport { Subscription } from 'rxjs/Subscription';\r\n\r\nimport { DataService } from './data.service';\r\nimport {LineChartComponent} from \"./chart.component\";\r\nimport {LineData} from \"./line-data\";\r\nimport {LabelData} from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'detail',\r\n  templateUrl: './detail.component.html'\r\n})\r\n\r\nexport class DetailComponent implements OnInit, OnDestroy {\r\n\r\n  public id:string = 'Loading';\r\n  public name:string = \"Loading\";\r\n\r\n  public label:LabelData;\r\n  \r\n  public data1:LineData;\r\n  public data2:LineData;\r\n  public data3:LineData;\r\n  public data4:LineData;\r\n  public data5:LineData;\r\n  public data6:LineData;\r\n\r\n  public datapie:LineData;\r\n  public datapie1:LineData;\r\n  public datapie2:LineData;\r\n  public datapie3:LineData;\r\n\r\n  public labelpie:LabelData;\r\n  public labelpie1:LabelData;\r\n  public labelpie2:LabelData;\r\n  public labelpie3:LabelData;\r\n\r\n  public hov:number = 0;\r\n  public htv:number = 0;\r\n  public ht:string = \"loading\";  \r\n  public money:string = \"calculating\";\r\n\r\n  public loaded:boolean = false;\r\n  public pieloaded:boolean = false;\r\n\r\n  public subscription:Subscription;\r\n\r\n  constructor(private dataService: DataService,\r\n             private route: ActivatedRoute) {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.id = this.route.snapshot.params['id'];\r\n\r\n    this.refreshData(this.id);\r\n\r\n    this.subscription = IntervalObservable.create(7500).subscribe(n => this.refreshData(this.id));\r\n\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.subscription.unsubscribe();\r\n  }\r\n\r\n  refreshData(id:string)\r\n  {\r\n      this.labelpie  = <LabelData> ({data: [\"Totaal opgenomen energie (T2)\", \"Totaal opgenomen energie (T1)\"]});\r\n      this.labelpie1 = <LabelData> ({data: [\"Huidig opgenomen energie\", \"Huidig teruggeleverde energie\"]});\r\n      this.labelpie2 = <LabelData> ({data: [\"Totaal opgenomen energie (T2)\", \"Totaal teruggeleverde energie (T2)\"]});\r\n      this.labelpie3 = <LabelData> ({data: [\"Totaal opgenomen energie (T1)\", \"Totaal teruggeleverde energie (T1)\"]});\r\n\r\n      this.dataService\r\n      .get(id)\r\n      .subscribe(res => {\r\n\r\n        this.label = res.labels;\r\n\r\n        this.data1 = res.HOV;\r\n        this.data2 = res.HTV;\r\n\r\n        this.data3 = res.TOE2;\r\n        this.data4 = res.TTE2;\r\n\r\n        this.data5 = res.TOE1;\r\n        this.data6 = res.TTE1;\r\n\r\n        this.loaded = true;\r\n\r\n      });\r\n\r\n      this.dataService\r\n      .usage(id)\r\n      .subscribe(res => {\r\n\r\n        this.hov = res.HOV;\r\n        this.htv = res.HTV;\r\n        this.ht = res.HTN;\r\n\r\n        this.money = ((res.TOE1 - res.TTE1) * res.tarief1) + ((res.TOE2 - res.TTE2) * res.tarief2).toFixed(3);\r\n\r\n        this.datapie  = <LineData> ({data: [res.TOE2, res.TOE1], label: \"Opgenomen\"});\r\n        this.datapie1 = <LineData> ({data: [res.HOV, res.HTV], label: \"Huidig verbruik\"});\r\n        this.datapie2 = <LineData> ({data: [res.TOE2, res.TTE2], label: \"Totaal 2\"});\r\n        this.datapie3 = <LineData> ({data: [res.TOE1, res.TTE1], label: \"Totaal 1\"});\r\n\r\n        this.pieloaded = true;\r\n\r\n      });\r\n\r\n      this.dataService\r\n      .name(id)\r\n      .subscribe(res => {\r\n\r\n        this.name = res;\r\n\r\n      });\r\n  }\r\n\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/detail.component.ts","import { Component, OnInit } from '@angular/core';\r\nimport { Device } from './device';\r\n\r\nimport { DataService } from './data.service';\r\nimport { Router } from '@angular/router'\r\n\r\n@Component({\r\n  selector: 'device',\r\n  templateUrl: './device.component.html'\r\n})\r\n\r\nexport class DeviceComponent implements OnInit {\r\n\r\n  public devices:Device[];\r\n\r\n  constructor(private router: Router, private dataService: DataService) {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.dataService\r\n      .devices()\r\n      .subscribe(res => {\r\n        \r\n      \t\tthis.devices = res;\r\n\r\n      });\r\n\r\n  }\r\n\r\n  goToDetails(id:string): void {\r\n    this.router.navigate(['/detail', id]);\r\n  }\r\n\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/device.component.ts","import { Component } from '@angular/core';\r\n\r\nimport { DataService } from './data.service';\r\nimport {LineChartComponent} from \"./chart.component\";\r\nimport {LineData} from \"./line-data\";\r\nimport {LabelData} from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'picker',\r\n  templateUrl: './picker.component.html'\r\n})\r\n\r\nexport class PickerComponent {\r\n\r\n  public label:LabelData;\r\n  public data:LineData;\r\n\r\n  public loaded:boolean = false;\r\n\r\n  constructor(private dataService: DataService) {}\r\n\r\n  refreshData(id:string, group:string, date1:string, date2:string, property:string)\r\n  {\r\n\r\n      this.dataService\r\n      .pick(id, group, date1, date2)\r\n      .subscribe(res => {\r\n\r\n        this.label = res.labels;\r\n        this.data = res[property];\r\n\r\n        this.loaded = true;\r\n\r\n      });\r\n  }\r\n\r\n  onSubmit(form:any)\r\n  {\r\n     this.loaded = false;\r\n     this.refreshData(form.meter, form.group, form.date1, form.date2, form.datatype);\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/picker.component.ts","function webpackEmptyContext(req) {\n\tthrow new Error(\"Cannot find module '\" + req + \"'.\");\n}\nwebpackEmptyContext.keys = function() { return []; };\nwebpackEmptyContext.resolve = webpackEmptyContext;\nmodule.exports = webpackEmptyContext;\nwebpackEmptyContext.id = 393;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src async\n// module id = 393\n// module chunks = 1","import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\r\nimport { enableProdMode } from '@angular/core';\r\nimport { environment } from './environments/environment';\r\nimport { AppModule } from './app/app.module';\r\n\r\nif (environment.production) {\r\n  enableProdMode();\r\n}\r\n\r\nplatformBrowserDynamic().bootstrapModule(AppModule);\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.ts","import { NgModule }             from '@angular/core';\r\nimport { RouterModule, Routes } from '@angular/router';\r\nimport { DashboardComponent }   from './dashboard.component';\r\nimport { DeviceComponent } from './device.component';\r\nimport { DetailComponent } from './detail.component';\r\nimport { PickerComponent } from './picker.component';\r\n\r\nconst routes: Routes = [\r\n  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },\r\n  { path: 'dashboard',  component: DashboardComponent },\r\n  { path: 'device', component: DeviceComponent },\r\n  { path: 'picker', component: PickerComponent},\r\n  { path: 'detail/:id', component: DetailComponent }\r\n];\r\n@NgModule({\r\n  imports: [ RouterModule.forRoot(routes) ],\r\n  exports: [ RouterModule ]\r\n})\r\nexport class AppRoutingModule {}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/app-routing.module.ts","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html',\r\n  styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n  \r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/app.component.ts","import { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { HttpModule } from '@angular/http';\r\nimport { ChartsModule } from 'ng2-charts/ng2-charts';\r\n\r\nimport { AppRoutingModule } from './app-routing.module';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { LineChartComponent } from './chart.component';\r\nimport { PieChartComponent } from './piechart.component';\r\nimport { DoubleLineChartComponent } from \"./doublelinechart.component\";\r\nimport { DashboardComponent } from './dashboard.component';\r\nimport { DeviceComponent } from './device.component';\r\nimport { DetailComponent } from './detail.component';\r\nimport { PickerComponent } from './picker.component';\r\n\r\nimport { DataService } from './data.service';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    LineChartComponent,\r\n    DoubleLineChartComponent,\r\n    PieChartComponent,\r\n    DashboardComponent,\r\n    DeviceComponent,\r\n    DetailComponent,\r\n    PickerComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    HttpModule,\r\n    ChartsModule,\r\n    AppRoutingModule\r\n  ],\r\n  providers: [DataService],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/app.module.ts","import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';\r\n\r\nimport { LineData } from './line-data';\r\nimport { BaseChartDirective } from 'ng2-charts/ng2-charts';\r\nimport { LabelData } from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'line-chart',\r\n  templateUrl: './chart.component.html'\r\n})\r\nexport class LineChartComponent implements OnInit, OnChanges {\r\n\r\n  @Input()data:LineData;\r\n  @Input()label:LabelData;\r\n\r\n  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;\r\n\r\n  // lineChart\r\n  public lineChartData:Array<any> = [\r\n    {data: [0,0,0,0,0,0,0], label: 'Verbruik'}\r\n  ];\r\n  public lineChartLabels:Array<any> = ['-1', '-2', '-3', '-4', '-5', '-6', '-7'];\r\n  public lineChartOptions:any = {\r\n    responsive: true,\r\n    title: {\r\n      display: true,\r\n      position: 'left',\r\n      text: 'KiloWatt'\r\n    }\r\n  };\r\n  public lineChartColors:Array<any> = [\r\n    { // grey\r\n      backgroundColor: 'rgba(148,159,177,0.2)',\r\n      borderColor: 'rgba(148,159,177,1)',\r\n      pointBackgroundColor: 'rgba(148,159,177,1)',\r\n      pointBorderColor: '#fff',\r\n      pointHoverBackgroundColor: '#fff',\r\n      pointHoverBorderColor: 'rgba(148,159,177,0.8)'\r\n    }\r\n  ];\r\n  public lineChartLegend:boolean = true;\r\n  public lineChartType:string = 'line';\r\n\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n\r\n        this.lineChartLabels = this.label.data.slice();\r\n\r\n        const newDataSet = [];\r\n        const newLine = {data: this.data.data, label: this.data.label};\r\n        newDataSet.push(newLine);\r\n        this.lineChartData = newDataSet;\r\n  }\r\n\r\n  ngOnChanges(): void {\r\n    if(this.chart.chart != undefined){\r\n      this.chart.chart.update();\r\n    }\r\n\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/chart.component.ts","import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';\r\n\r\nimport { LineData } from './line-data';\r\nimport { BaseChartDirective } from 'ng2-charts/ng2-charts';\r\nimport { LabelData } from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'doubleline-chart',\r\n  templateUrl: './doublelinechart.component.html'\r\n})\r\nexport class DoubleLineChartComponent implements OnInit, OnChanges {\r\n\r\n  @Input()data:LineData;\r\n  @Input()data2:LineData;\r\n  @Input()label:LabelData;\r\n\r\n  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;\r\n\r\n  // line2Chart\r\n  public doublelineChartData:Array<any> = [\r\n    {data: [0,0,0,0,0,0,0], label: 'Verbruik'},\r\n    {data: [0,0,0,0,0,0,0], label: 'Verbruik2'}\r\n];\r\n  public doublelineChartLabels:Array<any> = ['-1', '-2', '-3', '-4', '-5', '-6', '-7'];\r\n  public doublelineChartOptions:any = {\r\n    responsive: true,\r\n    title: {\r\n      display: true,\r\n      position: 'left',\r\n      text: 'KiloWatt'\r\n    }\r\n  };\r\n  public doublelineChartColors:Array<any> = [\r\n    { // grey\r\n      backgroundColor: 'rgba(148,159,177,0.2)',\r\n      borderColor: 'rgba(148,159,177,1)',\r\n      pointBackgroundColor: 'rgba(148,159,177,1)',\r\n      pointBorderColor: '#fff',\r\n      pointHoverBackgroundColor: '#fff',\r\n      pointHoverBorderColor: 'rgba(148,159,177,0.8)'\r\n    },\r\n    { // grey\r\n      backgroundColor: 'rgba(148,159,255,0.2)',\r\n      borderColor: 'rgba(148,159,255,1)',\r\n      pointBackgroundColor: 'rgba(148,159,255,1)',\r\n      pointBorderColor: '#fff',\r\n      pointHoverBackgroundColor: '#fff',\r\n      pointHoverBorderColor: 'rgba(148,159,255,0.8)'\r\n    }\r\n  ];\r\n  public doublelineChartLegend:boolean = true;\r\n  public doublelineChartType:string = 'line';\r\n\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.doublelineChartLabels = this.label.data.slice();\r\n\r\n    const newDataSet = [];\r\n    const newLine =  {data: this.data.data, label: this.data.label};\r\n    const newLine2 = {data: this.data2.data, label: this.data2.label};\r\n    newDataSet.push(newLine);\r\n    newDataSet.push(newLine2);\r\n    this.doublelineChartData = newDataSet;\r\n  }\r\n\r\n  ngOnChanges(): void {\r\n    if(this.chart.chart != undefined){\r\n      this.chart.chart.update();\r\n    }\r\n\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/doublelinechart.component.ts","import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';\r\n\r\nimport { LineData } from './line-data';\r\nimport { BaseChartDirective } from 'ng2-charts/ng2-charts';\r\nimport { LabelData } from \"./label-data\";\r\n\r\n@Component({\r\n  selector: 'pie-chart',\r\n  templateUrl: './piechart.component.html'\r\n})\r\nexport class PieChartComponent implements OnInit, OnChanges {\r\n\r\n  @Input()data:LineData;\r\n  @Input()label:LabelData;\r\n\r\n  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;\r\n\r\n  // lineChart\r\n  public pieChartData:number[] = [0,0];\r\n  public pieChartLabels:string[] = ['-1', '-2'];\r\n  public pieChartType:string = 'pie';\r\n\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n\r\n    this.pieChartLabels = this.label.data.slice();\r\n    this.pieChartData = this.data.data.slice();\r\n  }\r\n\r\n  ngOnChanges(): void {\r\n    if(this.chart.chart != undefined){\r\n      this.chart.chart.update();\r\n    }\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/piechart.component.ts","// The file contents for the current environment will overwrite these during build.\r\n// The build system defaults to the dev environment which uses `environment.ts`, but if you do\r\n// `ng build --env=prod` then `environment.prod.ts` will be used instead.\r\n// The list of which env maps to which file can be found in `angular-cli.json`.\r\n\r\nexport const environment = {\r\n  production: false\r\n};\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/environments/environment.ts","module.exports = \"\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/app.component.css\n// module id = 673\n// module chunks = 1","module.exports = \"<div class=\\\"container\\\">\\r\\n\\r\\n  <nav class=\\\"navbar navbar-default\\\">\\r\\n    <div class=\\\"container-fluid\\\">\\r\\n      <div class=\\\"navbar-header\\\">\\r\\n        <button type=\\\"button\\\" class=\\\"navbar-toggle collapsed\\\" data-toggle=\\\"collapse\\\" data-target=\\\"#navbar\\\" aria-expanded=\\\"false\\\" aria-controls=\\\"navbar\\\">\\r\\n          <span class=\\\"sr-only\\\">Toggle navigation</span>\\r\\n          <span class=\\\"icon-bar\\\"></span>\\r\\n          <span class=\\\"icon-bar\\\"></span>\\r\\n          <span class=\\\"icon-bar\\\"></span>\\r\\n        </button>\\r\\n        <a class=\\\"navbar-brand\\\">Energiemeter</a>\\r\\n      </div>\\r\\n      <div id=\\\"navbar\\\" class=\\\"navbar-collapse collapse\\\">\\r\\n        <ul class=\\\"nav navbar-nav\\\">\\r\\n          <li routerLink=\\\"/dashboard\\\" routerLinkActive=\\\"active\\\"><a routerLink=\\\"/dashboard\\\" routerLinkActive=\\\"active\\\">Dashboard</a></li>\\r\\n          <li routerLink=\\\"/device\\\" routerLinkActive=\\\"active\\\"><a routerLink=\\\"/device\\\" routerLinkActive=\\\"active\\\">Device</a></li>\\r\\n          <li routerLink=\\\"/picker\\\" routerLinkActive=\\\"active\\\"><a routerLink=\\\"/picker\\\" routerLinkActive=\\\"active\\\">Picker</a></li>\\r\\n        </ul>\\r\\n      </div><!--/.nav-collapse -->\\r\\n    </div><!--/.container-fluid -->\\r\\n  </nav>\\r\\n\\r\\n  \\r\\n  <router-outlet></router-outlet>\\r\\n  \\r\\n</div>\\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/app.component.html\n// module id = 674\n// module chunks = 1","module.exports = \"<div style=\\\"display: block;\\\">\\r\\n<canvas baseChart width=\\\"400\\\" height=\\\"200\\\"\\r\\n            [datasets]=\\\"lineChartData\\\"\\r\\n            [labels]=\\\"lineChartLabels\\\"\\r\\n            [options]=\\\"lineChartOptions\\\"\\r\\n            [colors]=\\\"lineChartColors\\\"\\r\\n            [legend]=\\\"lineChartLegend\\\"\\r\\n            [chartType]=\\\"lineChartType\\\"></canvas>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/chart.component.html\n// module id = 675\n// module chunks = 1","module.exports = \"<div class=\\\"row\\\">\\r\\n\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"page-header\\\">\\r\\n        <h1>Energiemeter <small>Dashboard</small></h1>\\r\\n      </div>\\r\\n    </div>\\r\\n\\r\\n  </div>\\r\\n\\r\\n<div class=\\\"row\\\">\\r\\n\\r\\n    <span *ngIf=\\\"mloaded\\\">\\r\\n\\r\\n    \\t<div class=\\\"col-md-6\\\">\\r\\n        \\t<h3 routerLink=\\\"/detail/4530303035303031353538313833363134\\\">Martijn</h3>\\r\\n        \\t<p>\\r\\n        \\tDe slimme meter van Martijn staat bij zijn ouders thuis in Zeeland. Het huis is ook voorzien van zonnepanelen.\\r\\n        \\t</p>\\r\\n    \\t\\t<pie-chart [label]=\\\"label\\\" [data]=\\\"data1\\\"></pie-chart>\\r\\n    \\t</div>\\r\\n\\r\\n    </span>\\r\\n\\r\\n    <span *ngIf=\\\"kloaded\\\">\\r\\n    \\t<div class=\\\"col-md-6\\\">\\r\\n        \\t<h3 routerLink=\\\"/detail/4530303235303030303636383733323136\\\">Kenneth</h3>\\r\\n        \\t<p>\\r\\n        \\tDe slimme meter van Kenneth staat in zijn appartement in Breda.\\r\\n        \\t</p>\\r\\n    \\t\\t<pie-chart [label]=\\\"label\\\" [data]=\\\"data2\\\"></pie-chart>\\r\\n    \\t</div>\\r\\n\\r\\n    </span>\\r\\n\\r\\n    <span *ngIf=\\\"dbloaded\\\">\\r\\n    \\t<div class=\\\"col-md-12\\\">\\r\\n    \\t\\t<br>\\r\\n        \\t<h3>Vergelijking</h3>\\r\\n        \\t<p>\\r\\n        \\tIn de onderstaane grafiek is het verschil in huidig gebruik te zien van Kenneth en Martijn.\\r\\n        \\t</p>\\r\\n    \\t\\t<doubleline-chart [label]=\\\"label2\\\" [data]=\\\"data3\\\" [data2]=\\\"data4\\\"></doubleline-chart>\\r\\n    \\t</div>\\r\\n\\r\\n    </span>\\r\\n\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/dashboard.component.html\n// module id = 676\n// module chunks = 1","module.exports = \"<div class=\\\"row\\\">\\r\\n\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"page-header\\\">\\r\\n        <h1>Energiemeter <small>{{name}}</small></h1>\\r\\n      </div>\\r\\n    </div>\\r\\n\\r\\n  </div>\\r\\n\\r\\n<div class=\\\"row\\\">\\r\\n\\r\\n\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t<br>\\r\\n\\t\\t<div class=\\\"well\\\">\\r\\n\\t\\t\\t<b>Huidig opgenomen vermogen:</b> {{hov}} kW <br>\\r\\n\\t\\t\\t<b>Huidig teruggeleverd vermogen:</b> {{htv}} kW <br>\\r\\n\\t\\t\\t<b>Huidig tarief:</b> {{ht}} <br>\\r\\n\\t\\t\\t<b>Totale kosten:</b> €{{money}}\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n</div>\\r\\n\\r\\n<div class=\\\"row\\\">\\r\\n\\r\\n\\t<span *ngIf=\\\"!pieloaded\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\tLoading...\\r\\n\\t\\t</div>\\r\\n\\t</span>\\r\\n\\r\\n\\r\\n\\t<span *ngIf=\\\"pieloaded\\\">\\r\\n\\r\\n\\t\\t<div class=\\\"col-md-3 col-sm-6 col-xs-12\\\">\\r\\n\\t\\t\\t<p>De totaal opgenomen energie overdag samen met de totaal opgenomen energie 's nachts.</p>\\r\\n\\t\\t\\t<br>\\r\\n\\t\\t\\t<pie-chart [label]=\\\"labelpie\\\" [data]=\\\"datapie\\\"></pie-chart>\\r\\n\\t\\t</div>\\r\\n\\r\\n\\t\\t<div class=\\\"col-md-3 col-sm-6 col-xs-12\\\">\\r\\n\\t\\t\\t<p>De huidige opgenomen energie samen met de huidig teruggeleverde energie.</p>\\r\\n\\t\\t\\t<br>\\r\\n\\t\\t\\t<pie-chart [label]=\\\"labelpie1\\\" [data]=\\\"datapie1\\\"></pie-chart>\\r\\n\\t\\t</div>\\r\\n\\r\\n\\t\\t<div class=\\\"col-md-3 col-sm-6 col-xs-12\\\">\\r\\n\\t\\t\\t<p>De totaal opgenomen energie samen met de totaal teruggeleverde energie tijdens tarief 2</p>\\r\\n\\t\\t\\t<br>\\r\\n\\t\\t\\t<pie-chart [label]=\\\"labelpie2\\\" [data]=\\\"datapie2\\\"></pie-chart>\\r\\n\\t\\t</div>\\r\\n\\r\\n\\t\\t<div class=\\\"col-md-3 col-sm-6 col-xs-12\\\">\\r\\n\\t\\t\\t<p>De totaal opgenomen energie samen met de totaal teruggeleverde energie tijdens tarief 1</p>\\r\\n\\t\\t\\t<br>\\r\\n\\t\\t\\t<pie-chart [label]=\\\"labelpie3\\\" [data]=\\\"datapie3\\\"></pie-chart>\\r\\n\\t\\t</div>\\r\\n\\r\\n\\t</span>\\r\\n\\r\\n</div>\\r\\n\\r\\n<div class=\\\"row\\\">\\r\\n\\r\\n\\t<span *ngIf=\\\"!loaded\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\tLoading...\\r\\n\\t\\t</div>\\r\\n\\t</span>\\r\\n\\r\\n\\t<span *ngIf=\\\"loaded\\\">\\r\\n\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<p>Huidig opgenomen energie tegen de huidig teruggeleverde energie van de laatste 24 uur.</p>\\r\\n\\t\\t\\t<br>\\r\\n\\t\\t\\t<doubleline-chart [label]=\\\"label\\\" [data]=\\\"data1\\\" [data2]=\\\"data2\\\"></doubleline-chart>\\r\\n\\t\\t</div>\\r\\n\\r\\n\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t<p>Totaal opgenomen energie tijdens tarief 2.</p>\\r\\n\\t\\t\\t<br>\\r\\n\\t\\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data3\\\"></line-chart>\\r\\n\\t\\t</div>\\r\\n\\r\\n\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t<p>Totaal teruggeleverde energie tijdens tarief 2.</p>\\r\\n\\t\\t\\t<br>\\r\\n\\t\\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data4\\\"></line-chart>\\r\\n\\t\\t</div>\\r\\n\\r\\n\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t<p>Totaal opgenomen energie tijdens tarief 1.</p>\\r\\n\\t\\t\\t<br>\\r\\n\\t\\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data5\\\"></line-chart>\\r\\n\\t\\t</div>\\r\\n\\r\\n\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t<p>Totaal teruggeleverde energie tijdens tarief 1.</p>\\r\\n\\t\\t\\t<br>\\r\\n\\t\\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data6\\\"></line-chart>\\r\\n\\t\\t</div>\\r\\n\\t</span>\\r\\n\\r\\n</div>\\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/detail.component.html\n// module id = 677\n// module chunks = 1","module.exports = \"<div class=\\\"row\\\">\\r\\n\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"page-header\\\">\\r\\n        <h1>Energiemeter <small>Devices</small></h1>\\r\\n      </div>\\r\\n    </div>\\r\\n\\r\\n  </div>\\r\\n\\r\\n<div class=\\\"row\\\">\\r\\n\\r\\n\\t<div class=\\\"col-md-12\\\">\\r\\n\\r\\n\\t <div class=\\\"row\\\">\\r\\n\\r\\n\\t    <div class=\\\"col-md-4\\\" *ngFor=\\\"let device of devices\\\">\\r\\n\\r\\n\\t    \\t<div class=\\\"well\\\" style=\\\"cursor:pointer;\\\" (click)=\\\"goToDetails(device.sn)\\\">\\r\\n\\r\\n\\t      \\t\\t<h3>{{device.name}}</h3>\\r\\n\\t      \\t\\t<p>\\r\\n\\t      \\t\\t\\t{{device.description}}\\r\\n\\t      \\t\\t</p>\\r\\n\\r\\n\\t      \\t</div>\\r\\n\\t    </div>\\r\\n\\r\\n\\t </div>\\r\\n\\t</div>\\r\\n\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/device.component.html\n// module id = 678\n// module chunks = 1","module.exports = \"<div style=\\\"display: block;\\\">\\r\\n  <canvas baseChart width=\\\"400\\\" height=\\\"200\\\"\\r\\n          [datasets]=\\\"doublelineChartData\\\"\\r\\n          [labels]=\\\"doublelineChartLabels\\\"\\r\\n          [options]=\\\"doublelineChartOptions\\\"\\r\\n          [colors]=\\\"doublelineChartColors\\\"\\r\\n          [legend]=\\\"doublelineChartLegend\\\"\\r\\n          [chartType]=\\\"doublelineChartType\\\"></canvas>\\r\\n</div>\\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/doublelinechart.component.html\n// module id = 679\n// module chunks = 1","module.exports = \"<div class=\\\"row\\\">\\r\\n\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"page-header\\\">\\r\\n        <h1>Energiemeter <small>Picker</small></h1>\\r\\n      </div>\\r\\n    </div>\\r\\n\\r\\n  </div>\\r\\n\\r\\n<div class=\\\"row\\\">\\r\\n\\r\\n  <form #form=\\\"ngForm\\\" (ngSubmit)=\\\"onSubmit(form.value)\\\">\\r\\n\\r\\n    <div class=\\\"col-md-4\\\">\\r\\n\\r\\n      <div class=\\\"form-group\\\">  \\r\\n        <label>Meter</label>  \\r\\n        <select name=\\\"meter\\\" class=\\\"form-control\\\" required ngModel>\\r\\n        \\t<option value=\\\"4530303035303031353538313833363134\\\">Martijn</option>\\r\\n        \\t<option value=\\\"4530303235303030303636383733323136\\\">Kenneth</option>\\r\\n        </select>\\r\\n      </div>\\r\\n\\r\\n    </div>\\r\\n\\r\\n    <div class=\\\"col-md-4\\\">\\r\\n\\r\\n      <div class=\\\"form-group\\\">  \\r\\n        <label>Data type</label>  \\r\\n        <select name=\\\"datatype\\\" class=\\\"form-control\\\" required ngModel>\\r\\n        \\t<optgroup label=\\\"Huidig\\\">\\r\\n            \\t<option value=\\\"HOV\\\">Huidig opgenomen vermogen</option>\\r\\n            \\t<option value=\\\"HTV\\\">Huidig teruggeleverd vermogen</option>\\r\\n            </optgroup>\\r\\n        \\t<optgroup label=\\\"Tarief 1\\\">\\r\\n            \\t<option value=\\\"TOE1\\\">Totaal opgenomen energie</option>\\r\\n            \\t<option value=\\\"TTE1\\\">Totaal teruggeleverde energie</option>\\r\\n            </optgroup>\\r\\n            <optgroup label=\\\"Tarief 2\\\">\\r\\n            \\t<option value=\\\"TOE2\\\">Totaal opgenomen energie</option>\\r\\n            \\t<option value=\\\"TTE2\\\">Totaal teruggeleverde energie</option>\\r\\n            </optgroup>\\r\\n        </select>\\r\\n      </div>\\r\\n\\r\\n    </div>\\r\\n\\r\\n    <div class=\\\"col-md-4\\\">\\r\\n\\r\\n      <div class=\\\"form-group\\\">  \\r\\n        <label>Groupering</label>  \\r\\n        <select name=\\\"group\\\" class=\\\"form-control\\\" required ngModel>\\r\\n        \\t<option value=\\\"minute\\\">Minuut</option>\\r\\n        \\t<option value=\\\"hour\\\">Uur</option>\\r\\n        \\t<option value=\\\"day\\\">Dag</option>\\r\\n        \\t<option value=\\\"month\\\">Maand</option>\\r\\n        \\t<option value=\\\"year\\\">Jaar</option>\\r\\n        </select>\\r\\n      </div>\\r\\n\\r\\n    </div>\\r\\n\\r\\n    <div class=\\\"col-md-6\\\">\\r\\n\\r\\n      <div class=\\\"form-group\\\">\\r\\n      \\t<label>Startdatum</label>\\r\\n      \\t<input type=\\\"date\\\" name=\\\"date1\\\" class=\\\"form-control\\\" required ngModel>\\r\\n      </div>\\r\\n\\r\\n    </div>\\r\\n\\r\\n    <div class=\\\"col-md-6\\\">\\r\\n\\r\\n      <div class=\\\"form-group\\\">\\r\\n      \\t<label>Einddatum</label>\\r\\n      \\t<input type=\\\"date\\\" name=\\\"date2\\\" class=\\\"form-control\\\" required ngModel>\\r\\n      </div>\\r\\n\\r\\n    </div>\\r\\n\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n\\r\\n      <input type=\\\"submit\\\" class=\\\"btn btn-primary\\\" value=\\\"Update\\\" />\\r\\n\\r\\n    </div>\\r\\n\\r\\n    </div>\\r\\n\\r\\n  </form>\\r\\n\\r\\n</div>\\r\\n\\r\\n<div class=\\\"row\\\">\\r\\n\\r\\n  <span *ngIf=\\\"loaded\\\">\\r\\n\\r\\n  \\t<div class=\\\"col-md-12\\\">\\r\\n      <br>\\r\\n  \\t\\t<line-chart [label]=\\\"label\\\" [data]=\\\"data\\\"></line-chart>\\r\\n  \\t</div>\\r\\n\\r\\n  </span>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/picker.component.html\n// module id = 680\n// module chunks = 1","module.exports = \"<div style=\\\"display: block;\\\">\\r\\n  <canvas baseChart\\r\\n          [data]=\\\"pieChartData\\\"\\r\\n          [labels]=\\\"pieChartLabels\\\"\\r\\n          [chartType]=\\\"pieChartType\\\"></canvas>\\r\\n</div>\\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/app/piechart.component.html\n// module id = 681\n// module chunks = 1"],"sourceRoot":""}
\ No newline at end of file
diff --git a/mean-app/server/routes/webapi.js b/mean-app/server/routes/webapi.js
index 5993fe7..605e835 100644
--- a/mean-app/server/routes/webapi.js
+++ b/mean-app/server/routes/webapi.js
@@ -12,7 +12,7 @@ router.all('*', function(req, res){
 router.get('/device', function(req, res){
   
   connection.query(
-    'SELECT SN, name FROM device',
+    'SELECT SN, name, desc FROM device',
                      function (error, results, fields) {
    if (error) throw error;
 
diff --git a/mean-app/src/app/app.component.html b/mean-app/src/app/app.component.html
index ca97f5f..3e4e09c 100644
--- a/mean-app/src/app/app.component.html
+++ b/mean-app/src/app/app.component.html
@@ -21,18 +21,7 @@
     </div><!--/.container-fluid -->
   </nav>
 
-  <div class="row">
-
-    <div class="col-md-12">
-      <div class="page-header">
-        <h1>Energiemeter <small>Avans</small></h1>
-      </div>
-    </div>
-
-  </div>
-
-  <div class="row">
-    <router-outlet></router-outlet>
-  </div>
-
+  
+  <router-outlet></router-outlet>
+  
 </div>
diff --git a/mean-app/src/app/dashboard.component.html b/mean-app/src/app/dashboard.component.html
index 7451c59..20228df 100644
--- a/mean-app/src/app/dashboard.component.html
+++ b/mean-app/src/app/dashboard.component.html
@@ -1,25 +1,48 @@
-<span *ngIf="mloaded">
+<div class="row">
 
-	<div class="col-md-6">
-    	<h3>Martijn</h3>
-		<pie-chart [label]="label" [data]="data1"></pie-chart>
-	</div>
+    <div class="col-md-12">
+      <div class="page-header">
+        <h1>Energiemeter <small>Dashboard</small></h1>
+      </div>
+    </div>
 
-</span>
+  </div>
 
-<span *ngIf="kloaded">
-	<div class="col-md-6">
-    	<h3>Kenneth</h3>
-		<pie-chart [label]="label" [data]="data2"></pie-chart>
-	</div>
+<div class="row">
 
-</span>
+    <span *ngIf="mloaded">
 
-<span *ngIf="dbloaded">
-	<div class="col-md-12">
-		<br>
-    	<h3>Vergelijking</h3>
-		<doubleline-chart [label]="label2" [data]="data3" [data2]="data4"></doubleline-chart>
-	</div>
+    	<div class="col-md-6">
+        	<h3 routerLink="/detail/4530303035303031353538313833363134">Martijn</h3>
+        	<p>
+        	De slimme meter van Martijn staat bij zijn ouders thuis in Zeeland. Het huis is ook voorzien van zonnepanelen.
+        	</p>
+    		<pie-chart [label]="label" [data]="data1"></pie-chart>
+    	</div>
 
-</span>
\ No newline at end of file
+    </span>
+
+    <span *ngIf="kloaded">
+    	<div class="col-md-6">
+        	<h3 routerLink="/detail/4530303235303030303636383733323136">Kenneth</h3>
+        	<p>
+        	De slimme meter van Kenneth staat in zijn appartement in Breda.
+        	</p>
+    		<pie-chart [label]="label" [data]="data2"></pie-chart>
+    	</div>
+
+    </span>
+
+    <span *ngIf="dbloaded">
+    	<div class="col-md-12">
+    		<br>
+        	<h3>Vergelijking</h3>
+        	<p>
+        	In de onderstaane grafiek is het verschil in huidig gebruik te zien van Kenneth en Martijn.
+        	</p>
+    		<doubleline-chart [label]="label2" [data]="data3" [data2]="data4"></doubleline-chart>
+    	</div>
+
+    </span>
+
+</div>
\ No newline at end of file
diff --git a/mean-app/src/app/dashboard.component.ts b/mean-app/src/app/dashboard.component.ts
index c6d3a5e..bf954fe 100644
--- a/mean-app/src/app/dashboard.component.ts
+++ b/mean-app/src/app/dashboard.component.ts
@@ -69,6 +69,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
       .get("4530303235303030303636383733323136")
       .subscribe(res => {
 
+          //Kenneth
+          res.HOV.label = "Gebruik Kenneth";
           this.data3 = res.HOV;
           this.label2 = res.labels;
 
@@ -78,6 +80,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
       .get("4530303035303031353538313833363134")
       .subscribe(res => {
 
+          //Martijn
+          res.HOV.label = "Gebruik Martijn";
           this.data4 = res.HOV;
           this.dbloaded = true;
 
diff --git a/mean-app/src/app/data.service.ts b/mean-app/src/app/data.service.ts
index f775921..4c01ef2 100644
--- a/mean-app/src/app/data.service.ts
+++ b/mean-app/src/app/data.service.ts
@@ -87,13 +87,13 @@ function mapData(response:Response): GraphData {
   let HT = response.json().map(htToData);
   let times = response.json().map(timeToData);
 
-  let Toe1Line:LineData = <LineData>({data: TOE1S, label: "Totaal Energieverbruik tarief 1"});
-  let Toe2Line:LineData = <LineData>({data: TOE2S, label: "Totaal Energieverbruik tarief 2"});
-  let HovLine:LineData = <LineData>({data: HOV, label: "Huidig Energieverbruik"});
-  let Tte1Line:LineData = <LineData>({data: TTE1S, label: "Totaal terug Energieverbruik tarief 1"});
-  let Tte2Line:LineData = <LineData>({data: TTE2S, label: "Totaal terug Energieverbruik tarief 2"});
-  let HtvLine:LineData = <LineData>({data: HTV, label: "Huidig terug Energieverbruik"});
-  let HtLine:LineData = <LineData>({data: HT, label: "Huidig Tarief"});
+  let Toe1Line:LineData = <LineData>({data: TOE1S, label: "Totaal opgenomen energie (T1)"});
+  let Toe2Line:LineData = <LineData>({data: TOE2S, label: "Totaal opgenomen energie (T2)"});
+  let HovLine:LineData = <LineData>({data: HOV, label: "Huidig opgenomen energie"});
+  let Tte1Line:LineData = <LineData>({data: TTE1S, label: "Totaal teruggeleverde energie (T1)"});
+  let Tte2Line:LineData = <LineData>({data: TTE2S, label: "Totaal teruggeleverde energie (T2)"});
+  let HtvLine:LineData = <LineData>({data: HTV, label: "Huidig teruggeleverde energie"});
+  let HtLine:LineData = <LineData>({data: HT, label: "Huidig tarief"});
   let label:LabelData = <LabelData>({data: times});
   let graph:GraphData = <GraphData>({TOE1:Toe1Line,TOE2:Toe2Line,HOV:HovLine,TTE1:Tte1Line,TTE2:Tte2Line,HTV:HtvLine,HT:HtLine,labels:label});
   return graph;
@@ -190,7 +190,8 @@ function mapDevice(response:Response): Device[] {
 function toDevice(r:any){
   let device = <Device>({
       sn: r.SN,
-      name: r.name
+      name: r.name,
+      desc: r.desc
   });
 
   return device;
diff --git a/mean-app/src/app/detail.component.html b/mean-app/src/app/detail.component.html
index 1adc687..5432966 100644
--- a/mean-app/src/app/detail.component.html
+++ b/mean-app/src/app/detail.component.html
@@ -1,67 +1,104 @@
-<div class="col-md-12">
-	<h2>{{name}}</h2>
-</div>
+<div class="row">
 
-<div class="col-md-12">
-	<br>
-	<div class="well">
-		<b>Huidig opgenomen vermogen:</b> {{hov}} kW <br>
-		<b>Huidig teruggeleverd vermogen:</b> {{htv}} kW <br>
-		<b>Huidig tarief:</b> {{ht}} <br>
-		<b>Totale kosten:</b> €{{money}}
-	</div>
-	<br>
-</div>
+    <div class="col-md-12">
+      <div class="page-header">
+        <h1>Energiemeter <small>{{name}}</small></h1>
+      </div>
+    </div>
 
-<span *ngIf="pieloaded">
+  </div>
 
-	<div class="col-md-3 col-xs-6">
-		<br>
-		<pie-chart [label]="labelpie" [data]="datapie"></pie-chart>
-	</div>
-
-	<div class="col-md-3 col-xs-6">
-		<br>
-		<pie-chart [label]="labelpie1" [data]="datapie1"></pie-chart>
-	</div>
-
-	<div class="col-md-3 col-xs-6">
-		<br>
-		<pie-chart [label]="labelpie2" [data]="datapie2"></pie-chart>
-	</div>
-
-	<div class="col-md-3 col-xs-6">
-		<br>
-		<pie-chart [label]="labelpie3" [data]="datapie3"></pie-chart>
-	</div>
-
-</span>
-
-<span *ngIf="loaded">
+<div class="row">
 
 	<div class="col-md-12">
 		<br>
-		<doubleline-chart [label]="label" [data]="data1" [data2]="data2"></doubleline-chart>
+		<div class="well">
+			<b>Huidig opgenomen vermogen:</b> {{hov}} kW <br>
+			<b>Huidig teruggeleverd vermogen:</b> {{htv}} kW <br>
+			<b>Huidig tarief:</b> {{ht}} <br>
+			<b>Totale kosten:</b> €{{money}}
+		</div>
 	</div>
+</div>
 
-	<div class="col-md-6">
-		<br>
-		<line-chart [label]="label" [data]="data3"></line-chart>
-	</div>
+<div class="row">
 
-	<div class="col-md-6">
-		<br>
-		<line-chart [label]="label" [data]="data4"></line-chart>
-	</div>
+	<span *ngIf="!pieloaded">
+		<div class="col-md-12">
+			Loading...
+		</div>
+	</span>
 
-	<div class="col-md-6">
-		<br>
-		<line-chart [label]="label" [data]="data5"></line-chart>
-	</div>
 
-	<div class="col-md-6">
-		<br>
-		<line-chart [label]="label" [data]="data6"></line-chart>
-	</div>
-</span>
+	<span *ngIf="pieloaded">
 
+		<div class="col-md-3 col-sm-6 col-xs-12">
+			<p>De totaal opgenomen energie overdag samen met de totaal opgenomen energie 's nachts.</p>
+			<br>
+			<pie-chart [label]="labelpie" [data]="datapie"></pie-chart>
+		</div>
+
+		<div class="col-md-3 col-sm-6 col-xs-12">
+			<p>De huidige opgenomen energie samen met de huidig teruggeleverde energie.</p>
+			<br>
+			<pie-chart [label]="labelpie1" [data]="datapie1"></pie-chart>
+		</div>
+
+		<div class="col-md-3 col-sm-6 col-xs-12">
+			<p>De totaal opgenomen energie samen met de totaal teruggeleverde energie tijdens tarief 2</p>
+			<br>
+			<pie-chart [label]="labelpie2" [data]="datapie2"></pie-chart>
+		</div>
+
+		<div class="col-md-3 col-sm-6 col-xs-12">
+			<p>De totaal opgenomen energie samen met de totaal teruggeleverde energie tijdens tarief 1</p>
+			<br>
+			<pie-chart [label]="labelpie3" [data]="datapie3"></pie-chart>
+		</div>
+
+	</span>
+
+</div>
+
+<div class="row">
+
+	<span *ngIf="!loaded">
+		<div class="col-md-12">
+			Loading...
+		</div>
+	</span>
+
+	<span *ngIf="loaded">
+
+		<div class="col-md-12">
+			<p>Huidig opgenomen energie tegen de huidig teruggeleverde energie van de laatste 24 uur.</p>
+			<br>
+			<doubleline-chart [label]="label" [data]="data1" [data2]="data2"></doubleline-chart>
+		</div>
+
+		<div class="col-md-6">
+			<p>Totaal opgenomen energie tijdens tarief 2.</p>
+			<br>
+			<line-chart [label]="label" [data]="data3"></line-chart>
+		</div>
+
+		<div class="col-md-6">
+			<p>Totaal teruggeleverde energie tijdens tarief 2.</p>
+			<br>
+			<line-chart [label]="label" [data]="data4"></line-chart>
+		</div>
+
+		<div class="col-md-6">
+			<p>Totaal opgenomen energie tijdens tarief 1.</p>
+			<br>
+			<line-chart [label]="label" [data]="data5"></line-chart>
+		</div>
+
+		<div class="col-md-6">
+			<p>Totaal teruggeleverde energie tijdens tarief 1.</p>
+			<br>
+			<line-chart [label]="label" [data]="data6"></line-chart>
+		</div>
+	</span>
+
+</div>
diff --git a/mean-app/src/app/detail.component.ts b/mean-app/src/app/detail.component.ts
index 3adc275..2c016d2 100644
--- a/mean-app/src/app/detail.component.ts
+++ b/mean-app/src/app/detail.component.ts
@@ -41,7 +41,7 @@ export class DetailComponent implements OnInit, OnDestroy {
   public hov:number = 0;
   public htv:number = 0;
   public ht:string = "loading";  
-  public money:number = 0;
+  public money:string = "calculating";
 
   public loaded:boolean = false;
   public pieloaded:boolean = false;
@@ -67,10 +67,10 @@ export class DetailComponent implements OnInit, OnDestroy {
 
   refreshData(id:string)
   {
-      this.labelpie  = <LabelData> ({data: ["Totaal opgenomen 2", "Totaal opgenomen 1"]});
-      this.labelpie1 = <LabelData> ({data: ["Huidig opgenomen", "Huidig terug"]});
-      this.labelpie2 = <LabelData> ({data: ["Totaal opgenomen 2", "Totaal terug 2"]});
-      this.labelpie3 = <LabelData> ({data: ["Totaal opgenomen 1", "Totaal terug 1"]});
+      this.labelpie  = <LabelData> ({data: ["Totaal opgenomen energie (T2)", "Totaal opgenomen energie (T1)"]});
+      this.labelpie1 = <LabelData> ({data: ["Huidig opgenomen energie", "Huidig teruggeleverde energie"]});
+      this.labelpie2 = <LabelData> ({data: ["Totaal opgenomen energie (T2)", "Totaal teruggeleverde energie (T2)"]});
+      this.labelpie3 = <LabelData> ({data: ["Totaal opgenomen energie (T1)", "Totaal teruggeleverde energie (T1)"]});
 
       this.dataService
       .get(id)
@@ -99,7 +99,7 @@ export class DetailComponent implements OnInit, OnDestroy {
         this.htv = res.HTV;
         this.ht = res.HTN;
 
-        this.money = ((res.TOE1 - res.TTE1) * res.tarief1) + ((res.TOE2 - res.TTE2) * res.tarief2);
+        this.money = ((res.TOE1 - res.TTE1) * res.tarief1) + ((res.TOE2 - res.TTE2) * res.tarief2).toFixed(3);
 
         this.datapie  = <LineData> ({data: [res.TOE2, res.TOE1], label: "Opgenomen"});
         this.datapie1 = <LineData> ({data: [res.HOV, res.HTV], label: "Huidig verbruik"});
diff --git a/mean-app/src/app/device.component.html b/mean-app/src/app/device.component.html
index 04ed4d6..45decc6 100644
--- a/mean-app/src/app/device.component.html
+++ b/mean-app/src/app/device.component.html
@@ -1,15 +1,32 @@
-<div class="col-md-12">
+<div class="row">
 
- <div class="row">
-
-    <div class="col-md-4" *ngFor="let device of devices">
-
-    	<div class="well" style="cursor:pointer;" (click)="goToDetails(device.sn)">
-
-      		<h3>{{device.name}}</h3>
-
-      	</div>
+    <div class="col-md-12">
+      <div class="page-header">
+        <h1>Energiemeter <small>Devices</small></h1>
+      </div>
     </div>
 
- </div>
+  </div>
+
+<div class="row">
+
+	<div class="col-md-12">
+
+	 <div class="row">
+
+	    <div class="col-md-4" *ngFor="let device of devices">
+
+	    	<div class="well" style="cursor:pointer;" (click)="goToDetails(device.sn)">
+
+	      		<h3>{{device.name}}</h3>
+	      		<p>
+	      			{{device.description}}
+	      		</p>
+
+	      	</div>
+	    </div>
+
+	 </div>
+	</div>
+
 </div>
\ No newline at end of file
diff --git a/mean-app/src/app/device.ts b/mean-app/src/app/device.ts
index 0e5d751..764a7b9 100644
--- a/mean-app/src/app/device.ts
+++ b/mean-app/src/app/device.ts
@@ -1,4 +1,5 @@
 export class Device {
   public sn: string;
   public name: string;
+  public desc:string;
 }
diff --git a/mean-app/src/app/picker.component.html b/mean-app/src/app/picker.component.html
index af18463..d9f99c9 100644
--- a/mean-app/src/app/picker.component.html
+++ b/mean-app/src/app/picker.component.html
@@ -1,64 +1,104 @@
+<div class="row">
 
-<div class="col-md-12">
+    <div class="col-md-12">
+      <div class="page-header">
+        <h1>Energiemeter <small>Picker</small></h1>
+      </div>
+    </div>
 
- <form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
-
-  <div class="form-group">  
-    <label>Meter</label>  
-    <select name="meter" class="form-control" required ngModel>
-    	<option value="4530303035303031353538313833363134" selected>Martijn</option>
-    	<option value="4530303235303030303636383733323136">Kenneth</option>
-    </select>
   </div>
 
-  <div class="form-group">  
-    <label>Data type</label>  
-    <select name="datatype" class="form-control" required ngModel>
-    	<optgroup label="Huidig">
-        	<option value="HOV" selected>Huidig opgenomen vermogen</option>
-        	<option value="HTV">Huidig teruggeleverd vermogen</option>
-        </optgroup>
-    	<optgroup label="Tarief 1">
-        	<option value="TOE1">Totaal opgenomen energie</option>
-        	<option value="TTE1">Totaal teruggeleverde energie</option>
-        </optgroup>
-        <optgroup label="Tarief 2">
-        	<option value="TOE2">Totaal opgenomen energie</option>
-        	<option value="TTE2">Totaal teruggeleverde energie</option>
-        </optgroup>
-    </select>
-  </div>
+<div class="row">
 
-  <div class="form-group">  
-    <label>Groupering</label>  
-    <select name="group" class="form-control" required ngModel>
-    	<option value="minute">Minuut</option>
-    	<option value="hour" selected>Uur</option>
-    	<option value="day">Dag</option>
-    	<option value="month">Maand</option>
-    	<option value="year">Jaar</option>
-    </select>
-  </div>
+  <form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
 
-  <div class="form-group">
-  	<label>Startdatum</label>
-  	<input type="date" name="date1" class="form-control" required ngModel>
-  </div>
+    <div class="col-md-4">
 
-  <div class="form-group">
-  	<label>Einddatum</label>
-  	<input type="date" name="date2" class="form-control" required ngModel>
-  </div>
+      <div class="form-group">  
+        <label>Meter</label>  
+        <select name="meter" class="form-control" required ngModel>
+        	<option value="4530303035303031353538313833363134">Martijn</option>
+        	<option value="4530303235303030303636383733323136">Kenneth</option>
+        </select>
+      </div>
 
-  <input type="submit" class="btn btn-primary" value="Update" />
+    </div>
+
+    <div class="col-md-4">
+
+      <div class="form-group">  
+        <label>Data type</label>  
+        <select name="datatype" class="form-control" required ngModel>
+        	<optgroup label="Huidig">
+            	<option value="HOV">Huidig opgenomen vermogen</option>
+            	<option value="HTV">Huidig teruggeleverd vermogen</option>
+            </optgroup>
+        	<optgroup label="Tarief 1">
+            	<option value="TOE1">Totaal opgenomen energie</option>
+            	<option value="TTE1">Totaal teruggeleverde energie</option>
+            </optgroup>
+            <optgroup label="Tarief 2">
+            	<option value="TOE2">Totaal opgenomen energie</option>
+            	<option value="TTE2">Totaal teruggeleverde energie</option>
+            </optgroup>
+        </select>
+      </div>
+
+    </div>
+
+    <div class="col-md-4">
+
+      <div class="form-group">  
+        <label>Groupering</label>  
+        <select name="group" class="form-control" required ngModel>
+        	<option value="minute">Minuut</option>
+        	<option value="hour">Uur</option>
+        	<option value="day">Dag</option>
+        	<option value="month">Maand</option>
+        	<option value="year">Jaar</option>
+        </select>
+      </div>
+
+    </div>
+
+    <div class="col-md-6">
+
+      <div class="form-group">
+      	<label>Startdatum</label>
+      	<input type="date" name="date1" class="form-control" required ngModel>
+      </div>
+
+    </div>
+
+    <div class="col-md-6">
+
+      <div class="form-group">
+      	<label>Einddatum</label>
+      	<input type="date" name="date2" class="form-control" required ngModel>
+      </div>
+
+    </div>
+
+    <div class="col-md-12">
+
+      <input type="submit" class="btn btn-primary" value="Update" />
+
+    </div>
+
+    </div>
 
   </form>
+
 </div>
 
-<span *ngIf="loaded">
+<div class="row">
 
-	<div class="col-md-12">
-		<line-chart [label]="label" [data]="data"></line-chart>
-	</div>
+  <span *ngIf="loaded">
 
-</span>
+  	<div class="col-md-12">
+      <br>
+  		<line-chart [label]="label" [data]="data"></line-chart>
+  	</div>
+
+  </span>
+</div>
\ No newline at end of file
diff --git a/mean-app/src/favicon.ico b/mean-app/src/favicon.ico
index 8081c7c..695f12c 100644
Binary files a/mean-app/src/favicon.ico and b/mean-app/src/favicon.ico differ
diff --git a/mean-app/src/index.html b/mean-app/src/index.html
index 0d4e2e2..f89e65e 100644
--- a/mean-app/src/index.html
+++ b/mean-app/src/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>MeanApp</title>
+  <title>Energiemeter</title>
 
   <style>
 
