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

This reverts commit dcd5cb72c5.

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

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

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

@@ -20,7 +20,6 @@ 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;
@@ -53,13 +52,10 @@ export class DashboardComponent implements OnInit {
   @ViewChild(RentDurationChartComponent) durationChart: RentDurationChartComponent;
   @ViewChild(RentTimeChartComponent) timeChart: RentTimeChartComponent;
 
-  bikePointId: string;
+  constructor() {
-
-  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, Input, OnInit} from '@angular/core';
+import { Component, 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,7 +11,6 @@ import {MapService} from '../../service/map.service';
 })
 export class MiniMapComponent implements OnInit {
 
-  @Input() bikePointId: string;
   bikePoint: IDashboardCommonBikePoint;
 
   constructor(
@@ -21,10 +20,12 @@ export class MiniMapComponent implements OnInit {
   ) { }
 
   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.initMap();
       });
+    });
   }
 
   initMap(): void {

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

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {
   ApexAxisChartSeries,
   ApexChart,
@@ -44,7 +44,6 @@ const chartType = 'duration';
 })
 export class RentDurationChartComponent implements OnInit {
 
-  @Input() bikePointId: string;
   @ViewChild(ChartComponent) chart: ChartComponent;
   chartOptions: Partial<ChartOptions>;
 
@@ -68,12 +67,14 @@ export class RentDurationChartComponent implements OnInit {
   }
 
   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.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, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {
   ApexAxisChartSeries,
   ApexChart,
@@ -44,7 +44,6 @@ const chartType = 'time';
 })
 export class RentTimeChartComponent implements OnInit {
 
-  @Input() bikePointId: string;
   @ViewChild(ChartComponent) chart: ChartComponent;
   chartOptions: Partial<ChartOptions>;
 
@@ -68,12 +67,14 @@ export class RentTimeChartComponent implements OnInit {
   }
 
   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.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,9 +14,6 @@ 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>();
@@ -38,12 +35,14 @@ export class TableComponent implements OnInit {
   }
 
   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();
+      });
     });
   }
 

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

@@ -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 {FormBuilder, FormControl, FormGroup} from '@angular/forms';
 import {IMapBikePoint} from '../../service/domain/map-bike-point';
@@ -75,7 +75,6 @@ export interface StartEndDate {
 })
 export class UserInputComponent implements OnInit {
 
-  @Input() bikePointId: string;
   @Output() startEndDate: EventEmitter<StartEndDate> = new EventEmitter<StartEndDate>();
 
   chartOptions: Partial<ChartOptions>;
@@ -110,101 +109,102 @@ export class UserInputComponent implements OnInit {
         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> {