Merge pull request #133 from Apes2getherStrong/WTG24-show-the-status-…

…of-fetching-data-from-the-backend Wtg24 show the status of fetching data from the backend
Apes2getherStrong · Oct 11, 2024 · f6cad63 · f6cad63
2 parents e69f445 + 75b0cd6
commit f6cad63
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 52 deletions.
diff --git a/src/app/map-location/map-location-edit/map-location-edit.component.html b/src/app/map-location/map-location-edit/map-location-edit.component.html
@@ -85,6 +85,14 @@ <h2 class="card-title">Audio Files</h2>
               </div>
             </div>
 
+            <div *ngIf="isLoadingAudio" class="loading-indicator">
+              <p>Loading audio files, please wait...</p>
+            </div>
+
+            <div *ngIf="isErrorAudio" class="error-indicator">
+              <p>Error loading audio files. Please try again later.</p>
+            </div>
+
             <div *ngIf="editMode" class="audio-list">
               <div *ngFor="let audioItem of audioData" class="card mb-3" style="margin-top: 40px">
                 <div class="card-header d-flex justify-content-between align-items-center">

diff --git a/src/app/map-location/map-location-edit/map-location-edit.component.ts b/src/app/map-location/map-location-edit/map-location-edit.component.ts
@@ -46,6 +46,8 @@ export class MapLocationEditComponent implements OnInit, CanComponentDeactivate
   selectedAudioFile: File | null = null;
   temporaryAudioData: { audio: Audio, url: SafeUrl,file: File }[] = [];
   returnUrl: string | null = null;
+  isLoadingAudio = false;
+  isErrorAudio = false;
   private submittingChangesInProcess: boolean = false;
 
   constructor(private activatedRoute: ActivatedRoute,
@@ -309,8 +311,9 @@ export class MapLocationEditComponent implements OnInit, CanComponentDeactivate
     });
   }
 
-  private fetchMapLocationAudio() {
-
+  fetchMapLocationAudio() {
+    this.isLoadingAudio = true;
+    this.isErrorAudio = false;
 
     this.mapLocationService.getMapLocationsById(this.mapLocationId).subscribe(response => {
       this.mapLocation = response;
@@ -338,7 +341,11 @@ export class MapLocationEditComponent implements OnInit, CanComponentDeactivate
         });
 
         Promise.all(audioPromises).then(() => {
+          this.isLoadingAudio = false;
         });
+      }, error => {
+        this.isErrorAudio = true;
+        this.isLoadingAudio = false;
       });
     });
   }

diff --git a/src/app/map-location/map-location-list/map-location-list.component.html b/src/app/map-location/map-location-list/map-location-list.component.html
@@ -1,4 +1,13 @@
 <ul class="list-group" style="padding: 5px">
+
+  <div *ngIf="isLoading" class="loading-indicator">
+    <p>Loading map locations, please wait...</p>
+  </div>
+
+  <div *ngIf="isError" class="error-indicator">
+    <p>Error loading map locations. Please try again later.</p>
+  </div>
+
   <div *ngFor="let mapLocation of mapLocations" style="margin-bottom: 5px">
 
     <li (click)="onMapLocationSelected(mapLocation)"

