add new pages

ui/hv2-ui/package.json

@@ -9,7 +9,6 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "generate": "python ../helpers/hv2-api/generate.py -s ../helpers/hv2-api/schema.json -t ./src/app/*.tmpl"
-
   },
   "private": true,
   "dependencies": {

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

@@ -3,12 +3,19 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuardService } from './auth-guard.service';
 import { LoginComponent } from './login/login.component';
 import { LogoutComponent } from './logout/logout.component';
-import { TestOutputComponent } from './test-output/test-output.component';
-
+import { MyTenantsComponent } from './my-tenants/my-tenants.component';
+import { MyPremisesComponent } from './my-premises/my-premises.component';
+import { MyFlatsComponent } from './my-flats/my-flats.component';
+import { MyParkingsComponent } from './my-parkings/my-parkings.component';
+import { MyCommercialUnitsComponent } from './my-commercial-units/my-commercial-units.component';
 
 
 const routes: Routes = [
-  { path: 'test', component: TestOutputComponent, canActivate: [ AuthGuardService ] },
+  { path: 'tenants', component: MyTenantsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'premises', component: MyPremisesComponent, canActivate: [ AuthGuardService ] },
+  { path: 'flats', component: MyFlatsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'parkings', component: MyParkingsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'commercialunits', component: MyCommercialUnitsComponent, canActivate: [ AuthGuardService ] },
   { path: 'logout', component: LogoutComponent },
   { path: 'login', component: LoginComponent }
 ]

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

