add station-link navigation in tables and add default start value in range-picker

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

@@ -82,7 +82,7 @@
           <ng-container matColumnDef="endStationName">
             <th *matHeaderCellDef mat-header-cell> station of lend destination</th>
             <td *matCellDef="let element" mat-cell><a
-              [routerLink]="['/dashboard/', element.id]">{{element.endStationName}}</a></td>
+              [routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a></td>
           </ng-container>
 
           <ng-container matColumnDef="number">
@@ -104,7 +104,7 @@
           <ng-container matColumnDef="startStationName">
             <th *matHeaderCellDef mat-header-cell> station of lend origin</th>
             <td *matCellDef="let element" mat-cell><a
-              [routerLink]="['/dashboard/', element.id]"> {{element.startStationName}}</a></td>
+              [routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a></td>
           </ng-container>
 
           <ng-container matColumnDef="number">

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

@@ -1,10 +1,11 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {DashboardService} from '../service/dashboard.service';
 import {IDashboardCommonBikePoint} from '../service/domain/dashboard-common-bike-point';
 import {MatTableDataSource} from '@angular/material/table';
 import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
 import {MapService} from '../service/map.service';
+import 'humanize-duration/humanize-duration';
 
 import {
   ApexAxisChartSeries,
@@ -68,6 +69,7 @@ export class DashboardComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
+    private router: Router,
     private service: DashboardService,
     private map: MapService,
     private changeDetectorRefs: ChangeDetectorRef,
@@ -109,98 +111,103 @@ export class DashboardComponent implements OnInit {
         end: new FormControl()
       })
     });
+    this.changeDetectorRefs.detectChanges();
+    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.initDashboard();
+      });
 
-    this.service.fetchDashboardInit(this.route.snapshot.paramMap.get('id')).then(data => {
+      this.service.fetchBikePointForStatus(params.id).then(data => {
-      this.station = data;
+        this.bikePoint = data;
-      this.maxStartDate = new Date(data.maxStartDate);
+        const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
-      this.maxEndDate = new Date(data.maxEndDate);
+        this.bikePointChartOptions = {
-      this.initDashboard();
+          series: [
-    });
+            {
-
+              name: 'Bikes',
-    this.service.fetchBikePointForStatus(this.route.snapshot.paramMap.get('id')).then(data => {
+              data: [data.status.NbBikes]
-      this.bikePoint = data;
+            },
-      const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
+            {
-      this.bikePointChartOptions = {
+              name: 'Empty docks',
-        series: [
+              data: [data.status.NbEmptyDocks]
-          {
+            },
-            name: 'Bikes',
+            {
-            data: [data.status.NbBikes]
+              name: 'Blocked docks',
-          },
+              data: [NbBlockedDocks]
-          {
-            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'
             }
+          ],
+          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'
-        }
-      };
     });
+
   }
 
   initDashboard(): void {
     const initDate = this.maxEndDate.toISOString().substring(0, 10);
+    this.form.get('daterange').get('start').setValue(initDate);
+    this.form.get('daterange').get('end').setValue(initDate);
     this.service.fetchDashboardStationTo(this.station.id, initDate, initDate).then((source) => {
       this.stationToSource = source;
       this.changeDetectorRefs.detectChanges();
@@ -465,4 +472,8 @@ export class DashboardComponent implements OnInit {
       };
     });
   }
+
+  routeToStation(stationId: string): void {
+    this.router.navigate(['/dashboard', stationId]);
+  }
 }

projects/project-3/frontend/src/app/service/map.service.ts

@@ -42,6 +42,10 @@ export class MapService {
   }
 
   public initDashboardMap(lat: number, lon: number, zoom: number): void {
+    if(this.miniMap) {
+      this.miniMap.off();
+      this.miniMap.remove();
+    }
     this.miniMap = L.map('minimap').setView([lat, lon], zoom);
     this.miniMap.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',