From e2738716be8d35bdb7981ed06049cdbf74dcbc97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= Date: Wed, 23 Oct 2024 09:17:39 +0200 Subject: [PATCH] VoltageDrop style + code clean --- .../voltage-drop/value/value.component.html | 11 -- .../voltage-drop/value/value.component.less | 44 ------ .../app/voltage-drop/value/value.component.ts | 65 --------- .../voltage-drop/voltage-drop.component.html | 130 +++++++++++++----- .../voltage-drop/voltage-drop.component.less | 77 ++++++++--- .../voltage-drop/voltage-drop.component.ts | 62 +++++---- 6 files changed, 193 insertions(+), 196 deletions(-) delete mode 100644 src/main/angular/src/app/voltage-drop/value/value.component.html delete mode 100644 src/main/angular/src/app/voltage-drop/value/value.component.less delete mode 100644 src/main/angular/src/app/voltage-drop/value/value.component.ts diff --git a/src/main/angular/src/app/voltage-drop/value/value.component.html b/src/main/angular/src/app/voltage-drop/value/value.component.html deleted file mode 100644 index 5837dbf..0000000 --- a/src/main/angular/src/app/voltage-drop/value/value.component.html +++ /dev/null @@ -1,11 +0,0 @@ -
-
{{title}}
-
- -
{{unit}}
-
-
- -
%
-
-
diff --git a/src/main/angular/src/app/voltage-drop/value/value.component.less b/src/main/angular/src/app/voltage-drop/value/value.component.less deleted file mode 100644 index 5ab8ad2..0000000 --- a/src/main/angular/src/app/voltage-drop/value/value.component.less +++ /dev/null @@ -1,44 +0,0 @@ -.value { - clear: both; - - .label { - padding: 1vmin 0 0.5vmin 0; - } - - .input { - clear: both; - float: left; - } - - input[type=number] { - float: left; - text-align: right; - } - - input.tooHigh { - background-color: red; - } - - .unit { - padding-left: 0.5vmin; - } - - .shortcuts { - clear: both; - - .shortcut { - float: left; - font-size: 90%; - padding: 0.2vmin 0.7vmin; - margin: 0.5vmin; - border-radius: 0.5vmin; - background-color: lightgray; - } - - .shortcutSelected { - background-color: lightgreen; - } - - } - -} diff --git a/src/main/angular/src/app/voltage-drop/value/value.component.ts b/src/main/angular/src/app/voltage-drop/value/value.component.ts deleted file mode 100644 index af8d8fb..0000000 --- a/src/main/angular/src/app/voltage-drop/value/value.component.ts +++ /dev/null @@ -1,65 +0,0 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {NgIf} from "@angular/common"; - -@Component({ - selector: 'app-value', - templateUrl: './value.component.html', - standalone: true, - imports: [ - NgIf - ], - styleUrls: ['./value.component.less'] -}) -export class ValueComponent implements OnInit { - - @Input() - title!: string; - - @Input() - unit!: string; - - @Input() - value?: number; - - @Input() - places?: number; - - @Input() - percentDivisor?: number; - - @Input() - percentPlaces?: number; - - @Input() - percentMax?: number; - - constructor() { - } - - ngOnInit(): void { - } - - round(value: number | undefined, places: number | undefined): number | undefined { - if (value === undefined || places === undefined) { - return value; - } - const divisor = Math.pow(10, places); - return Math.round(value * divisor) / divisor; - } - - formatPercent(): number | undefined { - if (this.value === undefined || this.percentDivisor === undefined || this.percentPlaces === undefined) { - return undefined; - } - return this.round(this.value / this.percentDivisor * 100, this.percentPlaces) - } - - defined() { - for (let argument of arguments) { - if (argument === undefined || argument === null) { - return false; - } - } - return true; - } -} diff --git a/src/main/angular/src/app/voltage-drop/voltage-drop.component.html b/src/main/angular/src/app/voltage-drop/voltage-drop.component.html index f39cf03..43457f1 100644 --- a/src/main/angular/src/app/voltage-drop/voltage-drop.component.html +++ b/src/main/angular/src/app/voltage-drop/voltage-drop.component.html @@ -7,69 +7,69 @@ Vorgaben -
+
- - + + - - + + - - + + - - - + + + - - + + @@ -86,15 +86,83 @@ Ergebnisse -
- - - - - - - - +
+ +
+
Spannungsverlust:
+
+
{{ voltageDrop2Way?.toFixed(1) }}
+
 V
