Merge branch '45-show-stepwise-navigation-instructions-on-my-ride-page' into 'master'

Resolve "Show stepwise navigation instructions on my ride page"

Closes #45

See merge request 92khra1mst/hft_awado_app!29

src/app/components/here-map/here-map.component.ts

@@ -5,6 +5,7 @@ import { Observable, Subject } from 'rxjs';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Storage } from '@ionic/storage';
 import { ToastService } from '../../services/toast.service';
+import { MapDataService } from 'src/app/services/map-data.service';
 
 declare var H: any;
 
@@ -42,7 +43,8 @@ export class HereMapComponent implements OnInit {
     public restService: RestService,
     public httpClient: HttpClient,
     private storage: Storage,
-    private toastService: ToastService) {
+    private toastService: ToastService,
+    private mapDataService: MapDataService) {
 
     this.platform = new H.service.Platform({
       'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
@@ -114,6 +116,7 @@ export class HereMapComponent implements OnInit {
      */
     this.addRouteShapeToMap(route);
     this.addManueversToMap(route);
+    this.mapDataService.mapDataSubject.next(route);
 
     //addWaypointsToPanel(route.waypoint);
     //addManueversToPanel(route);

src/app/hirebike/hirebike.page.html

@@ -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>

src/app/hirebike/hirebike.page.scss

+.my-ion-list{
+    max-height: 200px;
+    overflow-y: auto;
+    font-size: 13px!important;
+}
+
+.waypoint-wrapper{
+    font-weight: 700;
+}
+
+.directions li span.arrow {
+    display:inline-block;
+    min-width:28px;
+    min-height:28px;
+    background-position:0px;
+    background-image: url("https://heremaps.github.io/maps-api-for-javascript-examples/map-with-route-from-a-to-b/img/arrows.png");
+    position:relative;
+    top:8px;
+  }
+  .directions li span{
+      font-size: 13px!important;
+  }
+  .directions li span.depart  {
+    background-position:-28px;
+  }
+  .directions li span.rightUTurn  {
+    background-position:-56px;
+  }
+  .directions li span.leftUTurn  {
+    background-position:-84px;
+  }
+  .directions li span.rightFork  {
+    background-position:-112px;
+  }
+  .directions li span.leftFork  {
+    background-position:-140px;
+  }
+  .directions li span.rightMerge  {
+    background-position:-112px;
+  }
+  .directions li span.leftMerge  {
+    background-position:-140px;
+  }
+  .directions li span.slightRightTurn  {
+    background-position:-168px;
+  }
+  .directions li span.slightLeftTurn{
+    background-position:-196px;
+  }
+  .directions li span.rightTurn  {
+    background-position:-224px;
+  }
+  .directions li span.leftTurn{
+    background-position:-252px;
+  }
+  .directions li span.sharpRightTurn  {
+    background-position:-280px;
+  }
+  .directions li span.sharpLeftTurn{
+    background-position:-308px;
+  }
+  .directions li span.rightRoundaboutExit1 {
+    background-position:-616px;
+  }
+  .directions li span.rightRoundaboutExit2 {
+    background-position:-644px;
+  }
+  
+  .directions li span.rightRoundaboutExit3 {
+    background-position:-672px;
+  }
+  
+  .directions li span.rightRoundaboutExit4 {
+    background-position:-700px;
+  }
+  
+  .directions li span.rightRoundaboutPass {
+    background-position:-700px;
+  }
+  
+  .directions li span.rightRoundaboutExit5 {
+    background-position:-728px;
+  }
+  .directions li span.rightRoundaboutExit6 {
+    background-position:-756px;
+  }
+  .directions li span.rightRoundaboutExit7 {
+    background-position:-784px;
+  }
+  .directions li span.rightRoundaboutExit8 {
+    background-position:-812px;
+  }
+  .directions li span.rightRoundaboutExit9 {
+    background-position:-840px;
+  }
+  .directions li span.rightRoundaboutExit10 {
+    background-position:-868px;
+  }
+  .directions li span.rightRoundaboutExit11 {
+    background-position:896px;
+  }
+  .directions li span.rightRoundaboutExit12 {
+    background-position:924px;
+  }
+  .directions li span.leftRoundaboutExit1  {
+    background-position:-952px;
+  }
+  .directions li span.leftRoundaboutExit2  {
+    background-position:-980px;
+  }
+  .directions li span.leftRoundaboutExit3  {
+    background-position:-1008px;
+  }
+  .directions li span.leftRoundaboutExit4  {
+    background-position:-1036px;
+  }
+  .directions li span.leftRoundaboutPass {
+    background-position:1036px;
+  }
+  .directions li span.leftRoundaboutExit5  {
+    background-position:-1064px;
+  }
+  .directions li span.leftRoundaboutExit6  {
+    background-position:-1092px;
+  }
+  .directions li span.leftRoundaboutExit7  {
+    background-position:-1120px;
+  }
+  .directions li span.leftRoundaboutExit8  {
+    background-position:-1148px;
+  }
+  .directions li span.leftRoundaboutExit9  {
+    background-position:-1176px;
+  }
+  .directions li span.leftRoundaboutExit10  {
+    background-position:-1204px;
+  }
+  .directions li span.leftRoundaboutExit11  {
+    background-position:-1232px;
+  }
+  .directions li span.leftRoundaboutExit12  {
+    background-position:-1260px;
+  }
+  .directions li span.arrive  {
+    background-position:-1288px;
+  }
+  .directions li span.leftRamp  {
+    background-position:-392px;
+  }
+  .directions li span.rightRamp  {
+    background-position:-420px;
+  }
+  .directions li span.leftExit  {
+    background-position:-448px;
+  }
+  .directions li span.rightExit  {
+    background-position:-476px;
+  }
+  .directions li span.ferry  {
+    background-position:-1316px;
+  }
\ No newline at end of file

src/app/hirebike/hirebike.page.ts

@@ -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) {
-      this.platform = new H.service.Platform({
-        'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
-      });
+    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);
@@ -64,7 +112,7 @@ export class HirebikePage implements OnInit {
             this.bikeDetails = resp.data;
             this.noReservation = false;
             this.reverseGeocode(this.platform, this.bikeDetails.lat, this.bikeDetails.lon);
-            
+
             //pass reserved bike subject here map
             this.gotReservedBikeSubject.next(resp.data);
           }, (reservedBikeError) => console.log(reservedBikeError));

src/app/services/map-data.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { MapDataService } from './map-data.service';
+
+describe('MapDataService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: MapDataService = TestBed.get(MapDataService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/map-data.service.ts

+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MapDataService {
+
+  mapDataSubject = new Subject<any>(); //Decalring new RxJs Subject
+
+  constructor() { }
+
+  sendDataToOtherComponent(somedata) {
+    this.mapDataSubject.next(somedata);
+  }
+
+}