CreateTripPlannerScreen- minor modifications

Author: mhelmstadter

src/app/app.component.html

@@ -1,15 +1,5 @@
 <div class="page">
   <app-toolbar title="UltiCar"></app-toolbar>
   <div class="main">
-    <div class="navLinks">
-      <a [routerLink]="['']">Register</a>
-      <a [routerLink]="['/login']">Sign In</a>
-      <a [routerLink]="['/dashboard']">Plan a Trip</a>
-    </div>
-    <div id="routing">
-      <div class="container">
-        <router-outlet></router-outlet>
-      </div>
-    </div>
-  </div>
+  <app-header></app-header>
 

src/app/common/common.module.ts

@@ -1,23 +1,55 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { AgmCoreModule } from '@agm/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
 import { TextBoxComponent } from './components/presentation/text-box/text-box.component';
 import { LoginComponent } from './components/smart/login/login.component';
 import { CheckBoxComponent } from './components/presentation/check-box/check-box.component';
 import { ToolbarComponent } from './components/presentation/toolbar/toolbar.component';
 import { RaisedButtonComponent } from './components/presentation/raised-button/raised-button.component';
 import { BasicButtonComponent } from './components/presentation/basic-button/basic-button.component';
 import { IconButtonComponent } from './components/presentation/icon-button/icon-button.component';
-import { GMapsDirectionsDirective } from './states/gmaps.directive';
+import { GMapsDirectionsService} from './states/gmaps.service';
 import { MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatFormFieldControl, MatInputModule, MatIconModule, MatCardModule, MatAutocompleteModule } from '@angular/material';
+import { HeaderComponent } from './components/presentation/header/header.component';
 
 @NgModule({
   imports: [
-    CommonModule, MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, MatCardModule, FormsModule, ReactiveFormsModule, MatAutocompleteModule
+    CommonModule, 
+    MatToolbarModule, 
+    MatCheckboxModule, 
+    MatButtonModule, 
+    MatFormFieldModule, 
+    MatInputModule, 
+    MatIconModule, 
+    MatCardModule, 
+    FormsModule, 
+    ReactiveFormsModule, 
+    MatAutocompleteModule, 
+    AgmCoreModule, 
+    RouterModule
+  ],
+  declarations: [
+    TextBoxComponent, 
+    LoginComponent, 
+    CheckBoxComponent, 
+    ToolbarComponent, 
+    RaisedButtonComponent, 
+    BasicButtonComponent, 
+    IconButtonComponent, 
+    GMapsDirectionsService, 
+    HeaderComponent
+  ],
+  exports: [
+    ToolbarComponent, 
+    MatCardModule, 
+    RaisedButtonComponent, 
+    ReactiveFormsModule, 
+    MatAutocompleteModule, 
+    GMapsDirectionsService, 
+    HeaderComponent
   ],
-  declarations: [TextBoxComponent, LoginComponent, CheckBoxComponent, ToolbarComponent, RaisedButtonComponent, BasicButtonComponent, IconButtonComponent, GMapsDirectionsDirective],
-  exports: [ToolbarComponent, MatCardModule, RaisedButtonComponent, ReactiveFormsModule, MatAutocompleteModule, GMapsDirectionsDirective],
-
 })
 
 export class FeCommonModule { }

src/app/common/components/presentation/header/header.component.html

@@ -0,0 +1,10 @@
+<div class="navLinks">
+  <a [routerLink]="['']">Register</a>
+  <a [routerLink]="['/login']">Sign In</a>
+  <a [routerLink]="['/dashboard']">Plan a Trip</a>
+</div>
+<div id="routing">
+  <div class="container">
+    <router-outlet></router-outlet>
+  </div>
+</div>

src/app/common/components/presentation/header/header.component.scss

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

src/app/common/components/presentation/header/header.component.ts

@@ -7,7 +7,7 @@ declare var google: any;
   selector: 'directions-service'
 })
 
