patrick/Tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VoltageDrop style + code clean

Browse Source
This commit is contained in:
Patrick Haßel 2024-10-23 09:17:39 +02:00
parent 59b9ad5241
commit e2738716be
6 changed files with 193 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

130
src/main/angular/src/app/voltage-drop/voltage-drop.component.html
View File

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

77
src/main/angular/src/app/voltage-drop/voltage-drop.component.less
View File

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

62
src/main/angular/src/app/voltage-drop/voltage-drop.component.ts
View File

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