VoltageDrop style + code clean

src/main/angular/src/app/voltage-drop/value/value.component.html

@@ -1,11 +0,0 @@
-<div class="value">
-  <div class="label">{{title}}</div>
-  <div class="input">
-    <input disabled type="number" [value]="round(value, places)">
-    <div class="unit">{{unit}}</div>
-  </div>
-  <div class="input" *ngIf="percentDivisor !== undefined">
-    <input *ngIf="value !== undefined" disabled type="number" [class.tooHigh]="percentMax !== undefined && value / percentDivisor > percentMax" [value]="formatPercent()">
-    <div class="unit">%</div>
-  </div>
-</div>

src/main/angular/src/app/voltage-drop/value/value.component.less

@@ -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;
-    }
-
-  }
-
-}

src/main/angular/src/app/voltage-drop/value/value.component.ts

@@ -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;
-  }
-}

src/main/angular/src/app/voltage-drop/voltage-drop.component.html

@@ -7,69 +7,69 @@
         Vorgaben
       </div>
 
-      <div class="tileContent">
+      <div class="tileContent" id="VoltageDropInputs">
         <table>
           <tr>
             <td class="label">Spannung</td>
-            <td class="input"><input type="number" [(ngModel)]="values.voltage" (ngModelChange)="update()"></td>
+            <td class="input"><input type="number" [(ngModel)]="input.voltage" (ngModelChange)="update()"></td>
-            <td class="unit">V</td>
+            <td class="unit">&nbsp;V</td>
           </tr>
           <tr>
             <td colspan="3" class="shortcuts">
-              <ng-container *ngFor="let v of voltages">
+              <ng-container *ngFor="let v of SHORTCUTS_VOLTAGE">
-                <div class="shortcut" [class.shortcutSelected]="values.voltage===v" (click)="values.voltage=v; update()">{{ v }}</div>
+                <div class="shortcut" [class.shortcutSelected]="inRange(input.voltage, v, 0.1)" (click)="input.voltage=v; update()">{{ v }}</div>
               </ng-container>
             </td>
           </tr>
 
           <tr>
             <td class="label">Leistung</td>
-            <td class="input"><input type="number" [(ngModel)]="values.power" (ngModelChange)="update()"></td>
+            <td class="input"><input type="number" [(ngModel)]="input.power" (ngModelChange)="update()"></td>
-            <td class="unit">kW</td>
+            <td class="unit">&nbsp;kW</td>
           </tr>
           <tr>
             <td colspan="3" class="shortcuts">
-              <ng-container *ngFor="let c of powers">
+              <ng-container *ngFor="let c of SHORTCUTS_POWER">
-                <div class="shortcut" [class.shortcutSelected]="values.power===c" (click)="values.power=c; update()">{{ c }}</div>
+                <div class="shortcut" [class.shortcutSelected]="inRange(input.power, c, 0.1)" (click)="input.power=c; update()">{{ c }}</div>
               </ng-container>
             </td>
           </tr>
 
           <tr>
             <td class="label">Querschnitt</td>
-            <td class="input"><input type="number" [(ngModel)]="values.crossSection" (ngModelChange)="update()"></td>
+            <td class="input"><input type="number" [(ngModel)]="input.crossSection" (ngModelChange)="update()"></td>
-            <td class="unit">mm²</td>
+            <td class="unit">&nbsp;mm²</td>
           </tr>
           <tr>
             <td colspan="3" class="shortcuts">
-              <ng-container *ngFor="let c of crossSections">
+              <ng-container *ngFor="let c of SHORTCUTS_CROSS_SECTION">
-                <div class="shortcut" [class.shortcutSelected]="values.crossSection===c" (click)="values.crossSection=c; update()">{{ c }}</div>
+                <div class="shortcut" [class.shortcutSelected]="inRange(input.crossSection, c, 0.1)" (click)="input.crossSection=c; update()">{{ c }}</div>
               </ng-container>
             </td>
           </tr>
 
           <tr>
