From 2c868f443b7a51c27cd474c31cd19d2b28515413 Mon Sep 17 00:00:00 2001 From: Ratnadeep Rajendra Kharade <92khra1mst@hft-stuttgart.de> Date: Mon, 6 Jan 2020 15:36:51 +0100 Subject: [PATCH 1/4] html changes for route highlight --- src/app/hirebike/hirebike.page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/hirebike/hirebike.page.html b/src/app/hirebike/hirebike.page.html index 322c1f3..c08ded6 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}}
-- GitLab From d2d9c761a734b94c3f3640f82c0f289f6da3f880 Mon Sep 17 00:00:00 2001 From: Ratnadeep Rajendra Kharade <92khra1mst@hft-stuttgart.de> Date: Mon, 6 Jan 2020 15:37:16 +0100 Subject: [PATCH 2/4] css changes for route hightlight --- src/app/hirebike/hirebike.page.scss | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/app/hirebike/hirebike.page.scss b/src/app/hirebike/hirebike.page.scss index 293a806..6c16e7d 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; + } } } } -- GitLab From 421cb6b4ce2c357f9bc92f3e2d0eb32431797a14 Mon Sep 17 00:00:00 2001 From: Ratnadeep Rajendra Kharade <92khra1mst@hft-stuttgart.de> Date: Mon, 6 Jan 2020 15:37:40 +0100 Subject: [PATCH 3/4] Controller logic for route highlight --- src/app/hirebike/hirebike.page.ts | 67 ++++++++++++++++++++++++++----- 1 file changed, 57 insertions(+), 10 deletions(-) diff --git a/src/app/hirebike/hirebike.page.ts b/src/app/hirebike/hirebike.page.ts index c7b16e0..44d0796 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 Date: Mon, 6 Jan 2020 15:39:09 +0100 Subject: [PATCH 4/4] Removed map when view changes --- src/app/home/home.page.ts | 9 +++++++++ src/app/myreservation/myreservation.page.ts | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index 64bf1db..126e0af 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 bffb67a..0f06709 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(); + // } + } } -- GitLab