UI: FlatWidget for Storage

ui/src/app/edge/live/storage/modal/modal.component.ts → ui/src/app/edge/live/common/storage/modal/modal.component.ts

@@ -9,6 +9,7 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class StorageModalComponent {
 
+    // TODO after refactoring of Model: subscribe to EssActivePowerL1/L2/L3 here instead of Flat Widget
 
     @Input() edge: Edge;
     @Input() config: EdgeConfig;

ui/src/app/edge/live/common/storage/storage.component.html

@@ -0,0 +1,36 @@
+<oe-flat-widget [img]="storageItem" [title]="'General.storageSystem'| translate" (click)="presentModal()">
+    <ng-container *ngFor="let component of essComponents, let i = index">
+        <!-- Show Alias if there are more than one ESS -->
+        <ng-container *ngIf="essComponents.length > 1">
+            <oe-flat-widget-line [name]="component.alias">
+            </oe-flat-widget-line>
+        </ng-container>
+
+        <oe-flat-widget-percentagebar [channelAddress]="component.id + '/Soc'">
+        </oe-flat-widget-percentagebar>
+
+        <ng-container *ngIf="!isHybridEss[component.id], else HybridEss">
+            <!-- For AC system: show ActivePower channel -->
+            <oe-flat-widget-line [name]="'General.chargePower' | translate"
+                [channelAddress]="component.id + '/ActivePower'" [converter]="convertChargePower">
+            </oe-flat-widget-line>
+            <oe-flat-widget-line [name]="'General.dischargePower' | translate"
+                [channelAddress]="component.id + '/ActivePower'" [converter]="convertDischargePower">
+            </oe-flat-widget-line>
+        </ng-container>
+
+        <ng-template #HybridEss>
+            <!-- For DC/hybrid system: show DcDischargePower channel -->
+            <oe-flat-widget-line [name]="'General.chargePower' | translate"
+                [channelAddress]="component.id + '/DcDischargePower'" [converter]="convertChargePower">
+            </oe-flat-widget-line>
+            <oe-flat-widget-line [name]="'General.dischargePower' | translate"
+                [channelAddress]="component.id + '/DcDischargePower'" [converter]="convertDischargePower">
+            </oe-flat-widget-line>
+        </ng-template>
+
+        <oe-flat-widget-horizontal-line [components]="essComponents" [index]="i">
+        </oe-flat-widget-horizontal-line>
+
+    </ng-container>
+</oe-flat-widget>

ui/src/app/edge/live/common/storage/storage.component.ts

@@ -0,0 +1,132 @@
+import { formatNumber } from '@angular/common';
+import { Component } from '@angular/core';
+import { CurrentData } from "src/app/shared/shared";
+import { ChannelAddress, EdgeConfig, Utils } from '../../../../shared/shared';
+import { AbstractFlatWidget } from '../../flat/abstract-flat-widget';
+import { StorageModalComponent } from './modal/modal.component';
+
+@Component({
+    selector: 'storage',
+    templateUrl: './storage.component.html'
+})
+export class StorageComponent extends AbstractFlatWidget {
+
+    public essComponents: EdgeConfig.Component[] = [];
+    public chargerComponents: EdgeConfig.Component[] = [];
+    public storageItem: string = null;
+    public isHybridEss: boolean[] = [];
+
+    protected getChannelAddresses() {
+        let channelAddresses: ChannelAddress[] = [
+            new ChannelAddress('_sum', 'EssSoc')
+        ];
+
+        // Get Chargers
+        // TODO should be moved to Modal
+        this.chargerComponents = this.config
+            .getComponentsImplementingNature("io.openems.edge.ess.dccharger.api.EssDcCharger")
+            .filter(component => component.isEnabled);
+        for (let component of this.chargerComponents) {
+            channelAddresses.push(
+                new ChannelAddress(component.id, 'ActualPower'),
+            )
+        }
+
+        // Get ESSs
+        this.essComponents = this.config
+            .getComponentsImplementingNature("io.openems.edge.ess.api.SymmetricEss")
+            .filter(component => component.isEnabled && !this.config
+                .getNatureIdsByFactoryId(component.factoryId)
+                .includes("io.openems.edge.ess.api.MetaEss"));
+
+        for (let component of this.config
+            .getComponentsImplementingNature("io.openems.edge.ess.api.SymmetricEss")
+            .filter(component => component.isEnabled && !this.config
+                .getNatureIdsByFactoryId(component.factoryId)
+                .includes("io.openems.edge.ess.api.MetaEss"))) {
+
+            // Check if essComponent is HybridEss
+            this.isHybridEss[component.id] = this.config
+                .getNatureIdsByFactoryId(component.factoryId)
+                .includes("io.openems.edge.ess.api.HybridEss");
+
+            channelAddresses.push(
+                new ChannelAddress(component.id, 'Soc'),
+                new ChannelAddress(component.id, 'Capacity'),
+            );
+            if (this.config.factories[component.factoryId].natureIds.includes("io.openems.edge.ess.api.AsymmetricEss")) {
+                channelAddresses.push(
+                    new ChannelAddress(component.id, 'ActivePowerL1'),
+                    new ChannelAddress(component.id, 'ActivePowerL2'),
+                    new ChannelAddress(component.id, 'ActivePowerL3')
+                );
+            }
+        }
+        return channelAddresses
+    }
+
+    protected onCurrentData(currentData: CurrentData) {
+        // Check total State_of_Charge for dynamical icon in widget-header
+        let soc = currentData.allComponents['_sum/EssSoc'];
+        this.storageItem = "assets/img/" + Utils.getStorageSocImage(soc);
+    }
+
+    /**
+      * Use 'convertChargePower' to convert/map a value
+      * 
+      * @param value takes @Input value or channelAddress for chargePower
+      * @returns value
+      */
+    public convertChargePower = (value: any): string => {
+        return this.convertPower(Utils.multiplySafely(value, -1), true);
+    }
+
+    /**
+     * Use 'convertDischargePower' to convert/map a value
+     * 
+     * @param value takes @Input value or channelAddress for dischargePower
+     * @returns value
+     */
+    public convertDischargePower = (value: any): string => {
+        return this.convertPower(value)
+    }
+
+    /**
+     * Use 'convertPower' to check whether 'charge/discharge' and to be only showed when not negative
+     * 
+     * @param value takes passed value when called 
+     * @returns only positive and 0
+     */
+    public convertPower(value: number, isCharge?: boolean) {
+        if (value == null) {
+            return '-';
+        }
+
+        let thisValue: number = (value / 1000);
+
+        // Round thisValue to Integer when decimal place equals 0 
+        if (thisValue > 0) {
+            return formatNumber(thisValue, 'de', '1.0-1') + " kW"; // TODO get locale dynamically
+
+        } else if (thisValue == 0 && isCharge) {
+            // if thisValue is 0, then show only when charge and not discharge
+            return '0 kW';
+
+        } else {
+            return '-'
+        }
+    }
+
+    async presentModal() {
+        const modal = await this.modalController.create({
+            component: StorageModalComponent,
+            componentProps: {
+                edge: this.edge,
+                config: this.config,
+                essComponents: this.essComponents,
+                chargerComponents: this.chargerComponents,
+            }
+        });
+        return await modal.present();
+    }
+}

ui/src/app/edge/live/energymonitor/chart/section/storage.component.ts

@@ -1,10 +1,10 @@
-import { AbstractSection, EnergyFlow, Ratio, SvgEnergyFlow, SvgSquare, SvgSquarePosition } from './abstractsection.component';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, OnDestroy } from '@angular/core';
-import { DefaultTypes } from '../../../../../shared/service/defaulttypes';
-import { Service, Utils } from '../../../../../shared/shared';
 import { TranslateService } from '@ngx-translate/core';
