Ent trip API integrated

src/app/hirebike/hirebike.page.html

@@ -21,7 +21,7 @@
   <div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div>
 </ion-content>
 <ion-footer>
-  <div class="bike-details-container" *ngIf="!isBikeHired">
+  <div class="bike-details-container">
     <div class="inner">
       <div class="button-container">
         <ion-grid>
@@ -33,21 +33,13 @@
             <ion-col>Bike Location</ion-col>
             <ion-col>{{bikeDetails.address}}</ion-col>
           </ion-row>
-          <ion-row>
+          <ion-row *ngIf="!isBikeHired">
             <ion-col>
               <ion-button size="medium" expand="block" (click)="startTrip()">Start Trip</ion-button>
             </ion-col>
           </ion-row>
-        </ion-grid>
-      </div>
-    </div>
-  </div>
-  <div class="problem-container" *ngIf="isBikeHired">
-    <div class="inner">
-      <div class="button-container">
-        <ion-grid>
-          
-          <ion-row>
+
+          <ion-row *ngIf="isBikeHired">
             <ion-col>
               <ion-button size="medium" expand="block" (click)="CancelTrip()">End Trip</ion-button>
             </ion-col>
@@ -56,4 +48,5 @@
       </div>
     </div>
   </div>
+  
 </ion-footer>
\ No newline at end of file

src/app/hirebike/hirebike.page.ts

@@ -102,6 +102,7 @@ export class HirebikePage implements OnInit {
       bikeApi.subscribe((resp) => {
         console.log('my data: ', resp);
         this.toastService.showToast("Trip Started");
+        this.isBikeHired=true;
       }, (error) => {
         console.log(error)
         this.toastService.showToast("This is ongoing Trip")
@@ -121,7 +122,7 @@ export class HirebikePage implements OnInit {
         this.toastService.showToast("Trip Ended!");
       }, (error) => {
         console.log(error)
-        this.toastService.showToast("Unavle to end trip")
+        this.toastService.showToast("No Ongong Trip to End")
       });
     });