Fixed wrong input

2017-04-11 16:20:01 +02:00
parent 989e285af5
commit 67c6f398b3
14 changed files with 1396 additions and 1285 deletions
@@ -5,9 +5,9 @@ webpackJsonp([1,4],{

 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_add_operator_map__ = __webpack_require__(681);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_add_operator_map__ = __webpack_require__(684);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_add_operator_map___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_rxjs_add_operator_map__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_http__ = __webpack_require__(309);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_http__ = __webpack_require__(310);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DataService; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -168,11 +168,14 @@ function toDevice(r) {

 /***/ }),

-/***/ 332:
+/***/ 333:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_observable_IntervalObservable__ = __webpack_require__(379);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_observable_IntervalObservable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_rxjs_observable_IntervalObservable__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__data_service__ = __webpack_require__(104);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DashboardComponent; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -184,29 +187,63 @@ var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };

+
+
 var DashboardComponent = (function () {
-    function DashboardComponent() {
+    function DashboardComponent(dataService) {
+        this.dataService = dataService;
+        this.mloaded = false;
+        this.kloaded = false;
    }
+    DashboardComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.refreshData();
+        this.subscription = __WEBPACK_IMPORTED_MODULE_1_rxjs_observable_IntervalObservable__["IntervalObservable"].create(7500).subscribe(function (n) { return _this.refreshData(); });
+    };
+    DashboardComponent.prototype.ngOnDestroy = function () {
+        this.subscription.unsubscribe();
+    };
+    DashboardComponent.prototype.refreshData = function () {
+        var _this = this;
+        console.log("Refreshing data");
+        this.dataService
+            .usage("4530303035303031353538313833363134")
+            .subscribe(function (res) {
+            _this.data1 = ({ data: [res.HOV, res.HTV], label: "Verbruik Martijn" });
+            _this.mloaded = true;
+        });
+        this.dataService
+            .usage("4530303235303030303636383733323136")
+            .subscribe(function (res) {
+            _this.data2 = ({ data: [res.HOV, res.HTV], label: "Verbruik Kenneth" });
+            _this.kloaded = true;
+        });
+        this.dataService
+            .get("4530303235303030303636383733323136")
+            .subscribe(function (res) {
+        });
+    };
    DashboardComponent = __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
            selector: 'dashboard',
-            template: __webpack_require__(673)
+            template: __webpack_require__(675)
        }), 
-        __metadata('design:paramtypes', [])
+        __metadata('design:paramtypes', [(typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_2__data_service__["a" /* DataService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_2__data_service__["a" /* DataService */]) === 'function' && _a) || Object])
    ], DashboardComponent);
    return DashboardComponent;
+    var _a;
 }());
 //# sourceMappingURL=C:/Users/avans/Documents/Angular/Smarthome-local/mean-app/src/dashboard.component.js.map

 /***/ }),

-/***/ 333:
+/***/ 334:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_router__ = __webpack_require__(214);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_rxjs_observable_IntervalObservable__ = __webpack_require__(684);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_rxjs_observable_IntervalObservable__ = __webpack_require__(379);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_rxjs_observable_IntervalObservable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_rxjs_observable_IntervalObservable__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__data_service__ = __webpack_require__(104);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DetailComponent; });
@@ -274,7 +311,7 @@ var DetailComponent = (function () {
    DetailComponent = __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
            selector: 'detail',
-            template: __webpack_require__(674)
+            template: __webpack_require__(676)
        }), 
        __metadata('design:paramtypes', [(typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_3__data_service__["a" /* DataService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_3__data_service__["a" /* DataService */]) === 'function' && _a) || Object, (typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_1__angular_router__["b" /* ActivatedRoute */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__angular_router__["b" /* ActivatedRoute */]) === 'function' && _b) || Object])
    ], DetailComponent);
@@ -285,7 +322,7 @@ var DetailComponent = (function () {

 /***/ }),

