menubar live+daily values

src/main/angular/src/app/app.component.html

@@ -1,5 +1,33 @@
 <div class="menubar">
+
   <div class="menuitem menuitemLeft" *ngFor="let route of menubar()" [routerLink]="[route.routerLink]" routerLinkActive="menuitemActive">{{ route.title }}</div>
+
+  <div class="menuitem electricity">
+
+    <ng-container *ngIf="isDelivering">
+      <div class="halfLine">
+        <div class="delivery">{{ powerDelivery?.formatted2 }}</div>
+        <div>&nbsp;+&nbsp;</div>
+        <div class="self">{{ powerSelf?.formatted2 }}</div>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="!isDelivering">
+      <div class="halfLine">
+        <div class="self">{{ powerProduction?.formatted2 }}</div>
+        <div>&nbsp;+&nbsp;</div>
+        <div class="purchase">{{ powerPurchase?.formatted2 }}</div>
+      </div>
+    </ng-container>
+
+    <div class="halfLine">
+      <div class="delivery">{{ aggregations.energyDeliveredPercent?.formatted2 }}</div>
+      <div>&nbsp;/&nbsp;</div>
+      <div class="purchase">{{ aggregations.energyPurchasedPercent?.formatted2 }}</div>
+    </div>
+
+  </div>
+
 </div>
 
 <router-outlet/>

src/main/angular/src/app/app.component.less

@@ -21,4 +21,18 @@
     background-color: #006ebc;
   }
 
+  .electricity {
+    float: right;
+    padding-right: 0.25em;
+    font-size: 55%;
+
+    .halfLine {
+
+      div {
+        float: right;
+      }
+
+    }
+  }
+
 }

src/main/angular/src/app/app.component.ts

@@ -1,15 +1,68 @@
-import {Component} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {menubar} from './app.routes';
-import {NgForOf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
+import {SeriesService} from './series/series.service';
+import {Subscription, timer} from 'rxjs';
+import {Value} from './series/value/Value';
+import {AggregationWrapperDto} from './series/AggregationWrapperDto';
+import {Alignment} from './series/Alignment';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, RouterLink, NgForOf, RouterLinkActive],
+  imports: [RouterOutlet, RouterLink, NgForOf, RouterLinkActive, NgIf],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy {
 
   protected readonly menubar = menubar;
+
+  protected aggregations: AggregationWrapperDto = AggregationWrapperDto.EMPTY;
+
+  private subs: Subscription[] = [];
+
+  constructor(
+    readonly seriesService: SeriesService,
+  ) {
+    //
+  }
+
+  ngOnInit(): void {
+    this.subs.push(this.seriesService.subscribeAny());
+    this.subs.push(timer(0, 5000).subscribe(() => this.fetch()));
+  }
+
+  ngOnDestroy(): void {
+    this.subs.forEach(sub => sub.unsubscribe());
+  }
+
+  get isDelivering(): boolean {
+    return (this.powerDelivery?.value || 0) > 0;
+  }
+
+  get powerProduction(): Value | undefined {
+    return this.seriesService.powerProduced.series?.lastValue;
+  }
+
+  get powerBalance(): Value | undefined {
+    return this.seriesService.powerBalance.series?.lastValue;
+  }
+
+  get powerSelf(): Value | undefined {
+    return this.powerProduction?.minus(this.powerDelivery)?.notNegative();
+  }
+
+  get powerPurchase(): Value | undefined {
+    return this.powerBalance?.notNegative();
+  }
+
+  get powerDelivery(): Value | undefined {
+    return this.powerBalance?.negate()?.notNegative();
+  }
+
+  private fetch() {
+    this.seriesService.aggregations(Alignment.DAY, 0, aggregations => this.aggregations = aggregations);
+  }
+
 }

src/main/angular/src/app/app.routes.ts

@@ -22,8 +22,8 @@ export class Path {
 
 export const ROUTING = {
   LIVE: new Path('Live', 'Live', true),
-  HISTORY: new Path('History', 'Historie', true),
-  VIEW_LIST: new Path('ViewList', 'Ansichten', true),
+  HISTORY: new Path('History', 'History', true),
+  VIEW_LIST: new Path('ViewList', 'Views', true),
   GREENHOUSE: new Path('Greenhouse', 'Gewächshaus', false),
 }