Merge branch '66-highlight-selected-route-from-list-of-different-routes' into 'master'

Resolve "Highlight selected route from list of different routes"

Closes #66

See merge request 92khra1mst/hft_awado_app!54

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>

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;
+      }
     }
   }
 }

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();
+    // }
+  }
 }

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();
+    // }
+  }
+
 }

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();
+    // }
+  }
 }