From 493cdd9ea70ce2059de4bd8426bfe64d52b4e72f Mon Sep 17 00:00:00 2001
From: Marcel Schwarz <marcel@icaotix.de>
Date: Fri, 8 Jan 2021 12:35:09 +0100
Subject: [PATCH] Use promise.all in table component to sync the table loading

---
 .../app/dashboard/table/table.component.ts    | 74 ++++++++++---------
 1 file changed, 39 insertions(+), 35 deletions(-)

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 dc1bc2f..6509a30 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
@@ -26,8 +26,8 @@ export class TableComponent implements OnInit {
   bikePoint: IDashboardCommonBikePoint;
   maxStartDate: Date;
   maxEndDate: Date;
-  isLoadingToSource: boolean;
-  isLoadingFromSource: boolean;
+  isLoadingToSource = true;
+  isLoadingFromSource = true;
 
   constructor(
     private route: ActivatedRoute,
@@ -54,45 +54,49 @@ export class TableComponent implements OnInit {
     this.selectionModel.clear();
     this.map.removeOverlayOnMiniMap();
     const initDate = this.maxEndDate.toISOString().substring(0, 10);
-    await this.service.fetchDashboardStationTo(this.bikePoint.id, initDate, initDate).then(source => {
-      this.isLoadingToSource = false;
-      this.stationToSource = this.setBikePointColorToSource(source);
-      this.iterableToSource = source;
-      this.iterableToSource.forEach(bikePoint => {
-        bikePoint.polyLineColor = 'green';
-      });
-    });
-    this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate).then(source => {
-      this.isLoadingFromSource = false;
-      this.stationFromSource = this.setBikePointColorFromSource(source);
-      this.iterableFromSource = source;
-      this.iterableFromSource.forEach(bikePoint => {
-        bikePoint.polyLineColor = 'red';
-      });
-    });
+
+    const [stationTo, stationFrom] = await Promise.all([
+      this.service.fetchDashboardStationTo(this.bikePoint.id, initDate, initDate),
+      this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate)
+    ]);
+
+    this.isLoadingToSource = false;
+    this.isLoadingFromSource = false;
+
+    this.stationToSource = this.setBikePointColorToSource(stationTo);
+    this.iterableToSource = stationTo;
+    this.iterableToSource.forEach(bikePoint => bikePoint.polyLineColor = 'red');
+
+    this.stationFromSource = this.setBikePointColorFromSource(stationFrom);
+    this.iterableFromSource = stationFrom;
+    this.iterableFromSource.forEach(bikePoint => bikePoint.polyLineColor = 'green');
   }
 
   async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> {
     this.resetTableSourcesToDisplaySpinner();
     this.selectionModel.clear();
     this.map.removeOverlayOnMiniMap();
-    await this.service.fetchDashboardStationTo(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
-      this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
-      this.isLoadingToSource = false;
-      this.stationToSource = this.setBikePointColorFromSource(source);
-      this.iterableToSource = source;
-      this.iterableToSource.forEach(bikePoint => {
-        bikePoint.polyLineColor = 'green';
-      });
-    });
-    this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
-      this.isLoadingFromSource = false;
-      this.stationFromSource = this.setBikePointColorFromSource(source);
-      this.iterableFromSource = source;
-      this.iterableFromSource.forEach(bikePoint => {
-        bikePoint.polyLineColor = 'red';
-      });
-    });
+
+    this.isLoadingToSource = true;
+    this.isLoadingFromSource = true;
+
+    const [stationTo, stationFrom] = await Promise.all([
+      this.service.fetchDashboardStationTo(this.bikePoint.id, actualStartDate, actualEndDate),
+      this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate)
+    ]);
+
+    this.isLoadingToSource = false;
+    this.isLoadingFromSource = false;
+
+    this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
+    this.stationToSource = this.setBikePointColorToSource(stationTo);
+    this.iterableToSource = stationTo;
+    this.iterableToSource.forEach(bikePoint => bikePoint.polyLineColor = 'green');
+
+    this.stationFromSource = this.setBikePointColorFromSource(stationFrom);
+    this.iterableFromSource = stationFrom;
+    this.iterableFromSource.forEach(bikePoint => bikePoint.polyLineColor = 'red');
+
   }
 
   resetTableSourcesToDisplaySpinner(): void {