nav visual instructions base ready

.gitignore

@@ -41,3 +41,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+/src/assets/config.json

src/app/app.component.html

@@ -1,6 +1,9 @@
 <mat-sidenav-container class="search-sidenav-container">
   <mat-sidenav-content>
     <div class="app-container">
+      <div class="instructions-container">
+        <app-instructions-display></app-instructions-display>
+      </div>
       <app-search-page></app-search-page>
       <div class="map-container">
         <app-map></app-map>

src/app/app.component.scss

@@ -7,18 +7,31 @@
 }
 
 .app-container {
-  display: flex;
+  //display: flex;
   height: 100%;
   flex-direction: column;
+  justify-content: space-between;
+
 }
 
 .map-container {
-  flex-grow: 1;
+  //flex-grow: 1;
+  //flex: 1 1 auto;
+  height: calc(100% - 100px);
+}
 
+.controlBarContainer {
+  //margin: 10px;
+  //flex-basis: 30px;
+  //flex-shrink: 0;
+  //flex: 0 0 auto;
+  height: 50px;
 
 }
 
-.controlBarContainer {
-  margin: 10px;
+.instructions-container {
+  //margin: 10px;
+  //flex: 0 0 auto;
+  height: 50px;
 }
 

src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { GeolocationService } from './modules/service-providers/services/position/geolocation.service';
+import { NavigationService } from './modules/service-providers/services/navigation/navigation.service';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +9,7 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'Phraze';
+
+  constructor(private geolocationService: GeolocationService,
+              private navigationService: NavigationService) {}
 }

src/app/app.module.ts

@@ -16,13 +16,17 @@ import { StoreModule } from '@ngrx/store';
 import { navFeatureKey } from './store/nav.selectors';
 import { navReducer } from './store/nav.reducer';
 import { FormsModule } from '@angular/forms';
+import { InstructionsDisplayComponent } from './components/instructions-display/instructions-display.component';
+import { InstructionsVoiceComponent } from './components/instructions-voice/instructions-voice.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     ControlBarComponent,
     SearchPageComponent,
