Merge branch 'github-changes' into 'master'

Github changes

See merge request !30

.travis.yml

 sudo: required
-dist: trusty
+dist: xenial
 language: node_js
 node_js:
   - '10.15.1'
 
 addons:
-  apt:
-    sources:
-      - google-chrome
-    packages:
-      - google-chrome-stable
-      - google-chrome-beta
-
-before_install:
-  - export CHROME_BIN=/usr/bin/google-chrome
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+  chrome: stable
+services:
+  - xvfb
 
 install:
   - npm install -g angular-cli codacy-coverage

package.json

 {
   "name": "earthquake-geoserve-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "engines": {
     "node": ">=10"
   },
@@ -28,6 +28,7 @@
     "@angular/platform-browser": "^7.2.0",
     "@angular/platform-browser-dynamic": "^7.2.0",
     "@angular/router": "^7.2.0",
+    "azimuth": "^0.1.0",
     "core-js": "^2.5.4",
     "hazdev-ng-location-view": "0.0.4",
     "hazdev-ng-template": "0.3.1",
@@ -36,7 +37,7 @@
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.7.5",
+    "@angular-devkit/build-angular": "^0.8.9",
     "@angular-devkit/build-ng-packagr": "^0.12.3",
     "@angular/cli": "^7.2.3",
     "@angular/compiler-cli": "^7.2.0",
@@ -48,7 +49,7 @@
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.1.1",
+    "karma": "^4.3.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^2.0.1",

