more details pages

This commit is contained in:
Wolfgang Hottgenroth 2021-09-02 15:50:29 +02:00
parent ce4ff75bca
commit 7c180f0986
Signed by: wn
GPG Key ID: 6C1E5E531E0D5D7F
16 changed files with 348 additions and 24 deletions

View File

@ -11,6 +11,8 @@ import { MyCommercialUnitsComponent } from './my-commercial-units/my-commercial-
import { TenantDetailsComponent } from './tenant-details/tenant-details.component';
import { PremiseDetailsComponent } from './premise-details/premise-details.component';
import { FlatDetailsComponent } from './flat-details/flat-details.component';
import { ParkingDetailsComponent } from './parking-details/parking-details.component';
import { CommercialUnitDetailsComponent } from './commercial-unit-details/commercial-unit-details.component';
const routes: Routes = [
@ -25,6 +27,10 @@ const routes: Routes = [
{ path: 'premise', component: PremiseDetailsComponent, canActivate: [ AuthGuardService ] },
{ path: 'flat/:id', component: FlatDetailsComponent, canActivate: [ AuthGuardService ] },
{ path: 'flat', component: FlatDetailsComponent, canActivate: [ AuthGuardService ] },
{ path: 'parking/:id', component: ParkingDetailsComponent, canActivate: [ AuthGuardService ] },
{ path: 'parking', component: ParkingDetailsComponent, canActivate: [ AuthGuardService ] },
{ path: 'commercialunit/:id', component: CommercialUnitDetailsComponent, canActivate: [ AuthGuardService ] },
{ path: 'commercialunit', component: CommercialUnitDetailsComponent, canActivate: [ AuthGuardService ] },
{ path: 'logout', component: LogoutComponent },
{ path: 'login', component: LoginComponent }
]

View File

@ -31,7 +31,9 @@ import { MyCommercialUnitsComponent } from './my-commercial-units/my-commercial-
import { TenantDetailsComponent } from './tenant-details/tenant-details.component';
import { PremiseDetailsComponent } from './premise-details/premise-details.component';
import { FlatDetailsComponent } from './flat-details/flat-details.component';
import { MatSelectModule } from '@angular/material/select'
import { MatSelectModule } from '@angular/material/select';
import { ParkingDetailsComponent } from './parking-details/parking-details.component';
import { CommercialUnitDetailsComponent } from './commercial-unit-details/commercial-unit-details.component'
@NgModule({
declarations: [
AppComponent,
@ -47,7 +49,9 @@ import { MatSelectModule } from '@angular/material/select'
MyCommercialUnitsComponent,
TenantDetailsComponent,
PremiseDetailsComponent,
FlatDetailsComponent
FlatDetailsComponent,
ParkingDetailsComponent,
CommercialUnitDetailsComponent
],
imports: [
BrowserModule,

View File

@ -0,0 +1,31 @@
<section class="mat-typography">
<mat-card class="defaultCard">
<mat-card-header>
<mat-card-title>
{{commercialPremise?.description}} {{premise?.description}}
</mat-card-title>
<mat-card-subtitle>
ID: {{commercialPremise?.id}}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div>
<form (ngSubmit)="saveCommercialPremise()">
<div>
<mat-form-field appearance="outline">
<mat-label>Beschreibung</mat-label>
<input matInput name="description" [(ngModel)]="commercialPremise.description"/>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Haus</mat-label>
<mat-select [(ngModel)]="commercialPremise.premise" name="premise">
<mat-option *ngFor="let p of premises" [value]="p.id">{{p.description}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<button #submitButton type="submit" mat-raised-button color="primary">Speichern</button>
</form>
</div>
</mat-card-content>
</mat-card>
</section>

View File

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

View File

@ -0,0 +1,73 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatButton } from '@angular/material/button';
import { ActivatedRoute, Router } from '@angular/router';
import { CommercialPremiseService, PremiseService } from '../data-object-service';
import { NULL_CommercialPremise, NULL_Premise, CommercialPremise, Premise } from '../data-objects';
import { MessageService } from '../message.service';
@Component({
selector: 'app-commercial-unit-details',
templateUrl: './commercial-unit-details.component.html',
styleUrls: ['./commercial-unit-details.component.css']
})
export class CommercialUnitDetailsComponent implements OnInit {
@ViewChild('submitButton') submitButton: MatButton
commercialPremise: CommercialPremise = NULL_CommercialPremise
premise: Premise = NULL_Premise
premises: Premise[]
constructor(
private commercialPremiseService: CommercialPremiseService,
private premiseService: PremiseService,
private messageService: MessageService,
private route: ActivatedRoute,
private router: Router
) { }
async getCommercialPremise(): Promise<void> {
try {
const id = +this.route.snapshot.paramMap.get('id')
if (id != 0) {
this.commercialPremise = await this.commercialPremiseService.getCommercialPremise(id)
this.premise = await this.premiseService.getPremise(this.commercialPremise.premise)
}
} catch (err) {
this.messageService.add(JSON.stringify(err, undefined, 4))
}
}
async getPremises(): Promise<void> {
try {
this.messageService.add("Trying to load premises")
this.premises = await this.premiseService.getPremises()
this.messageService.add("Premises loaded")
} catch (err) {
this.messageService.add(JSON.stringify(err, undefined, 4))
}
}
async saveCommercialPremise() {
this.submitButton.disabled = true
this.messageService.add(`saveCommercialPremise: ${ JSON.stringify(this.commercialPremise, undefined, 4) }`)
if (this.commercialPremise.id == 0) {
this.messageService.add("about to insert new commercialPremise")
this.commercialPremise = await this.commercialPremiseService.postCommercialPremise(this.commercialPremise)
this.messageService.add(`Successfully added flat with id ${this.commercialPremise.id}`)
} else {
this.messageService.add("about to update existing commercialPremise")
}
this.router.navigate(['/commercialunits'])
}
ngOnInit(): void {
this.getPremises()
this.getCommercialPremise()
}
}

View File

@ -3,6 +3,9 @@
<mat-card-header>
<mat-card-title>
Meine Büros
<span>Meine Büros</span>
<span class="spacer"></span>
<a mat-button routerLink="/commercialunit">Neu anlegen</a>
</mat-card-title>
</mat-card-header>
<mat-card-content>
@ -10,14 +13,14 @@
<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>
<td mat-cell *matCellDef="let element">{{element.commercialPremise.description}}</td>
</ng-container>
<ng-container matColumnDef="premise">
<th mat-header-cell *matHeaderCellDef>Haus</th>
<td mat-cell *matCellDef="let element">{{element.premise}}</td>
<td mat-cell *matCellDef="let element">{{element.premise.description}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/commercialunit/', row.id]"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/commercialunit/', row.commercialPremise.id]"></tr>
</table>
</div>
</mat-card-content>

View File

@ -1,9 +1,14 @@
import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';
import { CommercialPremiseService } from '../data-object-service';
import { CommercialPremise } from '../data-objects';
import { CommercialPremiseService, PremiseService } from '../data-object-service';
import { CommercialPremise, Premise } from '../data-objects';
import { MatTableDataSource } from '@angular/material/table'
interface DN_CommercialPremise {
commercialPremise: CommercialPremise
premise: Premise
}
@Component({
selector: 'app-my-commercial-units',
templateUrl: './my-commercial-units.component.html',
@ -12,18 +17,40 @@ import { MatTableDataSource } from '@angular/material/table'
export class MyCommercialUnitsComponent implements OnInit {
commercialPremises: CommercialPremise[]
dataSource: MatTableDataSource<CommercialPremise>
premises: Premise[]
dnCommercialPremises: DN_CommercialPremise[] = []
dataSource: MatTableDataSource<DN_CommercialPremise>
displayedColumns: string[] = ["description", "premise"]
constructor(private commercialPremiseService: CommercialPremiseService, private messageService: MessageService) { }
constructor(
private commercialPremiseService: CommercialPremiseService,
private premiseService: PremiseService,
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.messageService.add("Trying to load premises")
this.premises = await this.premiseService.getPremises()
this.messageService.add(`Premises loaded: ${ JSON.stringify(this.premises, undefined, 4) }`)
this.dataSource = new MatTableDataSource<CommercialPremise>(this.commercialPremises)
const premisesDict = new Map<number, Premise>()
for (let p of this.premises) {
premisesDict.set(p.id, p)
}
for (let f of this.commercialPremises) {
this.dnCommercialPremises.push({
commercialPremise: f,
premise: premisesDict.get(f.premise)
})
}
this.dataSource = new MatTableDataSource<DN_CommercialPremise>(this.dnCommercialPremises)
} catch (err) {
this.messageService.add(JSON.stringify(err, undefined, 4))
}

View File

@ -27,7 +27,7 @@
<td mat-cell *matCellDef="let element">{{element.flat.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>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/flat/', row.flat.id]"></tr>
</table>
</div>
</mat-card-content>

View File

@ -17,7 +17,7 @@ interface DN_Flat {
export class MyFlatsComponent implements OnInit {
flats: Flat[]
premises: Premise[]
dnFlats: DN_Flat[]
dnFlats: DN_Flat[] = []
dataSource: MatTableDataSource<DN_Flat>
displayedColumns: string[] = ["description", "premise", "area", "flat_no"]
@ -39,20 +39,18 @@ export class MyFlatsComponent implements OnInit {
const premisesDict = new Map<number, Premise>()
for (let p of this.premises) {
this.messageService.add(`p2pd: ${p.id}`)
premisesDict.set(p.id, p)
}
this.messageService.add(`premisesDict: ${ JSON.stringify(premisesDict, undefined, 4) }`)
for (let f of this.flats) {
this.dnFlats.push({
flat: f,
premise: premisesDict.get(f.premise)
})
}
this.messageService.add(`dnFlats: { JSON.stringify(this.dnFlats, undefined, 4) }`)
this.dataSource = new MatTableDataSource<DN_Flat>(this.dnFlats)
} catch (err) {
// throw err
this.messageService.add(`Error in getFlats: ${ JSON.stringify(err, undefined, 4) }`)
}
}

View File

@ -3,6 +3,9 @@
<mat-card-header>
<mat-card-title>
Meine Garagen
<span>Meine Garagen</span>
<span class="spacer"></span>
<a mat-button routerLink="/parking">Neu anlegen</a>
</mat-card-title>
</mat-card-header>
<mat-card-content>
@ -10,14 +13,14 @@
<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>
<td mat-cell *matCellDef="let element">{{element.parking.description}}</td>
</ng-container>
<ng-container matColumnDef="premise">
<th mat-header-cell *matHeaderCellDef>Haus</th>
<td mat-cell *matCellDef="let element">{{element.premise}}</td>
<td mat-cell *matCellDef="let element">{{element.premise.description}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/parking/', row.id]"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/parking/', row.parking.id]"></tr>
</table>
</div>
</mat-card-content>

View File

@ -1,29 +1,54 @@
import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';
import { ParkingService } from '../data-object-service';
import { Parking } from '../data-objects';
import { ParkingService, PremiseService } from '../data-object-service';
import { Parking, Premise } from '../data-objects';
import { MatTableDataSource } from '@angular/material/table'
interface DN_Parking {
parking: Parking
premise: Premise
}
@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>
premises: Premise[]
dnParkings: DN_Parking[] = []
dataSource: MatTableDataSource<DN_Parking>
displayedColumns: string[] = ["description", "premise"]
constructor(private parkingService: ParkingService, private messageService: MessageService) { }
constructor(
private parkingService: ParkingService,
private premiseService: PremiseService,
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.messageService.add("Trying to load premises")
this.premises = await this.premiseService.getPremises()
this.messageService.add(`Premises loaded: ${ JSON.stringify(this.premises, undefined, 4) }`)
this.dataSource = new MatTableDataSource<Parking>(this.parkings)
const premisesDict = new Map<number, Premise>()
for (let p of this.premises) {
premisesDict.set(p.id, p)
}
for (let p of this.parkings) {
this.dnParkings.push({
parking: p,
premise: premisesDict.get(p.premise)
})
}
this.dataSource = new MatTableDataSource<DN_Parking>(this.dnParkings)
} catch (err) {
this.messageService.add(JSON.stringify(err, undefined, 4))
}

View File

@ -0,0 +1,31 @@
<section class="mat-typography">
<mat-card class="defaultCard">
<mat-card-header>
<mat-card-title>
{{parking?.description}} {{premise?.description}}
</mat-card-title>
<mat-card-subtitle>
ID: {{parking?.id}}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div>
<form (ngSubmit)="saveParking()">
<div>
<mat-form-field appearance="outline">
<mat-label>Beschreibung</mat-label>
<input matInput name="description" [(ngModel)]="parking.description"/>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Haus</mat-label>
<mat-select [(ngModel)]="parking.premise" name="premise">
<mat-option *ngFor="let p of premises" [value]="p.id">{{p.description}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<button #submitButton type="submit" mat-raised-button color="primary">Speichern</button>
</form>
</div>
</mat-card-content>
</mat-card>
</section>

View File

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

View File

@ -0,0 +1,73 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatButton } from '@angular/material/button';
import { ActivatedRoute, Router } from '@angular/router';
import { ParkingService, PremiseService } from '../data-object-service';
import { NULL_Parking, NULL_Premise, Parking, Premise } from '../data-objects';
import { MessageService } from '../message.service';
@Component({
selector: 'app-parking-details',
templateUrl: './parking-details.component.html',
styleUrls: ['./parking-details.component.css']
})
export class ParkingDetailsComponent implements OnInit {
@ViewChild('submitButton') submitButton: MatButton
parking: Parking = NULL_Parking
premise: Premise = NULL_Premise
premises: Premise[]
constructor(
private parkingService: ParkingService,
private premiseService: PremiseService,
private messageService: MessageService,
private route: ActivatedRoute,
private router: Router
) { }
async getParking(): Promise<void> {
try {
const id = +this.route.snapshot.paramMap.get('id')
if (id != 0) {
this.parking = await this.parkingService.getParking(id)
this.premise = await this.premiseService.getPremise(this.parking.premise)
}
} catch (err) {
this.messageService.add(JSON.stringify(err, undefined, 4))
}
}
async getPremises(): Promise<void> {
try {
this.messageService.add("Trying to load premises")
this.premises = await this.premiseService.getPremises()
this.messageService.add("Premises loaded")
} catch (err) {
this.messageService.add(JSON.stringify(err, undefined, 4))
}
}
async saveParking() {
this.submitButton.disabled = true
this.messageService.add(`saveParking: ${ JSON.stringify(this.parking, undefined, 4) }`)
if (this.parking.id == 0) {
this.messageService.add("about to insert new parking")
this.parking = await this.parkingService.postParking(this.parking)
this.messageService.add(`Successfully added flat with id ${this.parking.id}`)
} else {
this.messageService.add("about to update existing parking")
}
this.router.navigate(['/parkings'])
}
ngOnInit(): void {
this.getPremises()
this.getParking()
}
}