Merge pull request #4 from AITestingOrg/RefactorTripPlanner

mhelmstadter · web-flow · commit 7da4bd67a54f · 2017-11-22T14:02:58.000-05:00
Created trip planner screen and added service to communicate w/ gmaps
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+\.vscode/launch\.json
diff --git a/.travis.yml b/.travis.yml
@@ -18,7 +18,7 @@ before_install:
   - sh -e /etc/init.d/xvfb start
 
 before_script:
-- npm install -g angular-cli
+- npm install -g @angular/cli
 - npm install -g karma
 - npm install
 - ng build
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "private": true,
   "dependencies": {
+    "@agm/core": "^1.0.0-beta.2",
     "@angular/animations": "^4.4.6",
     "@angular/cdk": "^2.0.0-beta.12",
     "@angular/common": "^4.0.0",
@@ -23,6 +24,7 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "@types/googlemaps": "^3.29.2",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "rxjs": "^5.1.0",
@@ -40,9 +42,9 @@
     "karma": "~1.7.0",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,14 +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>
-    </div>
-    <div id="routing">
-      <div class="container">
-        <router-outlet></router-outlet>
-      </div>
-    </div>
-  </div>
+  <app-header></app-header>
   
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -5,22 +5,31 @@ import { Routes, RouterModule } from '@angular/router';
 import { FeCommonModule } from './common/common.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from 'app/common/components/smart/login/login.component';
+import { TripPlannerComponent } from 'app/passengers/components/smart/trip-planner/trip-planner.component';
+import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
 
 const routes:Routes = [ 
     {path: '', redirectTo: 'login', pathMatch: 'full'},
     {path: 'login', component: LoginComponent},
-    {path: 'dashboard', component: LoginComponent}
+    {path: 'dashboard', component: TripPlannerComponent}
 ]
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent, TripPlannerComponent    
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     FeCommonModule,
-    RouterModule.forRoot(routes)
+    RouterModule.forRoot(routes),
+    AgmCoreModule.forRoot({
+      apiKey: 'AIzaSyDPs_IyBxZNsYKEh8JplMe8a91URajuqic',
+      libraries: ['places']
+    })
+  ],
+  providers: [
+    GoogleMapsAPIWrapper
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/common/common.module.ts b/src/app/common/common.module.ts
@@ -1,21 +1,55 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+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 { MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatFormFieldControl, MatInputModule, MatIconModule, MatCardModule } from '@angular/material';
+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
+    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],
-  exports: [ToolbarComponent],
 })
 
 export class FeCommonModule { }
diff --git a/src/app/common/components/presentation/header/header.component.html b/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>
diff --git a/src/app/common/components/presentation/header/header.component.scss b/src/app/common/components/presentation/header/header.component.scss
diff --git a/src/app/common/components/presentation/header/header.component.ts b/src/app/common/components/presentation/header/header.component.ts
@@ -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() {
+  }
+
+}
diff --git a/src/app/common/states/gmaps.directive.spec.ts b/src/app/common/states/gmaps.directive.spec.ts
@@ -0,0 +1,10 @@
+import { TestBed, async } from '@angular/core/testing';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+      ],
+    }).compileComponents();
+  }));
+});
diff --git a/src/app/common/states/gmaps.service.ts b/src/app/common/states/gmaps.service.ts
@@ -0,0 +1,74 @@
+import { GoogleMapsAPIWrapper } from '@agm/core';
+import { Directive, Input, Output } from '@angular/core';
+
+declare var google: any;
+
+@Directive({
+  selector: 'directions-service'
+})
+
+export class GMapsDirectionsService {
+
+  @Input() origin: any;
+  @Input() destination: any;
+  @Input() originPlaceId: any;
+  @Input() destinationPlaceId: any;
+  @Input() waypoints: any;
+  @Input() directionsDisplay: any;
+  @Input() estimatedTime: any;
+  @Input() estimatedDistance: any;
+
+  constructor(private gmapsApi: GoogleMapsAPIWrapper) { }
+
+  updateDirections() {
+    this.gmapsApi.getNativeMap().then(map => {
+      // Prepare Map and Display Settings
+      if (!this.originPlaceId || !this.destinationPlaceId) {
+        return;
+      }
+
+      const directionsService = new google.maps.DirectionsService;
+      const service = this;
+      const origin = new google.maps.LatLng({ lat: this.origin.latitude, lng: this.origin.longitude });
+      const destination = new google.maps.LatLng({ lat: this.destination.latitude, lng: this.destination.longitude });
+
+      this.directionsDisplay.setMap(map);
+      this.directionsDisplay.setOptions({
+        polylineOptions: {
+          strokeWeight: 8,
+          strokeOpacity: 0.7,
+          strokeColor: '#00468c'
+        }
+      });
+
+      // 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
+      },
+      // Response
+      function (response: any, status: any) {
+        if (status === 'OK') {
+          service.directionsDisplay.setDirections(response);
+          map.setZoom(30);
+          const point = response.routes[0].legs[0];
+          service.estimatedTime = point.duration.text;
+          service.estimatedDistance = point.distance.text;
+          console.log('Estimated travel time: ' + point.duration.text + ' (' + point.distance.text + ')');
+        } else {
+          console.log('Directions request failed due to ' + status);
+        }
+      });
+    });
+  }
+
+  private getcomputeDistance(origin: any, destination: any) {
+    return (google.maps.geometry.spherical.computeDistanceBetween(origin, destination) / 1000).toFixed(2);
+  }
+}
diff --git a/src/app/passengers/components/smart/trip-planner/trip-planner.component.html b/src/app/passengers/components/smart/trip-planner/trip-planner.component.html
@@ -0,0 +1,15 @@
+<mat-card>
+  <h1>{{ title }}</h1>
+  <div class="container">
+    <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
+      <directions-service></directions-service>
+    </agm-map>
+  </div>
+  <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"></app-raised-button>
+</mat-card>
diff --git a/src/app/passengers/components/smart/trip-planner/trip-planner.component.scss b/src/app/passengers/components/smart/trip-planner/trip-planner.component.scss
@@ -0,0 +1,14 @@
+agm-map {
+  padding-top: 50px;
+  height: 500px;
+  width: 100%;
+}
+
+.trip-inputs {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.app-text-box {
+  min-width: 500px;
+}
diff --git a/src/app/passengers/components/smart/trip-planner/trip-planner.component.ts b/src/app/passengers/components/smart/trip-planner/trip-planner.component.ts
diff --git a/src/styles.scss b/src/styles.scss