projects/hazdev-ng-geoserve-output/package.json

 {
   "name": "hazdev-ng-geoserve-output",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
     "@angular/core": "^6.0.0-rc.0 || ^6.0.0"

projects/hazdev-ng-geoserve-output/src/lib/distance-azimuth.pipe.spec.ts

+import { DistanceAzimuthPipe } from './distance-azimuth.pipe';
+
+describe('DistanceAzimuthPipe', () => {
+  let pipe;
+  let place;
+  let referencePlace;
+
+  beforeEach(() => {
+    pipe = new DistanceAzimuthPipe();
+    place = {
+      admin1_code: 'NM',
+      admin1_name: 'New Mexico',
+      azimuth: -557.3,
+      country_code: 'US',
+      country_name: 'United States',
+      distance: 2.736,
+      elevation: 1633,
+      feature_class: 'P',
+      feature_code: 'PPL',
+      latitude: 34.97645,
+      longitude: -104.99111,
+      name: 'Vegas Junction',
+      population: 0
+    };
+    referencePlace = {
+      latitude: 39,
+      longitude: -105
+    };
+  });
+
+  describe('compassWinds', () => {
+    it('should accept compass wind as input and preserve', () => {
+      expect(pipe.compassWinds('SSE')).toEqual('SSE');
+    });
+    it('should calculate correct winds when azimuth is negative', () => {
+      expect(pipe.compassWinds(place.azimuth)).toEqual('SSE');
+    });
+    it('should calculate correct winds when azimuth is positive', () => {
+      expect(pipe.compassWinds(162.7)).toEqual('SSE');
+    });
+    it('should calculate correct winds when azimuth is positive', () => {
+      expect(pipe.compassWinds(522.7)).toEqual('SSE');
+    });
+  });
+
+  describe('transform', () => {
+    it('should accept a place', () => {
+      expect(pipe.transform(place)).toEqual('2.7 km (1.7 mi) SSE');
+    });
+    it('should accept a referencePlace', () => {
+      expect(pipe.transform(place, referencePlace)).toEqual(
+        '447.3 km (277.9 mi) S'
+      );
+    });
+  });
+});

projects/hazdev-ng-geoserve-output/src/lib/distance-azimuth.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { Place } from './place';
+import { getDistanceAzimuth } from './distance-azimuth';
+
+@Pipe({
+  name: 'distanceAzimuth'
+})
+export class DistanceAzimuthPipe implements PipeTransform {
+  compassWinds(azimuth: string | number): string {
+    const fullwind = 22.5;
+    const directions = [
+      'N',
+      'NNE',
+      'NE',
+      'ENE',
+      'E',
+      'ESE',
+      'SE',
+      'SSE',
+      'S',
+      'SSW',
+      'SW',
+      'WSW',
+      'W',
+      'WNW',
+      'NW',
+      'NNW',
+      'N'
+    ];
+
+    // if direction is already in compass points
+    if (typeof azimuth === 'string' && directions.indexOf(azimuth) > -1) {
+      return azimuth;
+    }
+
+    // adjust azimuth if negative
+    azimuth = +azimuth;
+    while (azimuth < 0) {
+      azimuth = azimuth + 360;
+    }
+
+    return directions[Math.round((azimuth % 360) / fullwind)];
+  }
+
+  kmToMi(km: number): number {
+    return km * 0.621371;
+  }
+
+  round(raw: number, decimals: number): number {
+    const factor = Math.pow(10, decimals);
+
+    return Math.round(raw * factor) / factor;
+  }
+
+  transform(place: Place, referencePlace?: Place): any {
+    if (!place) {
+      return null;
+    }
+
+    const distAz = getDistanceAzimuth(place, referencePlace);
+    const azimuth = distAz.azimuth;
+    const distance = distAz.distance;
+
+    return (
+      this.round(distance, 1) +
+      ' km ' +
+      '(' +
+      this.round(this.kmToMi(distance), 1) +
+      ' mi) ' +
+      this.compassWinds(azimuth)
+    );
+  }
+}

projects/hazdev-ng-geoserve-output/src/lib/distance-azimuth.ts

+import * as calculator from 'azimuth';
+
+import { Place } from './place';
+
+export interface DistanceAzimuth {
+  // decimal degrees
+  azimuth: number;
+  // kilometers
+  distance: number;
+}
+
+/**
+ * Compute distance and azimuth from place to reference place.
+ *
+ * @param place
+ *     destination place.
+ * @param referencePlace
+ *     optional starting place.
+ * @return
+ *     When reference place is specified:
+ *       calculate direction and azimuth from referencePlace to place.
+ *     Otherwise return distance and azimuth from place.
+ */
+export function getDistanceAzimuth(
+  place: Place,
+  referencePlace?: Place
+): DistanceAzimuth {
+  let azimuth = +place.azimuth;
+  let distance = place.distance;
+
+  if (referencePlace) {
+    const distAz = calculator.azimuth(
+      {
+        elv: 0,
+        lat: referencePlace.latitude,
+        lng: referencePlace.longitude
+      },
+      {
+        elv: 0,
+        lat: place.latitude,
+        lng: place.longitude
+      }
+    );
+    azimuth = distAz.azimuth;
+    distance = distAz.distance / 1000; // meters to kilometers
+  }
+
+  return {
+    azimuth,
+    distance
+  };
+}

projects/hazdev-ng-geoserve-output/src/lib/geoserve-output.module.ts

@@ -9,6 +9,7 @@ import {
 
 import { AdminRegionComponent } from './admin-region/admin-region.component';
 import { AuthoritativeRegionComponent } from './authoritative-region/authoritative-region.component';
+import { DistanceAzimuthPipe } from './distance-azimuth.pipe';
 import { GeoserveOutputComponent } from './geoserve-output.component';
 import { ListItemComponent } from './list-item/list-item.component';
 import { LocationOutputComponent } from './location-output/location-output.component';
@@ -20,6 +21,7 @@ import { NeicResponseRegionComponent } from './neic-response-region/neic-respons
 import { NoDataComponent } from './no-data/no-data.component';
 import { OffshoreRegionComponent } from './offshore-region/offshore-region.component';
 import { OverlaysService } from './overlays.service';
+import { PlaceNamePipe } from './place-name.pipe';
 import { PlacesService } from './places.service';
 import { RegionsService } from './regions.service';
 import { TectonicSummaryRegionComponent } from './tectonic-summary-region/tectonic-summary-region.component';
@@ -28,6 +30,7 @@ import { TectonicSummaryRegionComponent } from './tectonic-summary-region/tecton
   declarations: [
     AdminRegionComponent,
     AuthoritativeRegionComponent,
+    DistanceAzimuthPipe,
     GeoserveOutputComponent,
     ListItemComponent,
     LocationOutputComponent,
@@ -38,11 +41,13 @@ import { TectonicSummaryRegionComponent } from './tectonic-summary-region/tecton
     NeicResponseRegionComponent,
     NoDataComponent,
     OffshoreRegionComponent,
+    PlaceNamePipe,
     TectonicSummaryRegionComponent
   ],
   exports: [
     AdminRegionComponent,
     AuthoritativeRegionComponent,
+    DistanceAzimuthPipe,
     GeoserveOutputComponent,
     ListItemComponent,
     LocationOutputComponent,
@@ -53,6 +58,7 @@ import { TectonicSummaryRegionComponent } from './tectonic-summary-region/tecton
     NeicResponseRegionComponent,
     NoDataComponent,
     OffshoreRegionComponent,
+    PlaceNamePipe,
     TectonicSummaryRegionComponent
   ],
   imports: [

projects/hazdev-ng-geoserve-output/src/lib/nearby-place-list/nearby-place-list.component.html

@@ -2,7 +2,10 @@
 <div *ngIf="places; else noNearbyPlaces">
   <ol>
     <li *ngFor="let place of places">
-      <geoserve-nearby-place [place]="place"></geoserve-nearby-place>
+      <geoserve-nearby-place
+        [place]="place"
+        [referencePlace]="referencePlace"
+      ></geoserve-nearby-place>
     </li>
   </ol>
 </div>

projects/hazdev-ng-geoserve-output/src/lib/nearby-place-list/nearby-place-list.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { DistanceAzimuthPipe } from '../distance-azimuth.pipe';
 import { NearbyPlaceListComponent } from './nearby-place-list.component';
 import { NearbyPlaceComponent } from '../nearby-place/nearby-place.component';
 import { NoDataComponent } from '../no-data/no-data.component';
+import { PlaceNamePipe } from '../place-name.pipe';
 
 describe('NearbyPlaceListComponent', () => {
   let component: NearbyPlaceListComponent;
@@ -11,9 +13,11 @@ describe('NearbyPlaceListComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
+        DistanceAzimuthPipe,
         NearbyPlaceComponent,
         NearbyPlaceListComponent,
-        NoDataComponent
+        NoDataComponent,
+        PlaceNamePipe
       ]
     }).compileComponents();
   }));

