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

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

@@ -21,22 +21,35 @@
       <div class="input-container" fxFlex="35%" fxLayout="column">
         <app-user-input
           fxFlex
+          [bikePointId]="bikePointId"
           (startEndDate)="onSubmit($event)"
         ></app-user-input>
       </div>
-      <app-mini-map fxFlex></app-mini-map>
+      <app-mini-map
+        fxFlex
+        [bikePointId]="bikePointId"
+      ></app-mini-map>
     </div>
 
     <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 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 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>
   </mat-sidenav-content>
 </mat-sidenav-container>

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<any> {

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 {

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<ChartOptions>;
 
@@ -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<void> {

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<ChartOptions>;
 
@@ -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<void> {

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<IDashboardCommonBikePoint>();
@@ -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.service.fetchDashboardInit(this.bikePointId).then(data => {
       this.bikePoint = data;
       this.maxStartDate = new Date(data.maxStartDate);
       this.maxEndDate = new Date(data.maxEndDate);
-        this.initTable();
-      });
+      this.initTable().catch(error => console.log(error));
     });
   }
 

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<StartEndDate> = new EventEmitter<StartEndDate>();
 
   chartOptions: Partial<ChartOptions>;
@@ -109,14 +110,13 @@ export class UserInputComponent implements OnInit {
         end: new FormControl()
       })
     });
-    this.route.params.subscribe(params => {
-      this.service.fetchDashboardInit(params.id).then(data => {
+    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(params.id).then(data => {
+    this.service.fetchBikePointForStatus(this.bikePointId).then(data => {
       this.bikePoint = data;
       const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
       this.chartOptions = {
@@ -204,7 +204,7 @@ export class UserInputComponent implements OnInit {
         }
       };
     });
-    });
+
   }
 
   async initInput(): Promise<void> {