hirebike.page.html 3.68 KB
Newer Older
Priyanka Upadhye's avatar
Priyanka Upadhye committed
1
<ion-header>
2
  <ion-toolbar color="awPrimary">
Priyanka Upadhye's avatar
Priyanka Upadhye committed
3
4
5
6
    <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
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
13
  <!--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>
20
21
  </div-->
  <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
22
  <!--app-here-map [startRideSubject]="startRideSubject" [gotReservedBikeSubject]="gotReservedBikeSubject"></app-here-map-->
23
24
25
26
27
28
  <ion-card *ngIf="!isBikeReserved">
    <ion-card-content>
      No ride found
    </ion-card-content>
  </ion-card>
  <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="isBikeReserved"></div>
29
30
  <ion-fab *ngIf="isBikeReserved" class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()"
    slot="fixed">
31
32
33
34
    <ion-fab-button>
      <ion-icon name="locate"></ion-icon>
    </ion-fab-button>
  </ion-fab>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
35
36
</ion-content>
<ion-footer>
37
  <div class="bike-details-container" *ngIf="isBikeReserved">
Priyanka Upadhye's avatar
Priyanka Upadhye committed
38
    <div class="inner">
39
      <div class="button-container" *ngIf="isTripStarted">
40
        <ion-grid *ngIf="isBikeHired" class="directions">
41
          <div class="waypoint-wrapper">
42
            <span [innerHTML]="wayPointsInfo"></span>
43
          </div>
44
45
46
47
48
49
50
51
52
53
54
          <ion-list class="my-ion-list">
            <ion-item *ngFor="let maneuver of maneuverList">
              <li><span [className]="'arrow '+ maneuver.action"></span><span [innerHTML]="maneuver.instruction"></span>
              </li>
            </ion-item>
            <ion-item>
              <li><span [innerHTML]="routeSummary"></span></li>
            </ion-item>
          </ion-list>
        </ion-grid>
        <ion-grid *ngIf="!isBikeHired">
Priyanka Upadhye's avatar
Priyanka Upadhye committed
55
56
57
58
59
60
          <ion-row>
            <ion-col>Bike Name</ion-col>
            <ion-col>{{bikeDetails.name}}</ion-col>
          </ion-row>
          <ion-row>
            <ion-col>Bike Location</ion-col>
61
            <ion-col>{{address}}</ion-col>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
62
          </ion-row>
63
64
        </ion-grid>
        <ion-grid>
65
          <ion-row>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
66
            <ion-col>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
67
              <ion-button size="medium" expand="block" (click)="CancelTrip()">End Trip</ion-button>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
68
69
70
71
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
      <div id="route-selection-container" *ngIf="!isTripStarted">
        <div class="route-selection-header" *ngIf="gotRouteOptions">
          <div class="waypoint-wrapper">
            <div [innerHTML]="wayPointsInfo"></div>
            <div> Select Route:</div>
          </div>
        </div>
        <div class="routes-list-wrapper">
          <div class="routes-list-inner">
            <div class="route-option-wrapper" *ngFor="let route of routeList | keyvalue; let i = index">
              <div class="route-option-inner" (click)="selectRoute(route.value.route, i)">
                <div class="route-heading">{{getRouteType(route.value.mode)}}:</div>
                <div class="route-summary">{{route.value.summary}}</div>
                <div class="route-prediction"></div>
              </div>
            </div>
          </div>
        </div>
        <ion-button *ngIf="!isRouteSelected && !gotRouteOptions" [disabled]="!isDestinationSelected" size="medium" expand="block" (click)="getRouteOptions()">Get Routes</ion-button>
        <ion-button *ngIf="isRouteSelected" size="medium" expand="block" (click)="startTrip2()">Start Trip</ion-button>
      </div>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
93
94
    </div>
  </div>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
95
</ion-footer>