+    InstructionsDisplayComponent,
+    InstructionsVoiceComponent,
 
   ],
   imports: [

src/app/components/control-bar/control-bar.component.html

@@ -5,4 +5,8 @@
   <div class="settingsButtonContainer">
     <button mat-raised-button (click)="startNavigation()">Start</button>
   </div>
+  <div class="remaining-distance-display-container">
+    <span class="remain-span">{{distanceToEndpoint$ | async}} </span>
+  </div>
+
 </div>

src/app/components/control-bar/control-bar.component.scss

@@ -1,4 +1,14 @@
 .controlBarContainer {
-  height: 30px;
   display: flex;
 }
+.remaining-distance-display-container {
+  display: flex;
+  flex-direction: column;
+  align-content: space-around;
+  position: relative;
+}
+
+.remain-span {
+  position: absolute;
+  top: 50%;
+}

src/app/components/control-bar/control-bar.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { select, Store } from '@ngrx/store';
-import { SetActiveNavAction, SetShowSearchAction } from '../../store/nav.actions';
-import { routePointSelector, routeSelector } from '../../store/nav.selectors';
+import { SetNextWaypointIndexAction, SetPhrazeStateAction, SetShowSearchAction } from '../../store/nav.actions';
+import { distanceToEndpointSelector, routePointsSelector } from '../../store/nav.selectors';
 import { tap } from 'rxjs/operators';
+import { PhrazeState } from '../../interface/nav.interface';
 
 @Component({
   selector: 'app-control-bar',
@@ -11,19 +12,23 @@ import { tap } from 'rxjs/operators';
 })
 export class ControlBarComponent implements OnInit {
 
+  distanceToEndpoint$;
+
   constructor(private store: Store<any>) { }
 
   ngOnInit() {
+    this.distanceToEndpoint$ = this.store.pipe(select(distanceToEndpointSelector));
   }
 
   openSearchPage() {
     this.store.dispatch(new SetShowSearchAction({isShowSearch: true}));
   }
 
   startNavigation() {
-    this.store.dispatch(new SetActiveNavAction({isActiveNav: true}));
+    this.store.dispatch(new SetPhrazeStateAction({phrazeState: PhrazeState.NAVIGATION}));
+    this.store.dispatch(new SetNextWaypointIndexAction({nextWaypointIndex: 1}));
     this.store.pipe(
-      select(routePointSelector),
+      select(routePointsSelector),
       tap(route => {
         const from = <any>route[0];
         const to = <any>route[route.length - 1];

src/app/components/instructions-display/instructions-display.component.html

@@ -0,0 +1,4 @@
+<div class="instructions-container">
+  in {{distanceToNextWaypoint$ | async}} {{nextWaypointManeuver$ | async}} to {{nextWaypointName$ | async}}
+</div>
+

src/app/components/instructions-display/instructions-display.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InstructionsDisplayComponent } from './instructions-display.component';
+
+describe('InstructionsDisplayComponent', () => {
+  let component: InstructionsDisplayComponent;
+  let fixture: ComponentFixture<InstructionsDisplayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InstructionsDisplayComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InstructionsDisplayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/instructions-display/instructions-display.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import {
+  nextWaypointDistanceSelector,
+  nextWaypointIndexSelector,
+  phrazeStateSelector,
+  routeDetailsSelector
+} from '../../store/nav.selectors';
+import { filter, map, withLatestFrom } from 'rxjs/operators';
+import { PhrazeState } from '../../interface/nav.interface';
+
+@Component({
+  selector: 'app-instructions-display',
+  templateUrl: './instructions-display.component.html',
+  styleUrls: ['./instructions-display.component.scss']
+})
+export class InstructionsDisplayComponent implements OnInit {
+  distanceToNextWaypoint$;
+  nextWaypoint$;
+  nextWaypointManeuver$;
+  nextWaypointName$;
+
+  constructor(private store: Store<any>) {
+  }
+
+  ngOnInit() {
+
+    this.distanceToNextWaypoint$ = this.store.pipe(select(nextWaypointDistanceSelector));
+
+    this.nextWaypoint$ = this.store.pipe(select(nextWaypointIndexSelector),
+      withLatestFrom(this.store.pipe(select(routeDetailsSelector)), this.store.pipe(select(phrazeStateSelector))),
+      filter(([nextWpIndex, routeDetails, navState]) => navState === PhrazeState.NAVIGATION));
+
+    this.nextWaypointManeuver$ = this.nextWaypoint$.pipe(
+      map(([nextWpIndex, routeDetails, navState]) => routeDetails.routeLegs[nextWpIndex].maneuverType)
+    );
+
+    this.nextWaypointName$ = this.nextWaypoint$.pipe(
+      map(([nextWpIndex, routeDetails, navState]) => routeDetails.routeLegs[nextWpIndex].name)
+    );
+  }
+}

src/app/components/instructions-voice/instructions-voice.component.html

@@ -0,0 +1,3 @@
+<p>
+  instructions-voice works!
+</p>

src/app/components/instructions-voice/instructions-voice.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InstructionsVoiceComponent } from './instructions-voice.component';
+
+describe('InstructionsVoiceComponent', () => {
+  let component: InstructionsVoiceComponent;
+  let fixture: ComponentFixture<InstructionsVoiceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InstructionsVoiceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InstructionsVoiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/instructions-voice/instructions-voice.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-instructions-voice',
+  templateUrl: './instructions-voice.component.html',
+  styleUrls: ['./instructions-voice.component.scss']
+})
+export class InstructionsVoiceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/search-page/search-page.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { GeocodingService } from '../../modules/service-providers/services/geocoding/geocoding.service';
 import { RoutesService } from '../../modules/service-providers/services/routes/routes.service';
-import { GeolocationService } from '../../modules/service-providers/services/position/geolocation.service';
 import { select, Store } from '@ngrx/store';
-import { SetActiveNavAction, SetRouteAction, SetShowSearchAction } from '../../store/nav.actions';
-import { routeSelector, getShowSearchSelector, routePointSelector } from '../../store/nav.selectors';
+import { SetPhrazeStateAction, SetRouteAction, SetShowSearchAction } from '../../store/nav.actions';
+import { currentPositionSelector, getShowSearchSelector, routePointsSelector } from '../../store/nav.selectors';
+import { PhrazeState } from '../../interface/nav.interface';
+import { take, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-search-page',
@@ -15,17 +16,15 @@ export class SearchPageComponent implements OnInit {
 
   searchResults;
   routePoints$;
-  currentPosition;
   isShowSearch$;
   searchAddress = 'בן יהודה 5 ';
 
 
   constructor(private store: Store<any>,
               private geocodingService: GeocodingService,
-              private routesService: RoutesService,
-              private geolocationService: GeolocationService) {
+              private routesService: RoutesService) {
     this.routePoints$ = this.store.pipe(
-      select(routePointSelector)
+      select(routePointsSelector)
     );
     this.isShowSearch$ = this.store.pipe(
       select(getShowSearchSelector)
@@ -43,15 +42,19 @@ export class SearchPageComponent implements OnInit {
   }
 
   selectDestination(entry) {
-    this.currentPosition = this.geolocationService.lastPos.coords;
-    this.calcRoute(this.currentPosition, entry.coords);
-    this.closeSearchPage();
-    this.store.dispatch(new SetActiveNavAction({isActiveNav: false}));
+    this.store.pipe(
+      select(currentPositionSelector),
+      take(1),
+      tap(currentPosition => {
+        this.calcRoute(currentPosition, entry.coords);
+        this.closeSearchPage();
+        this.store.dispatch(new SetPhrazeStateAction({phrazeState: PhrazeState.PREVIEW}));
+      })
+    ).subscribe();
   }
 
   calcRoute(from, to) {
     this.routesService.getRoute(from, to).subscribe(data => {
-      console.log(data);
       this.store.dispatch(new SetRouteAction(data));
     });
   }

src/app/interface/nav.interface.ts

@@ -1,8 +1,16 @@
 
 export interface NavInterface {
   routeDetails: RouteDetails;
-  isActiveNav: boolean;
+  phrazeState: PhrazeState;
   isShowSearch: boolean;
+  currentPosition: GeoPosition;
+  nextWaypointIndex: number;
+  nextWaypointDistance: number;
+  isNextWpNotified: boolean;
+  distanceToEndpoint: number;
+  previousPosition: GeoPosition;
+  previousPositionTimeStamp: number;
+  currentPositionTimeStamp: number;
 }
 
 export interface RouteDetails {
@@ -14,7 +22,21 @@ export interface RouteDetails {
 
 export interface LegDetails {
   index: number;
-  coords: [];
+  coords: Array<number>;
   text: string;
+  maneuverType: string;
+  name: string;
 }
 
+export enum PhrazeState {
+  IDLE = 'IDLE',
+  PREVIEW = 'PREVIEW',
+  NAVIGATION = 'NAVIGATION'
+}
+
+export interface GeoPosition {
+  latitude: number;
+  longitude: number;
+}
+
+

src/app/modules/map/components/next-wp-display/next-wp-display.component.html

@@ -0,0 +1,8 @@
+<ac-layer acFor="let nextWp of nextWpUpdate$" [context]="this">
+  <ac-billboard-primitive-desc props="{
+    position: nextWp.position,
+    image: './assets/images/jeep.svg',
+    scale: 1.5
+  }">
+  </ac-billboard-primitive-desc>
+</ac-layer>