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 @@
+
+
+
+
+
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) {