From dcd5cb72c545daec0a74ee9c0ba8f1c3d55c2ca3 Mon Sep 17 00:00:00 2001 From: tim-herbst Date: Sat, 2 Jan 2021 18:04:14 +0100 Subject: [PATCH] centralize dashboardInit fetch to parent-component and give childs necessary input to reduce redundant api calls --- .../app/dashboard/dashboard.component.html | 21 ++- .../src/app/dashboard/dashboard.component.ts | 6 +- .../dashboard/mini-map/mini-map.component.ts | 7 +- .../rent-duration-chart.component.ts | 7 +- .../rent-time-chart.component.ts | 7 +- .../app/dashboard/table/table.component.ts | 17 +- .../user-input/user-input.component.ts | 178 +++++++++--------- 7 files changed, 129 insertions(+), 114 deletions(-) diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html index e10fb12..3db34be 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html @@ -21,22 +21,35 @@
- +
- +
- +
- +
diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts index f654e13..2814133 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts @@ -20,6 +20,7 @@ import {TableComponent} from './table/table.component'; import {RentDurationChartComponent} from './rent-duration-chart/rent-duration-chart.component'; import {RentTimeChartComponent} from './rent-time-chart/rent-time-chart.component'; import {StartEndDate} from './user-input/user-input.component'; +import {ActivatedRoute} from "@angular/router"; export type ChartOptions = { title: ApexTitleSubtitle; @@ -52,10 +53,13 @@ export class DashboardComponent implements OnInit { @ViewChild(RentDurationChartComponent) durationChart: RentDurationChartComponent; @ViewChild(RentTimeChartComponent) timeChart: RentTimeChartComponent; - constructor() { + bikePointId: string; + + constructor(private route: ActivatedRoute) { } ngOnInit(): void { + this.route.params.subscribe(params => this.bikePointId = params.id); } async onSubmit(startEndDate: StartEndDate): Promise { diff --git a/projects/project-3/frontend/src/app/dashboard/mini-map/mini-map.component.ts b/projects/project-3/frontend/src/app/dashboard/mini-map/mini-map.component.ts index fe20e69..f1d419a 100644 --- a/projects/project-3/frontend/src/app/dashboard/mini-map/mini-map.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/mini-map/mini-map.component.ts @@ -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 {ActivatedRoute} from '@angular/router'; import {DashboardService} from '../../service/dashboard.service'; @@ -11,6 +11,7 @@ import {MapService} from '../../service/map.service'; }) export class MiniMapComponent implements OnInit { + @Input() bikePointId: string; bikePoint: IDashboardCommonBikePoint; constructor( @@ -20,12 +21,10 @@ export class MiniMapComponent implements OnInit { ) { } ngOnInit(): void { - this.route.params.subscribe(params => { - this.service.fetchDashboardInit(params.id).then(data => { + this.service.fetchDashboardInit(this.bikePointId).then(data => { this.bikePoint = data; this.initMap(); }); - }); } initMap(): void { diff --git a/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts b/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts index a5eda78..c8a09a6 100644 --- a/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; +import {Component, Input, OnInit, ViewChild} from '@angular/core'; import { ApexAxisChartSeries, ApexChart, @@ -44,6 +44,7 @@ const chartType = 'duration'; }) export class RentDurationChartComponent implements OnInit { + @Input() bikePointId: string; @ViewChild(ChartComponent) chart: ChartComponent; chartOptions: Partial; @@ -67,14 +68,12 @@ export class RentDurationChartComponent implements OnInit { } ngOnInit(): void { - this.route.params.subscribe(params => { - this.service.fetchDashboardInit(params.id).then(data => { + this.service.fetchDashboardInit(this.bikePointId).then(data => { this.bikePoint = data; this.maxStartDate = new Date(data.maxStartDate); this.maxEndDate = new Date(data.maxEndDate); this.initChart().catch(error => console.log(error)); }); - }); } async initChart(): Promise { diff --git a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts index 39aa370..73ffe39 100644 --- a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; +import {Component, Input, OnInit, ViewChild} from '@angular/core'; import { ApexAxisChartSeries, ApexChart, @@ -44,6 +44,7 @@ const chartType = 'time'; }) export class RentTimeChartComponent implements OnInit { + @Input() bikePointId: string; @ViewChild(ChartComponent) chart: ChartComponent; chartOptions: Partial; @@ -67,14 +68,12 @@ export class RentTimeChartComponent implements OnInit { } ngOnInit(): void { - this.route.params.subscribe(params => { - this.service.fetchDashboardInit(params.id).then(data => { + this.service.fetchDashboardInit(this.bikePointId).then(data => { this.bikePoint = data; this.maxStartDate = new Date(data.maxStartDate); this.maxEndDate = new Date(data.maxEndDate); this.initChart().catch(error => console.log(error)); }); - }); } async initChart(): Promise { diff --git a/projects/project-3/frontend/src/app/dashboard/table/table.component.ts b/projects/project-3/frontend/src/app/dashboard/table/table.component.ts index e77992e..72973e9 100644 --- a/projects/project-3/frontend/src/app/dashboard/table/table.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/table/table.component.ts @@ -14,6 +14,9 @@ import {ActivatedRoute} from '@angular/router'; styleUrls: ['./table.component.scss'] }) export class TableComponent implements OnInit { + + @Input() bikePointId: string; + displayedColumnsTo: string[] = ['select', 'endStationName', 'number', 'avgDuration', 'marker']; displayedColumnsFrom: string[] = ['select', 'startStationName', 'number', 'avgDuration', 'marker']; stationToSource = new MatTableDataSource(); @@ -35,14 +38,12 @@ export class TableComponent implements OnInit { } ngOnInit(): void { - this.route.params.subscribe(params => { - this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red']; - this.service.fetchDashboardInit(params.id).then(data => { - this.bikePoint = data; - this.maxStartDate = new Date(data.maxStartDate); - this.maxEndDate = new Date(data.maxEndDate); - this.initTable(); - }); + this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red']; + this.service.fetchDashboardInit(this.bikePointId).then(data => { + this.bikePoint = data; + this.maxStartDate = new Date(data.maxStartDate); + this.maxEndDate = new Date(data.maxEndDate); + this.initTable().catch(error => console.log(error)); }); } diff --git a/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.ts b/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.ts index 1f7f7f7..96ae078 100644 --- a/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.ts @@ -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 {FormBuilder, FormControl, FormGroup} from '@angular/forms'; import {IMapBikePoint} from '../../service/domain/map-bike-point'; @@ -75,6 +75,7 @@ export interface StartEndDate { }) export class UserInputComponent implements OnInit { + @Input() bikePointId: string; @Output() startEndDate: EventEmitter = new EventEmitter(); chartOptions: Partial; @@ -109,102 +110,101 @@ export class UserInputComponent implements OnInit { end: new FormControl() }) }); - this.route.params.subscribe(params => { - this.service.fetchDashboardInit(params.id).then(data => { - this.station = data; - this.maxStartDate = new Date(data.maxStartDate); - this.maxEndDate = new Date(data.maxEndDate); - this.initInput().catch(error => console.log(error)); - }); - this.service.fetchBikePointForStatus(params.id).then(data => { - this.bikePoint = data; - const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks; - this.chartOptions = { - subtitle: { - text: 'This chart visualizes the availability of the bikes', - offsetX: 20, - offsetY: 15, - style: { - fontSize: '15px' - } + this.service.fetchDashboardInit(this.bikePointId).then(data => { + this.station = data; + this.maxStartDate = new Date(data.maxStartDate); + this.maxEndDate = new Date(data.maxEndDate); + this.initInput().catch(error => console.log(error)); + }); + this.service.fetchBikePointForStatus(this.bikePointId).then(data => { + this.bikePoint = data; + const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks; + this.chartOptions = { + subtitle: { + text: 'This chart visualizes the availability of the bikes', + offsetX: 20, + offsetY: 15, + style: { + fontSize: '15px' + } + }, + series: [ + { + name: 'Bikes', + data: [data.status.NbBikes] }, - 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 - } + { + name: 'Empty docks', + data: [data.status.NbEmptyDocks] }, - plotOptions: { - bar: { - horizontal: true, - dataLabels: { - position: 'center' - } + { + 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: { + } + }, + dataLabels: { + enabled: true, + style: { + fontSize: '20px', + colors: ['#fff'] + } + }, + stroke: { + show: false + }, + xaxis: { + labels: { show: false }, - xaxis: { - labels: { - show: false - }, - axisBorder: { - show: false - }, - axisTicks: { - show: false - } + axisBorder: { + 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' + 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 {