diff --git a/projects/project-3/frontend/src/app/dashboard/table/table.component.html b/projects/project-3/frontend/src/app/dashboard/table/table.component.html index 18d02db..f832e81 100644 --- a/projects/project-3/frontend/src/app/dashboard/table/table.component.html +++ b/projects/project-3/frontend/src/app/dashboard/table/table.component.html @@ -35,6 +35,13 @@ +
+ + +
@@ -73,4 +80,12 @@
+
+ + +
+ diff --git a/projects/project-3/frontend/src/app/dashboard/table/table.component.ts b/projects/project-3/frontend/src/app/dashboard/table/table.component.ts index e77992e..723f76a 100644 --- a/projects/project-3/frontend/src/app/dashboard/table/table.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/table/table.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {MatTableDataSource} from '@angular/material/table'; import {IDashboardCommonBikePoint} from '../../service/domain/dashboard-common-bike-point'; import {SelectionModel} from '@angular/cdk/collections'; @@ -26,6 +26,8 @@ export class TableComponent implements OnInit { bikePoint: IDashboardCommonBikePoint; maxStartDate: Date; maxEndDate: Date; + isLoadingToSource: boolean; + isLoadingFromSource: boolean; constructor( private route: ActivatedRoute, @@ -35,6 +37,8 @@ export class TableComponent implements OnInit { } ngOnInit(): void { + this.isLoadingToSource = true; + this.isLoadingFromSource = true; this.route.params.subscribe(params => { this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red']; this.service.fetchDashboardInit(params.id).then(data => { @@ -48,32 +52,52 @@ export class TableComponent implements OnInit { async initTable(): Promise { this.selectionModel.clear(); - this.map.removeTableStationMarkerOnReload(); + this.map.removeOverlayOnMiniMap(); const initDate = this.maxEndDate.toISOString().substring(0, 10); await this.service.fetchDashboardStationTo(this.bikePoint.id, initDate, initDate).then(source => { this.stationToSource = this.setBikePointColorToSource(source); this.iterableToSource = source; + this.iterableToSource.forEach(bikePoint => { + bikePoint.polyLineColor = 'green'; + }); + this.isLoadingToSource = false; }); - await this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate).then(source => { + this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate).then(source => { this.stationFromSource = this.setBikePointColorFromSource(source); this.iterableFromSource = source; + this.iterableFromSource.forEach(bikePoint => { + bikePoint.polyLineColor = 'red'; + }); + this.isLoadingFromSource = false; }); } async onSubmit(actualStartDate: string, actualEndDate: string): Promise { + this.resetTableSourcesToDisplaySpinner(); this.selectionModel.clear(); - this.map.removeTableStationMarkerOnReload(); + this.map.removeOverlayOnMiniMap(); await this.service.fetchDashboardStationTo(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => { this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red']; - this.stationToSource = this.setBikePointColorToSource(source); - this.iterableToSource = source; + this.stationToSource = source; + this.iterableToSource = this.setBikePointColorToSource(source); + this.isLoadingToSource = false; }); - await this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => { - this.stationFromSource = this.setBikePointColorFromSource(source); - this.iterableFromSource = source; + this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => { + this.stationFromSource = source; + this.iterableFromSource = this.setBikePointColorFromSource(source); + this.isLoadingFromSource = false; }); } + resetTableSourcesToDisplaySpinner(): void { + this.isLoadingToSource = true; + this.isLoadingFromSource = true; + this.stationToSource = null; + this.stationFromSource = null; + this.iterableToSource = []; + this.iterableFromSource = []; + } + public drawIconInTable(bikePoint: any): string { return `../../assets/bike-point-${bikePoint.color}.png`; } @@ -83,7 +107,7 @@ export class TableComponent implements OnInit { } selectRow(selection: MatCheckboxChange, row): void { - const markerToDisplay = []; + let markerToDisplay = []; this.iterableToSource.forEach(point => { if (point.stationId === row.stationId) { this.selectionModel.toggle(point); @@ -97,9 +121,25 @@ export class TableComponent implements OnInit { this.selectionModel.selected.forEach(point => { markerToDisplay.push(point); }); + markerToDisplay = this.changePolyLineColorForDuplicateBikePoints(markerToDisplay); this.map.drawTableStationMarker(markerToDisplay); } + changePolyLineColorForDuplicateBikePoints(array: any[]): any[] { + const id = array.map(item => item.stationId); + const duplicates = id.filter((value, index) => { + return id.indexOf(value) !== index; + }); + duplicates.forEach(stationId => { + array.forEach(bikePoint => { + if (bikePoint.stationId === stationId) { + bikePoint.polyLineColor = 'blue'; + } + }); + }); + return array; + } + setBikePointColorToSource(source): any { for (const station of source) { if (station.stationId === this.bikePoint.id) {