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 43907e5..2e451a9 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html @@ -82,7 +82,7 @@ station of lend destination {{element.endStationName}} + [routerLink]="['/dashboard/', element.stationId]">{{element.stationName}} @@ -104,7 +104,7 @@ station of lend origin {{element.startStationName}} + [routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}} 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 1c97bdf..e5d2c1d 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts +++ b/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.station = data; - this.maxStartDate = new Date(data.maxStartDate); - this.maxEndDate = new Date(data.maxEndDate); - this.initDashboard(); - }); - - this.service.fetchBikePointForStatus(this.route.snapshot.paramMap.get('id')).then(data => { - this.bikePoint = data; - const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks; - this.bikePointChartOptions = { - 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' + this.service.fetchBikePointForStatus(params.id).then(data => { + this.bikePoint = data; + const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks; + this.bikePointChartOptions = { + 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' - } - }; + }; + }); }); + } 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]); + } } diff --git a/projects/project-3/frontend/src/app/service/map.service.ts b/projects/project-3/frontend/src/app/service/map.service.ts index 9422ba6..b99fb7c 100644 --- a/projects/project-3/frontend/src/app/service/map.service.ts +++ b/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 OpenStreetMap contributors',