-/***/ 334:
+/***/ 335:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
@@ -324,7 +361,7 @@ var DeviceComponent = (function () {
    DeviceComponent = __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
            selector: 'device',
-            template: __webpack_require__(675)
+            template: __webpack_require__(677)
        }), 
        __metadata('design:paramtypes', [(typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_2__angular_router__["c" /* Router */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_2__angular_router__["c" /* Router */]) === 'function' && _a) || Object, (typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */]) === 'function' && _b) || Object])
    ], DeviceComponent);
@@ -335,7 +372,35 @@ var DeviceComponent = (function () {

 /***/ }),

-/***/ 335:
+/***/ 336:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LabelData; });
+var LabelData = (function () {
+    function LabelData() {
+    }
+    return LabelData;
+}());
+//# sourceMappingURL=C:/Users/avans/Documents/Angular/Smarthome-local/mean-app/src/label-data.js.map
+
+/***/ }),
+
+/***/ 337:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LineData; });
+var LineData = (function () {
+    function LineData() {
+    }
+    return LineData;
+}());
+//# sourceMappingURL=C:/Users/avans/Documents/Angular/Smarthome-local/mean-app/src/line-data.js.map
+
+/***/ }),
+
+/***/ 338:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
@@ -376,7 +441,7 @@ var PickerComponent = (function () {
    PickerComponent = __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
            selector: 'picker',
-            template: __webpack_require__(676)
+            template: __webpack_require__(678)
        }), 
        __metadata('design:paramtypes', [(typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */]) === 'function' && _a) || Object])
    ], PickerComponent);
@@ -387,7 +452,7 @@ var PickerComponent = (function () {

 /***/ }),

-/***/ 390:
+/***/ 393:
 /***/ (function(module, exports) {

 function webpackEmptyContext(req) {
@@ -396,20 +461,20 @@ function webpackEmptyContext(req) {
 webpackEmptyContext.keys = function() { return []; };
 webpackEmptyContext.resolve = webpackEmptyContext;
 module.exports = webpackEmptyContext;
-webpackEmptyContext.id = 390;
+webpackEmptyContext.id = 393;


 /***/ }),

-/***/ 391:
+/***/ 394:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser_dynamic__ = __webpack_require__(478);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser_dynamic__ = __webpack_require__(481);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__environments_environment__ = __webpack_require__(514);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__app_app_module__ = __webpack_require__(510);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__environments_environment__ = __webpack_require__(516);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__app_app_module__ = __webpack_require__(513);



@@ -422,16 +487,16 @@ __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_platform_browser_dyna

 /***/ }),

-/***/ 508:
+/***/ 511:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_router__ = __webpack_require__(214);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dashboard_component__ = __webpack_require__(332);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__device_component__ = __webpack_require__(334);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__detail_component__ = __webpack_require__(333);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__picker_component__ = __webpack_require__(335);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dashboard_component__ = __webpack_require__(333);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__device_component__ = __webpack_require__(335);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__detail_component__ = __webpack_require__(334);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__picker_component__ = __webpack_require__(338);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppRoutingModule; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -471,7 +536,7 @@ var AppRoutingModule = (function () {

 /***/ }),

-/***/ 509:
+/***/ 512:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
@@ -493,8 +558,8 @@ var AppComponent = (function () {
    AppComponent = __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
            selector: 'app-root',
-            template: __webpack_require__(671),
-            styles: [__webpack_require__(670)]
+            template: __webpack_require__(673),
+            styles: [__webpack_require__(672)]
        }), 
        __metadata('design:paramtypes', [])
    ], AppComponent);
@@ -504,24 +569,25 @@ var AppComponent = (function () {

 /***/ }),

