end trip api called

src/app/hirebike/hirebike.page.html

@@ -46,14 +46,10 @@
     <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-button size="medium" expand="block" (click)="CancelTrip()">End Trip</ion-button>
             </ion-col>
           </ion-row>
         </ion-grid>

src/app/hirebike/hirebike.page.ts

@@ -110,7 +110,23 @@ export class HirebikePage implements OnInit {
 
   }
 
-  
+  CancelTrip(){
+
+    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.toastService.showToast("Trip Ended!");
+      }, (error) => {
+        console.log(error)
+        this.toastService.showToast("Unavle to end trip")
+      });
+    });
+
+  }
+
 
   loadmap() {
     var defaultLayers = this.platform.createDefaultLayers();