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

VoltageDrop Vorgaben ans Design angepasst

Browse Source
This commit is contained in:
Patrick Haßel 2024-10-22 16:53:07 +02:00
parent 58496e74ec
commit 59b9ad5241
2 changed files with 108 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,68 +1,103 @@
<div class="box">
<div class="value">
<div class="label">Spannung</div>
<div class="input"><input type="number" [(ngModel)]="values.voltage" (ngModelChange)="update()"></div>
<div class="unit">V</div>
<div 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>
<div class="tileContainer">
<div class="tile">
<div class="tileInner">
<div class="tileTitle">
Vorgaben
</div>
<div class="tileContent">
<table>
<tr>
<td class="label">Spannung</td>
<td class="input"><input type="number" [(ngModel)]="values.voltage" (ngModelChange)="update()"></td>
<td class="unit">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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="value">
<div class="label">Leistung</div>
<div class="input"><input type="number" [(ngModel)]="values.power" (ngModelChange)="update()"></div>
<div class="unit">kW</div>
<div 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>
</div>
</div>
<div class="tile">
<div class="tileInner">
<div class="value">
<div class="label">Querschnitt</div>
<div class="input"><input type="number" [(ngModel)]="values.crossSection" (ngModelChange)="update()"></div>
<div class="unit">mm²</div>
<div 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>
</div>
</div>
<div class="tileTitle">
Ergebnisse
</div>
<div class="value">
<div class="label">Länge (1-fach)</div>
<div class="input"><input type="number" [(ngModel)]="values.length" (ngModelChange)="update()"></div>
<div class="unit">m</div>
<div 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>
</div>
</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>
<div class="value">
<div class="label">Spezifischer Widerstand</div>
<div class="input"><input type="number" [(ngModel)]="values.resistanceSpecific" (ngModelChange)="update()"></div>
<div class="unit">&Omega;*m</div>
<div 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>
</div>
</div>
</div>
<div class="box">
<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>

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

@ -1,76 +1,28 @@
@import "../../tile.less";
table {
width: 100%;
.label {
}
th {
text-align: left;
.input {
}
td {
text-align: right;
.unit {
}
.box {
border-top: 1px solid black;
margin-top: 1em;
}
.shortcuts {
padding-top: calc(@space / 2);
padding-bottom: calc(@space * 2);
.box:first-child {
border-top-width: 0;
}
.value {
clear: both;
.label {
padding: 1vmin 0 0.5vmin 0;
}
.input {
clear: both;
.shortcut {
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;
}
font-size: 80%;
padding: calc(@space / 2) @space;
margin-right: calc(@space / 2);
background-color: lightskyblue;
border-radius: @space;
}
}
@media (min-width: 800px) {
.box {
float: left;
width: 50%;
border-top-width: 0;
margin-top: 0;
}
}