add spinner to table

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

@@ -35,6 +35,13 @@
     <tr *matHeaderRowDef="displayedColumnsTo" mat-header-row></tr>
     <tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
   </table>
+  <div *ngIf="isLoadingToSource"
+       style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px">
+    <mat-progress-spinner
+      color="primary"
+      mode="indeterminate">
+    </mat-progress-spinner>
+  </div>
 </div>
 <div class="dashboard-table-from" fxFlex>
   <table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
@@ -73,4 +80,12 @@
     <tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
     <tr *matRowDef="let row; columns: displayedColumnsFrom;" mat-row></tr>
   </table>
+  <div *ngIf="isLoadingFromSource"
+       style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px">
+    <mat-progress-spinner
+      color="primary"
+      mode="indeterminate">
+    </mat-progress-spinner>
+  </div>
 </div>
+

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<void> {
     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<void> {
+    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.stationToSource = source;
-      this.iterableToSource = source;
+      this.iterableToSource = this.setBikePointColorToSource(source);
+      this.isLoadingToSource = false;
     });
-    await this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
+    this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
-      this.stationFromSource = this.setBikePointColorFromSource(source);
+      this.stationFromSource = source;
-      this.iterableFromSource = 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) {