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 @@
-
+
{{getRouteType(route.value.mode)}}:
{{route.value.summary}}
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