diff --git a/src/app/hirebike/hirebike.page.html b/src/app/hirebike/hirebike.page.html
index 322c1f35750bf4b201940de419a760441f490abb..c08ded610180cedad3646325e6e7ff3ab299aace 100644
--- a/src/app/hirebike/hirebike.page.html
+++ b/src/app/hirebike/hirebike.page.html
@@ -79,7 +79,7 @@
<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-option-inner" [ngClass]="{'selected': route.value.selected}" (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>
diff --git a/src/app/hirebike/hirebike.page.scss b/src/app/hirebike/hirebike.page.scss
index 293a80644e2b829643e0f6f29bc1e30f378b63c6..6c16e7d3f5e0160df6032bcc6100b39111b3c30d 100644
--- a/src/app/hirebike/hirebike.page.scss
+++ b/src/app/hirebike/hirebike.page.scss
@@ -18,13 +18,22 @@
color: #444444;
.route-option-wrapper{
- padding: 8px;
- border-bottom: 1px solid #ddd;
- font-size: 14px;
- .route-heading{
- font-weight: 500;
- margin-bottom: 5px;
+ .route-option-inner{
+ padding: 8px;
+ border-bottom: 1px solid #ddd;
+ font-size: 14px;
+
+ &.selected{
+ background-color: rgba(102, 157, 246, 1);
+ color: white;
+ font-weight: 500!important;
+ }
+
+ .route-heading{
+ font-weight: 500;
+ margin-bottom: 5px;
+ }
}
}
}
diff --git a/src/app/hirebike/hirebike.page.ts b/src/app/hirebike/hirebike.page.ts
index c7b16e0064db483c930e027f3d11528e98667cbd..44d07969c1fae012dfacd20ca6a74b4a55e635d4 100644
--- a/src/app/hirebike/hirebike.page.ts
+++ b/src/app/hirebike/hirebike.page.ts
@@ -210,6 +210,7 @@ export class HirebikePage implements OnInit {
}
gotRouteOptions = false;
+ routesResponse = {};
getRouteOptions() {
var waypoint0 = this.bikePosition.lat + ',' + this.bikePosition.lng;
@@ -219,11 +220,17 @@ export class HirebikePage implements OnInit {
let url = 'http://193.196.52.237:8081/routing?startlng='+ this.bikePosition.lng + '&startlat=' + this.bikePosition.lat + '&destinationlng='+ this.destinationPosition.lng + '&destinationlat=' + this.destinationPosition.lat;
const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
let bikeApi = this.httpClient.get(url, { headers });
- bikeApi.subscribe((resp) => {
+ bikeApi.subscribe((resp:any) => {
console.log('my data: ', resp);
this.loadingService.hideLoader();
this.isBikeHired = true;
- this.displayRouteOptions(resp);
+ this.routesResponse = resp;
+ this.displayRouteOptions(resp, 0);
+ this.displayRouteSummaryAtTop(resp);
+ this.isRouteSelected = true;
+ let firstRouteResp = JSON.parse(resp.data.routes[0].route);
+ let firstRoute = firstRouteResp.response.route[0];
+ this.selectedRoute = firstRoute;
this.gotRouteOptions = true;
}, (error) => {
console.log(error);
@@ -262,15 +269,22 @@ export class HirebikePage implements OnInit {
// }
}
- displayRouteOptions(resp){
- for (let i = 0; i < resp.data.routes.length; i++) {
+ displayRouteOptions(resp, selectedRouteIndex){
+ for (let i = resp.data.routes.length - 1; i >= 0 ; i--) {
let routeResp = JSON.parse(resp.data.routes[i].route);
let route = routeResp.response.route[0];
//console.log(route);
- this.setRouteOptions(route, i, resp.data.routes[i].mode);
- this.drawRouteLine(route, i);
+ this.setRouteOptions(route, i, resp.data.routes[i].mode, selectedRouteIndex);
+ if(i !== selectedRouteIndex) {
+ this.drawRouteLine(route, i);
+ }
}
+ let routeResp = JSON.parse(resp.data.routes[selectedRouteIndex].route);
+ let route = routeResp.response.route[0];
+ this.drawRouteLine(route, selectedRouteIndex, 'rgba(102, 157, 246, 0.9)');
+ }
+ displayRouteSummaryAtTop(resp){
let firstRoute = JSON.parse(resp.data.routes[0].route).response.route[0];
console.log(firstRoute);
let waypointLabels = [];
@@ -282,12 +296,16 @@ export class HirebikePage implements OnInit {
routeList = {};
- setRouteOptions(route, index, mode) {
+ setRouteOptions(route, index, mode, selectedRouteIndex) {
let content = '';
+ let selected = false;
content += 'Total distance: ' + route.summary.distance + 'm. ';
content += 'Travel Time: ' + Math.floor(route.summary.travelTime / 60) + ' min';
console.log(content);
- this.routeList[index] = {route:route, summary:content, mode:mode};
+ if(index === selectedRouteIndex) {
+ selected = true;
+ }
+ this.routeList[index] = {route:route, summary:content, mode:mode, selected: selected};
}
isRouteSelected = false;
@@ -295,10 +313,24 @@ export class HirebikePage implements OnInit {
selectRoute(route, index) {
let routeLine = this.routeLines[index];
- this.map.removeObject(routeLine);
- this.drawRouteLine(route, index, 'rgba(102, 157, 246, 0.9)');
+ //this.map.removeObject(routeLine);
+ this.removeRouteLines();
+ // for(let i=0; i<this.routesResponseArr.length; i++) {
+ // if(index !== i) {
+ // let routeResp = JSON.parse(this.routesResponseArr[i].route);
+ // let route = routeResp.response.route[0];
+ // this.drawRouteLine(route, index);
+ // }
+ // }
+ // if(this.oldIndex) {
+ // this.map.removeObject(this.routeLines[this.oldIndex]);
+ // this.map.removeObject(this.routeLines[index]);
+ // }
+ //this.drawRouteLine(route, index, 'rgba(102, 157, 246, 0.9)');
this.isRouteSelected = true;
this.selectedRoute = route;
+ this.routeLines = {};
+ this.displayRouteOptions(this.routesResponse, index)
}
routeLines = {};
@@ -324,6 +356,12 @@ export class HirebikePage implements OnInit {
this.map.addObject(polyline);
}
+ removeRouteLines(){
+ for(let key in this.routeLines) {
+ this.map.removeObject(this.routeLines[key]);
+ }
+ }
+
getRouteType(mode){
if (mode === "NORMAL") {
return "Fastest Route";
@@ -742,4 +780,13 @@ export class HirebikePage implements OnInit {
alert(error);
});
}
+
+ ionViewDidLeave(){
+ if(this.mapElement) {
+ this.mapElement.nativeElement.remove();
+ }
+ // if(this.locationService.liveLocationSubject) {
+ // this.locationService.liveLocationSubject.unsubscribe();
+ // }
+ }
}
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 64bf1db12a82dc668c7d6283121bc02ae6801dd7..126e0af73bd249d338a9c60aeacbf90596cc387d 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -289,4 +289,13 @@ export class HomePage implements OnInit, OnDestroy {
//this.locationService.liveLocationSubject.unsubscribe();
}
+ ionViewDidLeave(){
+ if(this.mapElement) {
+ this.mapElement.nativeElement.remove();
+ }
+ // if(this.locationService.liveLocationSubject) {
+ // this.locationService.liveLocationSubject.unsubscribe();
+ // }
+ }
+
}
diff --git a/src/app/myreservation/myreservation.page.ts b/src/app/myreservation/myreservation.page.ts
index bffb67acdf5245ce645c54d6b73c282f6773c92c..0f0670957e15b8646fc6e4930745d96150fcce1f 100644
--- a/src/app/myreservation/myreservation.page.ts
+++ b/src/app/myreservation/myreservation.page.ts
@@ -346,4 +346,13 @@ export class MyreservationPage implements OnInit {
else
this.router.navigateByUrl('/hirebike');
}
+
+ ionViewDidLeave(){
+ if(this.mapElement) {
+ this.mapElement.nativeElement.remove();
+ }
+ // if(this.locationService.liveLocationSubject) {
+ // this.locationService.liveLocationSubject.unsubscribe();
+ // }
+ }
}