not as expected

Dockerfile

@@ -1,4 +1,3 @@
 FROM nginx:stable
-COPY default.conf /etc/nginx/conf.d/
 COPY dist/hv-ui/* /usr/share/nginx/html/
 

default.conf

@@ -1,9 +0,0 @@
-server {
-  listen 80;
-  server_name hv-ui;
-  location / {
-    root /usr/share/nginx/html;
-    try_files $uri $uri/ /index.html;
-  }
-}
-

hv-ui/package.json

@@ -12,12 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~11.0.6",
-    "@angular/cdk": "~11.0.3-sha-ce5d10a77",
+    "@angular/cdk": "^11.0.4",
     "@angular/common": "~11.0.6",
     "@angular/compiler": "~11.0.6",
     "@angular/core": "~11.0.6",
     "@angular/forms": "~11.0.6",
-    "@angular/material": "~11.0.3-sha-ce5d10a77",
+    "@angular/material": "^11.0.4",
     "@angular/platform-browser": "~11.0.6",
     "@angular/platform-browser-dynamic": "~11.0.6",
     "@angular/router": "~11.0.6",

hv-ui/src/app/app.component.html

@@ -1,3 +1,11 @@
-<section class="mat-typography">
-<app-navigation></app-navigation>
-</section>
+<h1>{{title}}</h1>
+
+<nav>
+    <a routerLink="/objekte">Meine Objekte</a>
+    <a routerLink="/mieters">Meine Mieter</a>
+</nav>
+
+<mat-slider min="1" max="100" step="1" value="1"></mat-slider>
+
+<router-outlet></router-outlet>
+<app-messages></app-messages>

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

@@ -11,21 +11,8 @@ import { WohnungenComponent } from './wohnungen/wohnungen.component';
 import { MieterDetailComponent } from './mieter-detail/mieter-detail.component';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NavigationComponent } from './navigation/navigation.component';
-import { LayoutModule } from '@angular/cdk/layout';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatIconModule } from '@angular/material/icon';
-import { MatListModule } from '@angular/material/list';
-import { MatTableModule } from '@angular/material/table';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { MatCardModule } from '@angular/material/card';
-import { MatGridListModule } from '@angular/material/grid-list'
-import { MatFormFieldModule } from '@angular/material/form-field'
-import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MatInputModule } from '@angular/material/input'
+
+import { MatSliderModule } from '@angular/material/slider'
 
 @NgModule({
   declarations: [
@@ -34,8 +21,7 @@ import { MatInputModule } from '@angular/material/input'
     ObjekteComponent,
     MietersComponent,
     WohnungenComponent,
-    MieterDetailComponent,
-    NavigationComponent
+    MieterDetailComponent
   ],
   imports: [
     BrowserModule,
@@ -43,20 +29,7 @@ import { MatInputModule } from '@angular/material/input'
     AppRoutingModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    LayoutModule,
-    MatToolbarModule,
-    MatButtonModule,
-    MatSidenavModule,
-    MatIconModule,
-    MatListModule,
-    MatTableModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatCardModule,
-    MatGridListModule,
-    MatFormFieldModule,
-    MatDatepickerModule,
-    MatInputModule
+    MatSliderModule
   ],
   providers: [],
   bootstrap: [AppComponent]

hv-ui/src/app/config.ts

@@ -1 +1 @@
-export const serviceBaseUrl = "http://172.16.3.32:5000";
+export const serviceBaseUrl = "http://172.16.3.185:5000";

hv-ui/src/app/forderung.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ForderungService } from './forderung.service';
+
+describe('ForderungService', () => {
+  let service: ForderungService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ForderungService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

hv-ui/src/app/forderung.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+import { Forderung } from './forderung';
+import { MessageService } from './message.service';
+import { serviceBaseUrl } from './config';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ForderungService {
+  constructor(private messageService: MessageService, private http: HttpClient) { }
+  
+  getForderungenByMieter(mieterId: number): Promise<Forderung[]> {
+    this.messageService.add(`ForderungService: fetched forderungen by mieter ${mieterId}`);
+    return this.http.get<Forderung[]>(`${serviceBaseUrl}/hv/mieter/${mieterId}/forderungen`).toPromise()
+  }
+
+  getForderung(id: number): Promise<Forderung> {
+    this.messageService.add(`ForderungService: fetch forderung id=${id}`);
+    return this.http.get<Forderung>(`${serviceBaseUrl}/hv/forderung/${id}`).toPromise()
+  }
+}

hv-ui/src/app/forderung.ts

@@ -0,0 +1,7 @@
+export interface Forderung {
+    id: number;
+    mieter: number;
+    ref_wohnung: number;
+    datum: string;
+    betrag: number;
+}

hv-ui/src/app/messages/messages.component.html

@@ -1,11 +1,5 @@
-<section class="mat-typography">
-<mat-card class="defaultCard" *ngIf="messageService.messages.length">
-    <mat-card-header>
-        <mat-card-title>Messages</mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
+<div *ngIf="messageService.messages.length">
+    <h2>Messages</h2>
     <button (click)="messageService.clear()">clear</button>
     <div *ngFor='let message of messageService.messages'> {{message}} </div>
-    </mat-card-content>
-</mat-card>
-</section>
+</div>

hv-ui/src/app/mieter-detail/mieter-detail.component.css

@@ -1,36 +0,0 @@
-.label {
-    font-weight: bold;
-    margin-right: 10px;
-    text-align: left;
-    width: 50%;
-}
-.content::after {
-    content: "\A";
-    white-space: pre;
-}
-.content {
-    text-align: right;
-    width: 50%;
-}
-.details {
-    width: 30%;
-}
-table {
-    width: 100%;
-}
-#wrapper {
-    width: 100%;
-    overflow: auto;
-  }
-#first {
-    float: left;
-    width: 35%;
-}
-#second {
-    float: left;
-    width: 20%;
-}
-#third {
-    float: left;
-    width: 35%
-}

hv-ui/src/app/mieter-detail/mieter-detail.component.html

@@ -1,117 +1,38 @@
-<section class="mat-typography">
-<mat-card class="defaultCard">
-    <mat-card-header>
-        <mat-card-title>
-            {{mieter?.vorname}} {{mieter?.nachname}}
-        </mat-card-title>
-        <mat-card-subtitle>
-            ID: {{mieter?.id}}
-        </mat-card-subtitle>
-    </mat-card-header>
-    <mat-card-content>
-        <div class="details">
-            <span class="label">Objekt</span><span class="content">{{mieter?.objekt_shortname}} ({{mieter?.objekt}})</span>
-            <span class="label">Wohnung</span><span class="content">{{mieter?.wohnung_shortname}} ({{mieter?.wohnung}})</span>
-            <span class="label">Anrede</span><span class="content">{{mieter?.anrede}}</span>
-            <span class="label">Strasse</span><span class="content">{{mieter?.strasse}}</span>
-            <span class="label">PLZ</span><span class="content">{{mieter?.plz}}</span>
-            <span class="label">Ort</span><span class="content">{{mieter?.ort}}</span>
-            <span class="label">Telefon</span><span class="content">{{mieter?.telefon}}</span>
-            <span class="label">Einzug</span><span class="content">{{mieter?.einzug}}</span>
-            <span class="label">Auszug</span><span class="content">{{mieter?.auszug}}</span>
-        </div>
-    </mat-card-content>
-</mat-card>
+<h1>Mieter: {{mieter.vorname}} {{mieter.nachname}} ({{mieter.id}})</h1>
 
-<mat-card class="defaultCard">
-    <mat-card-header>
-        <mat-card-title>
-            Forderungen und Zahlungen
-        </mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-        <div id="wrapper">
-            <div id="first">
-<!--                <label style="text-align: left;">Jahr:
-                    <input [(ngModel)]="year" (input)="onYearInput()" placeholder="Jahr"/>
-                </label>-->
-                <mat-form-field appearance="outline">
-                    <mat-label>Jahr</mat-label>
-                    <!-- <input matInput [(ngModel)]="year"/> -->
-                    <input matInput [(ngModel)]="year"/>
-                </mat-form-field>
-                <br/>
-                <button mat-raised-button (click)="loadForYear()" color="primary">Laden</button>
-            </div>
-            <div id="second">
-                <div class="saldo">
-                    <span class="label">Forderungen</span><span class="content">{{saldo?.forderungen}}</span>
-                    <span class="label">Zahlungen</span><span class="content">{{saldo?.zahlungen}}</span>
-                    <span class="label">Saldo</span><span class="content">{{saldo?.saldo}}</span>
-                </div>
-            </div>
-            <div id="third">
-                <form (ngSubmit)="insertNewZahlung(zahlungForm.value)" #zahlungForm="ngForm">
-                <mat-form-field appearance="outline">
-<!--
-                    <input matInput [matDatepicker]="picker"/>
-                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-                    <mat-datepicker #picker></mat-datepicker>
--->
-                    <mat-label>Datum soll</mat-label> <input matInput name="datum_soll" ngModel/>
-                </mat-form-field>
-                
-                <mat-form-field appearance="outline">
-                    <mat-label>Datum ist</mat-label> <input matInput name="datum_ist" ngModel/>
-                </mat-form-field>
-                <mat-form-field appearance="outline">
-                    <mat-label>Betrag Zahlung</mat-label> <input matInput name="betrag" ngModel/>
-                </mat-form-field>
-                <mat-form-field appearance="outline">
-                    <mat-label>Kommentar</mat-label> <input matInput name="kommentar" ngModel/>
-                </mat-form-field>
-                <button type="submit" mat-raised-button color="primary">Erfassen</button>
-                </form>
-            </div>
-        </div>
-    </mat-card-content>
-</mat-card>
-
-
-
-<mat-card class="defaultCard" *ngIf="dataSource">
-    <mat-card-header>
-        <mat-card-title>
-            Forderungen und Zahlungen - Übersicht
-        </mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-        <div>
-            <table mat-table [dataSource]="dataSource" #zftable>
-                <ng-container matColumnDef="datum_soll">
-                    <th mat-header-cell *matHeaderCellDef>Datum soll</th>
-                    <td mat-cell *matCellDef="let element">{{element.datum_soll}}</td>
-                </ng-container>
-                <ng-container matColumnDef="datum_ist">
-                    <th mat-header-cell *matHeaderCellDef>Datum ist</th>
-                    <td mat-cell *matCellDef="let element">{{element.datum_ist}}</td>
-                </ng-container>
-                <ng-container matColumnDef="betrag_forderung">
-                    <th mat-header-cell *matHeaderCellDef>Datum Forderung</th>
-                    <td mat-cell *matCellDef="let element">{{element.betrag_forderung}}</td>
-                </ng-container>
-                <ng-container matColumnDef="betrag_zahlung">
-                    <th mat-header-cell *matHeaderCellDef>Zahlung</th>
-                    <td mat-cell *matCellDef="let element">{{element.betrag_zahlung}}</td>
-                </ng-container>
-                <ng-container matColumnDef="kommentar">
-                    <th mat-header-cell *matHeaderCellDef>Kommentar</th>
-                    <td mat-cell *matCellDef="let element">{{element.kommentar}}</td>
-                </ng-container>
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+<table>
+    <tr><td>Objekt:</td><td>{{mieter.objekt_shortname}} ({{mieter.objekt}})</td></tr>
+    <tr><td>Wohnung:</td><td>{{mieter.wohnung_shortname}} ({{mieter.wohnung}})</td></tr>
+    <tr><td>Vorname:</td><td>{{mieter.vorname}}</td></tr>
+    <tr><td>Nachname:</td><td>{{mieter.nachname}}</td></tr>
+    <tr><td>Anrede:</td><td>{{mieter.anrede}}</td></tr>
+    <tr><td>Strasse:</td><td>{{mieter.strasse}}</td></tr>
+    <tr><td>PLZ:</td><td>{{mieter.plz}}</td></tr>
+    <tr><td>Ort:</td><td>{{mieter.ort}}</td></tr>
+    <tr><td>Telefon:</td><td>{{mieter.telefon}}</td></tr>
+    <tr><td>Einzug:</td><td>{{mieter.einzug}}</td></tr>
+    <tr><td>Auszug:</td><td>{{mieter.auszug}}</td></tr>
 </table>
+
+<div>
+    <label>Jahr:
+        <input [(ngModel)]="year" (input)="onYearInput()" placeholder="Jahr"/>
+    </label>
 </div>
-    </mat-card-content>
-</mat-card>
-</section>
+
+<table>
+    <tr>
+        <th>Datum soll</th>
+        <th>Datum ist</th>
+        <th>Forderung</th>
+        <th>Zahlung</th>
+        <th>Kommentar</th>
+    </tr>
+    <tr *ngFor="let zahlungForderung of zahlungenForderungen">
+        <td>{{zahlungForderung.datum_soll}}</td>
+        <td>{{zahlungForderung.datum_ist}}</td>
+        <td>{{zahlungForderung.betrag_forderung}}</td>
+        <td>{{zahlungForderung.betrag_zahlung}}</td>
+        <td>{{zahlungForderung.kommentar}}</td>
+    </tr>
+</table>

hv-ui/src/app/mieter-detail/mieter-detail.component.ts

@@ -1,15 +1,12 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core'
-import { MatTable } from '@angular/material/table'
+import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { Location } from '@angular/common'
 
 import { Mieter } from '../mieter'
-import { ZahlungForderung, Saldo, Zahlung, ZahlungRaw } from '../zahlung-forderung'
-
+import { ZahlungForderung } from '../zahlung-forderung'
 import { MieterService} from '../mieter.service'
 import { ZahlungForderungService} from '../zahlung-forderung.service'
 import { MessageService } from '../message.service'
-import { MatTableDataSource } from '@angular/material/table'
 
 @Component({
   selector: 'app-mieter-detail',
@@ -21,11 +18,7 @@ export class MieterDetailComponent implements OnInit {
   mieter: Mieter
   year: string
   zahlungenForderungen : ZahlungForderung[]
-  saldo: Saldo
-  newZahlung: Zahlung
 
-  displayedColumns: string[] = ["datum_soll", "datum_ist", "betrag_forderung", "betrag_zahlung", "kommentar"]
-  dataSource: MatTableDataSource<ZahlungForderung>
 
   constructor(
     private mieterService: MieterService, 
@@ -35,48 +28,27 @@ export class MieterDetailComponent implements OnInit {
     private location: Location ) { 
   }
 
-  async getMieter(): Promise<void> {
+  async getMieter() {
     const id = +this.route.snapshot.paramMap.get('id')
     try {
       this.mieter = await this.mieterService.getMieter(id)
-      await this.getZahlungenForderungen()
+      this.zahlungenForderungen = await this.zahlungForderungService.getZahlungenForderungenByMieterAndYear(id, +this.year)
     } catch (err) {
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }
   }
 
-  async getZahlungenForderungen(): Promise<void> {
+  async getZahlungenForderungen() {
     const id = this.mieter?.id ?? 0
     try {
       this.zahlungenForderungen = await this.zahlungForderungService.getZahlungenForderungenByMieterAndYear(id, +this.year)
-      this.dataSource = new MatTableDataSource<ZahlungForderung>(this.zahlungenForderungen)
-      this.saldo = await this.zahlungForderungService.getSaldoByMieterAndYear(id, +this.year)
     } catch (err) {
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }
   }
 
-  async loadForYear(): Promise<void> {
-    await this.getZahlungenForderungen()
-  }
-
-  async insertNewZahlung(newZahlungRaw: ZahlungRaw): Promise<void> {
-    try {
-      this.messageService.add(`New ZahlungRaw: ${newZahlungRaw.datum_soll}, ${newZahlungRaw.datum_ist}, ${newZahlungRaw.betrag}, ${newZahlungRaw.kommentar}`)
-      let newZahlung : Zahlung = {
-        'id': 0,
-        'mieter': this.mieter.id,
-        'datum_soll': newZahlungRaw.datum_soll,
-        'datum_ist': newZahlungRaw.datum_ist,
-        'betrag': +(newZahlungRaw.betrag.replace(',','.')),
-        'kommentar': newZahlungRaw.kommentar
-      }
-      this.messageService.add(`New Zahlung: ${newZahlung.datum_soll}, ${newZahlung.datum_ist}, ${newZahlung.betrag}, ${newZahlung.kommentar}, ${newZahlung.mieter}`)
-      await this.zahlungForderungService.postZahlung(newZahlung)
-      await this.getZahlungenForderungen()
-    } catch (err) {
-      this.messageService.add(`Error when inserted zahlung: ${JSON.stringify(err, undefined, 4)}`)
-    }
+  onYearInput(): void {
+    this.getZahlungenForderungen()
   }
 
   async ngOnInit(): Promise<void> {

hv-ui/src/app/mieters/mieters.component.html

@@ -1,9 +1,7 @@
-<section class="mat-typography">
 <h2>Meine Mieter</h2>
-<ul>
+<ul class="mieters">
     <li *ngFor="let mieter of mieters"
         routerLink="/mieter/{{mieter.id}}">
         <span>{{mieter.vorname}} {{mieter.nachname}}</span>
     </li>
 </ul>
-</section>

hv-ui/src/app/navigation/navigation.component.css

@@ -1,17 +0,0 @@
-.sidenav-container {
-  height: 100%;
-}
-
-.sidenav {
-  width: 200px;
-}
-
-.sidenav .mat-toolbar {
-  background: inherit;
-}
-
-.mat-toolbar.mat-primary {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}

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

@@ -1,30 +0,0 @@
-<section class="mat-typography">
-<mat-sidenav-container class="sidenav-container">
-  <mat-sidenav #drawer class="sidenav" fixedInViewport
-      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-      [mode]="(isHandset$ | async) ? 'over' : 'side'"
-      [opened]="(isHandset$ | async) === false">
-    <mat-toolbar>Menu</mat-toolbar>
-    <mat-nav-list>
-      <a mat-list-item href="/objekte">Meine Objekte</a>
-      <a mat-list-item href="/mieters">Meine Mieter</a>
-    </mat-nav-list>
-  </mat-sidenav>
-  <mat-sidenav-content>
-    <mat-toolbar color="primary">
-      <button
-        type="button"
-        aria-label="Toggle sidenav"
-        mat-icon-button
-        (click)="drawer.toggle()"
-        *ngIf="isHandset$ | async">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-      </button>
-      <span>Hausverwaltung</span>
-    </mat-toolbar>
-    <!-- Add Content Here -->
-    <router-outlet></router-outlet>
-    <app-messages></app-messages>
-  </mat-sidenav-content>
-</mat-sidenav-container>
-</section>

hv-ui/src/app/navigation/navigation.component.spec.ts

@@ -1,40 +0,0 @@
-import { LayoutModule } from '@angular/cdk/layout';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatListModule } from '@angular/material/list';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatToolbarModule } from '@angular/material/toolbar';
-
-import { NavigationComponent } from './navigation.component';
-
-describe('NavigationComponent', () => {
-  let component: NavigationComponent;
-  let fixture: ComponentFixture<NavigationComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [NavigationComponent],
-      imports: [
-        NoopAnimationsModule,
-        LayoutModule,
-        MatButtonModule,
-        MatIconModule,
-        MatListModule,
-        MatSidenavModule,
-        MatToolbarModule,
-      ]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NavigationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should compile', () => {
-    expect(component).toBeTruthy();
-  });
-});

hv-ui/src/app/navigation/navigation.component.ts

@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Observable } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-navigation',
-  templateUrl: './navigation.component.html',
-  styleUrls: ['./navigation.component.css']
-})
-export class NavigationComponent {
-
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
-    .pipe(
-      map(result => result.matches),
-      shareReplay()
-    );
-
-  constructor(private breakpointObserver: BreakpointObserver) {}
-
-}

hv-ui/src/app/objekte/objekte.component.html

@@ -1,9 +1,7 @@
-<section class="mat-typography">
 <h2>Meine Objekte</h2>
-<ul>
+<ul class="objekte">
     <li *ngFor="let objekt of objekte"
         routerLink="/wohnungen/{{objekt.id}}">
         <span>{{objekt.shortname}}</span>
     </li>
 </ul>
-</section>

hv-ui/src/app/wohnungen/wohnungen.component.html

@@ -1,12 +1,10 @@
-<section class="mat-typography">
 <h2>Meine Wohnungen</h2>
 <h3>Objekt: {{objekt.shortname}}</h3>
 <p>
     Objektfläche: {{objekt.flaeche}}
 </p>
-<ul>
+<ul class="wohnungen">
     <li *ngFor="let wohnung of wohnungen">
         <span>{{wohnung.shortname}}</span>: <span>{{wohnung.flaeche}}</span>m²
     </li>
 </ul>
-</section>

hv-ui/src/app/zahlung-forderung.service.ts

@@ -2,7 +2,8 @@ import { Injectable } from '@angular/core'
 import { Observable, of } from 'rxjs'
 import { HttpClient, HttpHeaders } from '@angular/common/http'
 
-import { ZahlungForderung, Forderung, Zahlung, Saldo } from './zahlung-forderung'
+import { ZahlungForderung } from './zahlung-forderung'
+import { Forderung } from './forderung'
 import { MessageService } from './message.service'
 import { serviceBaseUrl } from './config'
 
@@ -21,15 +22,4 @@ export class ZahlungForderungService {
     this.messageService.add(`ZahlungForderungService: fetch forderung id=${id}`)
     return this.http.get<Forderung>(`${serviceBaseUrl}/hv/forderung/${id}`).toPromise()
   }
-
-  postZahlung(zahlung: Zahlung): Promise<string> {
-    this.messageService.add(`ZahlungForderungService: insert zahlung ${JSON.stringify(zahlung, undefined, 4)}`)
-    return this.http.post<string>(`${serviceBaseUrl}/hv/zahlung`, zahlung).toPromise()
-  }
-
-  getSaldoByMieterAndYear(mieterId: number, year: number): Promise<Saldo> {
-    this.messageService.add(`ZahlungForderungService: fetched saldo by mieter ${mieterId} and year ${year}`)
-    return this.http.get<Saldo>(`${serviceBaseUrl}/hv/mieter/${mieterId}/saldo/${year}`).toPromise()
-  }
-
 }

hv-ui/src/app/zahlung-forderung.ts

@@ -8,33 +8,3 @@ export interface ZahlungForderung {
     betrag_forderung: number
     kommentar: string
 }
-
-export interface Forderung {
-    id: number
-    mieter: number
-    ref_wohnung: number
-    datum: string
-    betrag: number
-}
-
-export interface Zahlung {
-    id: number
-    mieter: number
-    datum_soll: string
-    datum_ist: string
-    betrag: number
-    kommentar: string
-}
-
-export interface ZahlungRaw {
-    datum_soll: string
-    datum_ist: string
-    betrag: string
-    kommentar: string
-}
-
-export interface Saldo {
-    forderungen: number
-    zahlungen: number
-    saldo: number
-}

hv-ui/src/app/zahlung.ts

@@ -0,0 +1,7 @@
+export interface Zahlung {
+    id: number;
+    mieter_id: number;
+    ref_wohnung: number;
+    datum: string;
+    betrag: number;
+}

hv-ui/src/styles.css

@@ -1,8 +0,0 @@
-/* @import '@angular/material/prebuilt-themes/deeppurple-amber.css'; */
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-
-.defaultCard {
-    margin: 5px;
-}