+
+
+
{{ voltageDropPercent?.toFixed(2) }}
+
 %
+
+
+ +
+
Verlustleistung:
+
+
{{ powerLoss2Way?.toFixed(0) }}
+
 W
+
+
+ +
+
Verfügbare Spannung:
+
+
{{ voltageDropLoad?.toFixed(1) }}
+
 V
+
+
+
{{ voltageDropLoadPercent?.toFixed(2) }}
+
 %
+
+
+ +
+
Verfügbare Leistung:
+
+
{{ powerLoad?.toFixed(0) }}
+
 W
+
+
+
{{ powerLoadPercent?.toFixed(2) }}
+
 %
+
+
+ +
+
Strom:
+
+
{{ current?.toFixed(1) }}
+
 A
+
+
+ +
+
Leitungwiderstand:
+
+
{{ resistance2Way?.toFixed(3) }}
+
 Ω
+
+
+ +
+
Lastwiderstand:
+
+
{{ resistanceLoad?.toFixed(3) }}
+
 Ω
+
+
+ +
+
Gesamtwiderstand:
+
+
{{ resistanceTotal?.toFixed(3) }}
+
 Ω
+
+
diff --git a/src/main/angular/src/app/voltage-drop/voltage-drop.component.less b/src/main/angular/src/app/voltage-drop/voltage-drop.component.less index 56be167..3a9d5a9 100644 --- a/src/main/angular/src/app/voltage-drop/voltage-drop.component.less +++ b/src/main/angular/src/app/voltage-drop/voltage-drop.component.less @@ -1,28 +1,73 @@ @import "../../tile.less"; -.label { +#VoltageDropInputs { -} + .label { + width: 12em; + } -.input { + .input { + input { + width: 100%; + text-align: right; + } + } -} + .unit { + width: 3em; + } -.unit { + .shortcuts { + padding-top: calc(@space / 2); + padding-bottom: calc(@space * 2); -} + .shortcut { + float: left; + font-size: 80%; + padding: calc(@space / 2) @space; + margin-right: calc(@space / 2); + background-color: lightskyblue; + border-radius: @space; + } -.shortcuts { - padding-top: calc(@space / 2); - padding-bottom: calc(@space * 2); + .shortcutSelected { + color: white; + background-color: dodgerblue; + } - .shortcut { - float: left; - font-size: 80%; - padding: calc(@space / 2) @space; - margin-right: calc(@space / 2); - background-color: lightskyblue; - border-radius: @space; + } + +} + +#VoltageDropResults { + + .group { + margin-bottom: calc(2 * @space); + + .header { + float: left; + } + + .valueUnit { + float: right; + clear: right; + + .value { + float: left; + } + + .unit { + float: left; + width: 1.5em; + text-align: left; + } + + } + + } + + .groupAlarm { + color: red; } } diff --git a/src/main/angular/src/app/voltage-drop/voltage-drop.component.ts b/src/main/angular/src/app/voltage-drop/voltage-drop.component.ts index ac896a7..06df7a2 100644 --- a/src/main/angular/src/app/voltage-drop/voltage-drop.component.ts +++ b/src/main/angular/src/app/voltage-drop/voltage-drop.component.ts @@ -1,6 +1,5 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; import {FormsModule} from "@angular/forms"; -import {ValueComponent} from "./value/value.component"; import {NgForOf} from "@angular/common"; class Resistance { @@ -33,7 +32,6 @@ class Values { standalone: true, imports: [ FormsModule, - ValueComponent, NgForOf ], templateUrl: './voltage-drop.component.html', @@ -41,37 +39,27 @@ class Values { }) export class VoltageDropComponent { - readonly lengths: number[] = [10, 15, 20, 30, 40, 50, 75, 100]; + readonly SHORTCUTS_LENGTH: number[] = [10, 15, 20, 30, 40, 50, 75, 100]; - readonly voltages: number[] = [5, 12, 24, 36, 230, 400]; + readonly SHORTCUTS_VOLTAGE: number[] = [5, 12, 24, 36, 230, 400]; - readonly powers: number[] = [0.5, 1, 2, 3.68, 5, 7.5, 10, 15, 20, 25, 30]; + readonly SHORTCUTS_POWER: number[] = [0.5, 1, 2, 3.68, 5, 7.5, 10, 15, 20, 25, 30]; - readonly crossSections: number[] = [0.75, 1.5, 2.5, 4, 6, 10, 16, 25, 35, 50]; + readonly SHORTCUTS_CROSS_SECTION: number[] = [0.75, 1.5, 2.5, 4, 6, 10, 16, 25, 35, 50]; - readonly resistances: Resistance[] = [ + readonly SHORTCUTS_RESISTANCE: Resistance[] = [ {name: 'Silber', value: 0.015}, {name: 'Kupfer', value: 0.017}, {name: 'Aluminium', value: 0.0278}, ]; - readonly testSet: Values = { - length: this.lengths[4], - voltage: this.voltages[4], - power: this.powers[3], - crossSection: this.crossSections[3], - resistanceSpecific: this.resistances[1].value, - } - - readonly testSet2: Values = { - length: 100, - voltage: 230, - power: 2.5, - crossSection: 1.5, - resistanceSpecific: this.resistances[1].value, - } - - readonly values: Values = this.testSet; + readonly input: Values = { + length: this.SHORTCUTS_LENGTH[4], + voltage: this.SHORTCUTS_VOLTAGE[4], + power: this.SHORTCUTS_POWER[3], + crossSection: this.SHORTCUTS_CROSS_SECTION[3], + resistanceSpecific: this.SHORTCUTS_RESISTANCE[1].value, + }; resistance2Way?: number; @@ -83,12 +71,18 @@ export class VoltageDropComponent { voltageDrop2Way?: number; + voltageDropPercent?: number; + powerLoss2Way?: number; voltageDropLoad?: number; + voltageDropLoadPercent?: number; + powerLoad?: number; + powerLoadPercent?: number; + constructor() { } @@ -97,25 +91,35 @@ export class VoltageDropComponent { } update() { - if (!this.values || !this.values.resistanceSpecific || !this.values.length || !this.values.crossSection || !this.values.power || !this.values.voltage) { + if (!this.input || !this.input.resistanceSpecific || !this.input.length || !this.input.crossSection || !this.input.power || !this.input.voltage) { this.resistance2Way = undefined; this.resistanceLoad = undefined; this.resistanceTotal = undefined; this.current = undefined; this.voltageDrop2Way = undefined; + this.voltageDropPercent = undefined; this.powerLoss2Way = undefined; this.voltageDropLoad = undefined; + this.voltageDropLoadPercent = undefined; this.powerLoad = undefined; + this.powerLoadPercent = undefined; return; } - this.resistance2Way = (this.values.resistanceSpecific * this.values.length / this.values.crossSection) * 2; - this.resistanceLoad = (this.values.voltage * this.values.voltage) / (this.values.power * 1000); + this.resistance2Way = (this.input.resistanceSpecific * this.input.length / this.input.crossSection) * 2; + this.resistanceLoad = (this.input.voltage * this.input.voltage) / (this.input.power * 1000); this.resistanceTotal = this.resistance2Way + this.resistanceLoad; - this.current = this.values.voltage / this.resistanceTotal; + this.current = this.input.voltage / this.resistanceTotal; this.voltageDrop2Way = this.resistance2Way * this.current; + this.voltageDropPercent = 100 * this.voltageDrop2Way / this.input.voltage; this.powerLoss2Way = this.voltageDrop2Way * this.current; this.voltageDropLoad = this.resistanceLoad * this.current; + this.voltageDropLoadPercent = 100 * this.voltageDropLoad / this.input.voltage; this.powerLoad = this.voltageDropLoad * this.current; + this.powerLoadPercent = 100 * this.powerLoad / (this.input.power * 1000); + } + + inRange(value: number, wanted: number, delta: number) { + return Math.abs(wanted - value) <= Math.abs(delta); } }
SpannungV V
- -
{{ v }}
+ +
{{ v }}
LeistungkW kW
- -
{{ c }}
+ +
{{ c }}
Querschnittmm² mm²
- -
{{ c }}
+ +
{{ c }}
Länge (1-fach)mLänge (einfacher Weg) m
- -
{{ l }}
+ +
{{ l }}
Spezifischer WiderstandΩ*m Ω*m
- -
{{ r.name }}
+ +
{{ r.name }}