nav visual instructions base ready

.gitignore

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

package.json

@@ -24,6 +24,7 @@
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
+    "@ngrx/effects": "^8.2.0",
     "@ngrx/store": "^8.1.0",
     "@turf/turf": "^5.1.6",
     "angular-cesium": "0.0.56",

src/app/app.component.html

@@ -1,6 +1,10 @@
 <mat-sidenav-container class="search-sidenav-container">
   <mat-sidenav-content>
     <div class="app-container">
+      <div class="instructions-container">
+        <app-instructions-display></app-instructions-display>
+        <app-instructions-voice></app-instructions-voice>
+      </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,18 @@ 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';
+import { EffectsModule } from '@ngrx/effects';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     ControlBarComponent,
     SearchPageComponent,
+    InstructionsDisplayComponent,
+    InstructionsVoiceComponent,
 
   ],
   imports: [
@@ -36,6 +41,7 @@ import { FormsModule } from '@angular/forms';
     ServiceProvidersModule,
     StoreModule.forRoot({}),
     StoreModule.forFeature(navFeatureKey, navReducer),
+    EffectsModule.forRoot([]),
     MatToolbarModule,
     MatSidenavModule,
     FormsModule,

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];
@@ -44,7 +49,7 @@ export class ControlBarComponent implements OnInit {
       window.removeEventListener('message', handleGetRouteCallback);
       window.postMessage({
           type: 'playRoute',
-          playbackRate: 1.5
+          playbackRate: 0.28
         },
         '*');
     }

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