basic angular ui
This commit is contained in:
parent
7f39ee6c41
commit
617c9a2ebb
@ -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.host=10.0.0.50
|
||||||
de.ph87.data.message.receive.mqtt.topic=#
|
de.ph87.data.message.receive.mqtt.topic=#
|
||||||
|
#-
|
||||||
|
server.port=8081
|
||||||
4
pom.xml
4
pom.xml
@ -26,6 +26,10 @@
|
|||||||
<groupId>org.springframework.boot</groupId>
|
<groupId>org.springframework.boot</groupId>
|
||||||
<artifactId>spring-boot-starter-web</artifactId>
|
<artifactId>spring-boot-starter-web</artifactId>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-websocket</artifactId>
|
||||||
|
</dependency>
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.springframework.boot</groupId>
|
<groupId>org.springframework.boot</groupId>
|
||||||
<artifactId>spring-boot-starter-data-jpa</artifactId>
|
<artifactId>spring-boot-starter-data-jpa</artifactId>
|
||||||
|
|||||||
18
src/main/angular/.editorconfig
Normal file
18
src/main/angular/.editorconfig
Normal file
@ -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
|
||||||
42
src/main/angular/.gitignore
vendored
Normal file
42
src/main/angular/.gitignore
vendored
Normal file
@ -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
|
||||||
59
src/main/angular/README.md
Normal file
59
src/main/angular/README.md
Normal file
@ -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.
|
||||||
124
src/main/angular/angular.json
Normal file
124
src/main/angular/angular.json
Normal file
@ -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": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
15064
src/main/angular/package-lock.json
generated
Normal file
15064
src/main/angular/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
40
src/main/angular/package.json
Normal file
40
src/main/angular/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
src/main/angular/public/favicon.svg
Normal file
6
src/main/angular/public/favicon.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 454 B |
87
src/main/angular/src/app/app.component.html
Normal file
87
src/main/angular/src/app/app.component.html
Normal file
@ -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"> </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)">←</button>
|
||||||
|
{{ alignment.display }}
|
||||||
|
<button class="next" (click)="shiftAlignment(-1)">→</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="option">
|
||||||
|
<button class="back" (click)="shiftOffset(+1)">←</button>
|
||||||
|
{{ alignment.offsetTitle(offset, locale) }}
|
||||||
|
<button class="next" (click)="shiftOffset(-1)" [disabled]="offset === 0">→</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="entry consumption">
|
||||||
|
<div class="name">Verbrauch</div>
|
||||||
|
<div class="percent"> </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/>
|
||||||
82
src/main/angular/src/app/app.component.less
Normal file
82
src/main/angular/src/app/app.component.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
113
src/main/angular/src/app/app.component.ts
Normal file
113
src/main/angular/src/app/app.component.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
23
src/main/angular/src/app/app.config.ts
Normal file
23
src/main/angular/src/app/app.config.ts
Normal file
@ -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'},
|
||||||
|
]
|
||||||
|
};
|
||||||
3
src/main/angular/src/app/app.routes.ts
Normal file
3
src/main/angular/src/app/app.routes.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import {Routes} from '@angular/router';
|
||||||
|
|
||||||
|
export const routes: Routes = [];
|
||||||
45
src/main/angular/src/app/core/api.service.ts
Normal file
45
src/main/angular/src/app/core/api.service.ts
Normal file
@ -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('/')}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
src/main/angular/src/app/core/types.ts
Normal file
3
src/main/angular/src/app/core/types.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export type FromJson<T> = (json: any) => T;
|
||||||
|
|
||||||
|
export type Next<T> = (t: T) => any;
|
||||||
13
src/main/angular/src/app/core/validators.ts
Normal file
13
src/main/angular/src/app/core/validators.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
15
src/main/angular/src/app/core/websocket.ts
Normal file
15
src/main/angular/src/app/core/websocket.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
11
src/main/angular/src/app/series/Aggregate.ts
Normal file
11
src/main/angular/src/app/series/Aggregate.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import {Series} from './Series';
|
||||||
|
|
||||||
|
export abstract class Aggregate {
|
||||||
|
|
||||||
|
protected constructor(
|
||||||
|
readonly series: Series,
|
||||||
|
) {
|
||||||
|
//
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
68
src/main/angular/src/app/series/AggregationWrapperDto.ts
Normal file
68
src/main/angular/src/app/series/AggregationWrapperDto.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
127
src/main/angular/src/app/series/Alignment.ts
Normal file
127
src/main/angular/src/app/series/Alignment.ts
Normal file
@ -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)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
31
src/main/angular/src/app/series/Series.ts
Normal file
31
src/main/angular/src/app/series/Series.ts
Normal file
@ -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),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
39
src/main/angular/src/app/series/SeriesWrapper.ts
Normal file
39
src/main/angular/src/app/series/SeriesWrapper.ts
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
23
src/main/angular/src/app/series/meter/MeterAggregate.ts
Normal file
23
src/main/angular/src/app/series/meter/MeterAggregate.ts
Normal file
@ -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),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
114
src/main/angular/src/app/series/series.service.ts
Normal file
114
src/main/angular/src/app/series/series.service.ts
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
24
src/main/angular/src/app/series/varying/VaryingAggregate.ts
Normal file
24
src/main/angular/src/app/series/varying/VaryingAggregate.ts
Normal file
@ -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,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
27
src/main/angular/src/app/value/Unit.ts
Normal file
27
src/main/angular/src/app/value/Unit.ts
Normal file
@ -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_;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
68
src/main/angular/src/app/value/Value.ts
Normal file
68
src/main/angular/src/app/value/Value.ts
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
14
src/main/angular/src/index.html
Normal file
14
src/main/angular/src/index.html
Normal file
@ -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>
|
||||||
6
src/main/angular/src/main.ts
Normal file
6
src/main/angular/src/main.ts
Normal file
@ -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));
|
||||||
13
src/main/angular/src/styles.less
Normal file
13
src/main/angular/src/styles.less
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 6vw;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input, select {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
15
src/main/angular/tsconfig.app.json
Normal file
15
src/main/angular/tsconfig.app.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
27
src/main/angular/tsconfig.json
Normal file
27
src/main/angular/tsconfig.json
Normal file
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
15
src/main/angular/tsconfig.spec.json
Normal file
15
src/main/angular/tsconfig.spec.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -18,6 +18,14 @@ public class SeriesController {
|
|||||||
|
|
||||||
private final VaryingService varyingService;
|
private final VaryingService varyingService;
|
||||||
|
|
||||||
|
private final SeriesService seriesService;
|
||||||
|
|
||||||
|
@NonNull
|
||||||
|
@GetMapping("all")
|
||||||
|
public List<SeriesDto> all() {
|
||||||
|
return seriesService.findAllDto();
|
||||||
|
}
|
||||||
|
|
||||||
@NonNull
|
@NonNull
|
||||||
@GetMapping("agg/all/{alignmentName}/offset/{offsetAmount}")
|
@GetMapping("agg/all/{alignmentName}/offset/{offsetAmount}")
|
||||||
public AggregationWrapperDto agg(@PathVariable final String alignmentName, @PathVariable final long offsetAmount) {
|
public AggregationWrapperDto agg(@PathVariable final String alignmentName, @PathVariable final long offsetAmount) {
|
||||||
|
|||||||
@ -1,13 +1,17 @@
|
|||||||
package de.ph87.data.series;
|
package de.ph87.data.series;
|
||||||
|
|
||||||
import de.ph87.data.value.*;
|
import de.ph87.data.value.*;
|
||||||
|
import de.ph87.data.web.*;
|
||||||
import lombok.*;
|
import lombok.*;
|
||||||
|
|
||||||
import java.time.*;
|
import java.time.*;
|
||||||
|
import java.util.*;
|
||||||
|
|
||||||
@Getter
|
@Getter
|
||||||
@ToString
|
@ToString
|
||||||
public class SeriesDto {
|
public class SeriesDto implements IWebSocketMessage {
|
||||||
|
|
||||||
|
public final List<Object> websocketTopic = List.of("Series");
|
||||||
|
|
||||||
public final long id;
|
public final long id;
|
||||||
|
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import org.springframework.context.*;
|
|||||||
import org.springframework.stereotype.*;
|
import org.springframework.stereotype.*;
|
||||||
import org.springframework.transaction.annotation.*;
|
import org.springframework.transaction.annotation.*;
|
||||||
|
|
||||||
|
import java.util.*;
|
||||||
import java.util.function.*;
|
import java.util.function.*;
|
||||||
|
|
||||||
@Slf4j
|
@Slf4j
|
||||||
@ -78,4 +79,9 @@ public class SeriesService {
|
|||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@NonNull
|
||||||
|
public List<SeriesDto> findAllDto() {
|
||||||
|
return seriesRepository.findAll().stream().map(this::toDto).toList();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
9
src/main/java/de/ph87/data/web/IWebSocketMessage.java
Normal file
9
src/main/java/de/ph87/data/web/IWebSocketMessage.java
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
package de.ph87.data.web;
|
||||||
|
|
||||||
|
import java.util.*;
|
||||||
|
|
||||||
|
public interface IWebSocketMessage {
|
||||||
|
|
||||||
|
List<Object> getWebsocketTopic();
|
||||||
|
|
||||||
|
}
|
||||||
14
src/main/java/de/ph87/data/web/WebConfig.java
Normal file
14
src/main/java/de/ph87/data/web/WebConfig.java
Normal file
@ -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("*");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
32
src/main/java/de/ph87/data/web/WebSocketConfig.java
Normal file
32
src/main/java/de/ph87/data/web/WebSocketConfig.java
Normal file
@ -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();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
30
src/main/java/de/ph87/data/web/WebSocketService.java
Normal file
30
src/main/java/de/ph87/data/web/WebSocketService.java
Normal file
@ -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 = "/";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user