-export class GMapsDirectionsDirective {
+export class GMapsDirectionsService {
 
   @Input() origin: any;
   @Input() destination: any;
@@ -22,6 +22,7 @@ export class GMapsDirectionsDirective {
 
   updateDirections() {
     this.gmapsApi.getNativeMap().then(map => {
+      //Prepare Map and Display Settings
       if (!this.originPlaceId || !this.destinationPlaceId) {
         return;
       }
@@ -40,13 +41,19 @@ export class GMapsDirectionsDirective {
         }
       });
 
+      //Update Display
       this.directionsDisplay.setDirections({ routes: [] });
+
+      //Determine Directions
+      //Request
       directionsService.route({
         origin: { placeId: this.originPlaceId },
         destination: { placeId: this.destinationPlaceId },
         avoidHighways: true,
         travelMode: google.maps.DirectionsTravelMode.DRIVING
-      }, function (response: any, status: any) {
+      }, 
+      //Response
+      function (response: any, status: any) {
         if (status === 'OK') {
           service.directionsDisplay.setDirections(response);
           map.setZoom(30);

src/app/common/states/gmaps.directive.ts renamed to src/app/common/states/gmaps.service.ts

@@ -1,16 +1,15 @@
 <mat-card>
   <h1>{{ title }}</h1>
   <div class="container">
-    <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom" [styles]="mapCustomStyles">
-      <directions-service [origin]="origin" [destination]="destination"></directions-service>
+    <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
+      <directions-service></directions-service>
     </agm-map>
   </div>
-  <br/><br/>
   <div class="trip-inputs">
     <input placeholder="Enter your pickup location." autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control"
       #pickupInput [formControl]="destinationInput" size="55">
     <input placeholder="Enter your destination." autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control"
       #pickupOutput [formControl]="destinationOutput" size="55">
   </div>
-  <app-raised-button label="Find Your Ride" color="primary" (click)="onFindRideClick($event)"></app-raised-button>
+  <app-raised-button label="Find Your Ride" color="primary"></app-raised-button>
 </mat-card>

src/app/passengers/components/smart/trip-planner/trip-planner.component.html

@@ -5,6 +5,7 @@ agm-map {
 }
 
 .trip-inputs {
+  padding-top: 30px;
   padding-bottom: 30px;
 }
 

src/app/passengers/components/smart/trip-planner/trip-planner.component.scss

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, ElementRef, NgZone, ViewChild } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { GMapsDirectionsDirective } from 'app/common/states/gmaps.directive';
+import { GMapsDirectionsService } from 'app/common/states/gmaps.service';
 import { } from '@types/googlemaps';
 import { GoogleMapsAPIWrapper, MapsAPILoader } from '@agm/core';
 
@@ -30,13 +31,16 @@ export class TripPlannerComponent implements OnInit {
   public pickupOutputElementRef: ElementRef;
 
   @ViewChild(GMapsDirectionsDirective) directive: GMapsDirectionsDirective;
+  @ViewChild(GMapsDirectionsService) service: GMapsDirectionsService;
 
   constructor(
     private ngZone: NgZone, 
     private mapsAPILoader: MapsAPILoader, 
     private gmapsApi: GoogleMapsAPIWrapper, 
     private _elementRef: ElementRef) {
   }
+    private gmapsApi: GoogleMapsAPIWrapper,
+  ) { }
 
   ngOnInit() {
     //Default Map View
@@ -83,16 +87,23 @@ export class TripPlannerComponent implements OnInit {
         if (inputType === 'pickup') {
           this.directive.origin = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() };
           this.directive.originPlaceId = place.place_id;
+          this.service.origin = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() };
+          this.service.originPlaceId = place.place_id;
         } else {
           this.directive.destination = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() };
           this.directive.destinationPlaceId = place.place_id;
+          this.service.destination = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() };
+          this.service.destinationPlaceId = place.place_id;
         }
         if (this.directive.directionsDisplay === undefined) {
+        if (this.service.directionsDisplay === undefined) {
           this.mapsAPILoader.load().then(() => {
             this.directive.directionsDisplay = new google.maps.DirectionsRenderer;
+            this.service.directionsDisplay = new google.maps.DirectionsRenderer;
           });
         }
         this.directive.updateDirections();
+        this.service.updateDirections();
         this.zoom = 12;
       });
     });
@@ -101,6 +112,8 @@ export class TripPlannerComponent implements OnInit {
   getDistanceAndDuration() {
     this.estimatedTime = this.directive.estimatedTime;
     this.estimatedDistance = this.directive.estimatedDistance;
+    this.estimatedTime = this.service.estimatedTime;
+    this.estimatedDistance = this.service.estimatedDistance;
   }
 
   onFindRideClick(event) {

src/app/passengers/components/smart/trip-planner/trip-planner.component.ts

@@ -2,6 +2,10 @@
 
 @include mat-core();
 
+body {
+  margin: 0px;
+}
+
 $my-theme-primary: mat-palette($mat-cyan);
 $my-theme-accent: mat-palette($mat-teal);
 $my-theme-warn: mat-palette($mat-red);