projects/hazdev-ng-geoserve-output/src/lib/nearby-place-list/nearby-place-list.component.ts

@@ -10,6 +10,9 @@ export class NearbyPlaceListComponent implements OnInit {
   @Input()
   places: Place[];
 
+  @Input()
+  referencePlace: Place = null;
+
   constructor() {}
 
   ngOnInit() {}

projects/hazdev-ng-geoserve-output/src/lib/nearby-place/nearby-place.component.html

-<span class="name">{{ getName(place) }}</span>
-<aside class="distance">{{ getDistance(place) }}</aside>
-<aside class="population">{{ getPopulation(place) }}</aside>
+<span class="name">{{ place | placeName }}</span>
+<aside class="distance">{{ place | distanceAzimuth: referencePlace }}</aside>
+<aside class="population">Population: {{ place.population || '-' }}</aside>

projects/hazdev-ng-geoserve-output/src/lib/nearby-place/nearby-place.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { DistanceAzimuthPipe } from '../distance-azimuth.pipe';
 import { NearbyPlaceComponent } from './nearby-place.component';
 import { Place } from '../place';
+import { PlaceNamePipe } from '../place-name.pipe';
 
 describe('NearbyPlaceComponent', () => {
   let component: NearbyPlaceComponent;
@@ -10,7 +12,7 @@ describe('NearbyPlaceComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [NearbyPlaceComponent]
+      declarations: [DistanceAzimuthPipe, NearbyPlaceComponent, PlaceNamePipe]
     }).compileComponents();
   }));
 
@@ -41,27 +43,4 @@ describe('NearbyPlaceComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  describe('getName', () => {
-    it('should return the formatted name components', () => {
-      expect(component.getName(place)).toEqual(
-        'Vegas Junction, New Mexico, United States'
-      );
-    });
-  });
-
-  describe('compassWinds', () => {
-    it('should accept compass wind as input and preserve', () => {
-      expect(component.compassWinds('SSE')).toEqual('SSE');
-    });
-    it('should calculate correct winds when azimuth is negative', () => {
-      expect(component.compassWinds(place.azimuth)).toEqual('SSE');
-    });
-    it('should calculate correct winds when azimuth is negative', () => {
-      expect(component.compassWinds(162.7)).toEqual('SSE');
-    });
-    it('should calculate correct winds when azimuth is negative', () => {
-      expect(component.compassWinds(522.7)).toEqual('SSE');
-    });
-  });
 });

projects/hazdev-ng-geoserve-output/src/lib/nearby-place/nearby-place.component.ts

-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { Place } from '../place';
 
 @Component({
@@ -6,80 +6,14 @@ import { Place } from '../place';
   styleUrls: ['./nearby-place.component.css'],
   templateUrl: './nearby-place.component.html'
 })
