Commit 48b4b086 authored by Ratnadeep Rajendra Kharade's avatar Ratnadeep Rajendra Kharade
Browse files

displayed route manuevers on hire page.

parent a3fb7931
......@@ -25,7 +25,22 @@
<div class="bike-details-container">
<div class="inner">
<div class="button-container">
<ion-grid>
<ion-grid *ngIf="isBikeHired" class="directions">
<ion-item class="waypoint-wrapper">
<span [innerHTML]="wayPointsInfo"></span>
</ion-item>
<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">
<ion-row>
<ion-col>Bike Name</ion-col>
<ion-col>{{bikeDetails.name}}</ion-col>
......@@ -34,6 +49,8 @@
<ion-col>Bike Location</ion-col>
<ion-col>{{address}}</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row *ngIf="!isBikeHired">
<ion-col>
<ion-button size="medium" expand="block" (click)="startTrip()">Start Trip</ion-button>
......
......@@ -7,7 +7,9 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Storage } from '@ionic/storage';
import { ToastService } from '../services/toast.service';
import { Router } from '@angular/router';
import { MapDataService } from '../services/map-data.service';
declare var H: any;
@Component({
selector: 'app-hirebike',
templateUrl: './hirebike.page.html',
......@@ -23,18 +25,39 @@ export class HirebikePage implements OnInit {
isBikeHired = false;
noReservation = true;
currentRoute: any;
routeSummary: any;
wayPointsInfo:any;
startRideSubject: Subject<any> = new Subject();
gotReservedBikeSubject: Subject<any> = new Subject();
maneuverList: any = [];
constructor(private geolocation: Geolocation,
public restService: RestService,
public httpClient: HttpClient,
private storage: Storage,
private toastService: ToastService,
private router: Router) {
private router: Router,
private mapDataService: MapDataService) {
this.platform = new H.service.Platform({
'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
});
this.mapDataService.mapDataSubject.subscribe(receiveddata => {
console.log('data received ');
console.log(receiveddata);
this.currentRoute = receiveddata;
let content = '';
content += 'Total distance: ' + receiveddata.summary.distance + 'm. ';
content += 'Travel Time: ' + Math.floor(receiveddata.summary.travelTime / 60) + ' minutes ' + (receiveddata.summary.travelTime % 60) + ' seconds.' + ' (in current traffic)';
this.routeSummary = content;
this.showRouteInfoPanel(receiveddata);
let waypointLabels = [];
for (let i = 0; i < receiveddata.waypoint.length; i += 1) {
waypointLabels.push(receiveddata.waypoint[i].label)
}
this.wayPointsInfo = waypointLabels.join(' - ');
});
}
ngOnInit() {
......@@ -45,6 +68,31 @@ export class HirebikePage implements OnInit {
}
showRouteInfoPanel(route) {
// Add a marker for each maneuver
let maneuverList = [];
for (let i = 0; i < route.leg.length; i += 1) {
for (let j = 0; j < route.leg[i].maneuver.length; j += 1) {
// Get the next maneuver.
let maneuver = route.leg[i].maneuver[j];
maneuverList.push(maneuver);
// var li = document.createElement('li'),
// spanArrow = document.createElement('span'),
// spanInstruction = document.createElement('span');
// spanArrow.className = 'arrow ' + maneuver.action;
// spanInstruction.innerHTML = maneuver.instruction;
// li.appendChild(spanArrow);
// li.appendChild(spanInstruction);
// nodeOL.appendChild(li);
}
}
this.maneuverList = maneuverList;
}
getReservedBike() {
this.storage.get('token').then((token) => {
const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
......
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