hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

centralize dashboardInit fetch to parent-component and give childs necessary input to reduce redundant api calls

Browse Source
This commit is contained in:
tim-herbst 2021-01-02 18:04:14 +01:00
parent bd21861368
commit dcd5cb72c5
7 changed files with 129 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
projects/project-3/frontend/src/app/dashboard/dashboard.component.html
View File

@ -21,22 +21,35 @@
<div class="input-container" fxFlex="35%" fxLayout="column"> <div class="input-container" fxFlex="35%" fxLayout="column">
<app-user-input <app-user-input
fxFlex fxFlex
[bikePointId]="bikePointId"
(startEndDate)="onSubmit($event)" (startEndDate)="onSubmit($event)"
></app-user-input> ></app-user-input>
</div> </div>
<app-mini-map fxFlex></app-mini-map> <app-mini-map
fxFlex
[bikePointId]="bikePointId"
></app-mini-map>
</div> </div>
<div class="container-table" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center"> <div class="container-table" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">
<app-table fxFlex></app-table> <app-table
fxFlex
[bikePointId]="bikePointId"
></app-table>
</div> </div>
<div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center"> <div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
<app-rent-duration-chart fxFlex></app-rent-duration-chart> <app-rent-duration-chart
fxFlex
[bikePointId]="bikePointId"
></app-rent-duration-chart>
</div> </div>
<div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center"> <div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center">
<app-rent-time-chart fxFlex></app-rent-time-chart> <app-rent-time-chart
fxFlex
[bikePointId]="bikePointId"
></app-rent-time-chart>
</div> </div>
</mat-sidenav-content> </mat-sidenav-content>
</mat-sidenav-container> </mat-sidenav-container>

6
projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
View File

@ -20,6 +20,7 @@ import {TableComponent} from './table/table.component';
import {RentDurationChartComponent} from './rent-duration-chart/rent-duration-chart.component'; import {RentDurationChartComponent} from './rent-duration-chart/rent-duration-chart.component';
import {RentTimeChartComponent} from './rent-time-chart/rent-time-chart.component'; import {RentTimeChartComponent} from './rent-time-chart/rent-time-chart.component';
import {StartEndDate} from './user-input/user-input.component'; import {StartEndDate} from './user-input/user-input.component';
import {ActivatedRoute} from "@angular/router";
export type ChartOptions = { export type ChartOptions = {
title: ApexTitleSubtitle; title: ApexTitleSubtitle;
@ -52,10 +53,13 @@ export class DashboardComponent implements OnInit {
@ViewChild(RentDurationChartComponent) durationChart: RentDurationChartComponent; @ViewChild(RentDurationChartComponent) durationChart: RentDurationChartComponent;
@ViewChild(RentTimeChartComponent) timeChart: RentTimeChartComponent; @ViewChild(RentTimeChartComponent) timeChart: RentTimeChartComponent;
constructor() { bikePointId: string;
constructor(private route: ActivatedRoute) {
} }
ngOnInit(): void { ngOnInit(): void {
this.route.params.subscribe(params => this.bikePointId = params.id);
} }
async onSubmit(startEndDate: StartEndDate): Promise<any> { async onSubmit(startEndDate: StartEndDate): Promise<any> {

7
projects/project-3/frontend/src/app/dashboard/mini-map/mini-map.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {IDashboardCommonBikePoint} from '../../service/domain/dashboard-common-bike-point'; import {IDashboardCommonBikePoint} from '../../service/domain/dashboard-common-bike-point';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {DashboardService} from '../../service/dashboard.service'; import {DashboardService} from '../../service/dashboard.service';
@ -11,6 +11,7 @@ import {MapService} from '../../service/map.service';
}) })
export class MiniMapComponent implements OnInit { export class MiniMapComponent implements OnInit {
@Input() bikePointId: string;
bikePoint: IDashboardCommonBikePoint; bikePoint: IDashboardCommonBikePoint;
constructor( constructor(
@ -20,12 +21,10 @@ export class MiniMapComponent implements OnInit {
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.route.params.subscribe(params => { this.service.fetchDashboardInit(this.bikePointId).then(data => {
this.service.fetchDashboardInit(params.id).then(data => {
this.bikePoint = data; this.bikePoint = data;
this.initMap(); this.initMap();
}); });
});
} }
initMap(): void { initMap(): void {

7
projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit, ViewChild} from '@angular/core'; import {Component, Input, OnInit, ViewChild} from '@angular/core';
import { import {
ApexAxisChartSeries, ApexAxisChartSeries,
ApexChart, ApexChart,
@ -44,6 +44,7 @@ const chartType = 'duration';
}) })
export class RentDurationChartComponent implements OnInit { export class RentDurationChartComponent implements OnInit {
@Input() bikePointId: string;
@ViewChild(ChartComponent) chart: ChartComponent; @ViewChild(ChartComponent) chart: ChartComponent;
chartOptions: Partial<ChartOptions>; chartOptions: Partial<ChartOptions>;
@ -67,14 +68,12 @@ export class RentDurationChartComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.route.params.subscribe(params => { this.service.fetchDashboardInit(this.bikePointId).then(data => {
this.service.fetchDashboardInit(params.id).then(data => {
this.bikePoint = data; this.bikePoint = data;
this.maxStartDate = new Date(data.maxStartDate); this.maxStartDate = new Date(data.maxStartDate);
this.maxEndDate = new Date(data.maxEndDate); this.maxEndDate = new Date(data.maxEndDate);
this.initChart().catch(error => console.log(error)); this.initChart().catch(error => console.log(error));
}); });
});
} }
async initChart(): Promise<void> { async initChart(): Promise<void> {

7
projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit, ViewChild} from '@angular/core'; import {Component, Input, OnInit, ViewChild} from '@angular/core';
import { import {
ApexAxisChartSeries, ApexAxisChartSeries,
ApexChart, ApexChart,
@ -44,6 +44,7 @@ const chartType = 'time';
}) })
export class RentTimeChartComponent implements OnInit { export class RentTimeChartComponent implements OnInit {
@Input() bikePointId: string;
@ViewChild(ChartComponent) chart: ChartComponent; @ViewChild(ChartComponent) chart: ChartComponent;
chartOptions: Partial<ChartOptions>; chartOptions: Partial<ChartOptions>;
@ -67,14 +68,12 @@ export class RentTimeChartComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.route.params.subscribe(params => { this.service.fetchDashboardInit(this.bikePointId).then(data => {
this.service.fetchDashboardInit(params.id).then(data => {
this.bikePoint = data; this.bikePoint = data;
this.maxStartDate = new Date(data.maxStartDate); this.maxStartDate = new Date(data.maxStartDate);
this.maxEndDate = new Date(data.maxEndDate); this.maxEndDate = new Date(data.maxEndDate);
this.initChart().catch(error => console.log(error)); this.initChart().catch(error => console.log(error));
}); });
});
} }
async initChart(): Promise<void> { async initChart(): Promise<void> {

9
projects/project-3/frontend/src/app/dashboard/table/table.component.ts
View File

@ -14,6 +14,9 @@ import {ActivatedRoute} from '@angular/router';
styleUrls: ['./table.component.scss'] styleUrls: ['./table.component.scss']
}) })
export class TableComponent implements OnInit { export class TableComponent implements OnInit {
@Input() bikePointId: string;
displayedColumnsTo: string[] = ['select', 'endStationName', 'number', 'avgDuration', 'marker']; displayedColumnsTo: string[] = ['select', 'endStationName', 'number', 'avgDuration', 'marker'];
displayedColumnsFrom: string[] = ['select', 'startStationName', 'number', 'avgDuration', 'marker']; displayedColumnsFrom: string[] = ['select', 'startStationName', 'number', 'avgDuration', 'marker'];
stationToSource = new MatTableDataSource<IDashboardCommonBikePoint>(); stationToSource = new MatTableDataSource<IDashboardCommonBikePoint>();
@ -35,14 +38,12 @@ export class TableComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.route.params.subscribe(params => {
this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red']; this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
this.service.fetchDashboardInit(params.id).then(data => { this.service.fetchDashboardInit(this.bikePointId).then(data => {
this.bikePoint = data; this.bikePoint = data;
this.maxStartDate = new Date(data.maxStartDate); this.maxStartDate = new Date(data.maxStartDate);
this.maxEndDate = new Date(data.maxEndDate); this.maxEndDate = new Date(data.maxEndDate);
this.initTable(); this.initTable().catch(error => console.log(error));
});
}); });
} }