diff --git a/src/app/map-location/map-location-list/map-location-list.component.ts b/src/app/map-location/map-location-list/map-location-list.component.ts
@@ -48,6 +48,8 @@ export class MapLocationListComponent implements OnInit, OnChanges {
   infoWrapperAnimationState: boolean;
 
   userMode = false;
+  protected isLoading: boolean;
+  protected isError: boolean;
 
   constructor(private mapService: MapService,
               private sidePanelService: SidePanelService,
@@ -135,10 +137,21 @@ export class MapLocationListComponent implements OnInit, OnChanges {
   }
 
   private fetchMapLocations() {
+    this.isLoading = true;
+    this.isError = false;
+
     this.mapLocationService.getMapLocationsByRoute(0, maxPageSize, this.route.id)
-      .subscribe(response => {
-        this.mapLocations = response.content;
-        this.mapService.routeSelectedEventEmitter.emit(this.mapLocations);
-      });
+      .subscribe(
+        response => {
+          this.mapLocations = response.content;
+          this.mapService.routeSelectedEventEmitter.emit(this.mapLocations);
+          this.isLoading = false;
+        },
+        error => {
+          this.isError = true;
+          this.isLoading = false;
+          console.error('Error fetching map locations:', error);
+        }
+      );
   }
 }
diff --git a/src/app/map-location/map-location-modal/map-location-modal.component.html b/src/app/map-location/map-location-modal/map-location-modal.component.html
@@ -11,6 +11,12 @@ <h5 class="card-title">{{mapLocation.name}}</h5>
       <a (click)="onCalculateRoute()" class="btn btn-primary" style="background-color: #10898d"><i class="fa fa-location-arrow"></i> Navigate</a>
     </div>
     <ul class="list-group list-group-flush">
+      <div *ngIf="isLoading" class="loading-indicator">
+        <p>Loading audio files, please wait...</p>
+      </div>
+      <div *ngIf="isError" class="error-indicator">
+        <p>Error loading audio files. Please try again later.</p>
+      </div>
       <li class="list-group-item" *ngFor="let audioItem of audioData">
         <div class="card">
           <div class="card-header d-flex align-items-center">

diff --git a/src/app/map-location/map-location-modal/map-location-modal.component.ts b/src/app/map-location/map-location-modal/map-location-modal.component.ts
@@ -29,6 +29,8 @@ export class MapLocationModalComponent implements OnInit {
   audiosEntities: Audio[] = [];
   audioData: { audio: Audio, url: SafeUrl }[] = [];
   mobileVersion: boolean;
+  isError: boolean;
+  isLoading: boolean;
 
   constructor(
               private mapLocationService: MapLocationService,
@@ -50,49 +52,56 @@ export class MapLocationModalComponent implements OnInit {
     }
   }
 
-  //fetch images for map locations
+
   private fetchMapLocationImage() {
     this.mapLocationService.getMapLocationImageById(this.mapLocation.id).subscribe({
       next: (response: Blob | null) => {
         if (response) {
-          //convert Blob (raw byte object) to url to display it in the template
           const objectURL = URL.createObjectURL(response);
           this.mapLocationImageUrl = this.sanitizer.bypassSecurityTrustUrl(objectURL);
-        }
-      },
+        }},
       error: (error: any) => {
-        //
       }
     });
   }
 
 
   private fetchMapLocationAudio() {
+    this.isLoading= true;
+    this.isError = false;
     this.audiosEntities = [];
     this.audioData = [];
-
-    this.audioService.getAudiosByMapLocation(this.mapLocation, 0, maxPageSize).subscribe(response => {
-      this.audiosEntities = response.content;
-
-      const audioPromises = this.audiosEntities.map((audio, index) => {
-        return this.audioService.getAudioFileByAudio(audio).toPromise()
-          .then(response => {
-            let audioUrl: SafeUrl = null;
-            if (response) {
-              const objectURL = URL.createObjectURL(response);
-              audioUrl = this.sanitizer.bypassSecurityTrustUrl(objectURL);
-            }
-            this.audioData[index] = {audio: audio, url: audioUrl};
-          })
-          .catch(error => {
-            console.log("getaudio error", error);
-            this.audioData[index] = {audio: audio, url: null};
-          });
-      });
-
-      Promise.all(audioPromises).then(() => {
-        // All audio files fetched and URLs are set
-      });
+    this.audioService.getAudiosByMapLocation(this.mapLocation, 0, maxPageSize).subscribe({
+      next: (response) => {
+        this.audiosEntities = response.content;
+
+        const audioPromises = this.audiosEntities.map((audio, index) => {
+          return this.audioService.getAudioFileByAudio(audio).toPromise()
+            .then((audioBlob) => {
+              let audioUrl: SafeUrl = null;
+              if (audioBlob) {
+                const objectURL = URL.createObjectURL(audioBlob);
+                audioUrl = this.sanitizer.bypassSecurityTrustUrl(objectURL);
+              }
+              this.audioData[index] = {audio, url: audioUrl};
+            })
+            .catch(error => {
+              console.error("Error fetching audio:", error);
+              this.audioData[index] = {audio, url: null};
+            });
+        });
+        Promise.all(audioPromises).then(() => {
+          this.isLoading = false;
+        }).catch(() => {
+          this.isError = true;
+          this.isLoading = false;
+        });
+      },
+      error: (error) => {
+        console.error('Error fetching audio:', error);
+        this.isError = true;
+        this.isLoading= false;
+      }
     });
   }
 

diff --git a/src/app/route/route-list/route-list.component.html b/src/app/route/route-list/route-list.component.html
@@ -26,6 +26,15 @@
   </div>
 
 
+  <div *ngIf="isLoading" class="loading-indicator">
+    <p>Loading routes, please wait...</p>
+  </div>
+
+  <div *ngIf="isError" class="error-indicator">
+    <p>Error loading routes. Please try again later.</p>
+  </div>
+
+
   <div style="flex-grow: 1">
     <div *ngIf="!addingPointToRoute">
      <router-outlet></router-outlet>

diff --git a/src/app/route/route-list/route-list.component.ts b/src/app/route/route-list/route-list.component.ts
@@ -49,6 +49,8 @@ export class RouteListComponent implements OnInit{
 
   @Input() addingPointToRoute: boolean = false;
   @Input() pointIdToBeAdded: string;
+  protected isLoading: boolean;
+  protected isError: boolean;
 
   constructor(private routeService: RouteService,
               private router: Router,
@@ -154,28 +156,48 @@ export class RouteListComponent implements OnInit{
   }
 
   getRoutes() {
+    this.isLoading = true;
+    this.isError = false;
+
     this.validateQueryParams();
+
     if (this.userMode || this.addingPointToRoute) {
-      this.routeService.getRouteByUserId(this.currentPageNumber,  this.pageSize, this.routeNameToSearch).subscribe(response => {
-        this.routes = response.content;
-        this.totalPages = response.totalPages;
-        if (this.currentPageNumber > this.totalPages) {
-          this.currentPageNumber = this.totalPages;
-          this.onPageChanged();
-        }
-      });
+      this.routeService.getRouteByUserId(this.currentPageNumber, this.pageSize, this.routeNameToSearch)
+        .subscribe(
+          response => {
+            this.routes = response.content;
+            this.totalPages = response.totalPages;
+            if (this.currentPageNumber > this.totalPages) {
+              this.currentPageNumber = this.totalPages;
+              this.onPageChanged();
+            }
+            this.isLoading = false;
+          },
+          error => {
+            this.isError = true;
+            this.isLoading = false;
+            console.error('Error fetching user routes:', error);
+          }
+        );
     } else {
-      this.routeService.getRoutes(this.currentPageNumber,  this.pageSize, this.routeNameToSearch).subscribe(response => {
-        this.routes = response.content;
-        this.totalPages = response.totalPages;
-        if (this.currentPageNumber > this.totalPages) {
-          this.currentPageNumber = this.totalPages;
-          this.onPageChanged();
-
-        }
-      });
+      this.routeService.getRoutes(this.currentPageNumber, this.pageSize, this.routeNameToSearch)
+        .subscribe(
+          response => {
+            this.routes = response.content;
+            this.totalPages = response.totalPages;
+            if (this.currentPageNumber > this.totalPages) {
+              this.currentPageNumber = this.totalPages;
+              this.onPageChanged();
+            }
+            this.isLoading = false;
+          },
+          error => {
+            this.isError = true;
+            this.isLoading = false;
+            console.error('Error fetching routes:', error);
+          }
+        );
     }
-
   }
 
   validateQueryParams() {