use service on 32

hv-ui/src/app/config.ts

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

hv-ui/src/app/forderung.ts

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

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

@@ -37,9 +37,11 @@
                 </label>-->
                 <mat-form-field appearance="outline">
                     <mat-label>Jahr</mat-label>
-                    <!-- <input matInput [(ngModel)]="year" (input)="onYearInput()"/> -->
+                    <!-- <input matInput [(ngModel)]="year"/> -->
-                    <input matInput [(ngModel)]="year" (input)="onYearInput()"/>
+                    <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">
@@ -49,26 +51,27 @@
                 </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/>
+                    <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/>
+                    <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/>
+                    <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/>
+                    <mat-label>Kommentar</mat-label> <input matInput name="kommentar" ngModel/>
                 </mat-form-field>
-                <button mat-raised-button color="primary">Erfassen</button>
+                <button type="submit" mat-raised-button color="primary">Erfassen</button>
+                </form>
             </div>
         </div>
     </mat-card-content>
@@ -84,7 +87,7 @@
     </mat-card-header>
     <mat-card-content>
         <div>
-            <table mat-table [dataSource]="dataSource">
+            <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>

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

@@ -1,10 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { MatTable } from '@angular/material/table'
 import { ActivatedRoute } from '@angular/router'
 import { Location } from '@angular/common'
 
 import { Mieter } from '../mieter'
-import { ZahlungForderung } from '../zahlung-forderung'
+import { ZahlungForderung, Saldo, Zahlung, ZahlungRaw } from '../zahlung-forderung'
-import { Saldo } from '../saldo'
 
 import { MieterService} from '../mieter.service'
 import { ZahlungForderungService} from '../zahlung-forderung.service'
@@ -22,6 +22,7 @@ export class MieterDetailComponent implements OnInit {
   year: string
   zahlungenForderungen : ZahlungForderung[]
   saldo: Saldo
+  newZahlung: Zahlung
 
   displayedColumns: string[] = ["datum_soll", "datum_ist", "betrag_forderung", "betrag_zahlung", "kommentar"]
   dataSource: MatTableDataSource<ZahlungForderung>
@@ -48,15 +49,34 @@ export class MieterDetailComponent implements OnInit {
     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 onYearInput(): Promise<void> {
+  async loadForYear(): Promise<void> {
     await this.getZahlungenForderungen()
-    this.dataSource = new MatTableDataSource<ZahlungForderung>(this.zahlungenForderungen)
+  }
+
+  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)}`)
+    }
   }
 
   async ngOnInit(): Promise<void> {

hv-ui/src/app/saldo.ts

@@ -1,5 +0,0 @@
-export interface Saldo {
-    forderungen: number
-    zahlungen: number
-    saldo: number
-}

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

@@ -2,9 +2,7 @@ import { Injectable } from '@angular/core'
 import { Observable, of } from 'rxjs'
 import { HttpClient, HttpHeaders } from '@angular/common/http'
 
-import { ZahlungForderung } from './zahlung-forderung'
+import { ZahlungForderung, Forderung, Zahlung, Saldo } from './zahlung-forderung'
-import { Forderung } from './forderung'
-import { Saldo } from './saldo'
 import { MessageService } from './message.service'
 import { serviceBaseUrl } from './config'
 
@@ -24,6 +22,11 @@ export class ZahlungForderungService {
     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

@@ -7,4 +7,34 @@ export interface ZahlungForderung {
     betrag_zahlung: number
     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
 }