From 820738610406a8dd5be689a0fad8ababece12508 Mon Sep 17 00:00:00 2001
From: Fabian Schwarzbeck <fabian.schwarzbeck@fenecon.de>
Date: Mon, 11 May 2020 15:01:31 +0200
Subject: [PATCH 1/6] UI: add possibility to pick level when heatingelement is
 set to MANUAL_ON in heatingelement advanced widget

---
 .../edge/history/heatingelement/chart.component.ts   |  2 +-
 .../live/heatingelement/modal/modal.component.html   | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/edge/history/heatingelement/chart.component.ts b/ui/src/app/edge/history/heatingelement/chart.component.ts
index 7c0dbe663b2..76f8bb2d15f 100644
--- a/ui/src/app/edge/history/heatingelement/chart.component.ts
+++ b/ui/src/app/edge/history/heatingelement/chart.component.ts
@@ -106,7 +106,7 @@ export class HeatingelementChartComponent extends AbstractHistoryChart implement
     options.tooltips.callbacks.label = function (tooltipItem: TooltipItem, data: Data) {
       let label = data.datasets[tooltipItem.datasetIndex].label;
       let value = tooltipItem.yLabel;
-      return label + ": " + formatNumber(value, 'de', '1.0-1') + ' kWh'; // TODO get locale dynamically
+      return label + ": " + formatNumber(value, 'de', '1.0-1'); // TODO get locale dynamically
     }
     this.options = options;
   }
diff --git a/ui/src/app/edge/live/heatingelement/modal/modal.component.html b/ui/src/app/edge/live/heatingelement/modal/modal.component.html
index 55fa4f592f3..30ed79df006 100644
--- a/ui/src/app/edge/live/heatingelement/modal/modal.component.html
+++ b/ui/src/app/edge/live/heatingelement/modal/modal.component.html
@@ -67,6 +67,18 @@
                     </ion-segment>
                 </ion-card-content>
                 <form [formGroup]="formGroup">
+                    <ng-container *ngIf="component.properties['mode'] == 'MANUAL_ON'">
+                        <ion-item lines="none">
+                            <div style="font-size: 14px">Level:</div>
+                            <ion-select formControlName="defaultLevel" [value]="component.properties['defaultLevel']"
+                                (ionChange)="updateDefaultLevel($event)" [okText]="translate.instant('General.ok')"
+                                [cancelText]="translate.instant('General.cancel')">
+                                <ion-select-option value="LEVEL_1">Level 1</ion-select-option>
+                                <ion-select-option value="LEVEL_2">Level 2</ion-select-option>
+                                <ion-select-option value="LEVEL_3">Level 3</ion-select-option>
+                            </ion-select>
+                        </ion-item>
+                    </ng-container>
                     <ng-container *ngIf="component.properties['mode'] == 'AUTOMATIC'">
                         <ion-card-content [class.underline]="
                         formGroup.value.workMode !='NONE'">

From bdc2bd4876d64ba7e117c7bdb34741baf51bcfcc Mon Sep 17 00:00:00 2001
From: Fabian Schwarzbeck <fabian.schwarzbeck@fenecon.de>
Date: Mon, 11 May 2020 15:25:17 +0200
Subject: [PATCH 2/6] UI: add help button which link to fenecon docs to chpsoc,
 evcs, singlethreshold and fixdigitaloutput - advanced widget todo: add local
 dynamically to url when backend connection is established

---
 ui/src/app/edge/live/chpsoc/chpsoc.component.ts               | 2 +-
 .../chpsoc/modal/{modal.page.html => modal.component.html}    | 3 +++
 .../live/chpsoc/modal/{modal.page.ts => modal.component.ts}   | 2 +-
 ui/src/app/edge/live/evcs/modal/modal.page.html               | 3 +++
 .../app/edge/live/fixdigitaloutput/modal/modal.component.html | 4 ++++
 ui/src/app/edge/live/live.module.ts                           | 3 +--
 .../app/edge/live/singlethreshold/modal/modal.component.html  | 3 +++
 7 files changed, 16 insertions(+), 4 deletions(-)
 rename ui/src/app/edge/live/chpsoc/modal/{modal.page.html => modal.component.html} (95%)
 rename ui/src/app/edge/live/chpsoc/modal/{modal.page.ts => modal.component.ts} (98%)

diff --git a/ui/src/app/edge/live/chpsoc/chpsoc.component.ts b/ui/src/app/edge/live/chpsoc/chpsoc.component.ts
index ae66a465e40..4fd39e40803 100644
--- a/ui/src/app/edge/live/chpsoc/chpsoc.component.ts
+++ b/ui/src/app/edge/live/chpsoc/chpsoc.component.ts
@@ -1,6 +1,6 @@
 import { ActivatedRoute } from '@angular/router';
 import { ChannelAddress, Edge, EdgeConfig, Service, Websocket } from '../../../shared/shared';