-export class NearbyPlaceComponent {
+export class NearbyPlaceComponent implements OnChanges {
   @Input()
   place: Place;
 
-  constructor() {}
-
-  compassWinds(azimuth: string | number): string {
-    const fullwind = 22.5;
-    const directions = [
-      'N',
-      'NNE',
-      'NE',
-      'ENE',
-      'E',
-      'ESE',
-      'SE',
-      'SSE',
-      'S',
-      'SSW',
-      'SW',
-      'WSW',
-      'W',
-      'WNW',
-      'NW',
-      'NNW',
-      'N'
-    ];
-
-    // if direction is already in compass points
-    if (typeof azimuth === 'string' && directions.indexOf(azimuth) > -1) {
-      return azimuth;
-    }
-
-    // adjust azimuth if negative
-    azimuth = +azimuth;
-    while (azimuth < 0) {
-      azimuth = azimuth + 360;
-    }
-
-    return directions[Math.round((azimuth % 360) / fullwind)];
-  }
-
-  getDistance(place: Place): string {
-    const distanceKm = place.distance;
-
-    return (
-      this.round(distanceKm, 1) +
-      ' km ' +
-      '(' +
-      this.round(this.kmToMi(distanceKm), 1) +
-      ' mi) ' +
-      this.compassWinds(place.azimuth)
-    );
-  }
-
-  getName(place: Place): string {
-    const placeArr = [place.name, place.admin1_name, place.country_name].filter(
-      str => !!str
-    );
-
-    return placeArr.join(', ');
-  }
-
-  getPopulation(place: Place): string {
-    return 'Population: ' + (place.population || '-');
-  }
-
-  kmToMi(km: number): number {
-    return km * 0.621371;
-  }
+  @Input()
+  referencePlace: Place = null;
 
-  round(raw: number, decimals: number): number {
-    const factor = Math.pow(10, decimals);
+  constructor() {}
 
-    return Math.round(raw * factor) / factor;
-  }
+  ngOnChanges() {}
 }

projects/hazdev-ng-geoserve-output/src/lib/nearby-places/nearby-places.component.html

 <ng-container *ngIf="placesService.places$ | async as places">
-  <geoserve-nearby-place-list [places]="places"></geoserve-nearby-place-list>
+  <geoserve-nearby-place-list
+    [places]="places"
+    [referencePlace]="placesService.referencePlace"
+  ></geoserve-nearby-place-list>
 </ng-container>

projects/hazdev-ng-geoserve-output/src/lib/nearby-places/nearby-places.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClient, HttpHandler } from '@angular/common/http';
 
-import { PlacesService } from '../places.service';
-
+import { DistanceAzimuthPipe } from '../distance-azimuth.pipe';
 import { NearbyPlaceComponent } from '../nearby-place/nearby-place.component';
 import { NearbyPlacesComponent } from './nearby-places.component';
 import { NoDataComponent } from '../no-data/no-data.component';
 import { NearbyPlaceListComponent } from '../nearby-place-list/nearby-place-list.component';
+import { PlacesService } from '../places.service';
+import { PlaceNamePipe } from '../place-name.pipe';
 
 describe('NearbyPlacesComponent', () => {
   let component: NearbyPlacesComponent;
@@ -15,10 +16,12 @@ describe('NearbyPlacesComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
+        DistanceAzimuthPipe,
         NearbyPlaceComponent,
         NearbyPlaceListComponent,
         NearbyPlacesComponent,
-        NoDataComponent
+        NoDataComponent,
+        PlaceNamePipe
       ],
       providers: [
         HttpClient,

projects/hazdev-ng-geoserve-output/src/lib/place-name.pipe.spec.ts

+import { PlaceNamePipe } from './place-name.pipe';
+
+describe('PlaceNamePipe', () => {
+  let pipe;
+  let place;
+
+  beforeEach(() => {
+    pipe = new PlaceNamePipe();
+    place = {
+      admin1_code: 'NM',
+      admin1_name: 'New Mexico',
+      azimuth: -557.3,
+      country_code: 'US',
+      country_name: 'United States',
+      distance: 2.736,
+      elevation: 1633,
+      feature_class: 'P',
+      feature_code: 'PPL',
+      latitude: 34.97645,
+      longitude: -104.99111,
+      name: 'Vegas Junction',
+      population: 0
+    };
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  describe('transform', () => {
+    it('should return the formatted name components', () => {
+      expect(pipe.transform(place)).toEqual(
+        'Vegas Junction, New Mexico, United States'
+      );
+    });
+  });
+});

projects/hazdev-ng-geoserve-output/src/lib/place-name.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+