@@ -22,6 +22,11 @@ import { LoginComponent } from './login/login.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MyTenantsComponent } from './my-tenants/my-tenants.component';
+import { MatTableModule } from '@angular/material/table';
+import { MyPremisesComponent } from './my-premises/my-premises.component';
+import { MyFlatsComponent } from './my-flats/my-flats.component';
+import { MyParkingsComponent } from './my-parkings/my-parkings.component';
+import { MyCommercialUnitsComponent } from './my-commercial-units/my-commercial-units.component';
 
 
 @NgModule({
@@ -32,7 +37,11 @@ import { MyTenantsComponent } from './my-tenants/my-tenants.component';
     TestOutputComponent,
     LogoutComponent,
     LoginComponent,
-    MyTenantsComponent
+    MyTenantsComponent,
+    MyPremisesComponent,
+    MyFlatsComponent,
+    MyParkingsComponent,
+    MyCommercialUnitsComponent
   ],
   imports: [
     BrowserModule,
@@ -48,6 +57,7 @@ import { MyTenantsComponent } from './my-tenants/my-tenants.component';
     AppRoutingModule,
     FormsModule,
     ReactiveFormsModule,
+    MatTableModule,
     MatInputModule
   ],
   providers: [

ui/hv2-ui/src/app/auth-handler.interceptor.ts

@@ -8,6 +8,8 @@ import {
 import { Observable } from 'rxjs';
 import { MessageService } from './message.service';
 import { TokenService } from './token.service';
+import { serviceBaseUrl } from './config';
+
 
 @Injectable()
 export class AuthHandlerInterceptor implements HttpInterceptor {
@@ -16,7 +18,7 @@ export class AuthHandlerInterceptor implements HttpInterceptor {
 
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
     const token = localStorage.getItem(TokenService.Id_Token_Key)
-    if (request.url.includes('api.hv.nober.de') && token) {
+    if (request.url.includes(serviceBaseUrl) && token) {
       const clone = request.clone({
         setHeaders: { Authorization: `Bearer ${token}`}
       })

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

@@ -1,2 +1,4 @@
-export const serviceBaseUrl = "https://api.hv.nober.de";
+// export const serviceBaseUrl = "https://api.hv.nober.de";
 // export const serviceBaseUrl = "http://172.16.10.38:5000";
+export const serviceBaseUrl = "http://localhost:8080";
+

ui/hv2-ui/src/app/data-object-service.ts

@@ -28,120 +28,129 @@ import { TenancyFeeMapping } from './data-objects';
 import { AccountEntry } from './data-objects';
 
 
-@Injectable({
-  providedIn: 'root'
-})
 
 
 
 
 
 
+@Injectable({ providedIn: 'root' })
 export class AccountService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getAccount(): Promise<Account> {
+  async getAccounts(): Promise<Account[]> {
     this.messageService.add(`AccountService: fetch data`);
-    return this.http.get<Account>(`${serviceBaseUrl}/v1/account`).toPromise()
+    return this.http.get<Account[]>(`${serviceBaseUrl}/v1/accounts`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class TenantService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getTenant(): Promise<Tenant> {
+  async getTenants(): Promise<Tenant[]> {
     this.messageService.add(`TenantService: fetch data`);
-    return this.http.get<Tenant>(`${serviceBaseUrl}/v1/tenant`).toPromise()
+    return this.http.get<Tenant[]>(`${serviceBaseUrl}/v1/tenants`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class PremiseService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getPremise(): Promise<Premise> {
+  async getPremises(): Promise<Premise[]> {
     this.messageService.add(`PremiseService: fetch data`);
-    return this.http.get<Premise>(`${serviceBaseUrl}/v1/premise`).toPromise()
+    return this.http.get<Premise[]>(`${serviceBaseUrl}/v1/premises`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class FlatService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getFlat(): Promise<Flat> {
+  async getFlats(): Promise<Flat[]> {
     this.messageService.add(`FlatService: fetch data`);
-    return this.http.get<Flat>(`${serviceBaseUrl}/v1/flat`).toPromise()
+    return this.http.get<Flat[]>(`${serviceBaseUrl}/v1/flats`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class OverheadAdvanceService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getOverheadAdvance(): Promise<OverheadAdvance> {
+  async getOverheadAdvances(): Promise<OverheadAdvance[]> {
     this.messageService.add(`OverheadAdvanceService: fetch data`);
-    return this.http.get<OverheadAdvance>(`${serviceBaseUrl}/v1/overhead_advance`).toPromise()
+    return this.http.get<OverheadAdvance[]>(`${serviceBaseUrl}/v1/overhead_advances`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class OverheadAdvanceFlatMappingService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getOverheadAdvanceFlatMapping(): Promise<OverheadAdvanceFlatMapping> {
+  async getOverheadAdvanceFlatMappings(): Promise<OverheadAdvanceFlatMapping[]> {
     this.messageService.add(`OverheadAdvanceFlatMappingService: fetch data`);
-    return this.http.get<OverheadAdvanceFlatMapping>(`${serviceBaseUrl}/v1/overhead_advance_flat_mapping`).toPromise()
+    return this.http.get<OverheadAdvanceFlatMapping[]>(`${serviceBaseUrl}/v1/overhead_advance_flat_mappings`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class ParkingService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getParking(): Promise<Parking> {
+  async getParkings(): Promise<Parking[]> {
     this.messageService.add(`ParkingService: fetch data`);
-    return this.http.get<Parking>(`${serviceBaseUrl}/v1/parking`).toPromise()
+    return this.http.get<Parking[]>(`${serviceBaseUrl}/v1/parkings`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class CommercialPremiseService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getCommercialPremise(): Promise<CommercialPremise> {
+  async getCommercialPremises(): Promise<CommercialPremise[]> {
     this.messageService.add(`CommercialPremiseService: fetch data`);
-    return this.http.get<CommercialPremise>(`${serviceBaseUrl}/v1/commercial_premise`).toPromise()
+    return this.http.get<CommercialPremise[]>(`${serviceBaseUrl}/v1/commercial_premises`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class TenancyService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getTenancy(): Promise<Tenancy> {
+  async getTenancys(): Promise<Tenancy[]> {
     this.messageService.add(`TenancyService: fetch data`);
-    return this.http.get<Tenancy>(`${serviceBaseUrl}/v1/tenancy`).toPromise()
+    return this.http.get<Tenancy[]>(`${serviceBaseUrl}/v1/tenancys`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class FeeService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getFee(): Promise<Fee> {
+  async getFees(): Promise<Fee[]> {
     this.messageService.add(`FeeService: fetch data`);
-    return this.http.get<Fee>(`${serviceBaseUrl}/v1/fee`).toPromise()
+    return this.http.get<Fee[]>(`${serviceBaseUrl}/v1/fees`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class TenancyFeeMappingService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getTenancyFeeMapping(): Promise<TenancyFeeMapping> {
+  async getTenancyFeeMappings(): Promise<TenancyFeeMapping[]> {
     this.messageService.add(`TenancyFeeMappingService: fetch data`);
-    return this.http.get<TenancyFeeMapping>(`${serviceBaseUrl}/v1/tenancy_fee_mapping`).toPromise()
+    return this.http.get<TenancyFeeMapping[]>(`${serviceBaseUrl}/v1/tenancy_fee_mappings`).toPromise()
   }
 }
 
+@Injectable({ providedIn: 'root' })
 export class AccountEntryService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async getAccountEntry(): Promise<AccountEntry> {
+  async getAccountEntrys(): Promise<AccountEntry[]> {
     this.messageService.add(`AccountEntryService: fetch data`);
-    return this.http.get<AccountEntry>(`${serviceBaseUrl}/v1/account_entry`).toPromise()
+    return this.http.get<AccountEntry[]>(`${serviceBaseUrl}/v1/account_entrys`).toPromise()
   }
 }
 

ui/hv2-ui/src/app/data-object-service.ts.tmpl

@@ -14,9 +14,6 @@ import { ${JsNameConverter($table.name)} } from './data-objects';
 #end for
 
 
-@Injectable({
-  providedIn: 'root'
-})
 
 
 
@@ -25,12 +22,13 @@ import { ${JsNameConverter($table.name)} } from './data-objects';
 #from generateHelper import JsNameConverter
 
 #for $table in $tables    
+@Injectable({ providedIn: 'root' })
 export class ${JsNameConverter($table.name)}Service {
   constructor(private messageService: MessageService, private http: HttpClient) { }
   
-  async get${JsNameConverter($table.name)}(): Promise<${JsNameConverter($table.name)}> {
+  async get${JsNameConverter($table.name)}s(): Promise<${JsNameConverter($table.name)}[]> {
     this.messageService.add(`${JsNameConverter($table.name)}Service: fetch data`);
-    return this.http.get<${JsNameConverter($table.name)}>(`\${serviceBaseUrl}/v1/${table.name}`).toPromise()
+    return this.http.get<${JsNameConverter($table.name)}[]>(`\${serviceBaseUrl}/v1/${table.name}s`).toPromise()
   }
 }
 

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

@@ -0,0 +1,25 @@
+<section class="mat-typography">
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                Meine Büros
+            </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <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>
+                    </ng-container>
+                    <ng-container matColumnDef="premise">
+                        <th mat-header-cell *matHeaderCellDef>Haus</th>
+                        <td mat-cell *matCellDef="let element">{{element.premise}}</td>
+                    </ng-container>
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/commercialunit/', row.id]"></tr>
+                </table>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</section>

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

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

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

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+import { CommercialPremiseService } from '../data-object-service';
+import { CommercialPremise } from '../data-objects';
+import { MatTableDataSource } from '@angular/material/table'
+
+@Component({
+  selector: 'app-my-commercial-units',
+  templateUrl: './my-commercial-units.component.html',
+  styleUrls: ['./my-commercial-units.component.css']
+})
+export class MyCommercialUnitsComponent implements OnInit {
+
+  commercialPremises: CommercialPremise[]
+  dataSource: MatTableDataSource<CommercialPremise>
+  displayedColumns: string[] = ["description", "premise"]
+
+  constructor(private commercialPremiseService: CommercialPremiseService, 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.dataSource = new MatTableDataSource<CommercialPremise>(this.commercialPremises)
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  ngOnInit(): void {
+    this.messageService.add("MyCommercialUnitsComponent.ngOnInit")
+    this.getCommercialPremises()
+  }
+
+}

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

@@ -0,0 +1,3 @@
+table {
+    width: 75%;
+}

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

@@ -0,0 +1,33 @@
+<section class="mat-typography">
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                Meine Wohnungen
+            </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <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>
+                    </ng-container>
+                    <ng-container matColumnDef="premise">
+                        <th mat-header-cell *matHeaderCellDef>Haus</th>
+                        <td mat-cell *matCellDef="let element">{{element.premise}}</td>
+                    </ng-container>
+                    <ng-container matColumnDef="area">
+                        <th mat-header-cell *matHeaderCellDef>Wohnfläche</th>
+                        <td mat-cell *matCellDef="let element">{{element.area}}</td>
+                    </ng-container>
+                    <ng-container matColumnDef="flat_no">
+                        <th mat-header-cell *matHeaderCellDef>Wohnungsnummer</th>
+                        <td mat-cell *matCellDef="let element">{{element.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>
+                </table>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</section>

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

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

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

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+import { FlatService } from '../data-object-service';
+import { Flat } from '../data-objects';
+import { MatTableDataSource } from '@angular/material/table'
+
+@Component({
+  selector: 'app-my-flats',
+  templateUrl: './my-flats.component.html',
+  styleUrls: ['./my-flats.component.css']
+})
+export class MyFlatsComponent implements OnInit {
+
+  flats: Flat[]
+  dataSource: MatTableDataSource<Flat>
+  displayedColumns: string[] = ["description", "premise", "area", "flat_no"]
+
+  constructor(private flatService: FlatService, private messageService: MessageService) { }
+
+  async getFlats(): Promise<void> {
+    try {
+      this.messageService.add("Trying to load flats")
+      this.flats = await this.flatService.getFlats()
+      this.messageService.add("Flats loaded")
+
+      this.dataSource = new MatTableDataSource<Flat>(this.flats)
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  ngOnInit(): void {
+    this.messageService.add("MyFlatsComponent.ngOnInit")
+    this.getFlats()
+  }
+
+}

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

@@ -0,0 +1,3 @@
+table {
+    width: 75%;
+}

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

@@ -0,0 +1,25 @@
+<section class="mat-typography">
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                Meine Garagen
+            </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <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>
+                    </ng-container>
+                    <ng-container matColumnDef="premise">
+                        <th mat-header-cell *matHeaderCellDef>Haus</th>
+                        <td mat-cell *matCellDef="let element">{{element.premise}}</td>
+                    </ng-container>
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/parking/', row.id]"></tr>
+                </table>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</section>

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

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

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

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+import { ParkingService } from '../data-object-service';
+import { Parking } from '../data-objects';
+import { MatTableDataSource } from '@angular/material/table'
+
+@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>
+  displayedColumns: string[] = ["description", "premise"]
+
+  constructor(private parkingService: ParkingService, 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.dataSource = new MatTableDataSource<Parking>(this.parkings)
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  ngOnInit(): void {
+    this.messageService.add("MyParkingsComponent.ngOnInit")
+    this.getParkings()
+  }
+
+}

ui/hv2-ui/src/app/my-premises/my-premises.component.css

@@ -0,0 +1,3 @@
+table {
+    width: 75%;
+}

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

@@ -0,0 +1,33 @@
+<section class="mat-typography">
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                Meine Häuser
+            </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <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>
+                    </ng-container>
+                    <ng-container matColumnDef="street">
+                        <th mat-header-cell *matHeaderCellDef>Strasse</th>
+                        <td mat-cell *matCellDef="let element">{{element.street}}</td>
+                    </ng-container>
+                    <ng-container matColumnDef="zip">
+                        <th mat-header-cell *matHeaderCellDef>PLZ</th>
+                        <td mat-cell *matCellDef="let element">{{element.zip}}</td>
+                    </ng-container>
+                    <ng-container matColumnDef="city">
+                        <th mat-header-cell *matHeaderCellDef>Ort</th>
+                        <td mat-cell *matCellDef="let element">{{element.city}}</td>
+                    </ng-container>
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/premise/', row.id]"></tr>
+                </table>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</section>

ui/hv2-ui/src/app/my-premises/my-premises.component.spec.ts

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

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

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { PremiseService } from '../data-object-service';
+import { MessageService } from '../message.service';
+import { Premise } from '../data-objects'
+
+@Component({
+  selector: 'app-my-premises',
+  templateUrl: './my-premises.component.html',
+  styleUrls: ['./my-premises.component.css']
+})
+export class MyPremisesComponent implements OnInit {
+
+  premises: Premise[]
+  dataSource: MatTableDataSource<Premise>
+  displayedColumns: string[] = [ "description", "street", "zip", "city" ]
+
+  constructor(private premiseService: PremiseService, private messageService: MessageService) { }
+
+  async getPremises(): Promise<void> {
+    try {
+      this.messageService.add("Trying to load premises")
+      this.premises = await this.premiseService.getPremises()
+      this.messageService.add("Premises loaded")
+
+      this.dataSource = new MatTableDataSource<Premise>(this.premises)
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  ngOnInit(): void {
+    this.messageService.add("MyPremisesComponent.ngOnInit")
+    this.getPremises()
+  }
+
+}

ui/hv2-ui/src/app/my-tenants/my-tenants.component.css

@@ -0,0 +1,3 @@
+table {
+    width: 75%;
+}

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

@@ -0,0 +1,29 @@
+<section class="mat-typography">
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                Meine Mieter/innen
+            </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <table mat-table [dataSource]="dataSource" #zftable>
+                    <ng-container matColumnDef="lastname">
+                        <th mat-header-cell *matHeaderCellDef>Nachname</th>
+                        <td mat-cell *matCellDef="let element">{{element.lastname}}</td>
+                    </ng-container>
+                    <ng-container matColumnDef="firstname">
+                        <th mat-header-cell *matHeaderCellDef>Vorname</th>
+                        <td mat-cell *matCellDef="let element">{{element.firstname}}</td>
+                    </ng-container>
+                    <ng-container matColumnDef="address1">
+                        <th mat-header-cell *matHeaderCellDef>Adresse 1</th>
+                        <td mat-cell *matCellDef="let element">{{element.address1}}</td>
+                    </ng-container>
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/tenant/', row.id]"></tr>
+                </table>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</section>

ui/hv2-ui/src/app/my-tenants/my-tenants.component.spec.ts

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

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

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+import { TenantService } from '../data-object-service';
+import { Tenant } from '../data-objects';
+import { MatTableDataSource } from '@angular/material/table'
+
+@Component({
+  selector: 'app-my-tenants',
+  templateUrl: './my-tenants.component.html',
+  styleUrls: ['./my-tenants.component.css']
+})
+export class MyTenantsComponent implements OnInit {
+
+  tenants: Tenant[]
+  dataSource: MatTableDataSource<Tenant>
+  displayedColumns: string[] = ["lastname", "firstname", "address1"]
+
+  constructor(private tenantService: TenantService, private messageService: MessageService) { }
+
+  async getTenants(): Promise<void> {
+    try {
+      this.messageService.add("Trying to load tenants")
+      this.tenants = await this.tenantService.getTenants()
+      this.messageService.add("Tenants loaded")
+
+      this.dataSource = new MatTableDataSource<Tenant>(this.tenants)
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  ngOnInit(): void {
+    this.messageService.add("MyTenantsComponent.ngOnInit")
+    this.getTenants()
+  }
+
+}

ui/hv2-ui/src/app/navigation/navigation.component.html

@@ -5,7 +5,11 @@
       [opened]="(isHandset$ | async) === false">
     <mat-toolbar>Menu</mat-toolbar>
     <mat-nav-list>
-      <a mat-list-item href="/test">Mein Test</a>
+      <a mat-list-item href="/premises">Meine Häuser</a>
+      <a mat-list-item href="/flats">Meine Wohnungen</a>
+      <a mat-list-item href="/parkings">Meine Garagen</a>
+      <a mat-list-item href="/commercialunits">Meine Büros</a>
+      <a mat-list-item href="/tenants">Meine Mieter/innen</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>