basic angular ui

2025-02-26 16:16:01 +01:00 · 2025-02-26 16:16:01 +01:00 · 617c9a2ebb
commit 617c9a2ebb
parent 7f39ee6c41
41 changed files with 16469 additions and 1 deletions
--- a/application.properties
+++ b/application.properties
@ -9,3 +9,5 @@ spring.datasource.password=password
 #-
 de.ph87.data.message.receive.mqtt.host=10.0.0.50
 de.ph87.data.message.receive.mqtt.topic=#
+#-
+server.port=8081
--- a/pom.xml
+++ b/pom.xml
@ -26,6 +26,10 @@
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
+    <dependency>
+      <groupId>org.springframework.boot</groupId>
+      <artifactId>spring-boot-starter-websocket</artifactId>
+    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-jpa</artifactId>
--- a/src/main/angular/.editorconfig
+++ b/src/main/angular/.editorconfig
@ -0,0 +1,18 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+# noinspection EditorConfigKeyCorrectness
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/src/main/angular/.gitignore
+++ b/src/main/angular/.gitignore
@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/src/main/angular/README.md
+++ b/src/main/angular/README.md
@ -0,0 +1,59 @@
+# Angular
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.8.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
--- a/src/main/angular/angular.json
+++ b/src/main/angular/angular.json
@ -0,0 +1,124 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "less",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/angular",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "less",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.less"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular:build:production"
+            },
+            "development": {
+              "buildTarget": "angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "less",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.less"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/main/angular/package-lock.json
+++ b/src/main/angular/package-lock.json
--- a/src/main/angular/package.json
+++ b/src/main/angular/package.json
@ -0,0 +1,40 @@
+{
+  "name": "angular",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "deploy": "scp -P2222 -r dist/angular/browser/* root@10.255.0.1:/srv/Data/www/"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^19.1.0",
+    "@angular/common": "^19.1.0",
+    "@angular/compiler": "^19.1.0",
+    "@angular/core": "^19.1.0",
+    "@angular/forms": "^19.1.0",
+    "@angular/platform-browser": "^19.1.0",
+    "@angular/platform-browser-dynamic": "^19.1.0",
+    "@angular/router": "^19.1.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0",
+    "@stomp/ng2-stompjs": "^8.0.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.1.8",
+    "@angular/cli": "^19.1.8",
+    "@angular/compiler-cli": "^19.1.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.7.2"
+  }
+}
--- a/src/main/angular/public/favicon.svg
+++ b/src/main/angular/public/favicon.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" ?>
+<svg viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#9f4c4c" d="M550,842c-0.474,6.588-4.111,13.6-7.5,18L524,842h26Z" transform="translate(-490 -810)"/>
+  <path fill="#bf873e" d="M538.432,863.732A30.047,30.047,0,0,1,490,839.92c0-15.7,11.48-28.536,28-29.92v32Z" transform="translate(-490 -810)"/>
+  <path fill="#5b75a0" d="M522,810a30.058,30.058,0,0,1,28,28H522V810Z" transform="translate(-490 -810)"/>
+</svg>
--- a/src/main/angular/src/app/app.component.html
+++ b/src/main/angular/src/app/app.component.html
@ -0,0 +1,87 @@
+<div class="section">
+
+  <div class="title">
+    Leistung
+  </div>
+
+  <div class="content">
+    <div class="entry consumption">
+      <div class="name">Verbrauch</div>
+      <div class="percent">&nbsp;</div>
+      <div class="value">{{ powerConsumption?.formatted }}</div>
+    </div>
+    <div class="entry purchase">
+      <div class="name">Bezug</div>
+      <div class="percent">{{ powerPurchasePercent?.formatted }}</div>
+      <div class="value">{{ powerPurchase?.formatted }}</div>
+    </div>
+    <div class="entry production">
+      <div class="name">Produktion</div>
+      <div class="percent">{{ powerProducedPercent?.formatted }}</div>
+      <div class="value">{{ powerProduced?.formatted }}</div>
+    </div>
+    <div class="entry self">
+      <div class="name">Eigenverbrauch</div>
+      <div class="percent">{{ powerSelfPercent?.formatted }}</div>
+      <div class="value">{{ powerSelf?.formatted }}</div>
+    </div>
+    <div class="entry delivery">
+      <div class="name">Einspeisung</div>
+      <div class="percent">{{ powerDeliveryPercent?.formatted }}</div>
+      <div class="value">{{ powerDelivery?.formatted }}</div>
+    </div>
+  </div>
+
+</div>
+
+<div class="section">
+
+  <div class="title">
+    Energie
+    <span class="live" *ngIf="interval">Live</span>
+    <span class="archive" *ngIf="!interval">Archiv</span>
+  </div>
+
+  <div class="option">
+    <button class="back" (click)="shiftAlignment(+1)">&larr;</button>
+    {{ alignment.display }}
+    <button class="next" (click)="shiftAlignment(-1)">&rarr;</button>
+  </div>
+
+  <div class="option">
+    <button class="back" (click)="shiftOffset(+1)">&larr;</button>
+    {{ alignment.offsetTitle(offset, locale) }}
+    <button class="next" (click)="shiftOffset(-1)" [disabled]="offset === 0">&rarr;</button>
+  </div>
+
+  <div class="content">
+    <div class="entry consumption">
+      <div class="name">Verbrauch</div>
+      <div class="percent">&nbsp;</div>
+      <div class="value">{{ aggregations.energyConsumed?.formatted }}</div>
+    </div>
+    <div class="entry purchase">
+      <div class="name">Bezug</div>
+      <div class="percent">{{ aggregations.energyPurchasedPercent?.formatted }}</div>
+      <div class="value">{{ aggregations.energyPurchased?.delta?.formatted }}</div>
+    </div>
+    <div class="entry production">
+      <div class="name">Produktion</div>
+      <div class="percent">{{ aggregations.energyProducedPercent?.formatted }}</div>
+      <div class="value">{{ aggregations.energyProduced?.delta?.formatted }}</div>
+    </div>
+    <div class="entry self">
+      <div class="name">Eigenverbrauch</div>
+      <div class="percent">{{ aggregations.energySelfPercent?.formatted }}</div>
+      <div class="value">{{ aggregations.energySelf?.formatted }}</div>
+    </div>
+    <div class="entry delivery">
+      <div class="name">Eingespeist</div>
+      <div class="percent">{{ aggregations.energyDeliveredPercent?.formatted }}</div>
+      <div class="value">{{ aggregations.energyDelivered?.delta?.formatted }}</div>
+    </div>
+  </div>
+
+</div>
+
+<router-outlet/>
--- a/src/main/angular/src/app/app.component.less
+++ b/src/main/angular/src/app/app.component.less
@ -0,0 +1,82 @@
+.section {
+  margin-bottom: 1em;
+
+  .back {
+    float: left;
+  }
+
+  .next {
+    float: right;
+  }
+
+  .title {
+    clear: left;
+    font-weight: bold;
+    font-size: 120%;
+    text-align: center;
+  }
+
+  .option {
+    clear: left;
+    text-align: center;
+  }
+
+  .content {
+
+    .entry {
+      clear: left;
+
+      .name {
+        float: left;
+        font-weight: bold;
+      }
+
+      .value {
+        float: right;
+      }
+
+      .percent {
+        float: right;
+        padding-top: 0.5em;
+        font-size: 60%;
+        width: 3.5em;
+        text-align: right;
+      }
+
+    }
+
+  }
+
+}
+
+.live {
+  font-size: 40%;
+  color: green;
+  vertical-align: top;
+}
+
+.archive {
+  font-size: 40%;
+  color: darkred;
+  vertical-align: top;
+}
+
+.consumption {
+  color: orange;
+}
+
+.purchase {
+  color: orangered;
+}
+
+.production {
+  color: dodgerblue;
+}
+
+.self {
+  color: forestgreen;
+}
+
+.delivery {
+  color: magenta;
+}
--- a/src/main/angular/src/app/app.component.ts
+++ b/src/main/angular/src/app/app.component.ts
@ -0,0 +1,113 @@
+import {Component, Inject, LOCALE_ID, OnDestroy, OnInit} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {Alignment} from './series/Alignment';
+import {AggregationWrapperDto} from './series/AggregationWrapperDto';
+import {SeriesService} from './series/series.service';
+import {Subscription} from 'rxjs';
+import {Value} from './value/Value';
+import {NgIf} from '@angular/common';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, NgIf],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.less'
+})
+export class AppComponent implements OnInit, OnDestroy {
+
+  protected aggregations: AggregationWrapperDto = AggregationWrapperDto.EMPTY;
+
+  protected alignment: Alignment = Alignment.DAY;
+
+  protected offset: number = 0;
+
+  protected interval: any;
+
+  private readonly subs: Subscription[] = [];
+
+  get powerProduced(): Value | undefined {
+    return this.seriesService.powerProduced.series?.lastValue;
+  }
+
+  get powerBalance(): Value | undefined {
+    return this.seriesService.powerBalance.series?.lastValue;
+  }
+
+  get powerPurchase(): Value | undefined {
+    return this.powerBalance?.notNegative();
+  }
+
+  get powerDelivery(): Value | undefined {
+    return this.powerBalance?.negate()?.notNegative();
+  }
+
+  get powerSelf(): Value | undefined {
+    return this.powerProduced?.minus(this.powerDelivery);
+  }
+
+  get powerConsumption(): Value | undefined {
+    return this.powerBalance?.plus(this.powerProduced);
+  }
+
+  get powerProducedPercent(): Value | undefined {
+    return this.powerProduced?.percent(this.powerConsumption);
+  }
+
+  get powerSelfPercent(): Value | undefined {
+    return this.powerSelf?.percent(this.powerProduced);
+  }
+
+  get powerPurchasePercent(): Value | undefined {
+    return this.powerPurchase?.percent(this.powerConsumption);
+  }
+
+  get powerDeliveryPercent(): Value | undefined {
+    return this.powerDelivery?.percent(this.powerProduced);
+  }
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    protected readonly seriesService: SeriesService,
+  ) {
+    //
+  }
+
+  ngOnInit(): void {
+    this.fetch();
+    this.subs.push(this.seriesService.subscribeAny());
+  }
+
+  ngOnDestroy(): void {
+    this.intervalStop();
+    this.subs.forEach(sub => sub.unsubscribe());
+  }
+
+  shiftOffset(delta: number) {
+    this.offset = Math.max(0, this.offset + delta);
+    this.fetch();
+  }
+
+  shiftAlignment(delta: number) {
+    this.alignment = this.alignment.plus(delta)
+    this.fetch();
+  }
+
+  private fetch() {
+    if (this.offset === 0) {
+      if (!this.interval) {
+        this.interval = setInterval(() => this.fetch(), 5000);
+      }
+    } else {
+      this.intervalStop();
+    }
+    this.seriesService.aggregations(this.alignment, this.offset, aggregations => this.aggregations = aggregations);
+  }
+
+  private intervalStop() {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+  }
+
+}
--- a/src/main/angular/src/app/app.config.ts
+++ b/src/main/angular/src/app/app.config.ts
@ -0,0 +1,23 @@
+import {ApplicationConfig, LOCALE_ID, provideZoneChangeDetection} from '@angular/core';
+import {provideRouter} from '@angular/router';
+
+import {routes} from './app.routes';
+import {provideHttpClient} from '@angular/common/http';
+
+import localeDe from '@angular/common/locales/de';
+import localeDeExtra from '@angular/common/locales/extra/de';
+import {registerLocaleData} from '@angular/common';
+import {stompServiceFactory} from './core/websocket';
+import {StompService} from '@stomp/ng2-stompjs';
+
+registerLocaleData(localeDe, 'de-DE', localeDeExtra);
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({eventCoalescing: true}),
+    provideRouter(routes),
+    provideHttpClient(),
+    {provide: StompService, useFactory: stompServiceFactory},
+    {provide: LOCALE_ID, useValue: 'de-DE'},
+  ]
+};
--- a/src/main/angular/src/app/app.routes.ts
+++ b/src/main/angular/src/app/app.routes.ts
@ -0,0 +1,3 @@
+import {Routes} from '@angular/router';
+
+export const routes: Routes = [];
--- a/src/main/angular/src/app/core/api.service.ts
+++ b/src/main/angular/src/app/core/api.service.ts
@ -0,0 +1,45 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {map, Subscription} from 'rxjs';
+import {StompService} from '@stomp/ng2-stompjs';
+import {FromJson, Next} from './types';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+
+  constructor(
+    protected readonly http: HttpClient,
+    private readonly stompService: StompService,
+  ) {
+    //
+  }
+
+  subscribeConnection(next: Next<boolean>): Subscription {
+    const c = this.stompService.connected$.subscribe(() => next(true));
+    const d = this.stompService.webSocketErrors$.subscribe(() => next(false));
+    const subscription = new Subscription(() => {
+      c.unsubscribe();
+      d.unsubscribe();
+    });
+    next(this.stompService.connected());
+    return subscription;
+  }
+
+  subscribe<T>(path: any[], fromJson: FromJson<T>, next: Next<T>): Subscription {
+    return this.stompService.subscribe(path.join('/')).pipe(map(m => fromJson(JSON.parse(m.body)))).subscribe(next);
+  }
+
+  getSingle<T>(path: any[], fromJson: FromJson<T>, next?: Next<T>): void {
+    this.http.get<any>(ApiService.url('http', path)).pipe(map(fromJson)).subscribe(next);
+  }
+
+  getList<T>(path: any[], fromJson: FromJson<T>, next?: Next<T[]>): void {
+    this.http.get<any[]>(ApiService.url('http', path)).pipe(map(list => list.map(fromJson))).subscribe(next);
+  }
+
+  static url(protocol: string, path: any[]) {
+    return `${protocol}${location.protocol.endsWith('s') ? 's' : ''}://${location.hostname}:8081/${path.join('/')}`;
+  }
+}
--- a/src/main/angular/src/app/core/types.ts
+++ b/src/main/angular/src/app/core/types.ts
@ -0,0 +1,3 @@
+export type FromJson<T> = (json: any) => T;
+
+export type Next<T> = (t: T) => any;
--- a/src/main/angular/src/app/core/validators.ts
+++ b/src/main/angular/src/app/core/validators.ts
@ -0,0 +1,13 @@
+export function validateString(value: any): string {
+  if (typeof value !== 'string') {
+    throw new Error('Not a string: ' + value);
+  }
+  return value as string;
+}
+
+export function validateNumber(value: any): number {
+  if (typeof value !== 'number') {
+    throw new Error('Not a number: ' + value);
+  }
+  return value as number;
+}
--- a/src/main/angular/src/app/core/websocket.ts
+++ b/src/main/angular/src/app/core/websocket.ts
@ -0,0 +1,15 @@
+import {StompService} from "@stomp/ng2-stompjs";
+import {ApiService} from './api.service';
+
+export function stompServiceFactory() {
+  const stomp = new StompService({
+    url: ApiService.url('ws', ['ws']),
+    debug: false,
+    heartbeat_in: 2000,
+    heartbeat_out: 2000,
+    reconnect_delay: 2000,
+    headers: {},
+  });
+  stomp.activate();
+  return stomp;
+}
--- a/src/main/angular/src/app/series/Aggregate.ts
+++ b/src/main/angular/src/app/series/Aggregate.ts
@ -0,0 +1,11 @@
+import {Series} from './Series';
+
+export abstract class Aggregate {
+
+  protected constructor(
+    readonly series: Series,
+  ) {
+    //
+  }
+
+}
--- a/src/main/angular/src/app/series/AggregationWrapperDto.ts
+++ b/src/main/angular/src/app/series/AggregationWrapperDto.ts
@ -0,0 +1,68 @@
+import {Alignment} from "./Alignment";
+
+import {MeterAggregate} from './meter/MeterAggregate';
+import {Aggregate} from './Aggregate';
+import {VaryingAggregate} from './varying/VaryingAggregate';
+
+import {Value} from '../value/Value';
+
+export class AggregationWrapperDto {
+
+  static readonly EMPTY: AggregationWrapperDto = new AggregationWrapperDto(Alignment.DAY, new Date(), []);
+
+  readonly energyProduced: MeterAggregate | undefined;
+
+  readonly energyPurchased: MeterAggregate | undefined;
+
+  readonly energyDelivered: MeterAggregate | undefined;
+
+  readonly energyConsumed: Value | undefined;
+
+  readonly energySelf: Value | undefined;
+
+  get energyPurchasedPercent(): Value | undefined {
+    return this.energyPurchased?.delta.percent(this.energyConsumed);
+  }
+
+  get energyProducedPercent(): Value | undefined {
+    return this.energyProduced?.delta.percent(this.energyConsumed);
+  }
+
+  get energySelfPercent(): Value | undefined {
+    return this.energySelf?.percent(this.energyProduced?.delta);
+  }
+
+  get energyDeliveredPercent(): Value | undefined {
+    return this.energyDelivered?.delta.percent(this.energyProduced?.delta);
+  }
+
+  constructor(
+    readonly alignment: Alignment,
+    readonly date: Date,
+    readonly aggregations: Aggregate[],
+  ) {
+    this.energyProduced = this.getMeter('energy/produced');
+    this.energyPurchased = this.getMeter('energy/purchased');
+    this.energyDelivered = this.getMeter('energy/delivered');
+    this.energyConsumed = this.energyPurchased?.delta.plus(this.energyProduced?.delta)?.minus(this.energyDelivered?.delta);
+    this.energySelf = this.energyProduced?.delta.minus(this.energyDelivered?.delta);
+  }
+
+  static fromJson(json: any): AggregationWrapperDto {
+    return new AggregationWrapperDto(
+      json['alignment'] as Alignment,
+      new Date(json['date']),
+      (json['aggregations'] as any[]).map(a => a.hasOwnProperty('delta') ? MeterAggregate.fromJson(a) : VaryingAggregate.fromJson(a)),
+    );
+  }
+
+  private getMeter(name: string): MeterAggregate | undefined {
+    return this.aggregations.filter(a => a instanceof MeterAggregate && a.series.name === name)[0] as MeterAggregate;
+  }
+
+  // noinspection JSUnusedLocalSymbols
+  private getVarying(name: string): VaryingAggregate | undefined {
+    return this.aggregations.filter(a => a instanceof VaryingAggregate && a.series.name === name)[0] as VaryingAggregate;
+  }
+
+}
--- a/src/main/angular/src/app/series/Alignment.ts
+++ b/src/main/angular/src/app/series/Alignment.ts
@ -0,0 +1,127 @@
+import {formatDate} from '@angular/common';
+
+export class Alignment {
+
+  private static readonly values: Alignment[] = [];
+
+  static readonly FIVE = new Alignment('FIVE', '5 Minuten', Alignment.offsetTitleFive);
+
+  static readonly HOUR = new Alignment('HOUR', 'Stunde', Alignment.offsetTitleHour);
+
+  static readonly DAY = new Alignment('DAY', 'Tag', Alignment.offsetTitleDay);
+
+  static readonly WEEK = new Alignment('WEEK', 'Woche', Alignment.offsetTitleWeek);
+
+  static readonly MONTH = new Alignment('MONTH', 'Monat', Alignment.offsetTitleMonth);
+
+  static readonly YEAR = new Alignment('YEAR', 'Jahr', Alignment.offsetTitleYear);
+
+  constructor(
+    readonly name: string,
+    readonly display: string,
+    readonly offsetTitle: (offset: number, locale: string) => string
+  ) {
+    Alignment.values.push(this);
+  }
+
+  plus(delta: number) {
+    let index = Alignment.values.indexOf(this) + delta;
+    while (index < 0) {
+      index += Alignment.values.length;
+    }
+    return Alignment.values[index % Alignment.values.length];
+  }
+
+  static offsetTitleFive(offset: number, locale: string): string {
+    if (offset === 0) {
+      return "Diese 5 Minuten";
+    } else if (offset === 1) {
+      return "Letzte 5 Minuten";
+    }
+    const date = new Date();
+    date.setHours(date.getHours() - offset);
+    if (offset < 7) {
+      return `${formatDate(date, "EEEE", locale)}`;
+    }
+    return `${formatDate(date, "EE", locale)} ${formatDate(date, "dd.MM.yyyy", locale)}`;
+  }
+
+  static offsetTitleHour(offset: number, locale: string): string {
+    if (offset === 0) {
+      return "Diese Stunde";
+    } else if (offset === 1) {
+      return "Letzte Stunde";
+    }
+
+    const today = new Date();
+    today.setMinutes(0);
+
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    const yesterday2 = new Date(today);
+    yesterday2.setDate(yesterday2.getDate() - 1);
+
+    const date = new Date(today);
+    date.setHours(date.getHours() - offset);
+    if (date.getDay() === today.getDay()) {
+      return `${formatDate(date, "HH:mm", locale)}`;
+    } else if (date.getDay() === yesterday.getDay()) {
+      return `Gestern ${formatDate(date, "HH:mm", locale)}`;
+    } else if (date.getDay() === yesterday2.getDay()) {
+      return `Gestern ${formatDate(date, "HH:mm", locale)}`;
+    }
+    return `${formatDate(date, "EE", locale)} ${formatDate(date, "dd.MM.yyyy", locale)} ${formatDate(date, "HH:mm", locale)}`;
+  }
+
+  static offsetTitleDay(offset: number, locale: string): string {
+    if (offset === 0) {
+      return "Heute";
+    } else if (offset === 1) {
+      return "Gestern";
+    }
+    const date = new Date();
+    date.setDate(date.getDate() - offset);
+    if (offset < 7) {
+      return `${formatDate(date, "EEEE", locale)}`;
+    }
+    return `${formatDate(date, "EE", locale)} ${formatDate(date, "dd.MM.yyyy", locale)}`;
+  }
+
+  static offsetTitleWeek(offset: number, locale: string): string {
+    if (offset === 0) {
+      return "Diese Woche";
+    } else if (offset === 1) {
+      return "Letzte Woche";
+    }
+    const date = new Date();
+    date.setDate(date.getDate() - date.getDay() + 1 - offset * 7);
+    return `${formatDate(date, "yyyy", locale)} KW${formatDate(date, "ww", locale)}`;
+  }
+
+  static offsetTitleMonth(offset: number, locale: string): string {
+    if (offset === 0) {
+      return "Diesen Monat";
+    } else if (offset === 1) {
+      return "Letzte Monat";
+    }
+    const date = new Date();
+    date.setDate(1);
+    date.setMonth(date.getMonth() - offset);
+    return `${formatDate(date, "MMMM", locale)} ${formatDate(date, "yyyy", locale)}`;
+  }
+
+  static offsetTitleYear(offset: number, locale: string): string {
+    if (offset === 0) {
+      return "Dieses Jahr";
+    } else if (offset === 1) {
+      return "Letztes Jahr";
+    }
+    const date = new Date();
+    date.setDate(1);
+    date.setMonth(1);
+    date.setFullYear(date.getFullYear() - offset);
+    return `${formatDate(date, "yyyy", locale)}`;
+  }
+
+}
--- a/src/main/angular/src/app/series/Series.ts
+++ b/src/main/angular/src/app/series/Series.ts
@ -0,0 +1,31 @@
+import {Unit} from '../value/Unit';
+import {validateNumber, validateString} from '../core/validators';
+import {Value} from '../value/Value';
+
+export class Series {
+
+  constructor(
+    readonly id: number,
+    readonly name: string,
+    readonly title: string,
+    readonly decimals: number,
+    readonly unit: Unit,
+    readonly lastValue: Value,
+  ) {
+    //
+  }
+
+  static fromJson(json: any): Series {
+    const decimals = validateNumber(json['decimals']);
+    const unit = Unit.fromJson(json['unit']);
+    return new Series(
+      json['id'] as number,
+      validateString(json['name']),
+      validateString(json['title']),
+      decimals,
+      unit,
+      Value.fromJson(json['lastValue'], json['unit'], unit, decimals),
+    );
+  }
+
+}
--- a/src/main/angular/src/app/series/SeriesWrapper.ts
+++ b/src/main/angular/src/app/series/SeriesWrapper.ts
@ -0,0 +1,39 @@
+import {Series} from "./Series";
+import {Subscription} from "rxjs";
+import {Next} from '../core/types';
+
+export class SeriesWrapper {
+
+  private _series: Series | null = null;
+
+  private readonly nextList: Next<Series | null>[] = [];
+
+  constructor(
+    readonly name: string,
+    private readonly onSubscribe: (subscription: Subscription) => Subscription,
+    private readonly onUnsubscribe: (subscription: Subscription) => Subscription,
+  ) {
+    //
+  }
+
+  get series(): Series | null {
+    return this._series;
+  }
+
+  set series(series: Series | null) {
+    this._series = series;
+    this.nextList.forEach(next => next(series))
+  }
+
+  subscribe(next: Next<Series | null>): Subscription {
+    const wrapper: Next<Series | null> = series => next(series); // to let nextList only contain unique instances
+    this.nextList.push(wrapper);
+    wrapper(this.series);
+    const subscription = new Subscription(() => {
+      this.nextList.splice(this.nextList.indexOf(wrapper), 1);
+      this.onUnsubscribe(subscription);
+    });
+    return this.onSubscribe(subscription);
+  }
+
+}
--- a/src/main/angular/src/app/series/meter/MeterAggregate.ts
+++ b/src/main/angular/src/app/series/meter/MeterAggregate.ts
@ -0,0 +1,23 @@
+import {Series} from '../Series';
+import {Aggregate} from '../Aggregate';
+import {Value} from '../../value/Value';
+
+export class MeterAggregate extends Aggregate {
+
+  constructor(
+    series: Series,
+    readonly delta: Value,
+  ) {
+    super(series);
+  }
+
+  static fromJson(json: any): MeterAggregate {
+    const series = Series.fromJson(json['series']);
+    return new MeterAggregate(
+      series,
+      Value.fromJson(json['delta'], series, series.unit, series.decimals),
+    );
+  }
+
+}
+
--- a/src/main/angular/src/app/series/series.service.ts
+++ b/src/main/angular/src/app/series/series.service.ts
@ -0,0 +1,114 @@
+import {Injectable} from '@angular/core';
+import {ApiService} from '../core/api.service';
+import {Alignment} from './Alignment';
+import {AggregationWrapperDto} from './AggregationWrapperDto';
+import {Subscription} from 'rxjs';
+import {Series} from './Series';
+import {SeriesWrapper} from './SeriesWrapper';
+import {Next} from '../core/types';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeriesService {
+
+  private readonly clientSubscriptions: Subscription[] = [];
+
+  private readonly subs: Subscription[] = [];
+
+  private readonly clientCallbacks: Next<Series>[] = [];
+
+  readonly powerConsumed: SeriesWrapper = new SeriesWrapper("power/consumed", this.onSubscribe, this.onUnsubscribe);
+
+  readonly powerProduced: SeriesWrapper = new SeriesWrapper("power/produced", this.onSubscribe, this.onUnsubscribe);
+
+  readonly powerSelf: SeriesWrapper = new SeriesWrapper("power/self", this.onSubscribe, this.onUnsubscribe);
+
+  readonly powerBalance: SeriesWrapper = new SeriesWrapper("power/balance", this.onSubscribe, this.onUnsubscribe);
+
+  readonly liveValues: SeriesWrapper[] = [
+    this.powerConsumed,
+    this.powerProduced,
+    this.powerSelf,
+    this.powerBalance,
+  ]
+
+  constructor(
+    protected readonly api: ApiService,
+  ) {
+    //
+  }
+
+  private onSubscribe(subscription: Subscription): Subscription {
+    this.clientSubscriptions.push(subscription);
+    this.ensureApiSubscribed();
+    return subscription;
+  }
+
+  private onUnsubscribe(subscription: Subscription): Subscription {
+    this.clientSubscriptions.splice(this.clientSubscriptions.indexOf(subscription), 1);
+    if (this.clientSubscriptions.length === 0) {
+      this.ensureApiUnsubscribed();
+    }
+    return subscription;
+  }
+
+  private ensureApiSubscribed() {
+    if (this.subs.length !== 0) {
+      return;
+    }
+    this.subs.push(this.api.subscribe(['Series'], Series.fromJson, series => this.update(series)));
+    this.subs.push(this.api.subscribeConnection(connected => {
+      if (connected) {
+        console.log("connected");
+        this.all();
+      } else {
+        console.log("disconnected");
+        this.liveValues.forEach(liveValue => liveValue.series = null);
+      }
+    }));
+  }
+
+  private ensureApiUnsubscribed() {
+    if (this.subs.length <= 0) {
+      return;
+    }
+    this.subs.forEach(sub => sub.unsubscribe());
+    this.subs.length = 0;
+  }
+
+  private update(series: Series) {
+    this.liveValues
+      .filter(liveValue => liveValue.name === series.name)
+      .forEach(liveValue => liveValue.series = series);
+    this.clientCallbacks.forEach(next => next(series));
+  }
+
+  subscribeAny(next?: Next<Series>): Subscription {
+    const wrapper: Next<Series> = series => { // to let clientCallbacks only contain unique instances
+      if (next) {
+        next(series);
+      }
+    };
+    this.clientCallbacks.push(wrapper);
+    const subscription = new Subscription(() => {
+      this.onUnsubscribe(subscription);
+      this.clientCallbacks.splice(this.clientCallbacks.indexOf(wrapper), 1);
+    });
+    return this.onSubscribe(subscription);
+  }
+
+  all(next?: Next<Series[]>) {
+    this.api.getList(['Series', 'all'], Series.fromJson, list => {
+      list.forEach(item => this.update(item));
+      if (next) {
+        next(list);
+      }
+    });
+  }
+
+  aggregations(alignment: Alignment, offset: number, next: Next<AggregationWrapperDto>) {
+    this.api.getSingle(['Series', 'agg', 'all', alignment.name, 'offset', offset], AggregationWrapperDto.fromJson, next);
+  }
+
+}
--- a/src/main/angular/src/app/series/varying/VaryingAggregate.ts
+++ b/src/main/angular/src/app/series/varying/VaryingAggregate.ts
@ -0,0 +1,24 @@
+import {Aggregate} from "../Aggregate";
+import {Series} from "../Series";
+
+export class VaryingAggregate extends Aggregate {
+
+  constructor(
+    series: Series,
+    readonly min: number,
+    readonly avg: number,
+    readonly max: number,
+  ) {
+    super(series);
+  }
+
+  static fromJson(json: any): VaryingAggregate {
+    return new VaryingAggregate(
+      Series.fromJson(json['series']),
+      json['min'] as number,
+      json['avg'] as number,
+      json['max'] as number,
+    );
+  }
+
+}
--- a/src/main/angular/src/app/value/Unit.ts
+++ b/src/main/angular/src/app/value/Unit.ts
@ -0,0 +1,27 @@
+import {validateString} from '../core/validators';
+
+export class Unit {
+
+  private static readonly values: Unit[] = [];
+
+  static readonly _UNKNOWN_ = new Unit('_UNKNOWN_', "?");
+
+  static readonly POWER_W = new Unit('POWER_W', "W");
+
+  static readonly ENERGY_KWH = new Unit('ENERGY_KWH', "kWh");
+
+  static readonly PERCENT = new Unit('PERCENT', "%");
+
+  private constructor(
+    readonly name: string,
+    readonly unit: string,
+  ) {
+    Unit.values.push(this);
+  }
+
+  static fromJson(json: any): Unit {
+    const name: string = validateString(json);
+    return this.values.filter(unit => unit.name === name)[0] || this._UNKNOWN_;
+  }
+
+}
--- a/src/main/angular/src/app/value/Value.ts
+++ b/src/main/angular/src/app/value/Value.ts
@ -0,0 +1,68 @@
+import {Unit} from "./Unit";
+import {validateNumber} from "../core/validators";
+import {Series} from "../series/Series";
+
+export class Value {
+
+  static readonly EMPTY: Value = new Value(0, Unit._UNKNOWN_, 1);
+
+  constructor(
+    readonly value: number,
+    readonly unit: Unit,
+    readonly decimals: number,
+  ) {
+    //
+  }
+
+  static fromJson(value: any, series: Series, unit: Unit, decimals: number): Value {
+    return new Value(
+      validateNumber(value),
+      unit,
+      decimals,
+    );
+  }
+
+  get formatted(): string {
+    return `${this.value.toFixed(this.decimals)} ${this.unit.unit}`;
+  }
+
+  negate() {
+    return new Value(-this.value, this.unit, this.decimals);
+  }
+
+  plus(other: Value | undefined): Value | undefined {
+    if (!other) {
+      return undefined;
+    }
+    return new Value(this.value + other.value, this.unit, this.decimals);
+  }
+
+  minus(other: Value | undefined): Value | undefined {
+    if (!other) {
+      return undefined;
+    }
+    return new Value(this.value - other.value, this.unit, this.decimals);
+  }
+
+  notNegative(): Value {
+    if (this.value < 0) {
+      return this.toZero();
+    }
+    return this;
+  }
+
+  toZero(): Value {
+    if (this.value === 0) {
+      return this;
+    }
+    return new Value(0, this.unit, this.decimals);
+  }
+
+  percent(other: Value | undefined): Value | undefined {
+    if (!other) {
+      return undefined;
+    }
+    return new Value(this.value / other.value * 100, Unit.PERCENT, 0);
+  }
+
+}
--- a/src/main/angular/src/index.html
+++ b/src/main/angular/src/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <title>Data</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <!--suppress HtmlUnknownTarget -->
+    <link rel="icon" type="image/x-icon" href="favicon.svg">
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
--- a/src/main/angular/src/main.ts
+++ b/src/main/angular/src/main.ts
@ -0,0 +1,6 @@
+import {bootstrapApplication} from '@angular/platform-browser';
+import {appConfig} from './app/app.config';
+import {AppComponent} from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
--- a/src/main/angular/src/styles.less
+++ b/src/main/angular/src/styles.less
@ -0,0 +1,13 @@
+body {
+  font-family: sans-serif;
+  font-size: 6vw;
+  user-select: none;
+}
+
+button, input, select {
+  font-size: inherit;
+}
+
+div {
+  overflow: hidden;
+}
--- a/src/main/angular/tsconfig.app.json
+++ b/src/main/angular/tsconfig.app.json
@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
--- a/src/main/angular/tsconfig.json
+++ b/src/main/angular/tsconfig.json
@ -0,0 +1,27 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/src/main/angular/tsconfig.spec.json
+++ b/src/main/angular/tsconfig.spec.json
@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
--- a/src/main/java/de/ph87/data/series/SeriesController.java
+++ b/src/main/java/de/ph87/data/series/SeriesController.java
@ -18,6 +18,14 @@ public class SeriesController {

  private final VaryingService varyingService;

+  private final SeriesService seriesService;
+
+  @NonNull
+  @GetMapping("all")
+  public List<SeriesDto> all() {
+    return seriesService.findAllDto();
+  }
+
  @NonNull
  @GetMapping("agg/all/{alignmentName}/offset/{offsetAmount}")
  public AggregationWrapperDto agg(@PathVariable final String alignmentName, @PathVariable final long offsetAmount) {
--- a/src/main/java/de/ph87/data/series/SeriesDto.java
+++ b/src/main/java/de/ph87/data/series/SeriesDto.java
@ -1,13 +1,17 @@
 package de.ph87.data.series;

 import de.ph87.data.value.*;
+import de.ph87.data.web.*;
 import lombok.*;

 import java.time.*;
+import java.util.*;

@Getter
@ToString
-public class SeriesDto {
+public class SeriesDto implements IWebSocketMessage {
+
+  public final List<Object> websocketTopic = List.of("Series");

  public final long id;

--- a/src/main/java/de/ph87/data/series/SeriesService.java
+++ b/src/main/java/de/ph87/data/series/SeriesService.java
@ -7,6 +7,7 @@ import org.springframework.context.*;
 import org.springframework.stereotype.*;
 import org.springframework.transaction.annotation.*;

+import java.util.*;
 import java.util.function.*;

@Slf4j
@ -78,4 +79,9 @@ public class SeriesService {
    return result;
  }

+  @NonNull
+  public List<SeriesDto> findAllDto() {
+    return seriesRepository.findAll().stream().map(this::toDto).toList();
+  }
+
 }
--- a/src/main/java/de/ph87/data/web/IWebSocketMessage.java
+++ b/src/main/java/de/ph87/data/web/IWebSocketMessage.java
@ -0,0 +1,9 @@
+package de.ph87.data.web;
+
+import java.util.*;
+
+public interface IWebSocketMessage {
+
+  List<Object> getWebsocketTopic();
+
+}
--- a/src/main/java/de/ph87/data/web/WebConfig.java
+++ b/src/main/java/de/ph87/data/web/WebConfig.java
@ -0,0 +1,14 @@
+package de.ph87.data.web;
+
+import org.springframework.context.annotation.*;
+import org.springframework.web.servlet.config.annotation.*;
+
+@Configuration
+public class WebConfig implements WebMvcConfigurer {
+
+  @Override
+  public void addCorsMappings(final CorsRegistry registry) {
+    registry.addMapping("/**").allowedOrigins("*").allowedMethods("*").allowedHeaders("*");
+  }
+
+}
--- a/src/main/java/de/ph87/data/web/WebSocketConfig.java
+++ b/src/main/java/de/ph87/data/web/WebSocketConfig.java
@ -0,0 +1,32 @@
+package de.ph87.data.web;
+
+import org.springframework.context.annotation.*;
+import org.springframework.messaging.simp.config.*;
+import org.springframework.scheduling.*;
+import org.springframework.scheduling.concurrent.*;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.socket.config.annotation.*;
+
+@CrossOrigin
+@Configuration
+@EnableWebSocketMessageBroker
+public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
+
+  public static final String DESTINATION = "";
+
+  @Override
+  public void registerStompEndpoints(StompEndpointRegistry registry) {
+    registry.addEndpoint("/ws").setAllowedOrigins("*");
+  }
+
+  @Override
+  public void configureMessageBroker(MessageBrokerRegistry config) {
+    config.enableSimpleBroker(DESTINATION).setHeartbeatValue(new long[]{2000, 2000}).setTaskScheduler(heartBeatScheduler());
+  }
+
+  @Bean
+  public TaskScheduler heartBeatScheduler() {
+    return new ThreadPoolTaskScheduler();
+  }
+
+}
--- a/src/main/java/de/ph87/data/web/WebSocketService.java
+++ b/src/main/java/de/ph87/data/web/WebSocketService.java
@ -0,0 +1,30 @@
+package de.ph87.data.web;
+
+import lombok.*;
+import lombok.extern.slf4j.*;
+import org.springframework.context.event.*;
+import org.springframework.lang.NonNull;
+import org.springframework.messaging.simp.*;
+import org.springframework.stereotype.*;
+import org.springframework.transaction.annotation.*;
+
+@Slf4j
+@Service
+@Transactional
+@RequiredArgsConstructor
+public class WebSocketService {
+
+  private final SimpMessageSendingOperations simpMessageSendingOperations;
+
+  @EventListener(IWebSocketMessage.class)
+  public void send(@NonNull final IWebSocketMessage message) {
+    String prefix = "";
+    String topic = "";
+    for (int i = 0; i < message.getWebsocketTopic().size(); i++) {
+      topic += prefix + message.getWebsocketTopic().get(i);
+      simpMessageSendingOperations.convertAndSend(topic, message);
+      prefix = "/";
+    }
+  }
+
+}