-import { ChpsocModalComponent } from './modal/modal.page';
+import { ChpsocModalComponent } from './modal/modal.component';
 import { Component, Input } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 
diff --git a/ui/src/app/edge/live/chpsoc/modal/modal.page.html b/ui/src/app/edge/live/chpsoc/modal/modal.component.html
similarity index 95%
rename from ui/src/app/edge/live/chpsoc/modal/modal.page.html
rename to ui/src/app/edge/live/chpsoc/modal/modal.component.html
index 4b6baa15fbd..7e5da8caea7 100644
--- a/ui/src/app/edge/live/chpsoc/modal/modal.page.html
+++ b/ui/src/app/edge/live/chpsoc/modal/modal.component.html
@@ -2,6 +2,9 @@
     <ion-toolbar color="primary">
         <ion-title>{{ component.alias }}</ion-title>
         <ion-buttons slot="end">
+            <ion-button target="_blank" href="https://docs.fenecon.de/de/_/latest/fems/fems-app/bhkw.html">
+                <ion-icon name="help-circle-outline"></ion-icon>
+            </ion-button>
             <ion-button (click)="modalCtrl.dismiss()">
                 <ion-icon name="close-outline"></ion-icon>
             </ion-button>
diff --git a/ui/src/app/edge/live/chpsoc/modal/modal.page.ts b/ui/src/app/edge/live/chpsoc/modal/modal.component.ts
similarity index 98%
rename from ui/src/app/edge/live/chpsoc/modal/modal.page.ts
rename to ui/src/app/edge/live/chpsoc/modal/modal.component.ts
index e1f53f1b50a..4291dff629c 100644
--- a/ui/src/app/edge/live/chpsoc/modal/modal.page.ts
+++ b/ui/src/app/edge/live/chpsoc/modal/modal.component.ts
@@ -10,7 +10,7 @@ type mode = 'MANUAL_ON' | 'MANUAL_OFF' | 'AUTOMATIC';
 
 @Component({
     selector: ChpsocModalComponent.SELECTOR,
-    templateUrl: './modal.page.html'
+    templateUrl: './modal.component.html'
 })
 export class ChpsocModalComponent implements OnInit {
 
diff --git a/ui/src/app/edge/live/evcs/modal/modal.page.html b/ui/src/app/edge/live/evcs/modal/modal.page.html
index 3a99cf26d24..dcc53324838 100644
--- a/ui/src/app/edge/live/evcs/modal/modal.page.html
+++ b/ui/src/app/edge/live/evcs/modal/modal.page.html
@@ -5,6 +5,9 @@
                 {{ evcsComponent.alias }}
             </ion-title>
             <ion-buttons slot="end">
+                <ion-button target="_blank" href="https://docs.fenecon.de/de/_/latest/fems/fems-app/evcs.html">
+                    <ion-icon name="help-circle-outline"></ion-icon>
+                </ion-button>
                 <ion-button (click)="modalCtrl.dismiss()">
                     <ion-icon name="close-outline"></ion-icon>
                 </ion-button>
diff --git a/ui/src/app/edge/live/fixdigitaloutput/modal/modal.component.html b/ui/src/app/edge/live/fixdigitaloutput/modal/modal.component.html
index 11141fe2b4a..54bb8442e55 100644
--- a/ui/src/app/edge/live/fixdigitaloutput/modal/modal.component.html
+++ b/ui/src/app/edge/live/fixdigitaloutput/modal/modal.component.html
@@ -2,6 +2,10 @@
     <ion-toolbar class="ion-justify-content-center" color="primary">
         <ion-title>{{ component.alias }}</ion-title>
         <ion-buttons slot="end">
+            <ion-button target="_blank"
+                href="https://docs.fenecon.de/de/_/latest/fems/fems-app/manuelle-relaissteuerung.html">
+                <ion-icon name="help-circle-outline"></ion-icon>
+            </ion-button>
             <ion-button (click)="modalCtrl.dismiss()">
                 <ion-icon name="close-outline"></ion-icon>
             </ion-button>
diff --git a/ui/src/app/edge/live/live.module.ts b/ui/src/app/edge/live/live.module.ts
index 6f8458250c2..debc6cd7c43 100644
--- a/ui/src/app/edge/live/live.module.ts
+++ b/ui/src/app/edge/live/live.module.ts
@@ -6,7 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserModule } from '@angular/platform-browser';
 import { ChannelthresholdComponent } from './channelthreshold/channelthreshold.component';
 import { ChpSocComponent } from './chpsoc/chpsoc.component';
