Added loading modal when saving floor layout

COS301-SE-2023 · Sep 10, 2023 · 38ca6f9 · 38ca6f9
1 parent 1dc7f8c
commit 38ca6f9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 30 deletions.
diff --git a/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.html b/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.html
@@ -460,17 +460,22 @@ <h1 class="text-2xl font-semibold text-center mt-5" [ngClass]="{'text-white': !l
     [failure]="false"
     [linking]="true"
 ></event-participation-trends-toast-modal>
-<event-participation-trends-toast-modal
-  *ngIf="showToast"
-  class="transition-opacity duration-100 hidden opacity-0"
-  id="toast-modal"
-  [toastHeading]="toastHeading"
-  [toastMessage]="toastMessage" 
-  [toastType]="''"
-  [success]="showToastSuccess"
-  [failure]="showToastError"
-  [linking]="false"
-  (closeModalEvent)="closeToast()"
-  [busyUploadingFloorplan]="true"
+<event-participation-trends-toast-modal 
+    *ngIf="showToastSuccess"
+    class="z-50"
+    [toastMessage]="'Floor layout saved successfully.'" 
+    [toastType]="'success'"
+    [success]="true"
+    [failure]="false"
+    [linking]="false"
+></event-participation-trends-toast-modal>
+<event-participation-trends-toast-modal 
+    *ngIf="showToastError"
+    class="z-50"
+    [toastMessage]="'Error saving floor layout.'" 
+    [toastType]="'success'"
+    [success]="false"
+    [failure]="true"
+    [linking]="false"
 ></event-participation-trends-toast-modal>
 
diff --git a/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.ts b/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.ts
@@ -2585,32 +2585,18 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
 
         // save the JSON data to the database
         this.appApiService.updateFloorLayout(this.eventId, jsonString).then((res: any) => {
-          this.showToastUploading = false;
-          res ? this.showToastSuccess = true : this.showToastError = true; 
-
-          this.toastHeading = res ? 'Success' : 'Error';
-          this.toastMessage = res ? 'Floor Layout Saved' : 'Error Saving Floor Layout';
           console.log(res);
 
           setTimeout(() => {
-            this.showToast = false;            
-            const toast = document.getElementById('toast-modal');
-            toast?.classList.remove('hidden');
-            setTimeout(() => {
-              toast?.classList.remove('opacity-0');
-            }, 100);
+            this.showToastUploading = false;
+            res ? this.showToastSuccess = true : this.showToastError = true; 
 
             setTimeout(() => {
-              toast?.classList.add('opacity-0');
-              setTimeout(() => {
-                toast?.classList.add('hidden');
-              }, 100);
               this.showToastSuccess = false;
               this.showToastError = false;
-              this.showToast = true;
               if (res) this.router.navigate(['details'], { relativeTo: this.route.parent });
-            })
-          }, 1500);
+            }, 1000)
+          }, 2000);
         });
       }