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

This reverts commit dcd5cb72c5.
This commit is contained in:
tim-herbst 2021-01-02 18:11:21 +01:00
parent dcd5cb72c5
commit a3bf06075e
7 changed files with 119 additions and 134 deletions

View File

@ -21,35 +21,22 @@
<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 <app-mini-map fxFlex></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 <app-table fxFlex></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 <app-rent-duration-chart fxFlex></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 <app-rent-time-chart fxFlex></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>

View File

@ -20,7 +20,6 @@ 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;
@ -53,13 +52,10 @@ export class DashboardComponent implements OnInit {
@ViewChild(RentDurationChartComponent) durationChart: RentDurationChartComponent; @ViewChild(RentDurationChartComponent) durationChart: RentDurationChartComponent;
@ViewChild(RentTimeChartComponent) timeChart: RentTimeChartComponent; @ViewChild(RentTimeChartComponent) timeChart: RentTimeChartComponent;
bikePointId: string; constructor() {
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> {

View File

@ -1,4 +1,4 @@
import {Component, Input, OnInit} from '@angular/core'; import { Component, 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,7 +11,6 @@ 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(
@ -21,10 +20,12 @@ export class MiniMapComponent implements OnInit {
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.service.fetchDashboardInit(this.bikePointId).then(data => { this.route.params.subscribe(params => {
this.service.fetchDashboardInit(params.id).then(data => {
this.bikePoint = data; this.bikePoint = data;
this.initMap(); this.initMap();
}); });
});
} }
initMap(): void { initMap(): void {

View File

@ -1,4 +1,4 @@
import {Component, Input, OnInit, ViewChild} from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import { import {
ApexAxisChartSeries, ApexAxisChartSeries,
ApexChart, ApexChart,
@ -44,7 +44,6 @@ 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>;
@ -68,12 +67,14 @@ export class RentDurationChartComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.service.fetchDashboardInit(this.bikePointId).then(data => { this.route.params.subscribe(params => {
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> {

View File

@ -1,4 +1,4 @@
import {Component, Input, OnInit, ViewChild} from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import { import {
ApexAxisChartSeries, ApexAxisChartSeries,
ApexChart, ApexChart,
@ -44,7 +44,6 @@ 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>;
@ -68,12 +67,14 @@ export class RentTimeChartComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.service.fetchDashboardInit(this.bikePointId).then(data => { this.route.params.subscribe(params => {
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> {

View File

@ -14,9 +14,6 @@ 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>();
@ -38,12 +35,14 @@ export class TableComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red']; this.route.params.subscribe(params => {
this.service.fetchDashboardInit(this.bikePointId).then(data => { this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
this.bikePoint = data; this.service.fetchDashboardInit(params.id).then(data => {
this.maxStartDate = new Date(data.maxStartDate); this.bikePoint = data;
this.maxEndDate = new Date(data.maxEndDate); this.maxStartDate = new Date(data.maxStartDate);
this.initTable().catch(error => console.log(error)); this.maxEndDate = new Date(data.maxEndDate);
this.initTable();
});
}); });
} }

View File

@ -1,4 +1,4 @@
import {Component, EventEmitter, Injectable, Input, OnInit, Output} from '@angular/core'; import {Component, EventEmitter, Injectable, 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,7 +75,6 @@ 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>;
@ -110,101 +109,102 @@ export class UserInputComponent implements OnInit {
end: new FormControl() end: new FormControl()
}) })
}); });
this.service.fetchDashboardInit(this.bikePointId).then(data => { this.route.params.subscribe(params => {
this.station = data; this.service.fetchDashboardInit(params.id).then(data => {
this.maxStartDate = new Date(data.maxStartDate); this.station = data;
this.maxEndDate = new Date(data.maxEndDate); this.maxStartDate = new Date(data.maxStartDate);
this.initInput().catch(error => console.log(error)); this.maxEndDate = new Date(data.maxEndDate);
}); this.initInput().catch(error => console.log(error));
this.service.fetchBikePointForStatus(this.bikePointId).then(data => { });
this.bikePoint = data; this.service.fetchBikePointForStatus(params.id).then(data => {
const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks; this.bikePoint = data;
this.chartOptions = { const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
subtitle: { this.chartOptions = {
text: 'This chart visualizes the availability of the bikes', subtitle: {
offsetX: 20, text: 'This chart visualizes the availability of the bikes',
offsetY: 15, offsetX: 20,
style: { offsetY: 15,
fontSize: '15px' style: {
} fontSize: '15px'
},
series: [
{
name: 'Bikes',
data: [data.status.NbBikes]
},
{
name: 'Empty docks',
data: [data.status.NbEmptyDocks]
},
{
name: 'Blocked docks',
data: [NbBlockedDocks]
}
],
colors: ['#51ca49', '#8f8e8e', '#f00'],
chart: {
type: 'bar',
height: 180,
stacked: true,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
position: 'center'
} }
},
series: [
{
name: 'Bikes',
data: [data.status.NbBikes]
},
{
name: 'Empty docks',
data: [data.status.NbEmptyDocks]
},
{
name: 'Blocked docks',
data: [NbBlockedDocks]
}
],
colors: ['#51ca49', '#8f8e8e', '#f00'],
chart: {
type: 'bar',
height: 180,
stacked: true,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
position: 'center'
}
}
},
dataLabels: {
enabled: true,
style: {
fontSize: '20px',
colors: ['#fff']
}
},
stroke: {
show: false
},
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
show: false,
title: {
text: undefined
},
axisBorder: {
show: false
},
min: 0,
max: data.status.NbDocks
},
tooltip: {
enabled: false,
},
fill: {
opacity: 1
},
legend: {
position: 'bottom',
horizontalAlign: 'right',
fontSize: '14px'
} }
}, };
dataLabels: { });
enabled: true,
style: {
fontSize: '20px',
colors: ['#fff']
}
},
stroke: {
show: false
},
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
show: false,
title: {
text: undefined
},
axisBorder: {
show: false
},
min: 0,
max: data.status.NbDocks
},
tooltip: {
enabled: false,
},
fill: {
opacity: 1
},
legend: {
position: 'bottom',
horizontalAlign: 'right',
fontSize: '14px'
}
};
}); });
} }
async initInput(): Promise<void> { async initInput(): Promise<void> {