-/***/ 510:
+/***/ 513:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__ = __webpack_require__(149);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_forms__ = __webpack_require__(469);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__angular_http__ = __webpack_require__(309);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_ng2_charts_ng2_charts__ = __webpack_require__(373);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_forms__ = __webpack_require__(472);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__angular_http__ = __webpack_require__(310);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_ng2_charts_ng2_charts__ = __webpack_require__(236);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_ng2_charts_ng2_charts___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_ng2_charts_ng2_charts__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__app_routing_module__ = __webpack_require__(508);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__app_component__ = __webpack_require__(509);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__chart_component__ = __webpack_require__(511);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__dashboard_component__ = __webpack_require__(332);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__device_component__ = __webpack_require__(334);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__detail_component__ = __webpack_require__(333);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__picker_component__ = __webpack_require__(335);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__data_service__ = __webpack_require__(104);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__app_routing_module__ = __webpack_require__(511);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__app_component__ = __webpack_require__(512);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__chart_component__ = __webpack_require__(514);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__piechart_component__ = __webpack_require__(515);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__dashboard_component__ = __webpack_require__(333);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__device_component__ = __webpack_require__(335);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__detail_component__ = __webpack_require__(334);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__picker_component__ = __webpack_require__(338);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__data_service__ = __webpack_require__(104);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppModule; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -545,6 +611,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {



+
 var AppModule = (function () {
    function AppModule() {
    }
@@ -553,10 +620,11 @@ var AppModule = (function () {
            declarations: [
                __WEBPACK_IMPORTED_MODULE_6__app_component__["a" /* AppComponent */],
                __WEBPACK_IMPORTED_MODULE_7__chart_component__["a" /* LineChartComponent */],
-                __WEBPACK_IMPORTED_MODULE_8__dashboard_component__["a" /* DashboardComponent */],
-                __WEBPACK_IMPORTED_MODULE_9__device_component__["a" /* DeviceComponent */],
-                __WEBPACK_IMPORTED_MODULE_10__detail_component__["a" /* DetailComponent */],
-                __WEBPACK_IMPORTED_MODULE_11__picker_component__["a" /* PickerComponent */]
+                __WEBPACK_IMPORTED_MODULE_8__piechart_component__["a" /* PieChartComponent */],
+                __WEBPACK_IMPORTED_MODULE_9__dashboard_component__["a" /* DashboardComponent */],
+                __WEBPACK_IMPORTED_MODULE_10__device_component__["a" /* DeviceComponent */],
+                __WEBPACK_IMPORTED_MODULE_11__detail_component__["a" /* DetailComponent */],
+                __WEBPACK_IMPORTED_MODULE_12__picker_component__["a" /* PickerComponent */]
            ],
            imports: [
                __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__["a" /* BrowserModule */],
@@ -565,7 +633,7 @@ var AppModule = (function () {
                __WEBPACK_IMPORTED_MODULE_4_ng2_charts_ng2_charts__["ChartsModule"],
                __WEBPACK_IMPORTED_MODULE_5__app_routing_module__["a" /* AppRoutingModule */]
            ],
-            providers: [__WEBPACK_IMPORTED_MODULE_12__data_service__["a" /* DataService */]],
+            providers: [__WEBPACK_IMPORTED_MODULE_13__data_service__["a" /* DataService */]],
            bootstrap: [__WEBPACK_IMPORTED_MODULE_6__app_component__["a" /* AppComponent */]]
        }), 
        __metadata('design:paramtypes', [])
@@ -576,16 +644,15 @@ var AppModule = (function () {

 /***/ }),

-/***/ 511:
+/***/ 514:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__data_service__ = __webpack_require__(104);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__line_data__ = __webpack_require__(513);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__ = __webpack_require__(373);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__label_data__ = __webpack_require__(512);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__line_data__ = __webpack_require__(337);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__ = __webpack_require__(236);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__label_data__ = __webpack_require__(336);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LineChartComponent; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -600,10 +667,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {



-
 var LineChartComponent = (function () {
-    function LineChartComponent(dataService) {
-        this.dataService = dataService;
+    function LineChartComponent() {
        // lineChart
        this.lineChartData = [
            { data: [0, 0, 0, 0, 0, 0, 0], label: 'Verbruik' }
@@ -614,7 +679,7 @@ var LineChartComponent = (function () {
            title: {
                display: true,
                position: 'left',
-                text: 'Watt'
+                text: 'KiloWatt'
            }
        };
        this.lineChartColors = [
@@ -644,59 +709,98 @@ var LineChartComponent = (function () {
    };
    __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
-        __metadata('design:type', (typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_2__line_data__["a" /* LineData */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_2__line_data__["a" /* LineData */]) === 'function' && _a) || Object)
+        __metadata('design:type', (typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_1__line_data__["a" /* LineData */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__line_data__["a" /* LineData */]) === 'function' && _a) || Object)
    ], LineChartComponent.prototype, "data", void 0);
    __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
-        __metadata('design:type', (typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_4__label_data__["a" /* LabelData */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_4__label_data__["a" /* LabelData */]) === 'function' && _b) || Object)
+        __metadata('design:type', (typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_3__label_data__["a" /* LabelData */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_3__label_data__["a" /* LabelData */]) === 'function' && _b) || Object)
    ], LineChartComponent.prototype, "label", void 0);
    __decorate([
-        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["ViewChild"])(__WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__["BaseChartDirective"]), 
-        __metadata('design:type', (typeof (_c = typeof __WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__["BaseChartDirective"] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__["BaseChartDirective"]) === 'function' && _c) || Object)
+        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["ViewChild"])(__WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__["BaseChartDirective"]), 
+        __metadata('design:type', (typeof (_c = typeof __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__["BaseChartDirective"] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__["BaseChartDirective"]) === 'function' && _c) || Object)
    ], LineChartComponent.prototype, "chart", void 0);
    LineChartComponent = __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
            selector: 'line-chart',
-            template: __webpack_require__(672)
+            template: __webpack_require__(674)
        }), 
-        __metadata('design:paramtypes', [(typeof (_d = typeof __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */]) === 'function' && _d) || Object])
+        __metadata('design:paramtypes', [])
    ], LineChartComponent);
    return LineChartComponent;
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
 }());
 //# sourceMappingURL=C:/Users/avans/Documents/Angular/Smarthome-local/mean-app/src/chart.component.js.map

 /***/ }),

