not as expected

.gitlab-ci.yml

@@ -13,6 +13,8 @@ build:
     - hottis
     - linux
     - docker
+  rules:
+    - if: $CI_COMMIT_TAG
   artifacts:
     paths:
       - dist.tgz

hv-ui/angular.json

@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -87,6 +88,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "scripts": []

hv-ui/package-lock.json

@@ -155,6 +155,23 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/cdk": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.0.4.tgz",
+      "integrity": "sha512-suhAhsZEv+lLwm8dc524cMvO7gHPi+z2+4tueNS+zDiIObdZc4fs+KoOlnRMdYwba++X/V8mHXuDEQetl3GFcw==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "11.0.7",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.0.7.tgz",
@@ -352,6 +369,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/material": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.0.4.tgz",
+      "integrity": "sha512-yjJEl3UbJxyKZFAbhvyZGphDfhtR1vo0AnDEE3KBxAOp9oD4r7paL6ER9rSXFoNRjST56tIDbNtG/wZNtH0XDQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "11.0.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.0.9.tgz",

hv-ui/package.json

@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~11.0.6",
+    "@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.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.css

@@ -1,23 +0,0 @@
-/* AppComponent's private CSS styles */
-h1 {
-    font-size: 1.2em;
-    margin-bottom: 0;
-  }
-  nav a {
-    padding: 5px 10px;
-    text-decoration: none;
-    margin-top: 10px;
-    display: inline-block;
-    background-color: #eee;
-    border-radius: 4px;
-  }
-  nav a:visited, a:link {
-    color: #334953;
-  }
-  nav a:hover {
-    color: #039be5;
-    background-color: #cfd8dc;
-  }
-  nav a.active {
-    color: #039be5;
-  }

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

@@ -4,5 +4,8 @@
     <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

