Fixed issue with page loader

src/app/auth/login/login.page.ts

@@ -42,7 +42,7 @@ export class LoginPage implements OnInit {
       "email": this.username,
       "password": this.password
     });
-    //this.loadingService.showLoader();
+    this.loadingService.showLoader();
     this.loginApi
       .subscribe((data) => {
         //console.log('my data: ', data);
@@ -50,11 +50,11 @@ export class LoginPage implements OnInit {
         this.restService.isLoginPage = false;
         this.userService.setUsername(this.username);
         this.router.navigateByUrl('/home');
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
       }, (error) => {
         console.log(JSON.stringify(error));
         this.correctCredentials = true;
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
       });
   }
   register() {

src/app/hirebike/hirebike.page.html

@@ -20,15 +20,20 @@
   </div-->
   <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
   <!--app-here-map [startRideSubject]="startRideSubject" [gotReservedBikeSubject]="gotReservedBikeSubject"></app-here-map-->
-  <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
-  <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
+  <ion-card *ngIf="!isBikeReserved">
+    <ion-card-content>
+      No ride found
+    </ion-card-content>
+  </ion-card>
+  <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="isBikeReserved"></div>
+  <ion-fab *ngIf="isBikeReserved" class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
     <ion-fab-button>
       <ion-icon name="locate"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 </ion-content>
 <ion-footer>
-  <div class="bike-details-container">
+  <div class="bike-details-container" *ngIf="isBikeReserved">
     <div class="inner">
       <div class="button-container">
 

src/app/hirebike/hirebike.page.ts

@@ -27,6 +27,8 @@ export class HirebikePage implements OnInit {
   isBikeHired = false;
   noReservation = true;
 
+  isBikeReserved = true;
+
   currentRoute: any;
   routeSummary: any;
   wayPointsInfo:any;
@@ -160,7 +162,7 @@ export class HirebikePage implements OnInit {
   }
 
   getReservedBike() {
-    //this.loadingService.showLoader();
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
       //call reserved bike api
@@ -179,35 +181,44 @@ export class HirebikePage implements OnInit {
             this.bikeDetails = resp.data;
             this.noReservation = false;
             this.reverseGeocode(this.platform, this.bikeDetails.lat, this.bikeDetails.lon);
+            this.isBikeReserved = true;
 
             //pass reserved bike subject here map
             this.gotReservedBikeSubject.next(resp.data);
-            //this.loadingService.hideLoader();
+            this.loadingService.hideLoader();
           }, (reservedBikeError) => {
             console.log(reservedBikeError);
-            //this.loadingService.hideLoader();
+            this.loadingService.hideLoader();
+            this.isBikeReserved = false;
           });
+        } else {
+          this.loadingService.hideLoader();
+          this.isBikeReserved = false;
         }
       }, (bikeDetailsError) => {
         console.log(bikeDetailsError);
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
+        this.isBikeReserved = false;
       });
     });
   }
 
   startTrip() {
+    this.isBikeHired = true;
+    this.startRideSubject.next('some value');
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       let url = 'http://193.196.52.237:8081/rent' + '?bikeId=' + this.bikeDetails.id;
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
       let bikeApi = this.httpClient.get(url, { headers });
       bikeApi.subscribe((resp) => {
         console.log('my data: ', resp);
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
         this.toastService.showToast("Trip Started");
         this.isBikeHired = true;
       }, (error) => {
         console.log(error);
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
         this.toastService.showToast("This is ongoing Trip");
       });
     });
@@ -220,18 +231,18 @@ export class HirebikePage implements OnInit {
   }
 
   CancelTrip() {
-    //this.loadingService.showLoader();
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       let url = 'http://193.196.52.237:8081/rent' + '?bikeId=' + this.bikeDetails.id;
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
       let bikeApi = this.httpClient.delete(url, { headers });
       bikeApi.subscribe((resp) => {
         console.log('my data: ', resp);
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
         this.toastService.showToast("Trip Ended!");
       }, (error) => {
         console.log(error);
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
         this.toastService.showToast("No Ongong Trip to End")
       });
     });

src/app/home/home.page.ts

@@ -145,7 +145,7 @@ export class HomePage implements OnInit, OnDestroy {
   }
 
   getBikesList() {
-    //this.loadingService.showLoader();
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       let url = 'http://193.196.52.237:8081/bikes' + '?lat=' + this.currentUserPosition.lat + '&lng=' + this.currentUserPosition.lng;
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
@@ -158,9 +158,9 @@ export class HomePage implements OnInit, OnDestroy {
           this.reverseGeocode(this.platform, this.bikes[i].lat, this.bikes[i].lon, i);
         }
         this.showBikesOnMap();
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
       }, (error) => {console.log(error)
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
       });
     });
   }
@@ -261,7 +261,7 @@ export class HomePage implements OnInit, OnDestroy {
 
   reserveBike() {
     //this.selectedBike=bikeS;
-    //this.loadingService.showLoader();
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       let url = 'http://193.196.52.237:8081/reservation' + '?bikeId=' + this.selectedBike.id;
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
@@ -271,10 +271,10 @@ export class HomePage implements OnInit, OnDestroy {
         this.isBikeReserved = true;
         this.toastService.showToast("Reservation Successful!");
         this.router.navigateByUrl('/myreservation');
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
       }, (error) => {
         console.log(error);
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
         this.toastService.showToast("Only one bike may be reserved or rented at a time");
       });
     });

src/app/myreservation/myreservation.page.html

@@ -16,7 +16,7 @@
     </ion-card-content>
   </ion-card>
   <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="isBikeReserved"></div>
-  <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
+  <ion-fab *ngIf="isBikeReserved" class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
     <ion-fab-button>
       <ion-icon name="locate"></ion-icon>
     </ion-fab-button>

src/app/myreservation/myreservation.page.ts

@@ -131,7 +131,7 @@ export class MyreservationPage implements OnInit {
   }
 
   getReservedBike() {
-    //this.loadingService.showLoader();
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
       //call reserved bike api
@@ -147,7 +147,7 @@ export class MyreservationPage implements OnInit {
           let bikeDetailsApi = this.httpClient.get(bikeDetailsUrl, { headers });
           bikeDetailsApi.subscribe((resp: any) => {
             console.log('Bike Details', resp);
-            //this.loadingService.hideLoader();
+            this.loadingService.hideLoader();
             this.bikeDetails = resp.data;
             this.reverseGeocode(this.platform, this.bikeDetails.lat, this.bikeDetails.lon);
             this.isBikeReserved = true;
@@ -163,13 +163,16 @@ export class MyreservationPage implements OnInit {
                 console.log(error.message);
               });
           }, (reservedBikeError) => {
-            //this.loadingService.hideLoader();
+            this.loadingService.hideLoader();
             console.log(reservedBikeError);
             this.isBikeReserved = false;
           });
+        } else {
+          this.loadingService.hideLoader();
+          this.isBikeReserved = false;
         }
       }, (bikeDetailsError) => {
-        //this.loadingService.hideLoader();
+        this.loadingService.hideLoader();
         console.log(bikeDetailsError)
         this.isBikeReserved = false;
       });