-/***/ 512:
+/***/ 515:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LabelData; });
-var LabelData = (function () {
-    function LabelData() {
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__line_data__ = __webpack_require__(337);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__ = __webpack_require__(236);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__label_data__ = __webpack_require__(336);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return PieChartComponent; });
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+
+
+var PieChartComponent = (function () {
+    function PieChartComponent() {
+        // lineChart
+        this.pieChartData = [0, 0];
+        this.pieChartLabels = ['-1', '-2'];
+        this.pieChartType = 'pie';
    }
-    return LabelData;
+    PieChartComponent.prototype.ngOnInit = function () {
+        this.pieChartLabels = this.label.data.slice();
+        var newDataSet = [];
+        newDataSet.push(this.data.data);
+        this.pieChartData = newDataSet;
+    };
+    PieChartComponent.prototype.ngOnChanges = function () {
+        if (this.chart.chart != undefined) {
+            this.chart.chart.update();
+        }
+    };
+    __decorate([
+        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
+        __metadata('design:type', (typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_1__line_data__["a" /* LineData */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__line_data__["a" /* LineData */]) === 'function' && _a) || Object)
+    ], PieChartComponent.prototype, "data", void 0);
+    __decorate([
+        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
+        __metadata('design:type', (typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_3__label_data__["a" /* LabelData */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_3__label_data__["a" /* LabelData */]) === 'function' && _b) || Object)
+    ], PieChartComponent.prototype, "label", void 0);
+    __decorate([
+        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["ViewChild"])(__WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__["BaseChartDirective"]), 
+        __metadata('design:type', (typeof (_c = typeof __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__["BaseChartDirective"] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__["BaseChartDirective"]) === 'function' && _c) || Object)
+    ], PieChartComponent.prototype, "chart", void 0);
+    PieChartComponent = __decorate([
+        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
+            selector: 'pie-chart',
+            template: __webpack_require__(679)
+        }), 
+        __metadata('design:paramtypes', [])
+    ], PieChartComponent);
+    return PieChartComponent;
+    var _a, _b, _c;
 }());
-//# sourceMappingURL=C:/Users/avans/Documents/Angular/Smarthome-local/mean-app/src/label-data.js.map
+//# sourceMappingURL=C:/Users/avans/Documents/Angular/Smarthome-local/mean-app/src/piechart.component.js.map

 /***/ }),

