Bike Strret displayed on pages and use will be navigated to reservation page...

Bike Strret displayed on pages and use will be navigated to reservation page after clicking on reservation

src/app/hirebike/hirebike.page.html

@@ -31,7 +31,7 @@
           </ion-row>
           <ion-row>
             <ion-col>Bike Location</ion-col>
-            <ion-col>{{bikeDetails.address}}</ion-col>
+            <ion-col>{{address}}</ion-col>
           </ion-row>
           <ion-row *ngIf="!isBikeHired">
             <ion-col>

src/app/hirebike/hirebike.page.ts

@@ -22,6 +22,7 @@ export class HirebikePage implements OnInit {
 
   reservedBike: any = {};
   bikeDetails: any = {};
+  address="sample";
   isBikeHired=false;
 
   noReservation = true;
@@ -82,7 +83,7 @@ export class HirebikePage implements OnInit {
             console.log('Bike Details', resp);
             this.bikeDetails = resp.data;
             this.noReservation = false;
-
+            this.reverseGeocode(this.platform, this.bikeDetails.lat, this.bikeDetails.lon);
             // display map
             setTimeout(() => {
               this.loadmap();
@@ -230,7 +231,29 @@ export class HirebikePage implements OnInit {
     // Add the marker to the map:
     this.map.addObject(marker);
   }
-
+  reverseGeocode(platform, lat, lng) {
+    var prox = lat + ',' + lng + ',56';
+    var geocoder = platform.getGeocodingService(),
+      parameters = {
+        prox: prox,
+        mode: 'retrieveAddresses',
+        maxresults: '1',
+        gen: '9'
+      };
+
+    geocoder.reverseGeocode(parameters, result => {
+      console.log(result);
+      var streets = result.Response.View[0].Result[0].Location.Address.Street;
+      var houseNumber = result.Response.View[0].Result[0].Location.Address.HouseNumber;
+      var zipcode = result.Response.View[0].Result[0].Location.Address.PostalCode;
+     
+      this.address = streets;
+     
+
+    }, (error) => {
+      alert(error);
+    });
+  }
 
   // Define a callback function to process the routing response:
   onResult(result) {

src/app/home/home.page.ts

@@ -5,7 +5,7 @@ import { Observable } from 'rxjs';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Storage } from '@ionic/storage';
 import { ToastService } from '../services/toast.service';
-
+import { Router } from '@angular/router';
 
 declare var H: any;
 
@@ -46,6 +46,7 @@ export class HomePage {
  
 
   constructor(private geolocation: Geolocation,
+    private router: Router,
     public restService: RestService,
     public httpClient: HttpClient,
     private storage: Storage,
@@ -275,6 +276,7 @@ export class HomePage {
         console.log('my data: ', resp);
         this.isBikeReserved=true;
         this.toastService.showToast("Reservation Successful!");
+        this.router.navigateByUrl('/myreservation');
       }, (error) => {
         console.log(error)
         this.toastService.showToast("Only one bike may be reserved or rented at a time")

src/app/myreservation/myreservation.page.html

@@ -36,7 +36,7 @@
           </ion-row>
           <ion-row>
             <ion-col>Bike Location</ion-col>
-            <ion-col>{{bikeDetails.address}}</ion-col>
+            <ion-col>{{address}}</ion-col>
           </ion-row>
           <ion-row>
             <ion-col>Bike Distance</ion-col>

src/app/myreservation/myreservation.page.ts

@@ -23,8 +23,8 @@ export class MyreservationPage implements OnInit {
 
   reservedBike: any = {};
   bikeDetails: any = {};
-  isBikeHired=false;
-
+  isBikeHired = false;
+  address="sample";
   noReservation = true;
 
   private currentLocation = { lat: 0, lng: 0 };
@@ -82,6 +82,7 @@ export class MyreservationPage implements OnInit {
           bikeDetailsApi.subscribe((resp: any) => {
             console.log('Bike Details', resp);
             this.bikeDetails = resp.data;
+            this.reverseGeocode(this.platform, this.bikeDetails.lat, this.bikeDetails.lon);
             this.noReservation = false;
 
             // display map
@@ -183,9 +184,9 @@ export class MyreservationPage implements OnInit {
 
       // show route on map
       this.mapRouter.calculateRoute(this.routingParameters, this.onResult.bind(this),
-      (error) => {
-        alert(error.message);
-      });
+        (error) => {
+          alert(error.message);
+        });
     }, er => {
       alert('Can not retrieve Location')
     }).catch((error) => {
@@ -209,6 +210,29 @@ export class MyreservationPage implements OnInit {
     // Add the marker to the map:
     this.map.addObject(marker);
   }
+  reverseGeocode(platform, lat, lng) {
+    var prox = lat + ',' + lng + ',56';
+    var geocoder = platform.getGeocodingService(),
+      parameters = {
+        prox: prox,
+        mode: 'retrieveAddresses',
+        maxresults: '1',
+        gen: '9'
+      };
+
+    geocoder.reverseGeocode(parameters, result => {
+      console.log(result);
+      var streets = result.Response.View[0].Result[0].Location.Address.Street;
+      var houseNumber = result.Response.View[0].Result[0].Location.Address.HouseNumber;
+      var zipcode = result.Response.View[0].Result[0].Location.Address.PostalCode;
+     
+      this.address = streets;
+     
+
+    }, (error) => {
+      alert(error);
+    });
+  }
 
 
   // Define a callback function to process the routing response:
@@ -251,7 +275,7 @@ export class MyreservationPage implements OnInit {
           lineWidth: 6,
           strokeColor: 'rgba(0, 72, 255, 0.8)',
           lineDash: [0, 2]
-          }
+        }
       });
 
       // Add the route polyline and the two markers to the map:
@@ -262,10 +286,11 @@ export class MyreservationPage implements OnInit {
       //this.map.setZoom(this.map.getZoom() - 4.3, true);
     }
   };
+
   hireBike() {
     if (this.isBikeHired)
-    this.toastService.showToast("You already Hired this bike");
+      this.toastService.showToast("You already Hired this bike");
     else
-    this.router.navigateByUrl('/hirebike');
+      this.router.navigateByUrl('/hirebike');
   }
 }