Refactor oba service and load nearby stops

package.json

@@ -24,9 +24,11 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "@types/url-join": "^0.8.2",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "rxjs": "^5.4.1",
+    "url-join": "^2.0.2",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {

src/app/add-stop/add-stop.component.html

@@ -1,4 +1,17 @@
-<div fxLayout="column" fxLayoutGap="10px">
-  <p>Add Stop</p>
-  <button md-raised-button color="primary" (click)="done()">Done</button>
-</div>
+<section>
+  <md-card class="example-card">
+    <md-card-title>Add stop</md-card-title>
+    <md-card-content>
+      <md-list>
+        <md-list-item *ngFor="let stop of nearbyStops">
+          <button md-button (click)="addStop(stop)">
+            Stop# {{ stop.code }}: {{ stop.name }} ({{ stop.formattedDirection }} bound)
+          </button>
+        </md-list-item>
+      </md-list>
+    </md-card-content>
+    <md-card-actions>
+      <button md-raised-button color="primary" (click)="done()">Done</button>
+    </md-card-actions>
+  </md-card>
+</section>

src/app/add-stop/add-stop.component.ts

@@ -1,21 +1,59 @@
 import {
   Component,
   OnInit,
+  OnChanges,
+  SimpleChanges,
+  Input,
   Output,
-  EventEmitter } from '@angular/core';
+  EventEmitter
+} from '@angular/core';
+
+import { MdSnackBar } from '@angular/material';
+
+import { Region, Stop } from '../oba/oba';
+import { ObaService } from '../oba/oba.service';
+import { GeoService } from '../geo/geo.service';
 
 @Component({
   selector: 'app-add-stop',
   templateUrl: './add-stop.component.html',
   styleUrls: ['./add-stop.component.css']
 })
-export class AddStopComponent implements OnInit {
+export class AddStopComponent implements OnInit, OnChanges {
 
+  @Input() region: Region;
   @Output() addStopsDone: EventEmitter<number> = new EventEmitter<number>();
 
-  constructor() { }
+  coordsPromise: Promise<Coordinates>;
+  nearbyStops: Array<Stop>;
+
+  constructor(
+    private geoService: GeoService,
+    private obaService: ObaService,
+    private snackBar: MdSnackBar) {
+    this.coordsPromise = this.geoService.getLocation();
+  }
+
+  ngOnInit() { }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.region) {
+      this.loadNearbyStops();
+    }
+  }
+
+  private loadNearbyStops() {
+    this.coordsPromise.then(coords => {
+      this.obaService.getNearbyStops(this.region, coords).then(stops => {
+        this.nearbyStops = stops;
+      });
+    });
+  }
 
