integrated with hire API

src/app/hirebike/hirebike.page.html

@@ -18,7 +18,7 @@
   <div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div>
 </ion-content>
 <ion-footer>
-  <div class="bike-details-container">
+  <div class="bike-details-container" *ngIf="!isBikeHired">
     <div class="inner">
       <div class="button-container">
         <ion-grid>
@@ -39,4 +39,22 @@
       </div>
     </div>
   </div>
+  <div class="problem-container" *ngIf="isBikeHired">
+    <div class="inner">
+      <div class="button-container">
+        <ion-grid>
+          <ion-row>
+            <ion-col>Any Problems?</ion-col>
+           
+          </ion-row>
+          
+          <ion-row>
+            <ion-col>
+              <ion-button size="medium" expand="block" (click)="CancelTrip()">Cancel Trip</ion-button>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
+    </div>
+  </div>
 </ion-footer>
\ No newline at end of file

src/app/hirebike/hirebike.page.ts

@@ -22,6 +22,7 @@ export class HirebikePage implements OnInit {
 
   reservedBike: any = {};
   bikeDetails: any = {};
+  isBikeHired=false;
 
   noReservation = true;
 
@@ -91,20 +92,26 @@ export class HirebikePage implements OnInit {
       }, (bikeDetailsError) => console.log(bikeDetailsError));
     });
   }
+  startTrip(){
 
-  cancelReservation() {
     this.storage.get('token').then((token) => {
-      let url = 'http://193.196.52.237:8081/reservation' + '?bikeId=' + this.bikeDetails.id;
+      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 });
+      let bikeApi = this.httpClient.get(url, { headers });
       bikeApi.subscribe((resp) => {
-        console.log('Reservation Cancelled: ', resp);
-        this.toastService.showToast("Bike Reservation successfully cancelled.");
-        this.router.navigateByUrl('/home');
-      }, (error) => console.log(error));
+        console.log('my data: ', resp);
+        this.toastService.showToast("Trip Started");
+        this.isBikeHired=true;
+      }, (error) => {
+        console.log(error)
+        this.toastService.showToast("Unable to Hire Bike")
+      });
     });
+
   }
 
+  
+
   loadmap() {
     var defaultLayers = this.platform.createDefaultLayers();
     this.map = new H.Map(
@@ -259,8 +266,6 @@ export class HirebikePage implements OnInit {
       //this.map.setZoom(this.map.getZoom() - 4.3, true);
     }
   };
-  hireBike() {
-    this.router.navigateByUrl('/hirebike');
-  }
+  
 
 }