-import { ChpsocModalComponent } from './chpsoc/modal/modal.page';
+import { ChpsocModalComponent } from './chpsoc/modal/modal.component';
 import { ConsumptionComponent } from './consumption/consumption.component';
 import { ConsumptionModalComponent } from './consumption/modal/modal.component';
 import { EnergymonitorModule } from './energymonitor/energymonitor.module';
@@ -49,7 +49,6 @@ import { SymmetricPeakshavingModalComponent } from './peakshaving/symmetric/moda
     AsymmetricPeakshavingModalComponent,
     AutarchyModalComponent,
     ChpsocModalComponent,
-    ChpsocModalComponent,
     ConsumptionModalComponent,
     EvcsModalComponent,
     EvcsPopoverComponent,
diff --git a/ui/src/app/edge/live/singlethreshold/modal/modal.component.html b/ui/src/app/edge/live/singlethreshold/modal/modal.component.html
index c695d257742..c4d346d16b2 100644
--- a/ui/src/app/edge/live/singlethreshold/modal/modal.component.html
+++ b/ui/src/app/edge/live/singlethreshold/modal/modal.component.html
@@ -2,6 +2,9 @@
   <ion-toolbar mode="md" class="ion-justify-content-center" color="primary">
     <ion-title>{{ component.alias }}</ion-title>
     <ion-buttons slot="end">
+      <ion-button target="_blank" href="https://docs.fenecon.de/de/_/latest/fems/fems-app/schwellwertsteuerung.html">
+        <ion-icon name="help-circle-outline"></ion-icon>
+      </ion-button>
       <ion-button (click)="modalCtrl.dismiss()">
         <ion-icon name="close-outline"></ion-icon>
       </ion-button>

From 7d6532e1f36634c17c25a7a00412142a8693a366 Mon Sep 17 00:00:00 2001
From: Fabian Schwarzbeck <fabian.schwarzbeck@fenecon.de>
Date: Mon, 11 May 2020 16:18:28 +0200
Subject: [PATCH 3/6] UI: add metered consumption to consumption flat widget
 todo: add to advanced widget

---
 .../consumption/consumption.component.html    | 38 +++++++++++++------
 .../live/consumption/consumption.component.ts | 23 +++++++++--
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/ui/src/app/edge/live/consumption/consumption.component.html b/ui/src/app/edge/live/consumption/consumption.component.html
index 32e07f3c3ca..187c02decf2 100644
--- a/ui/src/app/edge/live/consumption/consumption.component.html
+++ b/ui/src/app/edge/live/consumption/consumption.component.html
@@ -17,9 +17,9 @@
                             </td>
                         </tr>
                     </ng-container>
-                    <ng-container *ngIf="evcsComponents.length > 0">
-                        <ng-container *ngFor="let component of evcsComponents">
-                            <ng-container *ngIf="(edge.currentData | async)['channel'] as currentData">
+                    <ng-container *ngIf="(edge.currentData | async)['channel'] as currentData">
+                        <ng-container *ngIf="evcsComponents.length > 0">
+                            <ng-container *ngFor="let component of evcsComponents">
                                 <ng-container *ngIf="currentData[component.id + '/ChargePower'] > 0">
                                     <tr>
                                         <td style="width:65%" *ngIf="component.id == component.alias">{{component.id}}
@@ -34,16 +34,32 @@
                                 </ng-container>
                             </ng-container>
                         </ng-container>
-
-                        <tr *ngIf="evcsComponents.length != 0">
-                            <td style="width: 65%" translate>General.otherConsumption</td>
-                            <ng-container *ngIf="sum.activePower - currentTotalChargingPower() as otherPower">
-                                <td style="width: 35%" class="align_right">
-                                    {{ otherPower | unitvalue:'kW' }}
-                                </td>
+                        <ng-container *ngIf="consumptionMeterComponents.length > 0">
+                            <ng-container *ngFor="let component of consumptionMeterComponents">
+                                <ng-container *ngIf="currentData[component.id + '/ActivePower'] > 0">
+                                    <tr>
+                                        <td style="width:65%" *ngIf="component.id == component.alias">{{component.id}}
+                                        </td>
+                                        <td style="width: 65%" *ngIf="component.id != component.alias">
+                                            {{component.alias}}
+                                        </td>
+                                        <td style="width:35%" class="align_right">
+                                            {{ currentData[component.id + '/ActivePower'] | unitvalue:'kW' }}
+                                        </td>
+                                    </tr>
+                                </ng-container>
                             </ng-container>