10
projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.ts
View File

@ -1,4 +1,4 @@
import {Component, EventEmitter, Injectable, OnInit, Output} from '@angular/core'; import {Component, EventEmitter, Injectable, Input, OnInit, Output} from '@angular/core';
import {IDashboardCommonBikePoint} from '../../service/domain/dashboard-common-bike-point'; import {IDashboardCommonBikePoint} from '../../service/domain/dashboard-common-bike-point';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {IMapBikePoint} from '../../service/domain/map-bike-point'; import {IMapBikePoint} from '../../service/domain/map-bike-point';
@ -75,6 +75,7 @@ export interface StartEndDate {
}) })
export class UserInputComponent implements OnInit { export class UserInputComponent implements OnInit {
@Input() bikePointId: string;
@Output() startEndDate: EventEmitter<StartEndDate> = new EventEmitter<StartEndDate>(); @Output() startEndDate: EventEmitter<StartEndDate> = new EventEmitter<StartEndDate>();
chartOptions: Partial<ChartOptions>; chartOptions: Partial<ChartOptions>;
@ -109,14 +110,13 @@ export class UserInputComponent implements OnInit {
end: new FormControl() end: new FormControl()
}) })
}); });
this.route.params.subscribe(params => { this.service.fetchDashboardInit(this.bikePointId).then(data => {
this.service.fetchDashboardInit(params.id).then(data => {
this.station = data; this.station = data;
this.maxStartDate = new Date(data.maxStartDate); this.maxStartDate = new Date(data.maxStartDate);
this.maxEndDate = new Date(data.maxEndDate); this.maxEndDate = new Date(data.maxEndDate);
this.initInput().catch(error => console.log(error)); this.initInput().catch(error => console.log(error));
}); });
this.service.fetchBikePointForStatus(params.id).then(data => { this.service.fetchBikePointForStatus(this.bikePointId).then(data => {
this.bikePoint = data; this.bikePoint = data;
const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks; const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
this.chartOptions = { this.chartOptions = {
@ -204,7 +204,7 @@ export class UserInputComponent implements OnInit {
} }
}; };
}); });
});
} }
async initInput(): Promise<void> { async initInput(): Promise<void> {