more details pages

ui/hv2-ui/src/app/my-parkings/my-parkings.component.html

@@ -3,6 +3,9 @@
         <mat-card-header>
             <mat-card-title>
                 Meine Garagen
+                <span>Meine Garagen</span>
+                <span class="spacer"></span>
+                <a mat-button routerLink="/parking">Neu anlegen</a>
             </mat-card-title>
         </mat-card-header>
         <mat-card-content>
@@ -10,14 +13,14 @@
                 <table mat-table [dataSource]="dataSource" #zftable>
                     <ng-container matColumnDef="description">
                         <th mat-header-cell *matHeaderCellDef>Beschreibung</th>
-                        <td mat-cell *matCellDef="let element">{{element.description}}</td>
+                        <td mat-cell *matCellDef="let element">{{element.parking.description}}</td>
                     </ng-container>
                     <ng-container matColumnDef="premise">
                         <th mat-header-cell *matHeaderCellDef>Haus</th>
-                        <td mat-cell *matCellDef="let element">{{element.premise}}</td>
+                        <td mat-cell *matCellDef="let element">{{element.premise.description}}</td>
                     </ng-container>
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/parking/', row.id]"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/parking/', row.parking.id]"></tr>
                 </table>
             </div>
         </mat-card-content>

ui/hv2-ui/src/app/my-parkings/my-parkings.component.ts

@@ -1,29 +1,54 @@
 import { Component, OnInit } from '@angular/core';
 import { MessageService } from '../message.service';
-import { ParkingService } from '../data-object-service';
-import { Parking } from '../data-objects';
+import { ParkingService, PremiseService } from '../data-object-service';
+import { Parking, Premise } from '../data-objects';
 import { MatTableDataSource } from '@angular/material/table'
 
+interface DN_Parking {
+  parking: Parking
+  premise: Premise
+}
+
 @Component({
   selector: 'app-my-parkings',
   templateUrl: './my-parkings.component.html',
   styleUrls: ['./my-parkings.component.css']
 })
 export class MyParkingsComponent implements OnInit {
-
   parkings: Parking[]
-  dataSource: MatTableDataSource<Parking>
+  premises: Premise[]
+  dnParkings: DN_Parking[] = []
+
+  dataSource: MatTableDataSource<DN_Parking>
   displayedColumns: string[] = ["description", "premise"]
 
-  constructor(private parkingService: ParkingService, private messageService: MessageService) { }
+  constructor(
+    private parkingService: ParkingService, 
+    private premiseService: PremiseService,
+    private messageService: MessageService
+  ) { }
 
   async getParkings(): Promise<void> {
     try {
       this.messageService.add("Trying to load parkings")
       this.parkings = await this.parkingService.getParkings()
       this.messageService.add("Parkings loaded")
+      this.messageService.add("Trying to load premises")
+      this.premises = await this.premiseService.getPremises()
+      this.messageService.add(`Premises loaded: ${ JSON.stringify(this.premises, undefined, 4) }`)
 
-      this.dataSource = new MatTableDataSource<Parking>(this.parkings)
+      const premisesDict = new Map<number, Premise>()
+      for (let p of this.premises) {
+        premisesDict.set(p.id, p)
+      }
+      for (let p of this.parkings) {
+        this.dnParkings.push({
+          parking: p,
+          premise: premisesDict.get(p.premise)
+        })
+      }
+
+      this.dataSource = new MatTableDataSource<DN_Parking>(this.dnParkings)
     } catch (err) {
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }