Mietzahlung eintragen

.gitlab-ci.yml

@@ -56,6 +56,7 @@ build-ui:
                 - cd ui/hv2-ui
                 - if [ "$CI_COMMIT_TAG" != "" ]; then
                     sed -i -e 's/GITTAGVERSION/'"$CI_COMMIT_TAG"':'"$CI_COMMIT_SHORT_SHA"'/' ./src/app/navigation/navigation.component.html;
+                    sed -i -e 's,http://localhost:8080,https://api.hv.nober.de,' ./src/app/config.ts;
                   fi
                 - npm install
                 - ./node_modules/.bin/ng build --prod
@@ -97,6 +98,7 @@ dockerize-ui:
                 - docker rm $CONTAINER_NAME || echo "container not existing, never mind"
                 - docker run -d --network docker-server 
                                 --ip $CONTAINER_IP
+                                $VOLUMEOPT
                                 --name $CONTAINER_NAME
                                 --restart always 
                                 $IMAGE_NAME:$CI_COMMIT_TAG
@@ -108,6 +110,7 @@ deploy-api:
                 IMAGE_NAME: ${CI_REGISTRY}/${CI_PROJECT_PATH}/api
                 CONTAINER_NAME: hv2-api
                 CONTAINER_IP: 172.16.10.38
+                VOLUMEOPT: -v hv2-api-conf:/opt/app/config
 
 deploy-ui:
         extends: 

api/server.py

@@ -3,10 +3,16 @@ from flask_cors import CORS
 
 # instantiate the webservice
 app = connexion.App(__name__)
-app.add_api('openapi.yaml')
+app.add_api('openapi.yaml', options = {"swagger_ui": False})
 
 # CORSify it - otherwise Angular won't accept it
-CORS(app.app)
+CORS(app.app, 
+    origins=[
+        "http://localhost:4200",
+        "https://base.hv.nober.de"
+    ],
+    supports_credentials=True
+)
 
 # provide the webservice application to uwsgi
 application = app.app

ui/hv2-ui/src/app/account/account.component.css

@@ -3,6 +3,10 @@ table {
     border-spacing: 20px;
 }
 
+.mat-table {
+    border-spacing: 20px;
+}
+
 .spacer {
     flex: 1 1 auto;
 }

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

