diff --git a/karma.conf.js b/karma.conf.js
index 813b2acf27a7877dc1f370594a4527d1192450fa..e0feaefc765ff9a114afb9babfec76106204a163 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -10,23 +10,41 @@ module.exports = function (config) {
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
- require('@angular-devkit/build-angular/plugins/karma')
+ require('@angular-devkit/build-angular/plugins/karma'),
],
client: {
- clearContext: false // leave Jasmine Spec Runner output visible in browser
+ clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/pamn'),
reports: ['html', 'lcovonly', 'text-summary'],
- fixWebpackSourcePaths: true
+ fixWebpackSourcePaths: true,
},
reporters: ['progress', 'kjhtml'],
port: 9876,
+ proxies: {
+ '/api': {
+ target: 'http://localhost:3000',
+ },
+ '/base-adresse/base-adresse-nationale/streets': {
+ target: 'https://passerelle.formulaireextranet.grandlyon.com',
+ changeOrigin: true,
+ },
+ '/geocoding/photon/api': {
+ target: 'https://download.data.grandlyon.com',
+ changeOrigin: true,
+ },
+ '/reverse': {
+ target: 'https://api-adresse.data.gouv.fr',
+ changeOrigin: true,
+ },
+ },
+
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
- restartOnFileChange: true
+ restartOnFileChange: true,
});
};
diff --git a/package.json b/package.json
index 4b09a880a8b22842e0d35675d0a97c84bb377251..8c71c182f7999d0f66f2979bf5d8a6284af992c4 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"json-server": "^0.16.2",
"leaflet": "^1.7.1",
"leaflet.locatecontrol": "^0.72.0",
+ "lodash": "^4.17.20",
"luxon": "^1.25.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
diff --git a/proxy.conf.json b/proxy.conf.json
index 4cafc6d48237ca58e50c46d222b233618a624ec7..f6d20c2ac69c72bd5ebe74bfd45d949b48ea80c2 100644
--- a/proxy.conf.json
+++ b/proxy.conf.json
@@ -13,5 +13,11 @@
"secure": false,
"changeOrigin": true,
"logLevel": "info"
+ },
+ "/reverse": {
+ "target": "https://api-adresse.data.gouv.fr",
+ "secure": false,
+ "changeOrigin": true,
+ "logLevel": "info"
}
}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 6016ec21f8ebd3846f0cd7a74da2c57a158730ac..163c415cb98ca82e3b3ddbbb80e3580b7763cd4d 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,4 +1,4 @@
<div fxLayout="row">
- <app-structure-list [structureList]="structures" class="left-pane"></app-structure-list>
+ <app-structure-list [structureList]="structures" [location]="currentLocation" class="left-pane"></app-structure-list>
<app-map [structures]="structures" fxFlex="100"></app-map>
</div>
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
index 8c0ce9e1243e588f86c013549b02032ace2a3b04..b952097115baec8b84f8b2346688caa8a883fb77 100644
--- a/src/app/home/home.component.spec.ts
+++ b/src/app/home/home.component.spec.ts
@@ -7,15 +7,22 @@ import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
+ let originalTimeout;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [HomeComponent],
- imports: [HttpClientTestingModule],
+ imports: [HttpClientModule],
}).compileComponents();
});
+ afterEach(() => {
+ jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+ });
+
beforeEach(() => {
+ originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+ jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
@@ -24,4 +31,39 @@ describe('HomeComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('getCoord(): should get coord', async () => {
+ await new Promise((resolve) => {
+ component.getCoord(21356).subscribe(
+ (val) => {
+ console.log(val);
+ expect(val.geometry.getLat()).toEqual(69800);
+ expect(val.geometry.getLon).toEqual(69800);
+ resolve();
+ },
+ (err) => {
+ resolve();
+ }
+ );
+ });
+ });
+
+ it('getAddress(): should getAddress', () => {
+ spyOn(navigator.geolocation, 'getCurrentPosition').and.callFake(() => {
+ const position = {
+ coords: {
+ accuracy: 1490,
+ altitude: null,
+ altitudeAccuracy: null,
+ heading: null,
+ latitude: 45.747404800000005,
+ longitude: 4.8529408,
+ speed: null,
+ },
+ };
+ return position;
+ });
+ component.getLocation();
+ expect(navigator.geolocation.getCurrentPosition).toHaveBeenCalled();
+ });
});
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 2264953e0f22d50182b61573a534eb32bad32607..2108d3e9e895cbcc2051540c5fd8ae6b76bf7f1b 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,8 +1,12 @@
import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
+const { DateTime } = require('luxon');
+import * as _ from 'lodash';
import { Structure } from '../models/structure.model';
import { StructureService } from '../services/structure-list.service';
-const { DateTime } = require('luxon');
+import { GeoJson } from '../map/models/geojson.model';
+import { GeojsonService } from '../services/geojson.service';
@Component({
selector: 'app-home',
@@ -11,13 +15,75 @@ const { DateTime } = require('luxon');
})
export class HomeComponent implements OnInit {
public structures: Structure[] = [];
- constructor(private structureService: StructureService) {}
+ public geolocation = false;
+ public currentLocation: GeoJson;
+ constructor(private structureService: StructureService, private geoJsonService: GeojsonService) {}
ngOnInit(): void {
+ if (navigator.geolocation) {
+ this.getLocation();
+ }
+ this.getStructures();
+ }
+
+ public getStructures(): void {
this.structureService.getStructures().subscribe((structures) => {
- this.structures = structures.map((structure) =>
- this.structureService.updateOpeningStructure(structure, DateTime.local())
- );
+ Promise.all(
+ structures.map((structure) => {
+ if (this.geolocation) {
+ return this.getStructurePosition(structure).then((val) => {
+ return this.structureService.updateOpeningStructure(val, DateTime.local());
+ });
+ } else {
+ return this.structureService.updateOpeningStructure(structure, DateTime.local());
+ }
+ })
+ ).then((structureList) => {
+ this.structures = _.sortBy(structureList, ['distance']);
+ });
+ });
+ }
+
+ /**
+ * Get structures positions and add marker corresponding to those positons on the map
+ */
+ private getStructurePosition(structure: Structure): Promise<Structure> {
+ return new Promise((resolve, reject) => {
+ this.getCoord(structure.voie).subscribe((coord: GeoJson) => {
+ structure.distance = this.geoJsonService.getDistance(
+ coord.geometry.getLon(),
+ coord.geometry.getLat(),
+ this.currentLocation.geometry.getLon(),
+ this.currentLocation.geometry.getLat(),
+ 'M'
+ );
+ resolve(structure);
+ });
});
}
+
+ /**
+ * Get coord with a street reference
+ * @param idVoie Street reference
+ */
+ public getCoord(idVoie: number): Observable<GeoJson> {
+ console.log('in');
+ return this.geoJsonService.getAddressByIdVoie(idVoie).pipe(mergeMap((res) => this.geoJsonService.getCoord(res)));
+ }
+
+ public getLocation(): void {
+ navigator.geolocation.getCurrentPosition((position) => {
+ this.geolocation = true;
+ const longitude = position.coords.longitude;
+ const latitude = position.coords.latitude;
+ this.getAddress(longitude, latitude);
+ });
+ }
+
+ private getAddress(longitude: number, latitude: number): void {
+ this.geoJsonService.getAddressByCoord(longitude, latitude).subscribe(
+ (location) => (this.currentLocation = location),
+ (err) => console.error(err)
+ );
+ }
}
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index f63314cb98888b7b38cc9d8c1593fb6cec90894b..f873273fa877bb01c4b9e3d08fe7e21bce1719a9 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { Structure } from '../../models/structure.model';
import { GeoJson } from '../models/geojson.model';
-import { GeojsonService } from '../services/geojson.service';
+import { GeojsonService } from '../../services/geojson.service';
import { MapService } from '../services/map.service';
@Component({
@@ -21,11 +21,9 @@ export class MapComponent implements OnChanges {
public locateOptions = {
flyTo: false,
keepCurrentZoomLevel: false,
- locateOptions: {
- enableHighAccuracy: true,
- },
icon: 'fa-map-marker',
clickBehavior: { inView: 'stop', outOfView: 'setView', inViewNotFollowing: 'setView' },
+ circlePadding: [5, 5],
};
constructor(private mapService: MapService, private geoJsonService: GeojsonService) {
@@ -77,7 +75,7 @@ export class MapComponent implements OnChanges {
* @param idVoie Street reference
*/
public getCoord(idVoie: number): Observable<GeoJson> {
- return this.geoJsonService.getAddress(idVoie).pipe(mergeMap((res) => this.geoJsonService.getCoord(res)));
+ return this.geoJsonService.getAddressByIdVoie(idVoie).pipe(mergeMap((res) => this.geoJsonService.getCoord(res)));
}
/**
diff --git a/src/app/map/services/geojson.service.ts b/src/app/map/services/geojson.service.ts
deleted file mode 100644
index 7af9e34814df849adb8a6829c1ab4dc3979154f8..0000000000000000000000000000000000000000
--- a/src/app/map/services/geojson.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { Address } from '../models/address.model';
-import { GeoJson } from '../models/geojson.model';
-
-@Injectable({
- providedIn: 'root',
-})
-export class GeojsonService {
- constructor(private http: HttpClient) {}
-
- /**
- * Retrive an address with a street national reference
- * @param idVoie Number
- */
- public getAddress(idVoie: number): Observable<Address> {
- return this.http
- .get('/base-adresse/base-adresse-nationale/streets' + '?id=' + idVoie)
- .pipe(map((data: { data: any[]; err: number }) => new Address(data.data[0])));
- }
-
- /**
- * Get GeoLocation with an address
- * @param address Address
- */
- public getCoord(address: Address): Observable<GeoJson> {
- return this.http
- .get('/geocoding/photon/api' + '?q=' + address.queryString())
- .pipe(map((data: { features: any[]; type: string }) => new GeoJson(data.features[0])));
- }
-}
diff --git a/src/app/map/models/address.model.ts b/src/app/models/address.model.ts
similarity index 100%
rename from src/app/map/models/address.model.ts
rename to src/app/models/address.model.ts
diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index 191917321f193d1b9442d5e66fa2a8eeecac84d6..278f117d7a9e910931c86442814314c6d1da4459 100644
--- a/src/app/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -31,6 +31,7 @@ export class Structure {
public hours: Week;
public isOpen: boolean;
public openedOn: OpeningDay;
+ public distance?: string;
constructor(obj?: any) {
Object.assign(this, obj, {
diff --git a/src/app/map/services/geojson.service.spec.ts b/src/app/services/geojson.service.spec.ts
similarity index 93%
rename from src/app/map/services/geojson.service.spec.ts
rename to src/app/services/geojson.service.spec.ts
index 359674551c7ffd2fab202edd37c6013365bfedb9..f6b6c9bda4c9fe63ebbd5a76bf63bc2486b3268a 100644
--- a/src/app/map/services/geojson.service.spec.ts
+++ b/src/app/services/geojson.service.spec.ts
@@ -24,14 +24,13 @@ describe('GeojsonService', () => {
it('should get address for id 26061 ', async () => {
await new Promise((resolve) => {
- service.getAddress(26061).subscribe(
+ service.getAddressByIdVoie(26061).subscribe(
(val) => {
expect(val.zipcode).toEqual('69800');
expect(val.text).toEqual('13ème Rue Cité Berliet');
resolve();
},
(err) => {
- console.log(err);
resolve();
}
);
@@ -47,7 +46,6 @@ describe('GeojsonService', () => {
resolve();
},
(err) => {
- console.log(err);
resolve();
}
);
diff --git a/src/app/services/geojson.service.ts b/src/app/services/geojson.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..39aed758f5cf06e5834199bb4bde3df374559153
--- /dev/null
+++ b/src/app/services/geojson.service.ts
@@ -0,0 +1,99 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Address } from '../models/address.model';
+import { GeoJson } from '../map/models/geojson.model';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class GeojsonService {
+ constructor(private http: HttpClient) {}
+
+ /**
+ * Retrive an address with a street national reference
+ * @param idVoie Number
+ */
+ public getAddressByIdVoie(idVoie: number): Observable<Address> {
+ return this.http
+ .get('/base-adresse/base-adresse-nationale/streets' + '?id=' + idVoie)
+ .pipe(map((data: { data: any[]; err: number }) => new Address(data.data[0])));
+ }
+
+ /**
+ * Retrive an address by geolocation
+ * @param idVoie Number
+ */
+ public getAddressByCoord(longitude: number, latitude: number): Observable<any> {
+ return this.http
+ .get('/reverse/' + '?lon=' + longitude + '&lat=' + latitude)
+ .pipe(map((data: { features: any[] }) => new GeoJson(data.features[0])));
+ }
+
+ /**
+ * Get GeoLocation with an address
+ * @param address Address
+ */
+ public getCoord(address: Address): Observable<GeoJson> {
+ return this.http
+ .get('/geocoding/photon/api' + '?q=' + address.queryString())
+ .pipe(map((data: { features: any[]; type: string }) => new GeoJson(data.features[0])));
+ }
+
+ // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+ // ::: :::
+ // ::: This routine calculates the distance between two points (given the :::
+ // ::: latitude/longitude of those points). It is being used to calculate :::
+ // ::: the distance between two locations using GeoDataSource (TM) prodducts :::
+ // ::: :::
+ // ::: Definitions: :::
+ // ::: South latitudes are negative, east longitudes are positive :::
+ // ::: :::
+ // ::: Passed to function: :::
+ // ::: lat1, lon1 = Latitude and Longitude of point 1 (in decimal degrees) :::
+ // ::: lat2, lon2 = Latitude and Longitude of point 2 (in decimal degrees) :::
+ // ::: unit = the unit you desire for results :::
+ // ::: where: 'M' is statute miles (default) :::
+ // ::: 'K' is kilometers :::
+ // ::: 'N' is nautical miles :::
+ // ::: :::
+ // ::: Worldwide cities and other features databases with latitude longitude :::
+ // ::: are available at https://www.geodatasource.com :::
+ // ::: :::
+ // ::: For enquiries, please contact sales@geodatasource.com :::
+ // ::: :::
+ // ::: Official Web site: https://www.geodatasource.com :::
+ // ::: :::
+ // ::: GeoDataSource.com (C) All Rights Reserved 2018 :::
+ // ::: :::
+ // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+ public getDistance(lat1, lon1, lat2, lon2, unit): string {
+ if (lat1 === lat2 && lon1 === lon2) {
+ return '0';
+ } else {
+ const radlat1 = (Math.PI * lat1) / 180;
+ const radlat2 = (Math.PI * lat2) / 180;
+ const theta = lon1 - lon2;
+ const radtheta = (Math.PI * theta) / 180;
+ let dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
+ if (dist > 1) {
+ dist = 1;
+ }
+ dist = Math.acos(dist);
+ dist = (dist * 180) / Math.PI;
+ dist = dist * 60 * 1.1515;
+ if (unit === 'K') {
+ dist = dist * 1.609344;
+ }
+ if (unit === 'M') {
+ dist = dist * 1.609344 * 1000;
+ }
+ if (unit === 'N') {
+ dist = dist * 0.8684;
+ }
+ return dist.toFixed(0);
+ }
+ }
+}
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index b8d0c1dc5ddb3535aaf7aac8648c35965c0b45b2..daf64b16c5231456297a97f3b413e927c200cd96 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -3,7 +3,7 @@
<div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center">
<span class="typeStructure">{{ structure.typeDeStructure }}</span>
- <span class="distanceStructure">├─┤ 63 m</span>
+ <span *ngIf="structure.distance" class="distanceStructure">├─┤ {{ this.formatDistance() }}</span>
</div>
<br />
<div class="statusStructure" fxLayout="row" fxLayoutAlign="start center">
diff --git a/src/app/structure-list/components/card/card.component.ts b/src/app/structure-list/components/card/card.component.ts
index 9049bcfa750403198f6e1383b1ef24d980a6f5b5..0b93efe9ebd5604aa1542db6a3b62f7e50e4d080 100644
--- a/src/app/structure-list/components/card/card.component.ts
+++ b/src/app/structure-list/components/card/card.component.ts
@@ -1,5 +1,9 @@
import { Component, Input, OnInit } from '@angular/core';
import { Structure } from '../../../models/structure.model';
+import { GeojsonService } from '../../../services/geojson.service';
+import { GeoJson } from '../../../map/models/geojson.model';
+import { Observable } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
@Component({
selector: 'app-card',
@@ -8,7 +12,26 @@ import { Structure } from '../../../models/structure.model';
})
export class CardComponent implements OnInit {
@Input() public structure: Structure;
- constructor() {}
+ constructor(private geoJsonService: GeojsonService) {}
ngOnInit(): void {}
+
+ /**
+ * Display distance in m or km according to value
+ */
+ public formatDistance(): string {
+ if (this.structure.distance.length > 3) {
+ return (parseInt(this.structure.distance, 10) / 1000).toFixed(1).toString() + ' km';
+ } else {
+ return this.structure.distance + ' m';
+ }
+ }
+
+ /**
+ * Get coord with a street reference
+ * @param idVoie Street reference
+ */
+ public getCoord(idVoie: number): Observable<GeoJson> {
+ return this.geoJsonService.getAddressByIdVoie(idVoie).pipe(mergeMap((res) => this.geoJsonService.getCoord(res)));
+ }
}
diff --git a/src/app/structure-list/components/recherche/recherche.component.ts b/src/app/structure-list/components/recherche/recherche.component.ts
index 7754a323b5dd7dbb0e061bdc681ed25d41020edb..6ccca06c4ef0ec4a4a0343d76bec7e900352b6c5 100644
--- a/src/app/structure-list/components/recherche/recherche.component.ts
+++ b/src/app/structure-list/components/recherche/recherche.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-recherche',
diff --git a/src/app/structure-list/structure-list.component.spec.ts b/src/app/structure-list/structure-list.component.spec.ts
index b00f05ee5b5fe64013449fe33fb9145ad13f448f..ea045c5516a8aa5f1f7d67582eb98a9298f73756 100644
--- a/src/app/structure-list/structure-list.component.spec.ts
+++ b/src/app/structure-list/structure-list.component.spec.ts
@@ -163,7 +163,6 @@ describe('StructureListComponent', () => {
})
);
structureList.length = 4;
- console.log(structureList.length);
component.structureList = structureList;
fixture.detectChanges(); // calls NgOnit
});
diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts
index 37296692db16a7133f47f6cfab0db52dba29fb2e..4eee772a801aa38d619f247b351a6d18111b8dba 100644
--- a/src/app/structure-list/structure-list.component.ts
+++ b/src/app/structure-list/structure-list.component.ts
@@ -1,6 +1,6 @@
import { Component, Input, OnInit } from '@angular/core';
import { Structure } from '../models/structure.model';
-
+import { GeoJson } from '../map/models/geojson.model';
@Component({
selector: 'app-structure-list',
templateUrl: './structure-list.component.html',
@@ -8,6 +8,7 @@ import { Structure } from '../models/structure.model';
})
export class StructureListComponent implements OnInit {
@Input() public structureList: Structure[];
+ @Input() public location: GeoJson;
constructor() {}
ngOnInit(): void {}