-            <td class="label">Länge (1-fach)</td>
+            <td class="label">Länge (einfacher Weg)</td>
-            <td class="input"><input type="number" [(ngModel)]="values.length" (ngModelChange)="update()"></td>
+            <td class="input"><input type="number" [(ngModel)]="input.length" (ngModelChange)="update()"></td>
-            <td class="unit">m</td>
+            <td class="unit">&nbsp;m</td>
           </tr>
           <tr>
             <td colspan="3" class="shortcuts">
-              <ng-container *ngFor="let l of lengths">
+              <ng-container *ngFor="let l of SHORTCUTS_LENGTH">
-                <div class="shortcut" [class.shortcutSelected]="values.length===l" (click)="values.length=l; update()">{{ l }}</div>
+                <div class="shortcut" [class.shortcutSelected]="inRange(input.length, l, 0.1)" (click)="input.length=l; update()">{{ l }}</div>
               </ng-container>
             </td>
           </tr>
 
           <tr>
             <td class="label">Spezifischer Widerstand</td>
-            <td class="input"><input type="number" [(ngModel)]="values.resistanceSpecific" (ngModelChange)="update()"></td>
+            <td class="input"><input type="number" [(ngModel)]="input.resistanceSpecific" (ngModelChange)="update()"></td>
-            <td class="unit">&Omega;*m</td>
+            <td class="unit">&nbsp;&Omega;*m</td>
           </tr>
           <tr>
             <td colspan="3" class="shortcuts">
-              <ng-container *ngFor="let r of resistances">
+              <ng-container *ngFor="let r of SHORTCUTS_RESISTANCE">
-                <div class="shortcut" [class.shortcutSelected]="values.resistanceSpecific===r.value" (click)="values.resistanceSpecific=r.value; update()">{{ r.name }}</div>
+                <div class="shortcut" [class.shortcutSelected]="inRange(input.resistanceSpecific, r.value, 0.0005)" (click)="input.resistanceSpecific = r.value; update()">{{ r.name }}</div>
               </ng-container>
             </td>
           </tr>
@@ -86,15 +86,83 @@
         Ergebnisse
       </div>
 