@@ -1,76 +1,54 @@
-<mat-card class="defaultCard">
+<div id="firstBlock">
-    <mat-card-header>
+<form (ngSubmit)="addAccountEntry()">
-        <mat-card-title>
+<mat-form-field appearance="outline" id="addEntryfield">
-            {{account?.description}} ({{account?.id}})
+    <mat-label>Datum</mat-label>
-        </mat-card-title>
+    <input matInput name="createdAt" [(ngModel)]="newAccountEntry.created_at" [matDatepicker]="createdAtPicker"/>
-    </mat-card-header>
+    <mat-datepicker-toggle matSuffix [for]="createdAtPicker"></mat-datepicker-toggle>
-    <mat-card-content>
+    <mat-datepicker #createdAtPicker></mat-datepicker>
-        <mat-accordion>
+</mat-form-field>
-            <mat-expansion-panel (opened)="collapse = true"
+<mat-form-field appearance="outline">
-                                (closed)="collapse = false">
+    <mat-label>Kategorie</mat-label>
-                <mat-expansion-panel-header>
+    <mat-select [(ngModel)]="newAccountEntry.account_entry_category" name="category" disabled="shallBeRentPayment">
-                    <mat-panel-title *ngIf="!collapse">
+        <mat-option *ngFor="let p of accountEntryCategories" [value]="p.id">{{p.description}}</mat-option>
-                        Kontoübersicht, Saldo: {{saldo?.saldo | number:'1.2-2'}} €
+    </mat-select>
-                    </mat-panel-title>
+</mat-form-field>
-                    <mat-panel-description>
+<mat-form-field appearance="outline">
-                    </mat-panel-description>
+    <mat-label>Betrag (€)</mat-label>
-                </mat-expansion-panel-header>
+    <input matInput type="number" name="amount" [(ngModel)]="newAccountEntry.amount"/>
-    <div id="firstBlock">
+</mat-form-field>
-            <form (ngSubmit)="addAccountEntry()">
+<mat-form-field appearance="outline">
-                <mat-form-field appearance="outline" id="addEntryfield">
+    <mat-label>Beschreibung</mat-label>
-                    <mat-label>Datum</mat-label>
+    <input matInput name="description" [(ngModel)]="newAccountEntry.description"/>
-                    <input matInput name="createdAt" [(ngModel)]="newAccountEntry.created_at" [matDatepicker]="createdAtPicker"/>
+</mat-form-field>
-                    <mat-datepicker-toggle matSuffix [for]="createdAtPicker"></mat-datepicker-toggle>
+<button #addAccountEntryButton type="submit" mat-raised-button color="primary">Buchung speichern</button>
-                    <mat-datepicker #createdAtPicker></mat-datepicker>
+</form>
-                </mat-form-field>
+</div>
-                <mat-form-field appearance="outline">
+<div class="large">
-                    <mat-label>Kategorie</mat-label>
+Saldo: {{saldo?.saldo | number:'1.2-2'}} €
-                    <mat-select [(ngModel)]="newAccountEntry.account_entry_category" name="category" disabled="shallBeRentPayment">
+</div>
-                        <mat-option *ngFor="let p of accountEntryCategories" [value]="p.id">{{p.description}}</mat-option>
+<div id="secondBlock">
-                    </mat-select>
+<table mat-table [dataSource]="accountEntriesDataSource" #zftable>
-                </mat-form-field>
+<ng-container matColumnDef="createdAt">
-                <mat-form-field appearance="outline">
+    <th mat-header-cell *matHeaderCellDef>Datum</th>
-                    <mat-label>Betrag (€)</mat-label>
+    <td mat-cell *matCellDef="let element">{{element.rawAccountEntry.created_at | date}}</td>
-                    <input matInput type="number" name="amount" [(ngModel)]="newAccountEntry.amount"/>
+</ng-container>
-                </mat-form-field>
+<ng-container matColumnDef="description">
-                <mat-form-field appearance="outline">
+    <th mat-header-cell *matHeaderCellDef>Beschreibung</th>
-                    <mat-label>Beschreibung</mat-label>
+    <td mat-cell *matCellDef="let element">{{element.rawAccountEntry.description}}</td>
-                    <input matInput name="description" [(ngModel)]="newAccountEntry.description"/>
+</ng-container>
-                </mat-form-field>
+<ng-container matColumnDef="amount">
-                <button #addAccountEntryButton type="submit" mat-raised-button color="primary">Buchung speichern</button>
+    <th mat-header-cell *matHeaderCellDef>Betrag</th>
-            </form>
+    <td mat-cell *matCellDef="let element" class="rightaligned">{{element.rawAccountEntry.amount | number:'1.2-2'}} €</td>
-        </div>
+</ng-container>
-        <div class="large">
+<ng-container matColumnDef="category">
-            Saldo: {{saldo?.saldo | number:'1.2-2'}} €
+    <th mat-header-cell *matHeaderCellDef>Kategorie</th>
-        </div>
+    <td mat-cell *matCellDef="let element">{{element.accountEntryCategory}}</td>
-        <div id="secondBlock">
+</ng-container>
-            <table mat-table [dataSource]="accountEntriesDataSource" #zftable>
+<ng-container matColumnDef="overhead_relevant">
-                <ng-container matColumnDef="createdAt">
+    <th mat-header-cell *matHeaderCellDef>BK relevant</th>
-                    <th mat-header-cell *matHeaderCellDef>Datum</th>
+    <td mat-cell *matCellDef="let element">{{element.overheadRelevant}}</td>
-                    <td mat-cell *matCellDef="let element">{{element.rawAccountEntry.created_at | date}}</td>
+</ng-container>
-                </ng-container>
+<tr mat-header-row *matHeaderRowDef="accountEntriesDisplayedColumns"></tr>
-                <ng-container matColumnDef="description">
+<tr mat-row *matRowDef="let row; columns: accountEntriesDisplayedColumns;"></tr>
-                    <th mat-header-cell *matHeaderCellDef>Beschreibung</th>
+</table>
-                    <td mat-cell *matCellDef="let element">{{element.rawAccountEntry.description}}</td>
+</div>
-                </ng-container>
-                <ng-container matColumnDef="amount">
-                    <th mat-header-cell *matHeaderCellDef>Betrag</th>
-                    <td mat-cell *matCellDef="let element" class="rightaligned">{{element.rawAccountEntry.amount | number:'1.2-2'}} €</td>
-                </ng-container>
-                <ng-container matColumnDef="category">
-                    <th mat-header-cell *matHeaderCellDef>Kategorie</th>
-                    <td mat-cell *matCellDef="let element">{{element.accountEntryCategory}}</td>
-                </ng-container>
-                <ng-container matColumnDef="overhead_relevant">
-                    <th mat-header-cell *matHeaderCellDef>BK relevant</th>
-                    <td mat-cell *matCellDef="let element">{{element.overheadRelevant}}</td>
-                </ng-container>
-                <tr mat-header-row *matHeaderRowDef="accountEntriesDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: accountEntriesDisplayedColumns;"></tr>
-            </table>
-        </div>
-    </mat-expansion-panel>
-</mat-accordion>
-
-    </mat-card-content>
-</mat-card>

