More UI improvements

This commit is contained in:
2017-04-11 22:53:38 +02:00
parent 7dd1ea43a6
commit 7a9825000c
6 changed files with 25 additions and 10 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+4 -4
View File
@@ -311,7 +311,7 @@ var DetailComponent = (function () {
this.hov = 0;
this.htv = 0;
this.ht = "loading";
this.money = "calculating";
this.money = 0;
this.loaded = false;
this.pieloaded = false;
}
@@ -348,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).toFixed(3);
_this.money = Math.round(((res.TOE1 - res.TTE1) * res.tarief1) + ((res.TOE2 - res.TTE2) * res.tarief2) * 100) / 100;
_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" });
@@ -976,14 +976,14 @@ module.exports = "<div class=\"row\">\r\n\r\n <div class=\"col-md-12\">\r\n
/***/ 677:
/***/ (function(module, exports) {
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"
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.<br></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\t<div class=\"col-md-12\">\r\n\t\t\t<hr>\r\n\t\t</div>\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-12\">\r\n\t\t\t<hr>\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-12\">\r\n\t\t\t<hr>\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=\"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>"
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.desc}}\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>"
/***/ }),
+1 -1
View File
File diff suppressed because one or more lines are too long
+16 -1
View File
@@ -39,7 +39,7 @@
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p>De huidige opgenomen energie samen met de huidig teruggeleverde energie.</p>
<p>De huidige opgenomen energie samen met de huidig teruggeleverde energie.<br></p>
<br>
<pie-chart [label]="labelpie1" [data]="datapie1"></pie-chart>
</div>
@@ -60,6 +60,13 @@
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<span *ngIf="!loaded">
@@ -76,6 +83,10 @@
<doubleline-chart [label]="label" [data]="data1" [data2]="data2"></doubleline-chart>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="col-md-6">
<p>Totaal opgenomen energie tijdens tarief 2.</p>
<br>
@@ -88,6 +99,10 @@
<line-chart [label]="label" [data]="data4"></line-chart>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="col-md-6">
<p>Totaal opgenomen energie tijdens tarief 1.</p>
<br>
+2 -2
View File
@@ -41,7 +41,7 @@ export class DetailComponent implements OnInit, OnDestroy {
public hov:number = 0;
public htv:number = 0;
public ht:string = "loading";
public money:string = "calculating";
public money:number = 0;
public loaded:boolean = false;
public pieloaded:boolean = false;
@@ -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).toFixed(3);
this.money = Math.round( ((res.TOE1 - res.TTE1) * res.tarief1) + ((res.TOE2 - res.TTE2) * res.tarief2) * 100 ) / 100;
this.datapie = <LineData> ({data: [res.TOE2, res.TOE1], label: "Opgenomen"});
this.datapie1 = <LineData> ({data: [res.HOV, res.HTV], label: "Huidig verbruik"});
+1 -1
View File
@@ -20,7 +20,7 @@
<h3>{{device.name}}</h3>
<p>
{{device.description}}
{{device.desc}}
</p>
</div>