-  ngOnInit() {
+  addStop(stop: Stop) {
+    this.snackBar.open(`Stop# ${stop.code} saved.`, undefined, {
+      duration: 500
+    });
   }
 
   done() {

src/app/app.component.html

@@ -16,5 +16,8 @@
     </md-card-content>
   </md-card>
 
-  <app-add-stop *ngIf="addStopsMode" (addStopsDone)="toggleAddStopsMode()"></app-add-stop>
+  <app-add-stop
+    *ngIf="addStopsMode"
+    [region]="selectedRegion"
+    (addStopsDone)="toggleAddStopsMode()"></app-add-stop>
 </div>

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { ObaService } from './oba-regions/oba.service';
-import { Region } from './oba-regions/region';
+import { ObaService } from './oba/oba.service';
+import { Region } from './oba/oba';
 
 @Component({
   selector: 'app-root',

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { HttpClientModule } from '@angular/common/http';
 
 // Angular material 2 related imports
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -11,19 +12,26 @@ import {
   MdIconModule,
   MdSelectModule,
   MdCardModule,
-  MdButtonModule } from '@angular/material';
+  MdButtonModule,
+  MdProgressBarModule,
+  MdListModule,
+  MdSnackBarModule,
+} from '@angular/material';
 
 import { AppComponent } from './app.component';
-import { ObaService } from './oba-regions/oba.service';
 import { AddStopComponent } from './add-stop/add-stop.component';
 
+import { ObaService } from './oba/oba.service';
+import { GeoService } from './geo/geo.service';
+
 @NgModule({
   declarations: [
     AppComponent,
     AddStopComponent
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     BrowserAnimationsModule,
     FormsModule,
     FlexLayoutModule,
@@ -32,8 +40,14 @@ import { AddStopComponent } from './add-stop/add-stop.component';
     MdSelectModule,
     MdCardModule,
     MdButtonModule,
+    MdProgressBarModule,
+    MdListModule,
+    MdSnackBarModule
+  ],
+  providers: [
+    ObaService,
+    GeoService,
   ],
-  providers: [ObaService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/geo/geo.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { GeoService } from './geo.service';
+
+describe('GeoService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [GeoService]
+    });
+  });
+
+  it('should be created', inject([GeoService], (service: GeoService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/geo/geo.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class GeoService {
+
+  locationPromise: Promise<Coordinates>;
+
+  constructor() {
+    this.locationPromise = new Promise<Coordinates>((resolve, reject) => {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(position => {
+          resolve(position.coords);
+        }, error => {
+          reject(error.message);
+        });
+      } else {
+        reject('Location not available.');
+      }
+    });
+  }
+
+  getLocation(): Promise<Coordinates> {
+    return this.locationPromise;
+  }
+}

src/app/oba/oba.d.ts

@@ -0,0 +1,12 @@
+export interface Region {
+  obaBaseUrl: string;
+  regionName: string;
+}
+
+export class Stop {
+  code: string;
+  direction: string;
+  formattedDirection: string;
+  id: string;
+  name: string;
+}

src/app/oba/oba.service.ts

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Region, Stop } from './oba';
+import * as regionsData from './regions-v3.json';
+
+import * as urlJoin from 'url-join';
+
+@Injectable()
+export class ObaService {
+
+  private allRegionsPromise: Promise<Array<Region>>;
+  private defaultRegion: Promise<Region>;
+  private key = 'YOUR_API_KEY_HERE';
+
+  static formatDirection(direction: string): string {
+    return direction
+      .replace('N', 'North')
+      .replace('S', 'South')
+      .replace('W', 'West')
+      .replace('E', 'East');
+  }
+
+  constructor(private http: HttpClient) {
+    this.allRegionsPromise = new Promise<Array<Region>>(resolve => {
+      resolve((<any>regionsData).data.list);
+    });
+
+    this.defaultRegion = new Promise<Region>(resolve => {
+      this.allRegionsPromise.then(regions => {
+        const pugetSound = regions.filter(r => r.regionName === 'Puget Sound');
+        if (pugetSound.length > 0) {
+          resolve(pugetSound[0]);
+        }
+        resolve(regions.length ? regions[0] : null);
+      });
+    });
+  }
+
+  getRegions(): Promise<Array<Region>> {
+    return this.allRegionsPromise;
+  }
+
+  getDefaultRegion(): Promise<Region> {
+    return this.defaultRegion;
+  }
+
+  getNearbyStops(region: Region, coords: Coordinates): Promise<Array<Stop>> {
+    return new Promise<Array<Stop>>((resolve, reject) => {
+      this.http.get(
+        urlJoin(region.obaBaseUrl, '/api/where/stops-for-location.json'),
+        {
+          params: new HttpParams()
+          .set('key', this.key)
+          .set('lat', coords.latitude.toString())
+          .set('lon', coords.longitude.toString())
+        }
+      ).subscribe((result: any) => {
+        const stops: Array<Stop> = result.data.list.map(s => {
+          s['formattedDirection'] = ObaService.formatDirection(s.direction);
+          return s;
+        });
+        resolve(stops);
+      }, error => {
+        reject(error);
+      });
+    });
+  }
+}

src/manifest.json

@@ -14,7 +14,8 @@
   "permissions": [
     "storage",
     "geolocation",
-    "https://*/*"
+    "https://*/*",
+    "http://*/*"
   ],
   "browser_action": {
       "default_icon": {