From 397fb5f7c840a2fed513ef98cf5ebf8cc27fc2c7 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Tue, 20 Oct 2020 13:19:44 +0200
Subject: [PATCH] feat(map): merge structre and map. Remove useless components
and structure refacto
---
package-lock.json | 8 +++
package.json | 7 +-
proxy.conf.json | 12 ++++
src/app/app.module.ts | 21 ++++--
src/app/home/home.component.html | 4 +-
src/app/home/home.component.ts | 15 +++-
src/app/map/components/map.component.scss | 35 ++++++++++
src/app/map/components/map.component.ts | 70 +++++++++++++++----
src/app/map/models/address.model.ts | 16 +++++
src/app/map/models/addressGeometry.model.ts | 16 +++++
src/app/map/models/geojson.model.ts | 13 ++++
src/app/map/models/map-options.ts | 0
src/app/map/services/geojson.service.spec.ts | 31 ++++++++
src/app/map/services/geojson.service.ts | 33 +++++++++
src/app/map/services/map.service.ts | 3 +
.../{structure-list => }/models/day.model.ts | 0
.../models/openingDay.model.ts | 0
.../models/structure.model.ts | 17 ++++-
.../{structure-list => }/models/time.model.ts | 0
.../{structure-list => }/models/week.model.ts | 0
.../services/structure-list.service.spec.ts | 0
.../services/structure-list.service.ts | 8 +--
.../components/card/card.component.html | 1 -
.../components/card/card.component.scss | 0
.../components/card/card.component.spec.ts | 25 -------
.../shared/components/card/card.component.ts | 15 ----
src/app/shared/components/index.ts | 6 +-
.../components/card/card.component.html | 17 ++---
.../components/card/card.component.scss | 8 +--
.../components/card/card.component.ts | 18 ++---
.../structure-list.component.html | 3 +-
.../structure-list.component.ts | 5 +-
.../structure-list/structure-list.module.ts | 14 ----
src/app/structure-list/structure-list.scss | 10 +++
src/environments/environment.ts | 2 +
35 files changed, 308 insertions(+), 125 deletions(-)
create mode 100644 src/app/map/models/address.model.ts
create mode 100644 src/app/map/models/addressGeometry.model.ts
create mode 100644 src/app/map/models/geojson.model.ts
delete mode 100644 src/app/map/models/map-options.ts
create mode 100644 src/app/map/services/geojson.service.spec.ts
create mode 100644 src/app/map/services/geojson.service.ts
rename src/app/{structure-list => }/models/day.model.ts (100%)
rename src/app/{structure-list => }/models/openingDay.model.ts (100%)
rename src/app/{structure-list => }/models/structure.model.ts (76%)
rename src/app/{structure-list => }/models/time.model.ts (100%)
rename src/app/{structure-list => }/models/week.model.ts (100%)
rename src/app/{structure-list => }/services/structure-list.service.spec.ts (100%)
rename src/app/{structure-list => }/services/structure-list.service.ts (97%)
delete mode 100644 src/app/shared/components/card/card.component.html
delete mode 100644 src/app/shared/components/card/card.component.scss
delete mode 100644 src/app/shared/components/card/card.component.spec.ts
delete mode 100644 src/app/shared/components/card/card.component.ts
delete mode 100644 src/app/structure-list/structure-list.module.ts
create mode 100644 src/app/structure-list/structure-list.scss
diff --git a/package-lock.json b/package-lock.json
index ce5d413bd..c141501b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1902,6 +1902,14 @@
"webpack-sources": "1.4.3"
}
},
+ "@ngx-translate/core": {
+ "version": "13.0.0",
+ "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-13.0.0.tgz",
+ "integrity": "sha512-+tzEp8wlqEnw0Gc7jtVRAJ6RteUjXw6JJR4O65KlnxOmJrCGPI0xjV/lKRnQeU0w4i96PQs/jtpL921Wrb7PWg==",
+ "requires": {
+ "tslib": "^2.0.0"
+ }
+ },
"@nodelib/fs.scandir": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
diff --git a/package.json b/package.json
index b582075f7..4b09a880a 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,14 @@
"version": "0.0.3",
"scripts": {
"ng": "ng",
- "start": "ng serve --configuration=fr",
+ "start": "ng serve --configuration=fr --proxy-config proxy.conf.json",
"build:prod": "ng build --configuration=production,fr --output-path=dist",
"build:dev": "ng build --configuration=fr --output-path=dist",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"release": "standard-version",
- "translate": "ng xi18n --output-path src/locale --out-file messages.en.xlf",
+ "translate": "ng xi18n --ivy --output-path src/locale --out-file messages.en.xlf",
"api": "json-server api/db.json --routes api/routes.json --no-cors=true"
},
"private": true,
@@ -26,10 +26,11 @@
"@angular/platform-browser-dynamic": "~10.1.3",
"@angular/router": "~10.1.3",
"@asymmetrik/ngx-leaflet": "^8.1.0",
+ "@ngx-translate/core": "^13.0.0",
"@runette/ngx-leaflet-locate": "^1.0.3",
+ "json-server": "^0.16.2",
"leaflet": "^1.7.1",
"leaflet.locatecontrol": "^0.72.0",
- "json-server": "^0.16.2",
"luxon": "^1.25.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
diff --git a/proxy.conf.json b/proxy.conf.json
index c394a84fb..4cafc6d48 100644
--- a/proxy.conf.json
+++ b/proxy.conf.json
@@ -1,5 +1,17 @@
{
"/api": {
"target": "http://localhost:3000"
+ },
+ "/base-adresse/base-adresse-nationale/streets": {
+ "target": "https://passerelle.formulaireextranet.grandlyon.com",
+ "secure": false,
+ "changeOrigin": true,
+ "logLevel": "info"
+ },
+ "/geocoding/photon/api": {
+ "target": "https://download.data.grandlyon.com",
+ "secure": false,
+ "changeOrigin": true,
+ "logLevel": "info"
}
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0a75ad24f..7cb7bc0d7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,21 +1,32 @@
import { LOCALE_ID, NgModule } from '@angular/core';
-
-import { AppRoutingModule } from './app-routing.module';
+import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { FlexLayoutModule } from '@angular/flex-layout';
+import { AppRoutingModule } from './app-routing.module';
+
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { CustomBreakPointsProvider } from './config/custom-breakpoint';
import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
import { SharedModule } from './shared/shared.module';
-import { StructureListModule } from './structure-list/structure-list.module';
import { MapModule } from './map/map.module';
+import { RechercheComponent } from './structure-list/components/recherche/recherche.component';
+import { StructureListComponent } from './structure-list/structure-list.component';
+import { CardComponent } from './structure-list/components/card/card.component';
@NgModule({
- declarations: [AppComponent, HeaderComponent, FooterComponent, HomeComponent],
- imports: [BrowserModule, AppRoutingModule, FlexLayoutModule, SharedModule, StructureListModule, MapModule],
+ declarations: [
+ AppComponent,
+ HeaderComponent,
+ FooterComponent,
+ HomeComponent,
+ StructureListComponent,
+ CardComponent,
+ RechercheComponent,
+ ],
+ imports: [BrowserModule, HttpClientModule, AppRoutingModule, FlexLayoutModule, SharedModule, MapModule],
providers: [{ provide: LOCALE_ID, useValue: 'fr' }, CustomBreakPointsProvider],
bootstrap: [AppComponent],
})
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 030fee9dd..68c653d8b 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 class="left-pane" fxFlex="30%"></app-structure-list>
- <app-map fxFlex="70%" [toogleToolTipIds]="[1, 2]"></app-map>
+ <app-structure-list [structureList]="structures" class="left-pane" fxFlex="30%"></app-structure-list>
+ <app-map fxFlex="70%" [structures]="structures"></app-map>
</div>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 98af51905..2264953e0 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
+import { mergeMap } from 'rxjs/operators';
+import { Structure } from '../models/structure.model';
+import { StructureService } from '../services/structure-list.service';
+const { DateTime } = require('luxon');
@Component({
selector: 'app-home',
@@ -6,7 +10,14 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
- constructor() {}
+ public structures: Structure[] = [];
+ constructor(private structureService: StructureService) {}
- ngOnInit(): void {}
+ ngOnInit(): void {
+ this.structureService.getStructures().subscribe((structures) => {
+ this.structures = structures.map((structure) =>
+ this.structureService.updateOpeningStructure(structure, DateTime.local())
+ );
+ });
+ }
}
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index e40578ea2..7c09074d9 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -1,5 +1,7 @@
@import '../../../assets/scss/color';
@import '../../../assets/scss/layout';
+@import '../../../assets/scss/icons';
+@import '../../../assets/scss/typography';
#map {
height: calc(100vh - #{$header-height} - #{$footer-height});
@@ -48,3 +50,36 @@
}
}
}
+
+::ng-deep .leaflet-tooltip {
+ padding: 8px 10px 8px 10px;
+ h1 {
+ color: $purple;
+ @include cn-bold-20;
+ margin: 0;
+ }
+ p {
+ color: $grey-3;
+ @include cn-regular-16;
+ margin: 0 0 13px 0;
+ }
+ div {
+ align-items: center;
+ display: flex;
+ }
+ // Find somthing better than redeclare class. Mixins ?
+ .ico-dot-available {
+ height: 12px;
+ width: 12px;
+ background-color: $green;
+ border-radius: 50%;
+ margin-right: 8px;
+ }
+ .ico-dot-unavailable {
+ height: 12px;
+ width: 12px;
+ background-color: $grey;
+ border-radius: 50%;
+ margin-right: 8px;
+ }
+}
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index f3e84b556..e30ec0504 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -1,5 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { latLng, MapOptions, tileLayer, Map, CRS, TileLayer, LatLngBounds } from 'leaflet';
+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 { MapService } from '../services/map.service';
@Component({
@@ -7,7 +12,8 @@ import { MapService } from '../services/map.service';
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'],
})
-export class MapComponent implements OnInit {
+export class MapComponent implements OnChanges {
+ @Input() public structures: Structure[] = [];
@Input() public toogleToolTipIds: Array<number> = [];
public map: Map;
public mapOptions: MapOptions;
@@ -22,19 +28,64 @@ export class MapComponent implements OnInit {
clickBehavior: { inView: 'stop', outOfView: 'setView', inViewNotFollowing: 'setView' },
};
- constructor(private mapService: MapService) {}
-
- ngOnInit(): void {
+ constructor(private mapService: MapService, private geoJsonService: GeojsonService) {
this.initializeMapOptions();
}
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.structures) {
+ this.getStructurePosition();
+ }
+ }
+
+ /**
+ * Get structures positions and add marker corresponding to those positons on the map
+ */
+ private getStructurePosition(): void {
+ this.structures.forEach((element: Structure) => {
+ this.getCoord(element.voie).subscribe((coord: GeoJson) => {
+ this.mapService
+ .createMarker(coord.geometry.getLon(), coord.geometry.getLat(), 1, this.buildToolTip(element))
+ .addTo(this.map);
+ });
+ });
+ }
+
+ /**
+ * Create tooltip for display
+ * @param structure Structure
+ */
+ private buildToolTip(structure: Structure): string {
+ const cssAvailabilityClass = structure.isOpen ? 'available' : 'unavailable';
+ return (
+ '<h1>' +
+ structure.nomDeVotreStructure +
+ '</h1>' +
+ '<p>' +
+ structure.typeDeStructure +
+ '</p><div>' +
+ '<span class="ico-dot-' +
+ cssAvailabilityClass +
+ '"></span><span>' +
+ structure.openDisplay() +
+ '</span></div>'
+ );
+ }
+
+ /**
+ * Get coord with a street reference
+ * @param idVoie Street reference
+ */
+ public getCoord(idVoie: number): Observable<GeoJson> {
+ return this.geoJsonService.getAddress(idVoie).pipe(mergeMap((res) => this.geoJsonService.getCoord(res)));
+ }
+
/**
* Add marker when map is ready to be showned
* @param map map
*/
public onMapReady(map: Map): void {
this.map = map;
- this.addMarker();
}
/**
@@ -84,11 +135,4 @@ export class MapComponent implements OnInit {
this.mapService.toogleToolTip(id);
});
}
-
- private addMarker(): void {
- //TODO: Replace with real data
- this.mapService.createMarker(45.764043, 4.835659, 1, '<p>Hello <br/>World !</p>').addTo(this.map);
- this.mapService.createMarker(45.764043, 4.935659, 2, '<p>Hello <br/>World 2!</p>').addTo(this.map);
- this.mapService.createMarker(45.664043, 4.835659, 3).addTo(this.map);
- }
}
diff --git a/src/app/map/models/address.model.ts b/src/app/map/models/address.model.ts
new file mode 100644
index 000000000..b91f488bb
--- /dev/null
+++ b/src/app/map/models/address.model.ts
@@ -0,0 +1,16 @@
+export class Address {
+ public id: number;
+ public text: string;
+ public type: string;
+ public city: string;
+ public citycode: string;
+ public zipcode: string;
+
+ constructor(obj?: any) {
+ Object.assign(this, obj);
+ }
+
+ public queryString(): string {
+ return this.text + ' ' + this.citycode;
+ }
+}
diff --git a/src/app/map/models/addressGeometry.model.ts b/src/app/map/models/addressGeometry.model.ts
new file mode 100644
index 000000000..71e1ce346
--- /dev/null
+++ b/src/app/map/models/addressGeometry.model.ts
@@ -0,0 +1,16 @@
+export class AddressGeometry {
+ public coordinates: Array<number>;
+ public type: string;
+
+ constructor(obj?: any) {
+ Object.assign(this, obj);
+ }
+
+ public getLat(): number {
+ return this.coordinates[0];
+ }
+
+ public getLon(): number {
+ return this.coordinates[1];
+ }
+}
diff --git a/src/app/map/models/geojson.model.ts b/src/app/map/models/geojson.model.ts
new file mode 100644
index 000000000..3407c70da
--- /dev/null
+++ b/src/app/map/models/geojson.model.ts
@@ -0,0 +1,13 @@
+import { AddressGeometry } from './addressGeometry.model';
+
+export class GeoJson {
+ public geometry: AddressGeometry;
+ public type: string;
+ public properties: object;
+
+ constructor(obj?: any) {
+ Object.assign(this, obj, {
+ geometry: obj && obj.geometry ? new AddressGeometry(obj.geometry) : null,
+ });
+ }
+}
diff --git a/src/app/map/models/map-options.ts b/src/app/map/models/map-options.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/map/services/geojson.service.spec.ts b/src/app/map/services/geojson.service.spec.ts
new file mode 100644
index 000000000..0d9d5d0c6
--- /dev/null
+++ b/src/app/map/services/geojson.service.spec.ts
@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { Address } from '../models/address.model';
+
+import { GeojsonService } from './geojson.service';
+
+describe('GeojsonService', () => {
+ let service: GeojsonService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(GeojsonService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+
+ it('should get address for id 26061 ', () => {
+ service.getAddress(26061).subscribe((val) => {
+ expect(val.zipcode).toEqual('69800');
+ expect(val.text).toEqual('13ème Rue Cité Berliet');
+ });
+ });
+
+ it('should get coord with query string avenue foch 69006 ', () => {
+ service.getCoord(new Address({ text: 'avenue foch', citycode: '69006' })).subscribe((val) => {
+ expect(val.geometry.getLat()).toEqual(4.8429024);
+ expect(val.geometry.getLon()).toEqual(45.7733884);
+ });
+ });
+});
diff --git a/src/app/map/services/geojson.service.ts b/src/app/map/services/geojson.service.ts
new file mode 100644
index 000000000..7af9e3481
--- /dev/null
+++ b/src/app/map/services/geojson.service.ts
@@ -0,0 +1,33 @@
+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/services/map.service.ts b/src/app/map/services/map.service.ts
index eb5eb8d4f..77296375a 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -21,6 +21,9 @@ export class MapService {
marker.bindTooltip(tooltip);
}
this.markersList[id] = marker;
+ console.log('marker lat', lat);
+ console.log('marker lon', lon);
+ console.log('marker', marker);
return marker;
}
diff --git a/src/app/structure-list/models/day.model.ts b/src/app/models/day.model.ts
similarity index 100%
rename from src/app/structure-list/models/day.model.ts
rename to src/app/models/day.model.ts
diff --git a/src/app/structure-list/models/openingDay.model.ts b/src/app/models/openingDay.model.ts
similarity index 100%
rename from src/app/structure-list/models/openingDay.model.ts
rename to src/app/models/openingDay.model.ts
diff --git a/src/app/structure-list/models/structure.model.ts b/src/app/models/structure.model.ts
similarity index 76%
rename from src/app/structure-list/models/structure.model.ts
rename to src/app/models/structure.model.ts
index 92ceb326d..cd65a8ead 100644
--- a/src/app/structure-list/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -1,6 +1,7 @@
+import { TranslateService } from '@ngx-translate/core';
+import { Weekday } from '../structure-list/enum/weekday.enum';
import { Day } from './day.model';
import { OpeningDay } from './openingDay.model';
-import { Weekday } from '../enum/weekday.enum';
import { Week } from './week.model';
export class Structure {
@@ -13,7 +14,7 @@ export class Structure {
public typeDeStructure: string;
public description: string;
public n: string;
- public voie: string;
+ public voie: number;
public telephone: string;
public courriel: string;
public siteWeb: string;
@@ -32,7 +33,7 @@ export class Structure {
public isOpen: boolean;
public openedOn: OpeningDay;
- constructor(obj?: any) {
+ constructor(obj?: any, private translateService: TranslateService) {
Object.assign(this, obj, {
hours: obj && obj.hours ? new Week(obj.hours) : null,
});
@@ -58,4 +59,14 @@ export class Structure {
return null;
}
}
+
+ public openDisplay(): string {
+ if (this.isOpen) {
+ return 'Ouvert actuellement ';
+ } else if (this.openedOn.day) {
+ return 'Fermé - Ouvre ' + this.openedOn.day + ' à ' + this.openedOn.schedule;
+ } else {
+ return 'Fermé - Aucun horaire disponible ';
+ }
+ }
}
diff --git a/src/app/structure-list/models/time.model.ts b/src/app/models/time.model.ts
similarity index 100%
rename from src/app/structure-list/models/time.model.ts
rename to src/app/models/time.model.ts
diff --git a/src/app/structure-list/models/week.model.ts b/src/app/models/week.model.ts
similarity index 100%
rename from src/app/structure-list/models/week.model.ts
rename to src/app/models/week.model.ts
diff --git a/src/app/structure-list/services/structure-list.service.spec.ts b/src/app/services/structure-list.service.spec.ts
similarity index 100%
rename from src/app/structure-list/services/structure-list.service.spec.ts
rename to src/app/services/structure-list.service.spec.ts
diff --git a/src/app/structure-list/services/structure-list.service.ts b/src/app/services/structure-list.service.ts
similarity index 97%
rename from src/app/structure-list/services/structure-list.service.ts
rename to src/app/services/structure-list.service.ts
index 9394b38c1..82d06039c 100644
--- a/src/app/structure-list/services/structure-list.service.ts
+++ b/src/app/services/structure-list.service.ts
@@ -1,16 +1,14 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
+import { WeekDay } from '@angular/common';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
-const { DateTime } = require('luxon');
+import { Structure } from '../models/structure.model';
import { Day } from '../models/day.model';
import { OpeningDay } from '../models/openingDay.model';
-import { Structure } from '../models/structure.model';
+import { Weekday } from '../structure-list/enum/weekday.enum';
import { Time } from '../models/time.model';
-import { Weekday } from '../enum/weekday.enum';
-import { Week } from '../models/week.model';
-import { WeekDay } from '@angular/common';
@Injectable({
providedIn: 'root',
diff --git a/src/app/shared/components/card/card.component.html b/src/app/shared/components/card/card.component.html
deleted file mode 100644
index f2fda252a..000000000
--- a/src/app/shared/components/card/card.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>card works!</p>
diff --git a/src/app/shared/components/card/card.component.scss b/src/app/shared/components/card/card.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/shared/components/card/card.component.spec.ts b/src/app/shared/components/card/card.component.spec.ts
deleted file mode 100644
index 3093fd5a3..000000000
--- a/src/app/shared/components/card/card.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CardComponent } from './card.component';
-
-describe('CardComponent', () => {
- let component: CardComponent;
- let fixture: ComponentFixture<CardComponent>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ CardComponent ]
- })
- .compileComponents();
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(CardComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/shared/components/card/card.component.ts b/src/app/shared/components/card/card.component.ts
deleted file mode 100644
index 07a9ab07e..000000000
--- a/src/app/shared/components/card/card.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-card',
- templateUrl: './card.component.html',
- styleUrls: ['./card.component.scss']
-})
-export class CardComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
-}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index d8ec6de94..b86c35354 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -1,7 +1,7 @@
-import { CardComponent } from './card/card.component';
+// import { CardComponent } from './card/card.component';
// tslint:disable-next-line: max-line-length
-export { CardComponent };
+// export { CardComponent };
// tslint:disable-next-line:variable-name
-export const SharedComponents = [CardComponent];
+export const SharedComponents = [];
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index 490d59af8..b8d0c1dc5 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,6 +1,5 @@
-<span class="nbStructuresLabel">{{ structures.length }} structures</span>
-<div class="structure" fxLayout="column" *ngFor="let structure of structures">
- <span class="nomStructure">{{ structure.nom }}</span>
+<div class="structure" fxLayout="column">
+ <span class="nomStructure">{{ structure.nomDeVotreStructure }}</span>
<div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center">
<span class="typeStructure">{{ structure.typeDeStructure }}</span>
@@ -8,18 +7,12 @@
</div>
<br />
<div class="statusStructure" fxLayout="row" fxLayoutAlign="start center">
- <div *ngIf="structure.isOpen; else closed">
- <span class="ico-dot-available"></span>
- <span>Ouvert actuellement</span>
+ <div>
+ <span *ngIf="structure.isOpen; else closed" class="ico-dot-available"></span>
+ <span>{{ structure.openDisplay() }}</span>
</div>
<ng-template #closed>
<span class="ico-dot-unavailable"></span>
- <span *ngIf="structure.openedOn.day; else noTime">
- Fermé - Ouvre {{ structure.openedOn.day }} à {{ structure.openedOn.schedule }}</span
- >
- </ng-template>
- <ng-template #noTime>
- <span> Fermé - Aucun horaire disponible</span>
</ng-template>
</div>
</div>
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index 732c84c03..3fe9e2edd 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -2,15 +2,9 @@
@import '../../../../assets/scss/color';
@import '../../../../assets/scss/typography';
-.nbStructuresLabel {
- color: $grey;
- @include cn-regular-16;
- display: flex;
- align-items: center;
-}
.structure {
padding: 12px 0 12px 0;
- border-bottom: 1px dashed $grey;
+ border-bottom: 1px dashed $grey !important;
.typeStructure {
color: $grey;
@include cn-regular-16;
diff --git a/src/app/structure-list/components/card/card.component.ts b/src/app/structure-list/components/card/card.component.ts
index 5594b507f..9049bcfa7 100644
--- a/src/app/structure-list/components/card/card.component.ts
+++ b/src/app/structure-list/components/card/card.component.ts
@@ -1,7 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { Structure } from '../../models/structure.model';
-import { StructureService } from '../../services/structure-list.service';
-const { DateTime } = require('luxon');
+import { Component, Input, OnInit } from '@angular/core';
+import { Structure } from '../../../models/structure.model';
@Component({
selector: 'app-card',
@@ -9,14 +7,8 @@ const { DateTime } = require('luxon');
styleUrls: ['./card.component.scss'],
})
export class CardComponent implements OnInit {
- structures: Structure[] = [];
- constructor(private structureService: StructureService) {}
+ @Input() public structure: Structure;
+ constructor() {}
- ngOnInit(): void {
- this.structureService.getStructures().subscribe((structures) => {
- structures.forEach((s: Structure) => {
- this.structures.push(this.structureService.updateOpeningStructure(s, DateTime.local()));
- });
- });
- }
+ ngOnInit(): void {}
}
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index a6dbe19b7..017b98518 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -1,2 +1,3 @@
<app-recherche></app-recherche>
-<app-card></app-card>
+<span class="nbStructuresLabel">{{ structureList.length }} structures</span>
+<app-card *ngFor="let structure of structureList" [structure]="structure"></app-card>
diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts
index 276b325e4..37296692d 100644
--- a/src/app/structure-list/structure-list.component.ts
+++ b/src/app/structure-list/structure-list.component.ts
@@ -1,10 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Structure } from '../models/structure.model';
@Component({
selector: 'app-structure-list',
templateUrl: './structure-list.component.html',
+ styleUrls: ['./structure-list.scss'],
})
export class StructureListComponent implements OnInit {
+ @Input() public structureList: Structure[];
constructor() {}
ngOnInit(): void {}
diff --git a/src/app/structure-list/structure-list.module.ts b/src/app/structure-list/structure-list.module.ts
deleted file mode 100644
index 7067e0fef..000000000
--- a/src/app/structure-list/structure-list.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { StructureListComponent } from './structure-list.component';
-import { CardComponent } from './components/card/card.component';
-import { RechercheComponent } from './components/recherche/recherche.component';
-import { HttpClientModule } from '@angular/common/http';
-import { FlexLayoutModule } from '@angular/flex-layout';
-
-@NgModule({
- declarations: [StructureListComponent, CardComponent, RechercheComponent],
- imports: [CommonModule, HttpClientModule, FlexLayoutModule],
- exports: [StructureListComponent],
-})
-export class StructureListModule {}
diff --git a/src/app/structure-list/structure-list.scss b/src/app/structure-list/structure-list.scss
new file mode 100644
index 000000000..68c10dffe
--- /dev/null
+++ b/src/app/structure-list/structure-list.scss
@@ -0,0 +1,10 @@
+@import '../../assets/scss/icons';
+@import '../../assets/scss/color';
+@import '../../assets/scss/typography';
+
+.nbStructuresLabel {
+ color: $grey;
+ @include cn-regular-16;
+ display: flex;
+ align-items: center;
+}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 79b25c900..9ad8ed69b 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -5,6 +5,8 @@
export const environment = {
production: false,
registrationForm: 'https://services.formulaireextranet.grandlyon.com/saisie-fiche-structure',
+ addressApi: 'https://passerelle.formulaireextranet.grandlyon.com/base-adresse/base-adresse-nationale/streets',
+ geojsonApi: 'https://download.data.grandlyon.com/geocoding/photon/api',
VERSION: require('../../package.json').version,
};
--
GitLab