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(this.bikePointId).then(data => {
-      this.service.fetchDashboardInit(params.id).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(this.bikePointId).then(data => {
-      this.service.fetchDashboardInit(params.id).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(this.bikePointId).then(data => {
-      this.service.fetchDashboardInit(params.id).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.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
+    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.initTable().catch(error => console.log(error));
-        this.initTable();
-      });
     });
   }
 

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,102 +110,101 @@ export class UserInputComponent implements OnInit {
         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(this.bikePointId).then(data => {
-      this.service.fetchBikePointForStatus(params.id).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 = {
+        subtitle: {
-          subtitle: {
+          text: 'This chart visualizes the availability of the bikes',
-            text: 'This chart visualizes the availability of the bikes',
+          offsetX: 20,
-            offsetX: 20,
+          offsetY: 15,
-            offsetY: 15,
+          style: {
-            style: {
+            fontSize: '15px'
-              fontSize: '15px'
+          }
-            }
+        },
+        series: [
+          {
+            name: 'Bikes',
+            data: [data.status.NbBikes]
           },
-          series: [
+          {
-            {
+            name: 'Empty docks',
-              name: 'Bikes',
+            data: [data.status.NbEmptyDocks]
-              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: {
+            name: 'Blocked docks',
-              horizontal: true,
+            data: [NbBlockedDocks]
-              dataLabels: {
+          }
-                position: 'center'
+        ],
-              }
+        colors: ['#51ca49', '#8f8e8e', '#f00'],
+        chart: {
+          type: 'bar',
+          height: 180,
+          stacked: true,
+          toolbar: {
+            show: false
+          }
+        },
+        plotOptions: {
+          bar: {
+            horizontal: true,
+            dataLabels: {
+              position: 'center'
             }
-          },
+          }
-          dataLabels: {
+        },
-            enabled: true,
+        dataLabels: {
-            style: {
+          enabled: true,
-              fontSize: '20px',
+          style: {
-              colors: ['#fff']
+            fontSize: '20px',
-            }
+            colors: ['#fff']
-          },
+          }
-          stroke: {
+        },
+        stroke: {
+          show: false
+        },
+        xaxis: {
+          labels: {
             show: false
           },
-          xaxis: {
+          axisBorder: {
-            labels: {
+            show: false
-              show: false
-            },
-            axisBorder: {
-              show: false
-            },
-            axisTicks: {
-              show: false
-            }
           },
-          yaxis: {
+          axisTicks: {
-            show: false,
+            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'
           }
-        };
+        },
-      });
+        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> {