home.page.html 3.8 KB
Newer Older
Rron Jahja's avatar
Rron Jahja committed
1
<ion-header>
2
  <ion-toolbar color="awPrimary">
Rron Jahja's avatar
Rron Jahja committed
3
4
5
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
6
    <ion-title slot="start">
Rron Jahja's avatar
Rron Jahja committed
7
8
      Home
    </ion-title>
9
    <ion-item color="awPrimary" slot="end">
10
11
      <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
    </ion-item>
Rron Jahja's avatar
Rron Jahja committed
12
13
  </ion-toolbar>
</ion-header>
14

Rron Jahja's avatar
Rron Jahja committed
15
<ion-content>
16
  <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
17
18
19
20
21
  <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
    <ion-fab-button>
      <ion-icon name="locate"></ion-icon>
    </ion-fab-button>
  </ion-fab>
Rron Jahja's avatar
Rron Jahja committed
22
</ion-content>
23
24

<ion-footer>
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
  <div class="bike-list-wrapper" *ngIf="!isDetailsVisible">
    <div class="nearby-bikes">Nearby Bikes</div>
    <div class="bike-list-container">
      <div class="bike-container" *ngFor="let bike of bikes">
        <div class="inner" (click)="showBikeDetails(bike)">
          <div class="bike-icon">
            <ion-icon name="bicycle"></ion-icon>
          </div>
          <ion-grid class="distance-data">
            <ion-row>
              <ion-col size="1"><ion-icon name="walk"></ion-icon></ion-col>
              <ion-col>{{bike.distance + " km"}}</ion-col>
            </ion-row>
            <ion-row>
              <ion-col size="1"><ion-icon name="pin"></ion-icon></ion-col>
              <ion-col>{{bike.address + " " + (bike.HouseNumber || "")}}</ion-col>
            </ion-row>
          </ion-grid>
          <div class="battery-info1">
              <div><ion-icon name="battery-full"></ion-icon></div>
              <div class="battery-level">{{bike.batteryPercentage}}%</div>
46
47
          </div>
        </div>
48
      </div>
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
      <!-- <div class="bike-container" *ngFor="let bike of bikes">
        <div class="inner" (click)="showBikeDetails(bike)">
          <div class="bike-name">
            {{bike.name}}
          </div>
          <div class="battery-info">
            <div>
              <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
            </div>
            <div>{{bike.batteryPercentage + " %"}}</div>
          </div>
          <div class="address-info">
            <div class="disance">{{bike.distance + " km"}}</div>
            <div class="address">{{bike.address+" "+bike.HouseNumber+ ", " +bike.PostalCode}}</div>
          </div>
        </div>
      </div> -->
66
67
68
69
70
71
    </div>
  </div>
  <div class="bike-details-container" *ngIf="isDetailsVisible">
    <div class="inner">
      <div class="button-container">
        <ion-grid>
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
          <ion-row>
            <ion-col>
              Bike Name
            </ion-col>
            <ion-col>
              {{selectedBike.name}}
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              Battery Level
            </ion-col>
            <ion-col>
              <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
              {{selectedBike.batteryPercentage + " %"}}
            </ion-col>
          </ion-row>
          <ion-row>
90
91
92
93
94
95
96
            <ion-col>
              Bike Location
            </ion-col>
            <ion-col>
              {{selectedBike.address}}
            </ion-col>
          </ion-row>
97
          <ion-row>
98
99
100
101
            <ion-col>
              Bike Distance
            </ion-col>
            <ion-col>
102
              {{selectedBike.distance + " km"}}
103
104
            </ion-col>
          </ion-row>
Priyanka Upadhye's avatar
Priyanka Upadhye committed
105
          <ion-row>
106
107
108
109
110
111
112
113
            <ion-col>
              <ion-button size="medium" expand="block" (click)="reserveBike()">Reserve</ion-button>
            </ion-col>
            <ion-col>
              <ion-button size="medium" expand="block" (click)="navigatetoBike()">Navigate</ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>
114
115
116
      </div>
    </div>
  </div>
117
</ion-footer>