hirebike.page.html 1.49 KB
Newer Older
Priyanka Upadhye's avatar
Priyanka Upadhye committed
1
2
3
4
5
6
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title slot="start">
7
      My Ride
Priyanka Upadhye's avatar
Priyanka Upadhye committed
8
9
10
11
12
13
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div>
14
    <ion-item *ngIf="!isBikeHired">
Priyanka Upadhye's avatar
Priyanka Upadhye committed
15
16
      <ion-input type="text" [(ngModel)]="Destination" placeholder="Enter Destination"></ion-input>
    </ion-item>
17
18
19
    <ion-item *ngIf="isBikeHired">
      <ion-input type="text" [(ngModel)]="Destination" placeholder="Ongoing Trip" readonly></ion-input>
    </ion-item>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
20
21
22
23
  </div>
  <div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div>
</ion-content>
<ion-footer>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
24
  <div class="bike-details-container">
Priyanka Upadhye's avatar
Priyanka Upadhye committed
25
26
27
28
29
30
31
32
33
    <div class="inner">
      <div class="button-container">
        <ion-grid>
          <ion-row>
            <ion-col>Bike Name</ion-col>
            <ion-col>{{bikeDetails.name}}</ion-col>
          </ion-row>
          <ion-row>
            <ion-col>Bike Location</ion-col>
34
            <ion-col>{{address}}</ion-col>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
35
          </ion-row>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
36
          <ion-row *ngIf="!isBikeHired">
Priyanka Upadhye's avatar
Priyanka Upadhye committed
37
38
39
40
            <ion-col>
              <ion-button size="medium" expand="block" (click)="startTrip()">Start Trip</ion-button>
            </ion-col>
          </ion-row>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
41
42

          <ion-row *ngIf="isBikeHired">
Priyanka Upadhye's avatar
Priyanka Upadhye committed
43
            <ion-col>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
44
              <ion-button size="medium" expand="block" (click)="CancelTrip()">End Trip</ion-button>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
45
46
47
48
49
50
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </div>
  </div>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
51
  
Priyanka Upadhye's avatar
Priyanka Upadhye committed
52
</ion-footer>