Added reload button if floorplan does not load

COS301-SE-2023 · Oct 24, 2023 · c8d3661 · c8d3661
1 parent 6dba4b4
commit c8d3661
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 38 deletions.
diff --git a/libs/app/components/src/lib/compare-page/compare-page.component.ts b/libs/app/components/src/lib/compare-page/compare-page.component.ts
@@ -211,29 +211,7 @@ export class ComparePageComponent implements OnInit {
 
   async removeAnyNonSelectedEventStats() {
     for (const item of this.eventList) {
-      if (item.selected) {
-        //check if it is in the stats array
-        const index = this.eventStats.findIndex((stat) => {
-          return stat.id === (item.event as any)._id;
-        });
-
-        if (index === -1) {
-          this.eventStats.push({
-            id: (item.event as any)._id,
-            name: item.event.Name!,
-            start_time: new Date(item.event.StartDate!),
-            end_time: new Date(item.event.EndDate!),
-            total_attendance: 0,
-            average_attendance: 0,
-            peak_attendance: 0,
-            turnover_rate: 0,
-            average_attendance_time: 0,
-            max_attendance_time: 0,
-            attendance_over_time_data: [],
-          });
-        }
-      }
-      else {
+      if (!item.selected) {
         const index = this.eventStats.findIndex((stat) => {
           return stat.id === (item.event as any)._id;
         });

diff --git a/libs/app/components/src/lib/heatmap-container/heatmap-container.component.html b/libs/app/components/src/lib/heatmap-container/heatmap-container.component.html
@@ -2,13 +2,13 @@
     <div class="font-poppins font-semibold ml-2 mt-1 text-xl">
         {{containerEvent.Name}}
     </div>
-    <!-- <div
-        class="absolute top-0 left-0 w-full h-full flex justify-center align-middle transition-opacity duration-200"
-        [ngClass]="{ 'opacity-0': !loadingContent }"
-        *ngIf="!show"
-    >
-        <span class="loading loading-spinner loading-lg"></span>
-    </div> -->
+    <div *ngIf="show && failedToLoadFloorplan" class="z-50 top-0 left-0 w-full h-full justify-center flex" [ngClass]="{'opacity-0': isLoading, 'opacity-100': !isLoading}">
+        <div class="m-auto flex justify-between">
+            <ng-icon name="matErrorOutlineRound" class="text-3xl text-ept-light-red self-center"></ng-icon>
+            <label class="m-2 text-xl text-ept-light-red opacity-100 z-100 self-center">Failed to load floorplan content.</label>
+            <button class="z-50 m-2 p-1 text-xl text-ept-off-white border-2 rounded-md border-ept-light-red opacity-100 z-100 hover:cursor-pointer hover:opacity-90" (click)="reloadFloorplan()">Reload?</button>
+        </div>
+    </div>
     <div *ngIf="isLoading" class="top-0 left-0 w-full h-full justify-center flex">
         <div class="m-auto flex justify-between">
           <h1 class="sm:text-sm md:text-md lg:text-lg xl:text-xl text-ept-blue-grey">{{ loadingText }}</h1>

diff --git a/libs/app/components/src/lib/heatmap-container/heatmap-container.component.ts b/libs/app/components/src/lib/heatmap-container/heatmap-container.component.ts
@@ -139,9 +139,12 @@ export class HeatmapContainerComponent implements OnInit{
     }, 200);
   }
 
+
+
   async ngAfterViewInit() {     
     //check if DOM rendered and if not retry
     let counter = 0;
+    this.failedToLoadFloorplan = false;
     const checkDOM = setInterval(() => {
       counter++;
 
@@ -203,22 +206,18 @@ export class HeatmapContainerComponent implements OnInit{
       else if (counter > 10) {
         clearInterval(checkDOM);
 
+        this.isLoading = false;
         this.failedToLoadFloorplan = true;
       }
     }, 1000);
   }
 
   reloadFloorplan() {
+    this.failedToLoadFloorplan = false;
+    this.isLoading = true;
     setTimeout(() => {
-      this.getImageFromJSONData(this.containerEvent._id);
+      this.ngAfterViewInit();
     }, 1000);
-
-    if (this.floorlayoutStage === null) {
-      this.failedToLoadFloorplan = true;
-    }
-    else {
-      this.failedToLoadFloorplan = false;
-    }
   }
 
   async setHighlightPoints() {