@@ -9,6 +9,10 @@ import { ObjekteComponent } from './objekte/objekte.component';
 import { MietersComponent } from './mieters/mieters.component';
 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 { MatSliderModule } from '@angular/material/slider'
 
 @NgModule({
   declarations: [
@@ -21,8 +25,11 @@ import { MieterDetailComponent } from './mieter-detail/mieter-detail.component';
   ],
   imports: [
     BrowserModule,
+    FormsModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    BrowserAnimationsModule,
+    MatSliderModule
   ],
   providers: [],
   bootstrap: [AppComponent]

hv-ui/src/app/forderung.ts

@@ -1,6 +1,6 @@
 export interface Forderung {
     id: number;
-    mieter_id: number;
+    mieter: number;
     ref_wohnung: number;
     datum: string;
     betrag: number;

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

@@ -1,20 +0,0 @@
-/* MessagesComponent's private CSS styles */
-h2 {
-    color: red;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: lighter;
-  }
-  
-  button.clear {
-    font-family: Arial, sans-serif;
-    color: #333;
-    background-color: #eee;
-    margin-bottom: 12px;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  button:hover {
-    background-color: #cfd8dc;
-  }

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

@@ -1,8 +1,5 @@
 <div *ngIf="messageService.messages.length">
-
     <h2>Messages</h2>
-    <button class="clear"
-            (click)="messageService.clear()">clear</button>
+    <button (click)="messageService.clear()">clear</button>
     <div *ngFor='let message of messageService.messages'> {{message}} </div>
-  
 </div>

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

@@ -1,8 +1,8 @@
 <h1>Mieter: {{mieter.vorname}} {{mieter.nachname}} ({{mieter.id}})</h1>
 
 <table>
-    <tr><td>Objekt:</td><td>{{mieter.objekt}} ({{mieter.objekt_id}})</td></tr>
-    <tr><td>Wohnung:</td><td>{{mieter.wohnung}} ({{mieter.wohnung_id}})</td></tr>
+    <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>
@@ -14,14 +14,25 @@
     <tr><td>Auszug:</td><td>{{mieter.auszug}}</td></tr>
 </table>
 
+<div>
+    <label>Jahr:
+        <input [(ngModel)]="year" (input)="onYearInput()" placeholder="Jahr"/>
+    </label>
+</div>
+
 <table>
     <tr>
-        <th>Datum</th>
+        <th>Datum soll</th>
+        <th>Datum ist</th>
         <th>Forderung</th>
         <th>Zahlung</th>
+        <th>Kommentar</th>
     </tr>
-    <tr *ngFor="let forderung of forderungen">
-        <td>{{forderung.datum}}</td>
-        <td>{{forderung.betrag}}<br/><span style="font-size: small;">{{forderung.kommentar}}</span></td>
+    <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

@@ -3,9 +3,9 @@ import { ActivatedRoute } from '@angular/router'
 import { Location } from '@angular/common'
 
 import { Mieter } from '../mieter'
-import { Forderung } from '../forderung'
+import { ZahlungForderung } from '../zahlung-forderung'
 import { MieterService} from '../mieter.service'
-import { ForderungService} from '../forderung.service'
+import { ZahlungForderungService} from '../zahlung-forderung.service'
 import { MessageService } from '../message.service'
 
 @Component({
@@ -16,12 +16,13 @@ import { MessageService } from '../message.service'
 export class MieterDetailComponent implements OnInit {
 
   mieter: Mieter
-  forderungen : Forderung[]
+  year: string
+  zahlungenForderungen : ZahlungForderung[]
 
 
   constructor(
     private mieterService: MieterService, 
-    private forderungService: ForderungService,
+    private zahlungForderungService: ZahlungForderungService,
     private messageService: MessageService,
     private route: ActivatedRoute,
     private location: Location ) { 
@@ -31,13 +32,28 @@ export class MieterDetailComponent implements OnInit {
     const id = +this.route.snapshot.paramMap.get('id')
     try {
       this.mieter = await this.mieterService.getMieter(id)
-      this.forderungen = await this.forderungService.getForderungenByMieter(id)
+      this.zahlungenForderungen = await this.zahlungForderungService.getZahlungenForderungenByMieterAndYear(id, +this.year)
     } catch (err) {
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }
   }
 
-  ngOnInit(): void {
-    this.getMieter()
+  async getZahlungenForderungen() {
+    const id = this.mieter?.id ?? 0
+    try {
+      this.zahlungenForderungen = await this.zahlungForderungService.getZahlungenForderungenByMieterAndYear(id, +this.year)
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  onYearInput(): void {
+    this.getZahlungenForderungen()
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.year = new Date().getFullYear().toString()
+    await this.getMieter()
+    await this.getZahlungenForderungen()
   }
 }

hv-ui/src/app/mieter.ts

@@ -1,9 +1,9 @@
 export interface Mieter {
     id: number;
-    objekt_id: number;
-    wohnung_id: number;
-    wohnung: string;
-    objekt: string;
+    objekt: number;
+    wohnung: number;
+    wohnung_shortname: string;
+    objekt_shortname: string;
     anrede: string;
     vorname: string;
     nachname: string;

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

@@ -1,57 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.mieters {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-.mieters li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-.mieters li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-.mieters li.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-.mieters li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-}
-.mieters .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color:#405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}
-
-
-.mieters a {
-  color: #333;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.mieters a:hover {
-  color:#607D8B;
-}

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

@@ -1,57 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.objekte {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-.objekte li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-.objekte li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-.objekte li.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-.objekte li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-}
-.objekte .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color:#405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}
-
-
-.objekte a {
-  color: #333;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.objekte a:hover {
-  color:#607D8B;
-}

hv-ui/src/app/wohnung.ts

@@ -1,8 +1,7 @@
 export interface Wohnung {
     id: number;
-    objekt_id: number;
-    wohnung_id: number;
-    wohnung: string;
-    objekt: string;
+    objekt: number;
+    shortname: string;
+    objekt_shortname: string;
     flaeche: number;
 }

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

@@ -1,57 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.wohnungen {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-.wohnungen li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-.wohnungen li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-.wohnungen li.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-.wohnungen li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-}
-.wohnungen .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color:#405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}
-
-
-.wohnungen a {
-  color: #333;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.wohnungen a:hover {
-  color:#607D8B;
-}

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

@@ -5,6 +5,6 @@
 </p>
 <ul class="wohnungen">
     <li *ngFor="let wohnung of wohnungen">
-        <span>{{wohnung.wohnung}}</span>: <span>{{wohnung.flaeche}}</span>m²
+        <span>{{wohnung.shortname}}</span>: <span>{{wohnung.flaeche}}</span>m²
     </li>
 </ul>

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

@@ -15,7 +15,7 @@ export class ZahlungForderungService {
   
   getZahlungenForderungenByMieterAndYear(mieterId: number, year: number): Promise<ZahlungForderung[]> {
     this.messageService.add(`ZahlungForderungService: fetched zahlungen and forderungen by mieter ${mieterId} and year ${year}`)
-    return this.http.get<ZahlungForderung[]>(`${serviceBaseUrl}/hv/mieter/${mieterId}/zahlungforderung${year}`).toPromise()
+    return this.http.get<ZahlungForderung[]>(`${serviceBaseUrl}/hv/mieter/${mieterId}/zahlungforderung/${year}`).toPromise()
   }
 
   getForderung(id: number): Promise<Forderung> {

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/index.html

@@ -6,8 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

hv-ui/src/styles.css

@@ -1,22 +0,0 @@
-/* Application-wide Styles */
-h1 {
-    color: #369;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 250%;
-  }
-h2, h3 {
-    color: #444;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: lighter;
-}
-body {
-    margin: 2em;
-}
-body, input[type="text"], button {
-    color: #333;
-    font-family: Cambria, Georgia, serif;
-}
-/* everywhere else */
-* {
-    font-family: Arial, Helvetica, sans-serif;
-}