Commit 6fe5f51f authored by Priyanka Vivekanand Upadhye's avatar Priyanka Vivekanand Upadhye
Browse files

Merge branch '13-show-bike-details' into 'master'

Resolve "Show bike details"

Closes #13

See merge request 92khra1mst/hft_awado_app!6
parents d17a153c 14f24a4e
master 15-find-the-street-name-by-geo-location-data 16-create-search-location-functionality 17-create-toast-message-service 18-design-feedback-page 18-design-feedback-page-2 19-registration-page-validation 20-ride-history 20-ride-history-2 21-reservation-history 22-hire-reserved-bike 24-routing-from-users-current-position-to-the-bike 25-current-bike-reservation-workflow 28-routing-from-bike-location-to-user-s-destination 34-navigation-menu-is-getting-displayed-on-login-page 36-cancel-hired-bike 37-display-username-on-homepage 38-display-calculated-name-of-the-street-on-reservation-and-hire-page 39-validation-on-login-page 4-reserve-a-bike 40-map-performance-improvement-map-angle-doesn-t-change-when-selected-3d 41-display-live-location-of-user-on-map 42-add-log-in-button-on-registration-page-add-extra-messages-for-email-and-password-validation 42-add-log-in-button-on-registration-page-add-extra-messages-for-email-and-password-validation-2 45-show-stepwise-navigation-instructions-on-my-ride-page 46-show-bicycle-route-between-bike-and-user-s-destination 47-show-alternate-routes-for-bike-to-destination 48-create-a-common-service-for-getting-user-s-current-location-and-live-location 49-show-loading-page 50-add-dependencies-locally-to-improve-app-performance 51-while-navigating-between-pages-map-doesn-t-load-properly 52-page-loader-is-getting-displayed-everywhere 53-scrollining-in-ride-history 53-scrollining-in-ride-history-2 55-change-password 56-create-dummy-page-or-menu-for-hotline-contact 57-registration-not-working-from-app 58-add-flow-on-navigate-button-to-route-from-user-to-bike 60-create-common-theming-styles-and-colors 61-chnage-styles-for-bike-list-and-bug-fixes 62-change-in-feedback-workflow 63-password-reset-api-integration 64-close-button-on-home-page-to-redirect-to-bike-list 66-highlight-selected-route-from-list-of-different-routes 67-deactivate-user-api-integration 68-display-no-go-areas-on-map 69-add-launcher-icon-for-application-on-android 70-add-validation-for-feedback-should-not-be-empty 71-prediction-ui-implementation-send-location-of-bike-to-backend 72-feedback-toast-message 73-removal-here-maps-api-key Show-Bike-details-when-bike-icon-is-clicked search_functionality
1 merge request!6Resolve "Show bike details"
Showing with 98 additions and 19 deletions
+98 -19
...@@ -7,39 +7,105 @@ ...@@ -7,39 +7,105 @@
Home Home
</ion-title> </ion-title>
<ion-item class="checkbox-wrapper"> <ion-item class="checkbox-wrapper">
<!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox--> <!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox-->
<ion-label class="text" (click)="enable3DMaps()">3D</ion-label> <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
</ion-item> </ion-item>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div #mapElement2d style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div> <div #mapElement2d style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
<div #mapElement3d style="width: 100%; height: 100%" id="mapContainer" *ngIf="is3DChecked"></div> <div #mapElement3d style="width: 100%; height: 100%" id="mapContainer" *ngIf="is3DChecked"></div>
<!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div--> <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
<ion-fab vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed"> <ion-fab vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="locate"></ion-icon> <ion-icon name="locate"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
</ion-content> </ion-content>
<ion-footer> <ion-footer>
<div class="bike-list-container"> <div class="bike-list-container" *ngIf="!isDetailsVisible">
<div class="bike-container" *ngFor="let bike of bikes"> <div class="bike-container" *ngFor="let bike of bikes">
<div class="bike-name"> <div class="inner" (click)="showBikeDetails(bike)">
{{bike.name}} <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 + "m"}}</div>
<div class="address">{{bike.address}}</div>
</div>
</div> </div>
<div class="battery-info"> </div>
<div><ion-icon class="battery-icon" name="battery-charging"></ion-icon></div> </div>
<div>{{bike.batteryPercentage + " %"}}</div>
<div class="bike-details-container" *ngIf="isDetailsVisible">
<div class="inner">
<!-- <div class="battery-info">
<div>
<ion-icon class="battery-icon" name="battery-charging"></ion-icon>
</div>
<div>{{selectedBike.batteryPercentage + " %"}}</div>
</div> </div>
<div class="address-info"> <div class="address-info">
<div class="disance">{{bike.distance + "m"}}</div> <div class="disance">{{selectedBike.distance + "m"}}</div>
<div class="address">{{bike.address}}</div> <div class="address">{{selectedBike.address}}</div>
</div> -->
<div class="button-container">
<ion-grid>
<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>
<ion-col>
Bike Location
</ion-col>
<ion-col>
{{selectedBike.address}}
</ion-col>
</ion-row>
<ion-row>
<ion-col>
Bike Distance
</ion-col>
<ion-col>
{{selectedBike.distance + "m"}}
</ion-col>
</ion-row>
<ion-row>
<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>
</div> </div>
</div> </div>
</div> </div>
</ion-footer> </ion-footer>
\ No newline at end of file
...@@ -99,4 +99,8 @@ ion-footer{ ...@@ -99,4 +99,8 @@ ion-footer{
.get-position{ .get-position{
margin-bottom:10px; margin-bottom:10px;
}
.button-container{
clear: both;
} }
\ No newline at end of file
...@@ -23,6 +23,8 @@ export class HomePage { ...@@ -23,6 +23,8 @@ export class HomePage {
private currentLocation = { lat: 0, lng: 0 }; private currentLocation = { lat: 0, lng: 0 };
public is3DChecked = false; public is3DChecked = false;
public isDetailsVisible = false;
public selectedBike ={};
public tempArr = [1, 2]; public tempArr = [1, 2];
public locationArr = [{ lat: 48.778409, lng: 9.179252 }, public locationArr = [{ lat: 48.778409, lng: 9.179252 },
...@@ -223,4 +225,11 @@ export class HomePage { ...@@ -223,4 +225,11 @@ export class HomePage {
this.loadmap("3D"); this.loadmap("3D");
}, 100); }, 100);
} }
showBikeDetails(bike) {
this.selectedBike=bike;
this.isDetailsVisible = true;
}
} }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment