From 58496e74ecd88394a0467e54eb99f067a3ac1716 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= Date: Tue, 22 Oct 2024 16:38:49 +0200 Subject: [PATCH] menubar, tiles, VoltageDrop from old project --- src/main/angular/src/app/app.component.html | 4 + src/main/angular/src/app/app.component.less | 14 ++ src/main/angular/src/app/app.component.ts | 4 +- src/main/angular/src/app/app.routes.ts | 2 + src/main/angular/src/app/solar/Mass.ts | 4 +- .../src/app/solar/solar.component.html | 51 ++++++-- .../src/app/solar/solar.component.less | 35 +++-- .../angular/src/app/solar/solar.component.ts | 4 +- .../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 | 68 ++++++++++ .../voltage-drop/voltage-drop.component.less | 76 +++++++++++ .../voltage-drop/voltage-drop.component.ts | 121 ++++++++++++++++++ src/main/angular/src/config.less | 1 + src/main/angular/src/styles.less | 11 ++ src/main/angular/src/tile.less | 41 ++++++ 17 files changed, 530 insertions(+), 26 deletions(-) create mode 100644 src/main/angular/src/app/voltage-drop/value/value.component.html create mode 100644 src/main/angular/src/app/voltage-drop/value/value.component.less create mode 100644 src/main/angular/src/app/voltage-drop/value/value.component.ts create mode 100644 src/main/angular/src/app/voltage-drop/voltage-drop.component.html create mode 100644 src/main/angular/src/app/voltage-drop/voltage-drop.component.less create mode 100644 src/main/angular/src/app/voltage-drop/voltage-drop.component.ts create mode 100644 src/main/angular/src/config.less create mode 100644 src/main/angular/src/tile.less diff --git a/src/main/angular/src/app/app.component.html b/src/main/angular/src/app/app.component.html index 7dd570e..a9cf3fe 100644 --- a/src/main/angular/src/app/app.component.html +++ b/src/main/angular/src/app/app.component.html @@ -1 +1,5 @@ + diff --git a/src/main/angular/src/app/app.component.less b/src/main/angular/src/app/app.component.less index e69de29..5434010 100644 --- a/src/main/angular/src/app/app.component.less +++ b/src/main/angular/src/app/app.component.less @@ -0,0 +1,14 @@ +#mainMenu { + border-bottom: 1px solid black; + + .mainMenuItem { + float: left; + padding: 0.5em; + border-right: 1px solid black; + } + + .mainMenuItemActive { + background-color: lightskyblue; + } + +} diff --git a/src/main/angular/src/app/app.component.ts b/src/main/angular/src/app/app.component.ts index 9a3a2ba..c83c3bc 100644 --- a/src/main/angular/src/app/app.component.ts +++ b/src/main/angular/src/app/app.component.ts @@ -1,10 +1,10 @@ import {Component} from '@angular/core'; -import {RouterOutlet} from '@angular/router'; +import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, RouterLink, RouterLinkActive], templateUrl: './app.component.html', styleUrl: './app.component.less' }) diff --git a/src/main/angular/src/app/app.routes.ts b/src/main/angular/src/app/app.routes.ts index 518c308..452fabc 100644 --- a/src/main/angular/src/app/app.routes.ts +++ b/src/main/angular/src/app/app.routes.ts @@ -1,7 +1,9 @@ import {Routes} from '@angular/router'; import {SolarComponent} from './solar/solar.component'; +import {VoltageDropComponent} from "./voltage-drop/voltage-drop.component"; export const routes: Routes = [ {path: 'Solar', component: SolarComponent}, + {path: 'VoltageDrop', component: VoltageDropComponent}, {path: '**', redirectTo: '/Solar'}, ]; diff --git a/src/main/angular/src/app/solar/Mass.ts b/src/main/angular/src/app/solar/Mass.ts index a18acd3..068b66c 100644 --- a/src/main/angular/src/app/solar/Mass.ts +++ b/src/main/angular/src/app/solar/Mass.ts @@ -4,12 +4,12 @@ export class Mass { constructor( readonly name: string, - readonly diameterMeters: number, + readonly realMeters: number, readonly massKg: number, readonly moons: Mass[], modeMeters?: number, ) { - this.modelMeters = modeMeters || diameterMeters; + this.modelMeters = modeMeters || realMeters; } } diff --git a/src/main/angular/src/app/solar/solar.component.html b/src/main/angular/src/app/solar/solar.component.html index 143c97f..7e3c997 100644 --- a/src/main/angular/src/app/solar/solar.component.html +++ b/src/main/angular/src/app/solar/solar.component.html @@ -1,11 +1,40 @@ - -m - - - - - - -
{{ mass.name }}{{ doPrefix(mass.diameterMeters, 'm', 1000, 'k', 0) }}{{ unit(mass.modelMeters, 'm') }}
+
+ +
+ +
+
+ Sonnensystem Skalieren +
+
+ + + + + + + + + + + + + + + + +
NameRealitätSkaliert
{{ mass.name }}{{ doPrefix(mass.realMeters, 'm', 1000, 'k', 0) }}{{ unit(mass.modelMeters, 'm') }}
+ + + + +  m +
+
+
+ +
+ +
diff --git a/src/main/angular/src/app/solar/solar.component.less b/src/main/angular/src/app/solar/solar.component.less index f48843d..e41231e 100644 --- a/src/main/angular/src/app/solar/solar.component.less +++ b/src/main/angular/src/app/solar/solar.component.less @@ -1,19 +1,36 @@ +@import "../../tile.less"; + table { width: 100%; } -th { - text-align: left; +td { + white-space: nowrap; + border: 0.2em solid white; } -td { +.name { + text-align: left; + font-weight: bold; +} + +.real { text-align: right; } -@media (min-width: 1000px) { - - table { - width: 400px; - } - +.model { + text-align: right; +} + +input { + width: 100%; + text-align: right; +} + +select { + width: 100%; +} + +.unit { + width: 0; } diff --git a/src/main/angular/src/app/solar/solar.component.ts b/src/main/angular/src/app/solar/solar.component.ts index 1b385c4..c23691c 100644 --- a/src/main/angular/src/app/solar/solar.component.ts +++ b/src/main/angular/src/app/solar/solar.component.ts @@ -62,8 +62,8 @@ export class SolarComponent implements OnInit { protected prefix = ""; ngOnInit() { - const scale = this.pivot.modelMeters / this.pivot.diameterMeters; - this.masses.filter(m => m != this.pivot).forEach(m => m.modelMeters = scale * m.diameterMeters); + const scale = this.pivot.modelMeters / this.pivot.realMeters; + this.masses.filter(m => m != this.pivot).forEach(m => m.modelMeters = scale * m.realMeters); this.updatePrefix(); } 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 new file mode 100644 index 0000000..5837dbf --- /dev/null +++ b/src/main/angular/src/app/voltage-drop/value/value.component.html @@ -0,0 +1,11 @@ +
+
{{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 new file mode 100644 index 0000000..5ab8ad2 --- /dev/null +++ b/src/main/angular/src/app/voltage-drop/value/value.component.less @@ -0,0 +1,44 @@ +.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 new file mode 100644 index 0000000..af8d8fb --- /dev/null +++ b/src/main/angular/src/app/voltage-drop/value/value.component.ts @@ -0,0 +1,65 @@ +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 new file mode 100644 index 0000000..9d7aebe --- /dev/null +++ b/src/main/angular/src/app/voltage-drop/voltage-drop.component.html @@ -0,0 +1,68 @@ +
+
+
Spannung
+
+
V
+
+ +
{{v}}
+ +
+
+ +
+
Leistung
+
+
kW
+
+ +
{{c}}
+ +
+
+ +
+
Querschnitt
+
+
mm²
+
+ +
{{c}}
+ +
+
+ +
+
Länge (1-fach)
+
+
m
+
+ +
{{l}}
+ +
+
+ +
+
Spezifischer Widerstand
+
+
Ω*m
+
+ +
{{r.name}}
+ +
+
+ +
+ +
+ + + + + + + + +
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 new file mode 100644 index 0000000..14169e1 --- /dev/null +++ b/src/main/angular/src/app/voltage-drop/voltage-drop.component.less @@ -0,0 +1,76 @@ +@import "../../tile.less"; + +table { + width: 100%; +} + +th { + text-align: left; +} + +td { + text-align: right; +} + +.box { + border-top: 1px solid black; + margin-top: 1em; +} + +.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 { + float: left; + font-size: 90%; + padding: 0.2vmin 0.7vmin; + margin: 0.5vmin; + border-radius: 0.5vmin; + background-color: lightgray; + } + + .shortcutSelected { + background-color: lightgreen; + } + + } + +} + +@media (min-width: 800px) { + .box { + float: left; + width: 50%; + border-top-width: 0; + margin-top: 0; + } +} 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 new file mode 100644 index 0000000..ac896a7 --- /dev/null +++ b/src/main/angular/src/app/voltage-drop/voltage-drop.component.ts @@ -0,0 +1,121 @@ +import { Component } from '@angular/core'; +import {FormsModule} from "@angular/forms"; +import {ValueComponent} from "./value/value.component"; +import {NgForOf} from "@angular/common"; + +class Resistance { + + constructor( + readonly name: string, + readonly value: number, + ) { + // nothing + } + +} + +class Values { + + constructor( + public length: number, + public voltage: number, + public power: number, + public crossSection: number, + public resistanceSpecific: number, + ) { + // nothing + } + +} + +@Component({ + selector: 'app-voltage-drop', + standalone: true, + imports: [ + FormsModule, + ValueComponent, + NgForOf + ], + templateUrl: './voltage-drop.component.html', + styleUrl: './voltage-drop.component.less' +}) +export class VoltageDropComponent { + + readonly lengths: number[] = [10, 15, 20, 30, 40, 50, 75, 100]; + + readonly voltages: 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 crossSections: number[] = [0.75, 1.5, 2.5, 4, 6, 10, 16, 25, 35, 50]; + + readonly resistances: 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; + + resistance2Way?: number; + + resistanceLoad?: number; + + resistanceTotal?: number; + + current?: number; + + voltageDrop2Way?: number; + + powerLoss2Way?: number; + + voltageDropLoad?: number; + + powerLoad?: number; + + constructor() { + } + + ngOnInit(): void { + this.update(); + } + + update() { + if (!this.values || !this.values.resistanceSpecific || !this.values.length || !this.values.crossSection || !this.values.power || !this.values.voltage) { + this.resistance2Way = undefined; + this.resistanceLoad = undefined; + this.resistanceTotal = undefined; + this.current = undefined; + this.voltageDrop2Way = undefined; + this.powerLoss2Way = undefined; + this.voltageDropLoad = undefined; + this.powerLoad = 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.resistanceTotal = this.resistance2Way + this.resistanceLoad; + this.current = this.values.voltage / this.resistanceTotal; + this.voltageDrop2Way = this.resistance2Way * this.current; + this.powerLoss2Way = this.voltageDrop2Way * this.current; + this.voltageDropLoad = this.resistanceLoad * this.current; + this.powerLoad = this.voltageDropLoad * this.current; + } + +} diff --git a/src/main/angular/src/config.less b/src/main/angular/src/config.less new file mode 100644 index 0000000..f71af77 --- /dev/null +++ b/src/main/angular/src/config.less @@ -0,0 +1 @@ +@space: 0.5em; diff --git a/src/main/angular/src/styles.less b/src/main/angular/src/styles.less index 0d9e9f7..603a0a1 100644 --- a/src/main/angular/src/styles.less +++ b/src/main/angular/src/styles.less @@ -1,6 +1,7 @@ body { font-family: sans-serif; font-size: 4vw; + margin: 0; } div { @@ -12,6 +13,16 @@ a { text-decoration: none; } +input { + all: unset; + background-color: white; + border: 1px solid lightgray; +} + +select { + font-size: inherit; +} + table { border-collapse: collapse; } diff --git a/src/main/angular/src/tile.less b/src/main/angular/src/tile.less new file mode 100644 index 0000000..c28a78b --- /dev/null +++ b/src/main/angular/src/tile.less @@ -0,0 +1,41 @@ +@import "config.less"; + +.tileContainer { + padding: calc(@space / 2); + + .tile { + width: 100%; + padding: calc(@space / 2); + + .tileInner { + border: 1px solid #ddd; + border-radius: @space; + background-color: #fbfbfb; + + .tileTitle { + font-weight: bold; + padding: calc(@space / 2) @space; + background-color: lightskyblue; + } + + .tileContent { + padding: calc(@space / 2); + } + } + + } + +} + +@media (min-width: 1000px) { + + .tileContainer { + + .tile { + float: left; + width: 500px; + } + + } + +}