more details pages

ui/hv2-ui/src/app/app-routing.module.ts

@@ -11,6 +11,8 @@ import { MyCommercialUnitsComponent } from './my-commercial-units/my-commercial-
 import { TenantDetailsComponent } from './tenant-details/tenant-details.component';
 import { PremiseDetailsComponent } from './premise-details/premise-details.component';
 import { FlatDetailsComponent } from './flat-details/flat-details.component';
+import { ParkingDetailsComponent } from './parking-details/parking-details.component';
+import { CommercialUnitDetailsComponent } from './commercial-unit-details/commercial-unit-details.component';
 
 
 const routes: Routes = [
@@ -25,6 +27,10 @@ const routes: Routes = [
   { path: 'premise', component: PremiseDetailsComponent, canActivate: [ AuthGuardService ] },
   { path: 'flat/:id', component: FlatDetailsComponent, canActivate: [ AuthGuardService ] },
   { path: 'flat', component: FlatDetailsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'parking/:id', component: ParkingDetailsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'parking', component: ParkingDetailsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'commercialunit/:id', component: CommercialUnitDetailsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'commercialunit', component: CommercialUnitDetailsComponent, canActivate: [ AuthGuardService ] },
   { path: 'logout', component: LogoutComponent },
   { path: 'login', component: LoginComponent }
 ]

ui/hv2-ui/src/app/app.module.ts

@@ -31,7 +31,9 @@ import { MyCommercialUnitsComponent } from './my-commercial-units/my-commercial-
 import { TenantDetailsComponent } from './tenant-details/tenant-details.component';
 import { PremiseDetailsComponent } from './premise-details/premise-details.component';
 import { FlatDetailsComponent } from './flat-details/flat-details.component';
-import { MatSelectModule } from '@angular/material/select'
+import { MatSelectModule } from '@angular/material/select';
+import { ParkingDetailsComponent } from './parking-details/parking-details.component';
+import { CommercialUnitDetailsComponent } from './commercial-unit-details/commercial-unit-details.component'
 @NgModule({
   declarations: [
     AppComponent,
@@ -47,7 +49,9 @@ import { MatSelectModule } from '@angular/material/select'
     MyCommercialUnitsComponent,
     TenantDetailsComponent,
     PremiseDetailsComponent,
-    FlatDetailsComponent
+    FlatDetailsComponent,
+    ParkingDetailsComponent,
+    CommercialUnitDetailsComponent
   ],
   imports: [
     BrowserModule,

ui/hv2-ui/src/app/commercial-unit-details/commercial-unit-details.component.html

@@ -0,0 +1,31 @@
+<section class="mat-typography">
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                {{commercialPremise?.description}} {{premise?.description}}
+            </mat-card-title>
+            <mat-card-subtitle>
+                ID: {{commercialPremise?.id}}
+            </mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <form (ngSubmit)="saveCommercialPremise()">
+                    <div>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Beschreibung</mat-label>
+                            <input matInput name="description" [(ngModel)]="commercialPremise.description"/>
+                        </mat-form-field>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Haus</mat-label>
+                            <mat-select [(ngModel)]="commercialPremise.premise" name="premise">
+                                <mat-option *ngFor="let p of premises" [value]="p.id">{{p.description}}</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                    <button #submitButton type="submit" mat-raised-button color="primary">Speichern</button>
+                </form>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</section>

ui/hv2-ui/src/app/commercial-unit-details/commercial-unit-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommercialUnitDetailsComponent } from './commercial-unit-details.component';
+
+describe('CommercialUnitDetailsComponent', () => {
+  let component: CommercialUnitDetailsComponent;
+  let fixture: ComponentFixture<CommercialUnitDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CommercialUnitDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommercialUnitDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/hv2-ui/src/app/commercial-unit-details/commercial-unit-details.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CommercialPremiseService, PremiseService } from '../data-object-service';
+import { NULL_CommercialPremise, NULL_Premise, CommercialPremise, Premise } from '../data-objects';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-commercial-unit-details',
+  templateUrl: './commercial-unit-details.component.html',
+  styleUrls: ['./commercial-unit-details.component.css']
+})
+export class CommercialUnitDetailsComponent implements OnInit {
+
+  @ViewChild('submitButton') submitButton: MatButton
+  
+  commercialPremise: CommercialPremise = NULL_CommercialPremise
+  premise: Premise = NULL_Premise
+
+  premises: Premise[]
+
+  constructor(
+    private commercialPremiseService: CommercialPremiseService,
+    private premiseService: PremiseService,
+    private messageService: MessageService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+
+
+
+  async getCommercialPremise(): Promise<void> {
+    try {
+      const id = +this.route.snapshot.paramMap.get('id')
+      if (id != 0) {
+        this.commercialPremise = await this.commercialPremiseService.getCommercialPremise(id)
+        this.premise = await this.premiseService.getPremise(this.commercialPremise.premise)
+      }
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  async getPremises(): Promise<void> {
+    try {
+      this.messageService.add("Trying to load premises")
+      this.premises = await this.premiseService.getPremises()
+      this.messageService.add("Premises loaded")
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+  
+  async saveCommercialPremise() {
+    this.submitButton.disabled = true
+    this.messageService.add(`saveCommercialPremise: ${ JSON.stringify(this.commercialPremise, undefined, 4) }`)
+    if (this.commercialPremise.id == 0) {
+      this.messageService.add("about to insert new commercialPremise")
+      this.commercialPremise = await this.commercialPremiseService.postCommercialPremise(this.commercialPremise)
+      this.messageService.add(`Successfully added flat with id ${this.commercialPremise.id}`)
+    } else {
+      this.messageService.add("about to update existing commercialPremise")
+    }
+    this.router.navigate(['/commercialunits'])
+  }
+
+
+  ngOnInit(): void {
+    this.getPremises()
+    this.getCommercialPremise()
+  }
+
+}

ui/hv2-ui/src/app/my-commercial-units/my-commercial-units.component.html

@@ -3,6 +3,9 @@
         <mat-card-header>
             <mat-card-title>
                 Meine Büros
+                <span>Meine Büros</span>
+                <span class="spacer"></span>
+                <a mat-button routerLink="/commercialunit">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.commercialPremise.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]="['/commercialunit/', row.id]"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/commercialunit/', row.commercialPremise.id]"></tr>
                 </table>
             </div>
         </mat-card-content>

ui/hv2-ui/src/app/my-commercial-units/my-commercial-units.component.ts

@@ -1,9 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { MessageService } from '../message.service';
-import { CommercialPremiseService } from '../data-object-service';
+import { CommercialPremiseService, PremiseService } from '../data-object-service';
-import { CommercialPremise } from '../data-objects';
+import { CommercialPremise, Premise } from '../data-objects';
 import { MatTableDataSource } from '@angular/material/table'
 
+interface DN_CommercialPremise {
+  commercialPremise: CommercialPremise
+  premise: Premise
+}
+
 @Component({
   selector: 'app-my-commercial-units',
   templateUrl: './my-commercial-units.component.html',
@@ -12,18 +17,40 @@ import { MatTableDataSource } from '@angular/material/table'
 export class MyCommercialUnitsComponent implements OnInit {
 
   commercialPremises: CommercialPremise[]
-  dataSource: MatTableDataSource<CommercialPremise>
+  premises: Premise[]
+  dnCommercialPremises: DN_CommercialPremise[] = []
+
+  dataSource: MatTableDataSource<DN_CommercialPremise>
   displayedColumns: string[] = ["description", "premise"]
 
-  constructor(private commercialPremiseService: CommercialPremiseService, private messageService: MessageService) { }
+  constructor(
+    private commercialPremiseService: CommercialPremiseService, 
+    private premiseService: PremiseService,
+    private messageService: MessageService
+  ) { }
 
   async getCommercialPremises(): Promise<void> {
     try {
       this.messageService.add("Trying to load commercialPremises")
       this.commercialPremises = await this.commercialPremiseService.getCommercialPremises()
       this.messageService.add("CommercialPremises 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<CommercialPremise>(this.commercialPremises)
+      const premisesDict = new Map<number, Premise>()
+      for (let p of this.premises) {
+        premisesDict.set(p.id, p)
+      }
+      for (let f of this.commercialPremises) {
+        this.dnCommercialPremises.push({
+          commercialPremise: f,
+          premise: premisesDict.get(f.premise)
+        })
+      }
+
+
+      this.dataSource = new MatTableDataSource<DN_CommercialPremise>(this.dnCommercialPremises)
     } catch (err) {
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }

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

@@ -27,7 +27,7 @@
                         <td mat-cell *matCellDef="let element">{{element.flat.flat_no}}</td>
                     </ng-container>
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/flat/', row.id]"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/flat/', row.flat.id]"></tr>
                 </table>
             </div>
         </mat-card-content>

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

@@ -17,7 +17,7 @@ interface DN_Flat {
 export class MyFlatsComponent implements OnInit {
   flats: Flat[]
   premises: Premise[]
-  dnFlats: DN_Flat[]
+  dnFlats: DN_Flat[] = []
 
   dataSource: MatTableDataSource<DN_Flat>
   displayedColumns: string[] = ["description", "premise", "area", "flat_no"]
@@ -39,20 +39,18 @@ export class MyFlatsComponent implements OnInit {
 
       const premisesDict = new Map<number, Premise>()
       for (let p of this.premises) {
-        this.messageService.add(`p2pd: ${p.id}`)
         premisesDict.set(p.id, p)
       }
-      this.messageService.add(`premisesDict: ${ JSON.stringify(premisesDict, undefined, 4) }`)
       for (let f of this.flats) {
         this.dnFlats.push({
           flat: f,
           premise: premisesDict.get(f.premise)
         })
       }
-      this.messageService.add(`dnFlats: { JSON.stringify(this.dnFlats, undefined, 4) }`)
 
       this.dataSource = new MatTableDataSource<DN_Flat>(this.dnFlats)
     } catch (err) {
+      // throw err
       this.messageService.add(`Error in getFlats: ${ JSON.stringify(err, undefined, 4) }`)
     }
   }

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 { ParkingService, PremiseService } from '../data-object-service';
-import { Parking } from '../data-objects';
+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))
     }

ui/hv2-ui/src/app/parking-details/parking-details.component.html

@@ -0,0 +1,31 @@
+<section class="mat-typography">
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                {{parking?.description}} {{premise?.description}}
+            </mat-card-title>
+            <mat-card-subtitle>
+                ID: {{parking?.id}}
+            </mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <form (ngSubmit)="saveParking()">
+                    <div>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Beschreibung</mat-label>
+                            <input matInput name="description" [(ngModel)]="parking.description"/>
+                        </mat-form-field>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Haus</mat-label>
+                            <mat-select [(ngModel)]="parking.premise" name="premise">
+                                <mat-option *ngFor="let p of premises" [value]="p.id">{{p.description}}</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                    <button #submitButton type="submit" mat-raised-button color="primary">Speichern</button>
+                </form>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</section>

ui/hv2-ui/src/app/parking-details/parking-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParkingDetailsComponent } from './parking-details.component';
+
+describe('ParkingDetailsComponent', () => {
+  let component: ParkingDetailsComponent;
+  let fixture: ComponentFixture<ParkingDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ParkingDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParkingDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/hv2-ui/src/app/parking-details/parking-details.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ParkingService, PremiseService } from '../data-object-service';
+import { NULL_Parking, NULL_Premise, Parking, Premise } from '../data-objects';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-parking-details',
+  templateUrl: './parking-details.component.html',
+  styleUrls: ['./parking-details.component.css']
+})
+export class ParkingDetailsComponent implements OnInit {
+
+  @ViewChild('submitButton') submitButton: MatButton
+  
+  parking: Parking = NULL_Parking
+  premise: Premise = NULL_Premise
+
+  premises: Premise[]
+
+  constructor(
+    private parkingService: ParkingService,
+    private premiseService: PremiseService,
+    private messageService: MessageService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+
+
+
+  async getParking(): Promise<void> {
+    try {
+      const id = +this.route.snapshot.paramMap.get('id')
+      if (id != 0) {
+        this.parking = await this.parkingService.getParking(id)
+        this.premise = await this.premiseService.getPremise(this.parking.premise)
+      }
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  async getPremises(): Promise<void> {
+    try {
+      this.messageService.add("Trying to load premises")
+      this.premises = await this.premiseService.getPremises()
+      this.messageService.add("Premises loaded")
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+  
+  async saveParking() {
+    this.submitButton.disabled = true
+    this.messageService.add(`saveParking: ${ JSON.stringify(this.parking, undefined, 4) }`)
+    if (this.parking.id == 0) {
+      this.messageService.add("about to insert new parking")
+      this.parking = await this.parkingService.postParking(this.parking)
+      this.messageService.add(`Successfully added flat with id ${this.parking.id}`)
+    } else {
+      this.messageService.add("about to update existing parking")
+    }
+    this.router.navigate(['/parkings'])
+  }
+
+
+  ngOnInit(): void {
+    this.getPremises()
+    this.getParking()
+  }
+
+}