SolarSystem two tiles for real + scaled

AND added distanceToSun

src/main/angular/src/app/solar-system/SolarSystemBody.ts

@@ -1,21 +1,28 @@
+export const MIO_KM: number = 1000 * 1000 * 1000;
+
 export class SolarSystemBody {
 
-  readonly realDistanceMeters: number;
+  readonly realDistance: number;
 
-  modelMeters: number;
+  scaledDiameter: number;
 
-  modelDistance: number;
+  scaledDistance: number;
 
   constructor(
     readonly name: string,
-    readonly realMeters: number,
+    readonly realDiameter: number,
     realDistanceMioKm: number,
     readonly massKg: number,
     readonly moons: SolarSystemBody[],
   ) {
-    this.realDistanceMeters = realDistanceMioKm * 1000 * 1000 * 1000;
-    this.modelMeters = realMeters;
-    this.modelDistance = realDistanceMioKm;
+    this.realDistance = realDistanceMioKm * MIO_KM;
+    this.scaledDiameter = realDiameter;
+    this.scaledDistance = realDistanceMioKm;
+  }
+
+  scale(scale: number) {
+    this.scaledDiameter = this.realDiameter * scale;
+    this.scaledDistance = this.realDistance * scale;
   }
 
 }

src/main/angular/src/app/solar-system/solar-system.component.html

@@ -1,22 +1,43 @@
 <div class="tileContainer">
 
   <div class="tile">
-
     <div class="tileInner">
       <div class="tileTitle">
-        Sonnensystem Skalieren
+        Realität
       </div>
       <div class="tileContent">
         <table>
           <tr>
             <th>Name</th>
-            <th>Realität</th>
-            <th>Skaliert</th>
+            <th>Durchmesser</th>
+            <th>Zur Sonne</th>
           </tr>
           <tr *ngFor="let mass of BODIES">
             <td class="name">{{ mass.name }}</td>
-            <td class="real">{{ applyPrefixUnit(mass.realMeters, 'm', 1000, 'k', 0, locale) }}</td>
-            <td class="model">{{ diameterUnit.applyPrefixUnit(mass.modelMeters) }}</td>
+            <td>{{ applyPrefixUnit(mass.realDiameter, 'm', 1000, 'k', 0, locale) }}</td>
+            <td>{{ applyPrefixUnit(mass.realDistance, 'm', MIO_KM, 'Mio. k', 0, locale) }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <div class="tile">
+    <div class="tileInner">
+      <div class="tileTitle">
+        Skaliert
+      </div>
+      <div class="tileContent">
+        <table>
+          <tr>
+            <th>Name</th>
+            <th>Durchmesser</th>
+            <th>Zur Sonne</th>
+          </tr>
+          <tr *ngFor="let mass of BODIES">
+            <td class="name">{{ mass.name }}</td>
+            <td>{{ diameterUnit.applyPrefixUnit(mass.scaledDiameter) }}</td>
+            <td>{{ distanceUnit.applyPrefixUnit(mass.scaledDistance) }}</td>
           </tr>
         </table>
         <table>
@@ -27,16 +48,21 @@
               </select>
             </th>
             <td>
-              <input type="number" [(ngModel)]="pivot.modelMeters" (ngModelChange)="update()">
+              <input type="number" [(ngModel)]="pivot.scaledDiameter" (ngModelChange)="update()">
             </td>
             <td class="unit">
               &nbsp;m
             </td>
+            <td>
+              <input type="number" [(ngModel)]="scale" (ngModelChange)="updateViaScale()">
+            </td>
+            <td class="unit">
+              &nbsp;x
+            </td>
           </tr>
         </table>
       </div>
     </div>
-
   </div>
 
 </div>

src/main/angular/src/app/solar-system/solar-system.component.less

@@ -15,14 +15,13 @@ td {
   width: 33.33%;
 }
 
-.real {
+td {
   text-align: right;
   width: 33.33%;
 }
 
-.model {
-  text-align: right;
-  width: 33.33%;
+.name {
+  text-align: left;
 }
 
 input {

src/main/angular/src/app/solar-system/solar-system.component.ts

@@ -1,7 +1,7 @@
 import {Component, Inject, LOCALE_ID, OnInit} from '@angular/core';
 import {DecimalPipe, NgForOf} from "@angular/common";
 import {FormsModule} from "@angular/forms";
-import {SolarSystemBody} from "./SolarSystemBody";
+import {MIO_KM, SolarSystemBody} from "./SolarSystemBody";
 import {BODIES, JUPITER} from "./SOLAR_SYSTEM";
 import {applyPrefixUnit, Unit} from "../Unit";
 
@@ -22,25 +22,38 @@ export class SolarSystemComponent implements OnInit {
 
   protected readonly BODIES = BODIES;
 
+  protected readonly MIO_KM = MIO_KM;
+
+  protected readonly diameterUnit: Unit;
+
+  protected readonly distanceUnit: Unit;
+
   protected pivot: SolarSystemBody = JUPITER;
 
-  protected diameterUnit: Unit;
+  protected scale: number = 1;
 
   constructor(
     @Inject(LOCALE_ID) readonly locale: string,
   ) {
     this.diameterUnit = new Unit('m', this.locale);
+    this.distanceUnit = new Unit('m', this.locale);
   }
 
   ngOnInit() {
-    this.pivot.modelMeters = 0.18;
+    this.pivot.scaledDiameter = 0.18;
+    this.update();
+  }
+
+  updateViaScale() {
+    this.pivot.scaledDiameter = this.pivot.realDiameter * this.scale;
     this.update();
   }
 
   protected update() {
-    const scale = this.pivot.modelMeters / this.pivot.realMeters;
-    BODIES.filter(m => m != this.pivot).forEach(m => m.modelMeters = scale * m.realMeters);
-    this.diameterUnit.update(this.pivot.modelMeters);
+    this.scale = this.pivot.scaledDiameter / this.pivot.realDiameter;
+    BODIES.forEach(m => m.scale(this.scale));
+    this.diameterUnit.update(JUPITER.scaledDiameter);
+    this.distanceUnit.update(JUPITER.scaledDistance);
   }
 
 }