-                        </tr>
+                        </ng-container>
                     </ng-container>
+
+                    <tr *ngIf="evcsComponents.length != 0 || consumptionMeterComponents.length != 0">
+                        <td style="width: 65%" translate>General.otherConsumption</td>
+                        <ng-container *ngIf="sum.activePower - getTotalOtherPower() as otherPower">
+                            <td style="width: 35%" class="align_right">
+                                {{ otherPower | unitvalue:'kW' }}
+                            </td>
+                        </ng-container>
+                    </tr>
                 </table>
             </ion-card-content>
         </ion-card>
diff --git a/ui/src/app/edge/live/consumption/consumption.component.ts b/ui/src/app/edge/live/consumption/consumption.component.ts
index b79fcfbcad8..3a7f805bda8 100644
--- a/ui/src/app/edge/live/consumption/consumption.component.ts
+++ b/ui/src/app/edge/live/consumption/consumption.component.ts
@@ -15,6 +15,7 @@ export class ConsumptionComponent {
   public config: EdgeConfig = null;
   public edge: Edge = null;
   public evcsComponents: EdgeConfig.Component[] = null;
+  public consumptionMeterComponents: EdgeConfig.Component[] = null;
 
   constructor(
     private route: ActivatedRoute,
@@ -27,6 +28,12 @@ export class ConsumptionComponent {
     let channels = [];
     this.service.getConfig().then(config => {
       this.config = config;
+      this.consumptionMeterComponents = config.getComponentsImplementingNature("io.openems.edge.meter.api.SymmetricMeter").filter(component => component.properties['type'] == 'CONSUMPTION_METERED');
+      for (let component of this.consumptionMeterComponents) {
+        channels.push(
+          new ChannelAddress(component.id, 'ActivePower'),
+        )
+      }
       this.evcsComponents = config.getComponentsImplementingNature("io.openems.edge.evcs.api.Evcs").filter(component => !(component.factoryId == 'Evcs.Cluster.SelfConsumtion') && !(component.factoryId == 'Evcs.Cluster.PeakShaving') && !component.isEnabled == false);
       for (let component of this.evcsComponents) {
         channels.push(
@@ -66,13 +73,21 @@ export class ConsumptionComponent {
     return await modal.present();
   }
 
-  public currentTotalChargingPower(): number {
-    return this.sumOfChannel("ChargePower");
+  public getTotalOtherPower() {
+    return this.currentTotalChargingPower() + this.currentTotalConsumptionMeterPower();
+  }
+
+  private currentTotalChargingPower(): number {
+    return this.sumOfChannel(this.evcsComponents, "ChargePower");
+  }
+
+  private currentTotalConsumptionMeterPower(): number {
+    return this.sumOfChannel(this.consumptionMeterComponents, "ActivePower");
   }
 
-  private sumOfChannel(channel: String): number {
+  private sumOfChannel(components: EdgeConfig.Component[], channel: String): number {
     let sum = 0;
-    this.evcsComponents.forEach(component => {
+    components.forEach(component => {
       let channelValue = this.edge.currentData.value.channel[component.id + "/" + channel];
       if (channelValue != null) {
         sum += channelValue;

From 1f3ea3c46b67e3386fff689fb3e8255cd3a96c32 Mon Sep 17 00:00:00 2001
From: Fabian Schwarzbeck <fabian.schwarzbeck@fenecon.de>
Date: Thu, 14 May 2020 10:58:58 +0200
Subject: [PATCH 4/6] remove workmode kwh from heatingelement advanced widget

---
 .../heatingelement/modal/modal.component.html | 105 +++++-------------
 .../heatingelement/modal/modal.component.ts   |  10 --
 2 files changed, 30 insertions(+), 85 deletions(-)

diff --git a/ui/src/app/edge/live/heatingelement/modal/modal.component.html b/ui/src/app/edge/live/heatingelement/modal/modal.component.html
index 30ed79df006..4dc13852503 100644
--- a/ui/src/app/edge/live/heatingelement/modal/modal.component.html
+++ b/ui/src/app/edge/live/heatingelement/modal/modal.component.html
@@ -130,81 +130,36 @@
                                 </ion-grid>
                             </ion-card-content>
                             <ion-card-content>
-                                <ion-grid>
-                                    <ion-row class="ion-justify-content-center">
-                                        <ion-segment (ionChange)="updateWorkMode($event)"
-                                            [value]="formGroup.value.workMode" class="small">
-                                            <ion-segment-button value="TIME">
-                                                <ion-icon color="primary" name="sunny-outline">
-                                                </ion-icon>
-                                                <ion-label translate>
-                                                    Edge.Index.Widgets.Heatingelement.time
-                                                </ion-label>
-                                            </ion-segment-button>
-                                            <ion-segment-button value="KWH">
-                                                <ion-icon color="primary" name="battery-charging-outline">
-                                                </ion-icon>
-                                                <ion-label>
-                                                    KWH
-                                                </ion-label>
-                                            </ion-segment-button>
-                                        </ion-segment>
-                                    </ion-row>
-                                </ion-grid>
-                                <ng-container *ngIf="formGroup.value.workMode == 'TIME'">
-                                    <table class="full_width">
-                                        <tr>
-                                            <ion-range (ionChange)="updateMinTime($event)" style="width: 100%"
-                                                color="dark" pin="true" min="1" max="10" style="padding-top: 8px;"
-                                                [value]="component.properties.minTime" debounce="500">
-                                                <ion-label slot="start">
-                                                    {{ 1 | unitvalue:'H'}}
-                                                </ion-label>
-                                                <ion-label slot="end">
-                                                    {{ 10 | unitvalue:'H'}}
-                                                </ion-label>
-                                            </ion-range>
-                                        </tr>
-                                    </table>
-                                    <table class="full_width"
-                                        *ngIf="currentData.channel[component.id + '/ForceStartAtSecondOfDay'] as forceStartAtSecondOfDay">
-                                        <tr>
-                                            <td style="width: 65%" translate>
-                                                Edge.Index.Widgets.Heatingelement.timeCountdown
-                                            </td>
-                                            <td style="width: 35%" class="align_right">
-                                                {{ forceStartAtSecondOfDay * 1000 | date:'H:mm':'UTC' }}&nbsp;h
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </ng-container>
-                                <ng-container *ngIf="formGroup.value.workMode == 'KWH'">
-                                    <table class="full_width">
-                                        <tr>
-                                            <ion-range (ionChange)="updateMinKwh($event)" style="width: 100%" min="1"
-                                                max="60" color="dark" pin="true" style="padding-top: 8px;"
-                                                debounce="500" [value]="component.properties.minKwh">
-                                                <ion-label slot="start">
-                                                    {{ 1000 | unitvalue:'kWh'}}
-                                                </ion-label>
-                                                <ion-label slot="end">
-                                                    {{ 60000 | unitvalue:'kWh'}}
-                                                </ion-label>
-                                            </ion-range>
-                                        </tr>
-                                    </table>
-                                    <table class="full_width"
-                                        *ngIf="currentData.channel[component.id + '/ForceStartAtSecondOfDay'] as forceStartAtSecondOfDay">
-                                        <tr>
-                                            <td style="width: 65%" translate>
-                                                Edge.Index.Widgets.Heatingelement.timeCountdown
-                                            </td>
-                                            <td style="width: 35%" class="align_right">
-                                                {{ forceStartAtSecondOfDay * 1000 | date:'H:mm':'UTC' }}&nbsp;h
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </ng-container>
+                                <table class="full_width">
+                                    <tr>
+                                        <td style="width: 100%;">
+                                            Mindeslaufzeit
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <ion-range (ionChange)="updateMinTime($event)" style="width: 100%" color="dark"
+                                            pin="true" min="1" max="10" style="padding-top: 8px;"
+                                            [value]="component.properties.minTime" debounce="500">
+                                            <ion-label slot="start">
+                                                {{ 1 | unitvalue:'H'}}
+                                            </ion-label>
+                                            <ion-label slot="end">
+                                                {{ 10 | unitvalue:'H'}}
+                                            </ion-label>
+                                        </ion-range>
+                                    </tr>
+                                </table>
+                                <table class="full_width"
+                                    *ngIf="currentData.channel[component.id + '/ForceStartAtSecondOfDay'] as forceStartAtSecondOfDay">
+                                    <tr>
+                                        <td style="width: 65%" translate>
+                                            Edge.Index.Widgets.Heatingelement.timeCountdown
+                                        </td>
+                                        <td style="width: 35%" class="align_right">
+                                            {{ forceStartAtSecondOfDay * 1000 | date:'H:mm':'UTC' }}&nbsp;h
+                                        </td>
+                                    </tr>
+                                </table>
                             </ion-card-content>
                         </ng-container>
                     </ng-container>
diff --git a/ui/src/app/edge/live/heatingelement/modal/modal.component.ts b/ui/src/app/edge/live/heatingelement/modal/modal.component.ts
index f2165cb3644..9e3b57d7bb8 100644
--- a/ui/src/app/edge/live/heatingelement/modal/modal.component.ts
+++ b/ui/src/app/edge/live/heatingelement/modal/modal.component.ts
@@ -95,16 +95,6 @@ export class HeatingElementModalComponent implements OnInit {
         this.formGroup.controls['minTime'].markAsDirty();
     }
 
-    updateMinKwh(event: CustomEvent) {
-        this.formGroup.controls['minKwh'].setValue(event.detail.value);
-        this.formGroup.controls['minKwh'].markAsDirty()
-    }
-
-    updateWorkMode(event: CustomEvent) {
-        this.formGroup.controls['workMode'].setValue(event.detail.value);
-        this.formGroup.controls['workMode'].markAsDirty()
-    }
-
     updateDefaultLevel(event: CustomEvent) {
         this.formGroup.controls['defaultLevel'].setValue(event.detail.value);
         this.formGroup.controls['defaultLevel'].markAsDirty()

From cbc6519f04cd77bcae16505de43e946ea239209f Mon Sep 17 00:00:00 2001
From: Fabian Schwarzbeck <fabian.schwarzbeck@fenecon.de>
Date: Thu, 14 May 2020 13:44:52 +0200
Subject: [PATCH 5/6] add metered consumption to advanced widget

---
 .../consumption/consumption.component.html    |  5 +-
 .../live/consumption/consumption.component.ts |  7 ++-
 .../consumption/modal/modal.component.html    | 60 +++++++++++++------
 .../live/consumption/modal/modal.component.ts |  4 ++
 4 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/ui/src/app/edge/live/consumption/consumption.component.html b/ui/src/app/edge/live/consumption/consumption.component.html
index 187c02decf2..28ec020013f 100644
--- a/ui/src/app/edge/live/consumption/consumption.component.html
+++ b/ui/src/app/edge/live/consumption/consumption.component.html
@@ -55,9 +55,12 @@
                     <tr *ngIf="evcsComponents.length != 0 || consumptionMeterComponents.length != 0">
                         <td style="width: 65%" translate>General.otherConsumption</td>
                         <ng-container *ngIf="sum.activePower - getTotalOtherPower() as otherPower">
-                            <td style="width: 35%" class="align_right">
+                            <td style="width: 35%" class="align_right" *ngIf="otherPower > 0">
                                 {{ otherPower | unitvalue:'kW' }}
                             </td>
+                            <td style="width: 35%" class="align_right" *ngIf="otherPower <= 0">
+                                {{ 0 | unitvalue:'kW' }}
+                            </td>
                         </ng-container>
                     </tr>
                 </table>
diff --git a/ui/src/app/edge/live/consumption/consumption.component.ts b/ui/src/app/edge/live/consumption/consumption.component.ts
index 3a7f805bda8..75c90dcbaeb 100644
--- a/ui/src/app/edge/live/consumption/consumption.component.ts
+++ b/ui/src/app/edge/live/consumption/consumption.component.ts
@@ -66,14 +66,17 @@ export class ConsumptionComponent {
       componentProps: {
         edge: this.edge,
         evcsComponents: this.evcsComponents,
+        consumptionMeterComponents: this.consumptionMeterComponents,
         currentTotalChargingPower: this.currentTotalChargingPower,
-        sumOfChannel: this.sumOfChannel
+        currentTotalConsumptionMeterPower: this.currentTotalConsumptionMeterPower,
+        sumOfChannel: this.sumOfChannel,
+        getTotalOtherPower: this.getTotalOtherPower,
       }
     });
     return await modal.present();
   }
 
-  public getTotalOtherPower() {
+  public getTotalOtherPower(): number {
     return this.currentTotalChargingPower() + this.currentTotalConsumptionMeterPower();
   }
 
diff --git a/ui/src/app/edge/live/consumption/modal/modal.component.html b/ui/src/app/edge/live/consumption/modal/modal.component.html
index 6d93c42b89c..6bf9c1ad197 100644
--- a/ui/src/app/edge/live/consumption/modal/modal.component.html
+++ b/ui/src/app/edge/live/consumption/modal/modal.component.html
@@ -72,20 +72,41 @@
     </ion-card-content>
   </ng-container>
 
-  <ng-container *ngIf="evcsComponents.length != 0 && (edge.currentData | async)['channel'] as currentData">
-    <ng-container *ngFor="let component of evcsComponents">
-      <ion-card-content class="underline">
-        <table class="full_width">
-          <tr>
-            <td style="width:65%" *ngIf="component.id == component.alias">{{component.id}}</td>
-            <td style="width: 65%" *ngIf="component.id != component.alias">{{component.alias}}
-            </td>
-            <td class="align_right" style="width: 35%">
-              {{ currentData[component.id + '/ChargePower'] | unitvalue:'W' }}
-            </td>
-          </tr>
-        </table>
-      </ion-card-content>
+  <ng-container *ngIf="(edge.currentData | async)['channel'] as currentData">
+    <ng-container *ngIf="evcsComponents.length > 0">
+      <ng-container *ngFor="let component of evcsComponents">
+        <ion-card-content class="underline">
+          <table class="full_width">
+            <tr>
+              <td style="width:65%" *ngIf="component.id == component.alias">{{component.id}}</td>
+              <td style="width: 65%" *ngIf="component.id != component.alias">{{component.alias}}
+              </td>
+              <td class="align_right" style="width: 35%">
+                {{ currentData[component.id + '/ChargePower'] | unitvalue:'W' }}
+              </td>
+            </tr>
+          </table>
+        </ion-card-content>
+      </ng-container>
+    </ng-container>
+
+    <ng-container *ngIf="consumptionMeterComponents.length > 0">
+      <ng-container *ngFor="let component of consumptionMeterComponents">
+        <ion-card-content class="underline">
+          <table class="full_width">
+            <tr>
+              <td style="width:65%" *ngIf="component.id == component.alias">{{component.id}}
+              </td>
+              <td style="width: 65%" *ngIf="component.id != component.alias">
+                {{component.alias}}
+              </td>
+              <td style="width:35%" class="align_right">
+                {{ currentData[component.id + '/ActivePower'] | unitvalue:'W' }}
+              </td>
+            </tr>
+          </table>
+        </ion-card-content>
+      </ng-container>
     </ng-container>
   </ng-container>
 
@@ -93,12 +114,15 @@
     <ng-container *ngIf="edge.currentData | async as currentData">
       <ng-container *ngIf="currentData.summary.consumption as sum">
         <ion-card-content>
-          <table class="full_width" *ngIf="evcsComponents.length != 0">
+          <table class="full_width" *ngIf="evcsComponents.length != 0  || consumptionMeterComponents.length != 0">
             <tr>
               <td style="width: 65%" translate>General.otherConsumption</td>
-              <ng-container *ngIf="sum.activePower - currentTotalChargingPower() as otherPower">
-                <td style="width: 35%" class="align_right">
-                  {{ otherPower | unitvalue:'W'}}
+              <ng-container *ngIf="sum.activePower - getTotalOtherPower() as otherPower">
+                <td style="width: 35%" class="align_right" *ngIf="otherPower > 0">
+                  {{ otherPower | unitvalue:'W' }}
+                </td>
+                <td style="width: 35%" class="align_right" *ngIf="otherPower <= 0">
+                  {{ 0 | unitvalue:'W' }}
                 </td>
               </ng-container>
             </tr>
diff --git a/ui/src/app/edge/live/consumption/modal/modal.component.ts b/ui/src/app/edge/live/consumption/modal/modal.component.ts
index 29d909a10d7..d931b7d7bc7 100644
--- a/ui/src/app/edge/live/consumption/modal/modal.component.ts
+++ b/ui/src/app/edge/live/consumption/modal/modal.component.ts
@@ -12,7 +12,11 @@ export class ConsumptionModalComponent {
 
     @Input() public edge: Edge;
     @Input() public evcsComponents: EdgeConfig.Component[];
+    @Input() public consumptionMeterComponents: EdgeConfig.Component[];
     @Input() public currentTotalChargingPower: () => number;
+    @Input() public currentTotalConsumptionMeterPower: () => number;
+    @Input() public sumOfChannel: () => number;
+    @Input() public getTotalOtherPower: () => number;
 
     public config: EdgeConfig = null;
 

From d0346d1f4c7ea044ac5e30ebd24304424ebef988 Mon Sep 17 00:00:00 2001
From: Fabian Schwarzbeck <fabian.schwarzbeck@fenecon.de>
Date: Mon, 18 May 2020 08:26:02 +0200
Subject: [PATCH 6/6] adjust help links in advanced widgets

---
 ui/src/app/edge/live/chpsoc/modal/modal.component.html        | 3 ++-
 ui/src/app/edge/live/evcs/modal/modal.page.html               | 3 ++-
 .../app/edge/live/fixdigitaloutput/modal/modal.component.html | 2 +-
 .../app/edge/live/heatingelement/modal/modal.component.html   | 4 ++++
 .../app/edge/live/singlethreshold/modal/modal.component.html  | 3 ++-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/edge/live/chpsoc/modal/modal.component.html b/ui/src/app/edge/live/chpsoc/modal/modal.component.html
index 7e5da8caea7..96cfaeb4393 100644
--- a/ui/src/app/edge/live/chpsoc/modal/modal.component.html
+++ b/ui/src/app/edge/live/chpsoc/modal/modal.component.html
@@ -2,7 +2,8 @@
     <ion-toolbar color="primary">
         <ion-title>{{ component.alias }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button target="_blank" href="https://docs.fenecon.de/de/_/latest/fems/fems-app/bhkw.html">
+            <ion-button target="_blank"
+                href="https://openems.github.io/openems.io/openems/latest/edge/controller.html#_chp_control_via_state_of_charge_soc">
                 <ion-icon name="help-circle-outline"></ion-icon>
             </ion-button>
             <ion-button (click)="modalCtrl.dismiss()">
diff --git a/ui/src/app/edge/live/evcs/modal/modal.page.html b/ui/src/app/edge/live/evcs/modal/modal.page.html
index dcc53324838..78081376f32 100644
--- a/ui/src/app/edge/live/evcs/modal/modal.page.html
+++ b/ui/src/app/edge/live/evcs/modal/modal.page.html
@@ -5,7 +5,8 @@
                 {{ evcsComponent.alias }}
             </ion-title>
             <ion-buttons slot="end">
-                <ion-button target="_blank" href="https://docs.fenecon.de/de/_/latest/fems/fems-app/evcs.html">
+                <ion-button target="_blank"
+                    href="https://openems.github.io/openems.io/openems/latest/edge/controller.html#_evcs">
                     <ion-icon name="help-circle-outline"></ion-icon>
                 </ion-button>
                 <ion-button (click)="modalCtrl.dismiss()">
diff --git a/ui/src/app/edge/live/fixdigitaloutput/modal/modal.component.html b/ui/src/app/edge/live/fixdigitaloutput/modal/modal.component.html
index 54bb8442e55..c22dc08838f 100644
--- a/ui/src/app/edge/live/fixdigitaloutput/modal/modal.component.html
+++ b/ui/src/app/edge/live/fixdigitaloutput/modal/modal.component.html
@@ -3,7 +3,7 @@
         <ion-title>{{ component.alias }}</ion-title>
         <ion-buttons slot="end">
             <ion-button target="_blank"
-                href="https://docs.fenecon.de/de/_/latest/fems/fems-app/manuelle-relaissteuerung.html">
+                href="https://openems.github.io/openems.io/openems/latest/edge/controller.html#_io_fix_digital_output">
                 <ion-icon name="help-circle-outline"></ion-icon>
             </ion-button>
             <ion-button (click)="modalCtrl.dismiss()">
diff --git a/ui/src/app/edge/live/heatingelement/modal/modal.component.html b/ui/src/app/edge/live/heatingelement/modal/modal.component.html
index 4dc13852503..3c0a9edb221 100644
--- a/ui/src/app/edge/live/heatingelement/modal/modal.component.html
+++ b/ui/src/app/edge/live/heatingelement/modal/modal.component.html
@@ -2,6 +2,10 @@
     <ion-toolbar class="ion-justify-content-center" color="primary">
         <ion-title>{{ component.alias }}</ion-title>
         <ion-buttons slot="end">
+            <ion-button target="_blank"
+                href="https://openems.github.io/openems.io/openems/latest/edge/controller.html#_io_heating_element">
+                <ion-icon name="help-circle-outline"></ion-icon>
+            </ion-button>
             <ion-button (click)="modalCtrl.dismiss()">
                 <ion-icon name="close"></ion-icon>
             </ion-button>
diff --git a/ui/src/app/edge/live/singlethreshold/modal/modal.component.html b/ui/src/app/edge/live/singlethreshold/modal/modal.component.html
index c4d346d16b2..f5e307b2873 100644
--- a/ui/src/app/edge/live/singlethreshold/modal/modal.component.html
+++ b/ui/src/app/edge/live/singlethreshold/modal/modal.component.html
@@ -2,7 +2,8 @@
   <ion-toolbar mode="md" class="ion-justify-content-center" color="primary">
     <ion-title>{{ component.alias }}</ion-title>
     <ion-buttons slot="end">
-      <ion-button target="_blank" href="https://docs.fenecon.de/de/_/latest/fems/fems-app/schwellwertsteuerung.html">
+      <ion-button target="_blank"
+        href="https://openems.github.io/openems.io/openems/latest/edge/controller.html#_io_channel_single_threshold">
         <ion-icon name="help-circle-outline"></ion-icon>
       </ion-button>
       <ion-button (click)="modalCtrl.dismiss()">