-import { trigger, state, style, animate, transition } from '@angular/animations';
 import { UnitvaluePipe } from 'src/app/shared/pipe/unitvalue/unitvalue.pipe';
+import { DefaultTypes } from '../../../../../shared/service/defaulttypes';
+import { Service, Utils } from '../../../../../shared/shared';
+import { AbstractSection, EnergyFlow, Ratio, SvgEnergyFlow, SvgSquare, SvgSquarePosition } from './abstractsection.component';
 
 @Component({
     selector: '[storagesection]',
@@ -148,29 +148,7 @@ export class StorageSectionComponent extends AbstractSection implements OnDestro
     }
 
     protected getImagePath(): string {
-        if (this.socValue < 11) {
-            return "storage_10_monitor.png"
-        } else if (this.socValue < 21) {
-            return "storage_20_monitor.png"
-        } else if (this.socValue < 31) {
-            return "storage_30_monitor.png"
-        } else if (this.socValue < 41) {
-            return "storage_40_monitor.png"
-        } else if (this.socValue < 51) {
-            return "storage_50_monitor.png"
-        } else if (this.socValue < 61) {
-            return "storage_60_monitor.png"
-        } else if (this.socValue < 71) {
-            return "storage_70_monitor.png"
-        } else if (this.socValue < 81) {
-            return "storage_80_monitor.png"
-        } else if (this.socValue < 91) {
-            return "storage_90_monitor.png"
-        } else if (this.socValue < 101) {
-            return "storage_100_monitor.png"
-        } else {
-            return "storage_empty_monitor.png"
-        }
+        return Utils.getStorageSocImage(this.socValue);
     }
 
     protected getValueText(value: number): string {

ui/src/app/edge/live/flat/flat-widget-line/abstract-flat-widget-line.ts

@@ -9,11 +9,6 @@ import { ChannelAddress, Edge, Service, Websocket } from "src/app/shared/shared"
 @Directive()
 export abstract class AbstractFlatWidgetLine implements OnDestroy {
 
-    /**
-     * True after this.edge, this.config and this.component are set.
-     */
-    public isInitialized: boolean = false;
-
     /**
      * Use `converter` to convert/map a CurrentData value to another value, e.g. an Enum number to a text.
      * 
@@ -45,12 +40,9 @@ export abstract class AbstractFlatWidgetLine implements OnDestroy {
 
     protected setValue(value: any) {
         this.displayValue = this.converter(value);
-
-        // announce initialized
-        this.isInitialized = true;
     }
 
-    protected subscribe(channelAddress?: ChannelAddress) {
+    protected subscribe(channelAddress: ChannelAddress) {
         this.service.setCurrentComponent('', this.route).then(edge => {
             this.edge = edge;
 

ui/src/app/edge/live/flat/flat-widget-line/flat-widget-horizontal-line.html

@@ -0,0 +1,3 @@
+<div *ngIf="index != (components.length - 1)"
+    style="border-bottom: 1px solid lightgray; width: 110%; margin-top: 2%; margin-bottom: 2%; margin-left: -5%;">
+</div>

ui/src/app/edge/live/flat/flat-widget-line/flat-widget-horizontal-line.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from "@angular/core";
+
+/**
+ * Shows a horizontal line on all but the last entry of a flat widget.
+ */
+@Component({
+    selector: 'oe-flat-widget-horizontal-line',
+    templateUrl: './flat-widget-horizontal-line.html'
+})
+export class FlatWidgetHorizontalLine {
+    /** Components-Array to iterate over */
+    @Input() components: any[];
+    /** index is an iterator */
+    @Input() index: number;
+}

ui/src/app/edge/live/flat/flat-widget-line/flat-widget-line.html

@@ -1,15 +1,12 @@
-<ng-container *ngIf="isInitialized">
-    <table class="full_width">
-        <tr>
-            <!-- Name of Parameter on the left side -->
-            <td style="width:65%">
-                <ng-container *ngIf="name">{{ name }}</ng-container>
-            </td>
-
-            <!-- Value of Parameter on the right side -->
-            <td style="width:35%" class="align_right">
-                <ng-container *ngIf="displayValue">{{ displayValue }}</ng-container>
-            </td>
-        </tr>
-    </table>
-</ng-container>
+<table class="full_width">
+    <tr>
+        <!-- Name of Parameter on the left side -->
+        <td style="width:65%">
+            <ng-container *ngIf="name">{{ name }}</ng-container>
+        </td>
+        <!-- Value of Parameter on the right side -->
+        <td style="width:35%" class="align_right">
+            <ng-container *ngIf="displayValue">{{ displayValue }}</ng-container>
+        </td>
+    </tr>
+</table>

ui/src/app/edge/live/flat/flat-widget-line/flat-widget-percentagebar.html

@@ -1,9 +1,11 @@
-<ng-container *ngIf="isInitialized">
-    <svg width="100%" height="20">
-        <rect width="100%" rx="5" ry="5" height="20" style="fill:#f4f4f4" />
-        <rect *ngIf="displayValue" x="1" y="2" rx="5" ry="5" attr.width="{{displayValue}}%" height="16"
-            style="fill:#2d8fab" />
-        <text x="50%" y="58%" dominant-baseline="middle" text-anchor="middle" style="font-weight: 500">{{ displayValue |
-            number:'1.0-0' }}&nbsp;%</text>
-    </svg>
-</ng-container>
+<svg width="100%" height="20">
+    <rect width="100%" rx="5" ry="5" height="20" style="fill:#f4f4f4" />
+    <rect *ngIf="displayValue" x="1" y="2" rx="5" ry="5" attr.width="{{ displayValue }}%" height="16"
+        style="fill:#2d8fab" />
+    <text x="50%" y="58%" dominant-baseline="middle" text-anchor="middle" style="font-weight: 500">
+        <ng-container *ngIf="displayValue, else noValue">
+            {{ displayValue | number:'1.0-0' }}&nbsp;%
+        </ng-container>
+        <ng-template #noValue>-</ng-template>
+    </text>
+</svg>