Add VAPP quota loading indicator

worldskills · Aug 30, 2024 · cce4822 · cce4822
1 parent e3676de
commit cce4822
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/app/vehicle-add/vehicle-add.component.html b/src/app/vehicle-add/vehicle-add.component.html
@@ -60,7 +60,7 @@ <h2 class="card-header h5 mt-0 mb-0">{{'add_vehicle_pass'|translate}}</h2>
     <div class="col-md-6">
 
       <div class="card mb-4">
-        <h2 class="card-header h5 mt-0 mb-0">{{'zone_quotas'|translate}}</h2>
+        <h2 class="card-header h5 mt-0 mb-0">{{'zone_quotas'|translate}} <small *ngIf="loadingQuota > 0" class="text-muted font-weight-normal">{{'loading'|translate}}...</small></h2>
         <div class="card-body">
 
           <div *ngFor="let zone of zones" class="mb-2">

diff --git a/src/app/vehicle-add/vehicle-add.component.ts b/src/app/vehicle-add/vehicle-add.component.ts
@@ -23,6 +23,7 @@ export class VehicleAddComponent extends WsComponent implements OnInit {
   private selectedEvent: Event;
 
   loading = false;
+  loadingQuota = 0;
 
   delegateTypes: DelegateType[];
   vehicleGroups: VehicleGroup[];
@@ -65,9 +66,11 @@ export class VehicleAddComponent extends WsComponent implements OnInit {
 
             // loop zones and load usage
             this.zones.forEach(zone => {
+              this.loadingQuota++;
               this.subscribe(
                 this.zoneService.get(this.selectedEvent.id, zone.id).subscribe(res => {
                   zone.usage = res.usage;
+                  this.loadingQuota--;
                 })
               )
             });