-/***/ 513:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LineData; });
-var LineData = (function () {
-    function LineData() {
-    }
-    return LineData;
-}());
-//# sourceMappingURL=C:/Users/avans/Documents/Angular/Smarthome-local/mean-app/src/line-data.js.map
-
-/***/ }),
-
-/***/ 514:
+/***/ 516:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

 "use strict";
@@ -712,62 +816,69 @@ var environment = {

 /***/ }),

-/***/ 670:
+/***/ 672:
 /***/ (function(module, exports) {

 module.exports = ""

 /***/ }),

-/***/ 671:
+/***/ 673:
 /***/ (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"

 /***/ }),

-/***/ 672:
+/***/ 674:
 /***/ (function(module, exports) {

 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>"

 /***/ }),

-/***/ 673:
-/***/ (function(module, exports) {
-
-module.exports = "<div>\r\n\t\r\n</div>"
-
-/***/ }),
-
-/***/ 674:
-/***/ (function(module, exports) {
-
-module.exports = "<span *ngIf=\"loaded\">\r\n\r\n\t<div class=\"col-md-12\">\r\n\t\t<h2>{{name}}</h2>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-12\">\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\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<line-chart [label]=\"label\" [data]=\"data1\"></line-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<line-chart [label]=\"label\" [data]=\"data2\"></line-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\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<line-chart [label]=\"label\" [data]=\"data4\"></line-chart>\r\n\t</div>\r\n\r\n</span>\r\n"
-
-/***/ }),
-
 /***/ 675:
 /***/ (function(module, exports) {

-module.exports = "<div>\r\n\r\n<ul>\r\n        <li *ngFor=\"let device of devices\" (click)=\"goToDetails(device.sn)\">\r\n          {{device.name}}\r\n        </li>\r\n</ul>\r\n\r\n</div>"
+module.exports = "<span *ngIf=\"mloaded\">\r\n\r\n\t<div class=\"col-md-6\">\r\n    <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    <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"

 /***/ }),

 /***/ 676:
 /***/ (function(module, exports) {

+module.exports = "<span *ngIf=\"loaded\">\r\n\r\n\t<div class=\"col-md-12\">\r\n\t\t<h2>{{name}}</h2>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-12\">\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\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<line-chart [label]=\"label\" [data]=\"data1\"></line-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<line-chart [label]=\"label\" [data]=\"data2\"></line-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\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<line-chart [label]=\"label\" [data]=\"data4\"></line-chart>\r\n\t</div>\r\n\r\n</span>\r\n"
+
+/***/ }),
+
+/***/ 677:
+/***/ (function(module, exports) {
+
+module.exports = "<div>\r\n\r\n<ul>\r\n        <li *ngFor=\"let device of devices\" (click)=\"goToDetails(device.sn)\">\r\n          {{device.name}}\r\n        </li>\r\n</ul>\r\n\r\n</div>"
+
+/***/ }),
+
+/***/ 678:
+/***/ (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"

 /***/ }),

-/***/ 702:
+/***/ 679:
+/***/ (function(module, exports) {
+
+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"
+
+/***/ }),
+
+/***/ 704:
 /***/ (function(module, exports, __webpack_require__) {

-module.exports = __webpack_require__(391);
+module.exports = __webpack_require__(394);


 /***/ })

-},[702]);
+},[704]);
 //# sourceMappingURL=main.bundle.map