ui/hv2-ui/src/app/account/account.component.ts

@@ -1,5 +1,7 @@
+import { ViewFlags } from '@angular/compiler/src/core';
 import { Component, Input, OnInit, OnChanges, ViewChild } from '@angular/core';
 import { MatButton } from '@angular/material/button';
+import { MatExpansionPanel } from '@angular/material/expansion';
 import { MatTableDataSource } from '@angular/material/table';
 import { AccountEntryCategoryService, AccountEntryService, AccountService } from '../data-object-service';
 import { Account, AccountEntry, AccountEntryCategory, NULL_AccountEntry } from '../data-objects';
@@ -27,8 +29,6 @@ export class AccountComponent implements OnInit {
   @Input() shallBeRentPayment: boolean
   @ViewChild('addAccountEntryButton') addAccountEntryButton: MatButton
 
-  collapse: boolean = false
-
   account: Account
   accountEntries: DN_AccountEntry[]
   accountEntriesDataSource: MatTableDataSource<DN_AccountEntry>
@@ -50,6 +50,7 @@ export class AccountComponent implements OnInit {
     private messageService: MessageService
   ) { }
 
+
   async getAccount(): Promise<void> {
     try {
       if (this.selectedAccountId) {

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

@@ -17,6 +17,7 @@ import { OverheadAdvanceListComponent } from './overhead-advance-list/overhead-a
 import { OverheadAdvanceDetailsComponent } from './overhead-advance-details/overhead-advance-details.component';
 import { FeeListComponent } from './fee-list/fee-list.component';
 import { FeeDetailsComponent } from './fee-details/fee-details.component';
+import { EnterPaymentComponent } from './enter-payment/enter-payment.component';
 
 
 const routes: Routes = [
@@ -41,6 +42,7 @@ const routes: Routes = [
   { path: 'fees', component: FeeListComponent, canActivate: [ AuthGuardService ] },
   { path: 'fee/:id', component: FeeDetailsComponent, canActivate: [ AuthGuardService ] },
   { path: 'fee', component: FeeDetailsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'enterPayment', component: EnterPaymentComponent, canActivate: [ AuthGuardService ] },
   { path: 'logout', component: LogoutComponent },
   { path: 'login', component: LoginComponent }
 ]

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

@@ -45,7 +45,8 @@ import { FeeDetailsComponent } from './fee-details/fee-details.component';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { AccountComponent } from './account/account.component';
 import { NoteComponent } from './note/note.component'
-import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter'
+import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
+import { EnterPaymentComponent } from './enter-payment/enter-payment.component'
 
 registerLocaleData(localeDe)
 
@@ -72,7 +73,8 @@ registerLocaleData(localeDe)
     FeeListComponent,
     FeeDetailsComponent,
     AccountComponent,
-    NoteComponent
+    NoteComponent,
+    EnterPaymentComponent
   ],
   imports: [
     BrowserModule,

ui/hv2-ui/src/app/enter-payment/enter-payment.component.html

@@ -0,0 +1,22 @@
+<mat-card class="defaultCard">
+    <mat-card-header>
+        <mat-card-title>
+            Mietzahlung eintragen
+        </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <div>
+            <span>Mieter auswählen: </span>
+            <mat-form-field appearance="outline">
+            <mat-select #mapSelect [(ngModel)]="accountId" name="tenantAccount">
+            <mat-label>Mieter</mat-label>
+                <mat-option *ngFor="let p of tenants" [value]="p.id">{{p.firstname}} {{p.lastname}}</mat-option>
+            </mat-select>
+            </mat-form-field>
+        </div>
+
+        <app-account [selectedAccountId]="accountId" [shallBeRentPayment]="true"></app-account>
+
+
+    </mat-card-content>
+</mat-card>

ui/hv2-ui/src/app/enter-payment/enter-payment.component.spec.ts

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

ui/hv2-ui/src/app/enter-payment/enter-payment.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { TenantService } from '../data-object-service';
+import { Tenant } from '../data-objects';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-enter-payment',
+  templateUrl: './enter-payment.component.html',
+  styleUrls: ['./enter-payment.component.css']
+})
+export class EnterPaymentComponent implements OnInit {
+
+  tenants: Tenant[]
+  accountId: number
+
+  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")
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  ngOnInit(): void {
+    this.getTenants()
+  }
+
+}

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

@@ -4,17 +4,24 @@
       [mode]="(isHandset$ | async) ? 'over' : 'side'"
       [opened]="(isHandset$ | async) === false">
     <mat-toolbar>Menu</mat-toolbar>
-    <mat-nav-list>
+    <mat-nav-list *ngIf="!authenticated">
+      <a mat-list-item href="/login">Anmelden</a>
+    </mat-nav-list>
+    <mat-nav-list *ngIf="authenticated">
+      <a mat-list-item href="/enterPayment">Mietzahlung eintragen</a>
+    </mat-nav-list><mat-divider *ngIf="authenticated"></mat-divider><mat-nav-list *ngIf="authenticated">
       <a mat-list-item href="/tenants">Meine Mieter/innen</a>
-    </mat-nav-list><mat-divider></mat-divider><mat-nav-list>
+    </mat-nav-list><mat-divider *ngIf="authenticated"></mat-divider><mat-nav-list *ngIf="authenticated">
       <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>
-    </mat-nav-list><mat-divider></mat-divider><mat-nav-list>
+    </mat-nav-list><mat-divider *ngIf="authenticated"></mat-divider><mat-nav-list *ngIf="authenticated">
       <a mat-list-item href="/overheadadvances">Betriebskostensätze</a>
       <a mat-list-item href="/fees">Mietsätze</a>
-    </mat-nav-list><mat-divider></mat-divider><mat-nav-list>
+    </mat-nav-list><mat-divider *ngIf="authenticated"></mat-divider><mat-nav-list *ngIf="authenticated">
       <a mat-list-item href="/premises">Meine Häuser</a>
+    </mat-nav-list><mat-divider *ngIf="authenticated"></mat-divider><mat-nav-list *ngIf="authenticated">
+      <a mat-list-item href="/logout">Abmelden</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
@@ -31,13 +38,11 @@
       <span class="spacer"></span>
       <span class="gittagversion">GITTAGVERSION</span>
       <span class="gittagversion" *ngIf="authenticated">Läuft aus in {{expiryTime | async }} Sekunden</span>
-      <a *ngIf="!authenticated" mat-button routerLink="/login">Login</a>
-      <a *ngIf="authenticated" mat-button routerLink="/logout">Logout</a>
     </mat-toolbar>
     <!-- Add Content Here -->
 
     <router-outlet></router-outlet>
-    <app-messages></app-messages>
+    <app-messages *ngIf="authenticated"></app-messages>
-
   </mat-sidenav-content>
+
 </mat-sidenav-container>

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

@@ -256,7 +256,27 @@
 
         </mat-card-content>
     </mat-card>
-
+    <mat-card class="defaultCard">
-    <app-account [selectedAccountId]="tenant.account" [shallBeRentPayment]="true"></app-account>
+        <mat-card-header>
-
+            <mat-card-title>
+                {{account?.description}} ({{account?.id}})
+            </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <mat-accordion>
+                <mat-expansion-panel (opened)="collapseAccount = true"
+                                    (closed)="collapseAccount = false" #mep>
+                    <mat-expansion-panel-header>
+                        <mat-panel-title *ngIf="!collapseAccount">
+                            Kontoübersicht, Saldo: {{saldo?.saldo | number:'1.2-2'}} €
+                        </mat-panel-title>
+                        <mat-panel-description>
+                        </mat-panel-description>
+                    </mat-expansion-panel-header>
+                        <app-account [selectedAccountId]="tenant.account" [shallBeRentPayment]="true"></app-account>
+                    </mat-expansion-panel>
+                </mat-accordion>
+            </mat-card-content>
+        </mat-card>
+        
 </section>

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

@@ -52,6 +52,7 @@ export class TenantDetailsComponent implements OnInit {
   collapseTenantDetails: boolean = false
   collapseTenancies: boolean = false
   collapseTenancyMapping: boolean = false
+  collapseAccount: boolean = false
 
   selectedTenancy: Tenancy = undefined
   mappedFees: Fee[]

ui/hv2-ui/src/app/token.service.ts

@@ -6,6 +6,7 @@ import jwt_decode  from 'jwt-decode'
 import { Observable, interval, Subject, Subscription } from 'rxjs'
 import { map, takeWhile } from 'rxjs/operators'
 import { authserviceBaseUrl, applicationId } from './config'
+import { Router } from '@angular/router';
 
 
 interface TokenTuple {
@@ -24,8 +25,11 @@ export class TokenService {
   private _expiryTime =  new Subject<number>()
   private subscription: Subscription
 
-  constructor(private http: HttpClient, private messageService: MessageService) {
+  constructor(
-  }
+    private http: HttpClient, 
+    private router: Router,
+    private messageService: MessageService
+  ) { }
 
   checkAuthenticated(): boolean {
     let result: boolean = false
@@ -60,7 +64,15 @@ export class TokenService {
     if (this.subscription && !this.subscription.closed) {
       this.subscription.unsubscribe()
     }
-    this.subscription = interval(1000).pipe(map(v => start - v)).pipe(takeWhile(v => v != 0)).subscribe(v => this._expiryTime.next(v))
+    this.subscription = interval(1000)
+      .pipe(map(v => start - v))
+      .pipe(takeWhile(v => v >= 0))
+      .subscribe((v) => {
+        this._expiryTime.next(v)
+        if (v == 0) {
+          this.router.navigate(['/logout'])
+        }
+      })
   }
 
   async login(login: string, password: string) : Promise<void> {

ui/hv2-ui/src/styles.css

@@ -1,11 +1,15 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
+html, body { 
+    height: 100%; 
+    box-sizing: border-box;
+    margin: 0;
+}
+
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
 table {
     width: 75%;
-    border-spacing: 20px;
 }