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

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

@ -1,62 +1,92 @@
<div class="box"> <div class="tileContainer">
<div class="value">
<div class="label">Spannung</div> <div class="tile">
<div class="input"><input type="number" [(ngModel)]="values.voltage" (ngModelChange)="update()"></div> <div class="tileInner">
<div class="unit">V</div>
<div class="shortcuts"> <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"> <ng-container *ngFor="let v of voltages">
<div class="shortcut" [class.shortcutSelected]="values.voltage===v" (click)="values.voltage=v; update()">{{v}}</div> <div class="shortcut" [class.shortcutSelected]="values.voltage===v" (click)="values.voltage=v; update()">{{ v }}</div>
</ng-container> </ng-container>
</div> </td>
</div> </tr>
<div class="value"> <tr>
<div class="label">Leistung</div> <td class="label">Leistung</td>
<div class="input"><input type="number" [(ngModel)]="values.power" (ngModelChange)="update()"></div> <td class="input"><input type="number" [(ngModel)]="values.power" (ngModelChange)="update()"></td>
<div class="unit">kW</div> <td class="unit">kW</td>
<div class="shortcuts"> </tr>
<tr>
<td colspan="3" class="shortcuts">
<ng-container *ngFor="let c of powers"> <ng-container *ngFor="let c of powers">
<div class="shortcut" [class.shortcutSelected]="values.power===c" (click)="values.power=c; update()">{{c}}</div> <div class="shortcut" [class.shortcutSelected]="values.power===c" (click)="values.power=c; update()">{{ c }}</div>
</ng-container> </ng-container>
</div> </td>
</div> </tr>
<div class="value"> <tr>
<div class="label">Querschnitt</div> <td class="label">Querschnitt</td>
<div class="input"><input type="number" [(ngModel)]="values.crossSection" (ngModelChange)="update()"></div> <td class="input"><input type="number" [(ngModel)]="values.crossSection" (ngModelChange)="update()"></td>
<div class="unit">mm²</div> <td class="unit">mm²</td>
<div class="shortcuts"> </tr>
<tr>
<td colspan="3" class="shortcuts">
<ng-container *ngFor="let c of crossSections"> <ng-container *ngFor="let c of crossSections">
<div class="shortcut" [class.shortcutSelected]="values.crossSection===c" (click)="values.crossSection=c; update()">{{c}}</div> <div class="shortcut" [class.shortcutSelected]="values.crossSection===c" (click)="values.crossSection=c; update()">{{ c }}</div>
</ng-container> </ng-container>
</div> </td>
</div> </tr>
<div class="value"> <tr>
<div class="label">Länge (1-fach)</div> <td class="label">Länge (1-fach)</td>
<div class="input"><input type="number" [(ngModel)]="values.length" (ngModelChange)="update()"></div> <td class="input"><input type="number" [(ngModel)]="values.length" (ngModelChange)="update()"></td>
<div class="unit">m</div> <td class="unit">m</td>
<div class="shortcuts"> </tr>
<tr>
<td colspan="3" class="shortcuts">
<ng-container *ngFor="let l of lengths"> <ng-container *ngFor="let l of lengths">
<div class="shortcut" [class.shortcutSelected]="values.length===l" (click)="values.length=l; update()">{{l}}</div> <div class="shortcut" [class.shortcutSelected]="values.length===l" (click)="values.length=l; update()">{{ l }}</div>
</ng-container> </ng-container>
</div> </td>
</div> </tr>
<div class="value"> <tr>
<div class="label">Spezifischer Widerstand</div> <td class="label">Spezifischer Widerstand</td>
<div class="input"><input type="number" [(ngModel)]="values.resistanceSpecific" (ngModelChange)="update()"></div> <td class="input"><input type="number" [(ngModel)]="values.resistanceSpecific" (ngModelChange)="update()"></td>
<div class="unit">&Omega;*m</div> <td class="unit">&Omega;*m</td>
<div class="shortcuts"> </tr>
<tr>
<td colspan="3" class="shortcuts">
<ng-container *ngFor="let r of resistances"> <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> <div class="shortcut" [class.shortcutSelected]="values.resistanceSpecific===r.value" (click)="values.resistanceSpecific=r.value; update()">{{ r.name }}</div>
</ng-container> </ng-container>
</td>
</tr>
</table>
</div>
</div> </div>
</div> </div>
</div> <div class="tile">
<div class="tileInner">
<div class="box"> <div class="tileTitle">
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="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="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 Spannung" unit="V" [value]="voltageDropLoad" [places]="1" [percentDivisor]="values.voltage" [percentPlaces]="2"></app-value>
@ -65,4 +95,9 @@
<app-value title="Leitungwiderstand" unit="&Omega;" [value]="resistance2Way" [places]="3"></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="Lastwiderstand" unit="&Omega;" [value]="resistanceLoad" [places]="3"></app-value>
<app-value title="Gesamtwiderstand" unit="&Omega;" [value]="resistanceTotal" [places]="3"></app-value> <app-value title="Gesamtwiderstand" unit="&Omega;" [value]="resistanceTotal" [places]="3"></app-value>
</div>
</div>
</div>
</div> </div>

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

@ -1,76 +1,28 @@
@import "../../tile.less"; @import "../../tile.less";
table { .label {
width: 100%;
} }
th { .input {
text-align: left;
} }
td { .unit {
text-align: right;
} }
.box { .shortcuts {
border-top: 1px solid black; padding-top: calc(@space / 2);
margin-top: 1em; 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;
float: left;
}
input[type=number] {
float: left;
text-align: right;
}
input.tooHigh {
background-color: red;
}
.unit {
padding-left: 0.5vmin;
}
.shortcuts {
clear: both;
.shortcut { .shortcut {
float: left; float: left;
font-size: 90%; font-size: 80%;
padding: 0.2vmin 0.7vmin; padding: calc(@space / 2) @space;
margin: 0.5vmin; margin-right: calc(@space / 2);
border-radius: 0.5vmin; background-color: lightskyblue;
background-color: lightgray; border-radius: @space;
}
.shortcutSelected {
background-color: lightgreen;
}
} }
} }
@media (min-width: 800px) {
.box {
float: left;
width: 50%;
border-top-width: 0;
margin-top: 0;
}
}