@@ -1,15 +1,15 @@
 webpackJsonp([2,4],{

-/***/ 393:
+/***/ 396:
 /***/ (function(module, exports, __webpack_require__) {

 // style-loader: Adds some css to the DOM by adding a <style> tag

 // load the styles
-var content = __webpack_require__(665);
+var content = __webpack_require__(667);
 if(typeof content === 'string') content = [[module.i, content, '']];
 // add the styles to the DOM
-var update = __webpack_require__(700)(content, {});
+var update = __webpack_require__(702)(content, {});
 if(content.locals) module.exports = content.locals;
 // Hot Module Replacement
 if(false) {
@@ -27,10 +27,10 @@ if(false) {

 /***/ }),

-/***/ 665:
+/***/ 667:
 /***/ (function(module, exports, __webpack_require__) {

-exports = module.exports = __webpack_require__(666)();
+exports = module.exports = __webpack_require__(668)();
 // imports


@@ -42,7 +42,7 @@ exports.push([module.i, "/* You can add global styles to this file, and also imp

 /***/ }),

-/***/ 666:
+/***/ 668:
 /***/ (function(module, exports) {

 /*
@@ -99,7 +99,7 @@ module.exports = function() {

 /***/ }),

-/***/ 700:
+/***/ 702:
 /***/ (function(module, exports) {

 /*
@@ -352,13 +352,13 @@ function updateLink(linkElement, obj) {

 /***/ }),

-/***/ 704:
+/***/ 706:
 /***/ (function(module, exports, __webpack_require__) {

-module.exports = __webpack_require__(393);
+module.exports = __webpack_require__(396);


 /***/ })

-},[704]);
+},[706]);
 //# sourceMappingURL=styles.bundle.map
@@ -8,6 +8,7 @@ import { AppRoutingModule } from './app-routing.module';

 import { AppComponent } from './app.component';
 import { LineChartComponent } from './chart.component';
+import { PieChartComponent } from './piechart.component';
 import { DashboardComponent } from './dashboard.component';
 import { DeviceComponent } from './device.component';
 import { DetailComponent } from './detail.component';
@@ -19,6 +20,7 @@ import { DataService } from './data.service';
  declarations: [
    AppComponent,
    LineChartComponent,
+    PieChartComponent,
    DashboardComponent,
    DeviceComponent,
    DetailComponent,
@@ -1,9 +1,8 @@
 import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';
-import { DataService } from './data.service';

 import { LineData } from './line-data';
 import { BaseChartDirective } from 'ng2-charts/ng2-charts';
-import {LabelData} from "./label-data";
+import { LabelData } from "./label-data";

@Component({
  selector: 'line-chart',
@@ -26,7 +25,7 @@ export class LineChartComponent implements OnInit, OnChanges {
    title: {
      display: true,
      position: 'left',
-      text: 'Watt'
+      text: 'KiloWatt'
    }
  };
  public lineChartColors:Array<any> = [
@@ -42,7 +41,7 @@ export class LineChartComponent implements OnInit, OnChanges {
  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line';

-  constructor(private dataService: DataService) {}
+  constructor() {}

  ngOnInit(): void {

@@ -7,7 +7,6 @@ import { DataService } from './data.service';
 import {LineChartComponent} from "./chart.component";
 import {LineData} from "./line-data";
 import {LabelData} from "./label-data";
-import {Line} from "tslint/lib/test/lines";

@Component({
  selector: 'dashboard',
@@ -1,5 +1,5 @@
 <div style="display: block;">
-  <canvas baseChart width="400" height="400"
+  <canvas baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"></canvas>
@@ -1,9 +1,8 @@
 import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';
-import { DataService } from './data.service';

 import { LineData } from './line-data';
 import { BaseChartDirective } from 'ng2-charts/ng2-charts';
-import {LabelData} from "./label-data";
+import { LabelData } from "./label-data";

@Component({
  selector: 'pie-chart',
@@ -17,11 +16,11 @@ export class PieChartComponent implements OnInit, OnChanges {
  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;

  // lineChart
-  public pieChartData:Array<any> = [0,0];
-  public pieChartLabels:Array<any> = ['-1', '-2'];
+  public pieChartData:number[] = [0,0];
+  public pieChartLabels:string[] = ['-1', '-2'];
  public pieChartType:string = 'pie';

-  constructor(private dataService: DataService) {}
+  constructor() {}

  ngOnInit(): void {

@@ -36,8 +35,5 @@ export class PieChartComponent implements OnInit, OnChanges {
    if(this.chart.chart != undefined){
      this.chart.chart.update();
    }
-
  }
-
-
 }