-      <div class="tileContent">
+      <div class="tileContent" id="VoltageDropResults">
-        <app-value title="Spannungsverlust" unit="V" [value]="voltageDrop2Way" [places]="1" [percentDivisor]="values.voltage" [percentPlaces]="2" [percentMax]="0.03"></app-value>
+
-        <app-value title="Verlustleistung" unit="W" [value]="powerLoss2Way" [places]="0"></app-value>
+        <div class="group" [class.groupAlarm]="(voltageDropPercent || 0) > 3">
-        <app-value title="Verfügbare Spannung" unit="V" [value]="voltageDropLoad" [places]="1" [percentDivisor]="values.voltage" [percentPlaces]="2"></app-value>
+          <div class="header">Spannungsverlust:</div>
-        <app-value title="Verfügbare Leistung" unit="W" [value]="powerLoad" [places]="0" [percentDivisor]="values.power * 1000" [percentPlaces]="2"></app-value>
+          <div class="valueUnit">
-        <app-value title="Strom" unit="A" [value]="current" [places]="1"></app-value>
+            <div class="value">{{ voltageDrop2Way?.toFixed(1) }}</div>
-        <app-value title="Leitungwiderstand" unit="&Omega;" [value]="resistance2Way" [places]="3"></app-value>
+            <div class="unit">&nbsp;V</div>
-        <app-value title="Lastwiderstand" unit="&Omega;" [value]="resistanceLoad" [places]="3"></app-value>
+          </div>
-        <app-value title="Gesamtwiderstand" unit="&Omega;" [value]="resistanceTotal" [places]="3"></app-value>
+          <div class="valueUnit">
+            <div class="value">{{ voltageDropPercent?.toFixed(2) }}</div>
+            <div class="unit">&nbsp;%</div>
+          </div>
+        </div>
+
+        <div class="group">
+          <div class="header">Verlustleistung:</div>
+          <div class="valueUnit">
+            <div class="value">{{ powerLoss2Way?.toFixed(0) }}</div>
+            <div class="unit">&nbsp;W</div>
+          </div>
+        </div>
+
+        <div class="group">
+          <div class="header">Verfügbare Spannung:</div>
+          <div class="valueUnit">
+            <div class="value">{{ voltageDropLoad?.toFixed(1) }}</div>
+            <div class="unit">&nbsp;V</div>
+          </div>
+          <div class="valueUnit">
+            <div class="value">{{ voltageDropLoadPercent?.toFixed(2) }}</div>
+            <div class="unit">&nbsp;%</div>
+          </div>
+        </div>
+
+        <div class="group">
+          <div class="header">Verfügbare Leistung:</div>
+          <div class="valueUnit">
+            <div class="value">{{ powerLoad?.toFixed(0) }}</div>
+            <div class="unit">&nbsp;W</div>
+          </div>
+          <div class="valueUnit">
+            <div class="value">{{ powerLoadPercent?.toFixed(2) }}</div>
+            <div class="unit">&nbsp;%</div>
+          </div>
+        </div>
+
+        <div class="group">
+          <div class="header">Strom:</div>
+          <div class="valueUnit">
+            <div class="value">{{ current?.toFixed(1) }}</div>
+            <div class="unit">&nbsp;A</div>
+          </div>
+        </div>
+
+        <div class="group">
+          <div class="header">Leitungwiderstand:</div>
+          <div class="valueUnit">
+            <div class="value">{{ resistance2Way?.toFixed(3) }}</div>
+            <div class="unit">&nbsp;&Omega;</div>
+          </div>
+        </div>
+
+        <div class="group">
+          <div class="header">Lastwiderstand:</div>
+          <div class="valueUnit">
+            <div class="value">{{ resistanceLoad?.toFixed(3) }}</div>
+            <div class="unit">&nbsp;&Omega;</div>
+          </div>
+        </div>
+
+        <div class="group">
+          <div class="header">Gesamtwiderstand:</div>
+          <div class="valueUnit">
+            <div class="value">{{ resistanceTotal?.toFixed(3) }}</div>
+            <div class="unit">&nbsp;&Omega;</div>
+          </div>
+        </div>
       </div>
 
     </div>

src/main/angular/src/app/voltage-drop/voltage-drop.component.less

@@ -1,15 +1,20 @@
 @import "../../tile.less";
 
-.label {
+#VoltageDropInputs {
 
+  .label {
+    width: 12em;
   }
 
   .input {
-
+    input {
+      width: 100%;
+      text-align: right;
+    }
   }
 
   .unit {
-
+    width: 3em;
   }
 
   .shortcuts {
@@ -25,4 +30,44 @@
       border-radius: @space;
     }
 
+    .shortcutSelected {
+      color: white;
+      background-color: dodgerblue;
+    }
+
+  }
+
+}
+
+#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;
+  }
+
 }

src/main/angular/src/app/voltage-drop/voltage-drop.component.ts

@@ -1,6 +1,5 @@
 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 = {
+  readonly input: Values = {
-    length: this.lengths[4],
+    length: this.SHORTCUTS_LENGTH[4],
-    voltage: this.voltages[4],
+    voltage: this.SHORTCUTS_VOLTAGE[4],
-    power: this.powers[3],
+    power: this.SHORTCUTS_POWER[3],
-    crossSection: this.crossSections[3],
+    crossSection: this.SHORTCUTS_CROSS_SECTION[3],
-    resistanceSpecific: this.resistances[1].value,
+    resistanceSpecific: this.SHORTCUTS_RESISTANCE[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;
 
   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.resistance2Way = (this.input.resistanceSpecific * this.input.length / this.input.crossSection) * 2;
-    this.resistanceLoad = (this.values.voltage * this.values.voltage) / (this.values.power * 1000);
+    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);
   }
 
 }