diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 11b58a67113b399fe6c7770ca5979be90371987e..af7a97934380569e5c00c15ee8360368ac2f71be 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -3,10 +3,12 @@ (searchEvent)="getStructures($event)" [structureList]="structures" [location]="currentLocation" + [locate]="locate" (displayMapMarkerId)="setMapMarkerId($event)" (selectedMarkerId)="setSelectedMarkerId($event)" [selectedStructure]="currentStructure" (updatedStructure)="updateStructures($event)" + (locatationReset)="locatationReset($event)" class="left-pane" [ngClass]="{ mapPhone: isMapPhone == true }" fxLayout="column" @@ -23,7 +25,9 @@ [structures]="structures" [toogleToolTipId]="displayMarkerId" [selectedMarkerId]="selectedMarkerId" + [locate]="locate" (selectedStructure)="showDetailStructure($event)" + (locatationTrigger)="locatationTrigger($event)" [isMapPhone]="isMapPhone" class="right-pane" [ngClass]="{ mapPhone: isMapPhone == true }" diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index ec5984d94a4d526181f57b476148dbb0bbb45cc7..1f4aa6916b980063b646a30462371a2016f21156 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -23,6 +23,7 @@ export class HomeComponent implements OnInit { public userLatitude: number; public userLongitude: number; public isMapPhone = false; + public locate = false; // Use to sync location between search and map constructor(private structureService: StructureService, private geoJsonService: GeojsonService) {} ngOnInit(): void { @@ -171,4 +172,12 @@ export class HomeComponent implements OnInit { public switchMapList(): void { this.isMapPhone = !this.isMapPhone; } + + public locatationTrigger(): void { + this.locate = true; + } + + public locatationReset(): void { + this.locate = false; + } } diff --git a/src/app/map/components/map.component.html b/src/app/map/components/map.component.html index 4fc6326081f2e5319cdf04ebd9bf7cabbe78d282..4d40542184ff29fb10e6416a7fa2f9fcbd774010 100644 --- a/src/app/map/components/map.component.html +++ b/src/app/map/components/map.component.html @@ -1,4 +1,8 @@ <div class="map-wrapper"> <div id="map" class="body-wrap" leaflet [leafletOptions]="mapOptions" (leafletMapReady)="onMapReady($event)"></div> - <leaflet-locate-control [map]="map" [options]="locateOptions"></leaflet-locate-control> + <leaflet-locate-control + [map]="map" + [options]="locateOptions" + (location$)="sendLocationEvent($event)" + ></leaflet-locate-control> </div> diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts index e22a7c4129b56d2953b568816632a3afce43eef5..e09c095bc2d11e1003beecb3dbdf6d3dd04407c6 100644 --- a/src/app/map/components/map.component.ts +++ b/src/app/map/components/map.component.ts @@ -43,6 +43,7 @@ export class MapComponent implements OnChanges { @Input() public isMapPhone: boolean; @ViewChild(NgxLeafletLocateComponent, { static: false }) locateComponent: NgxLeafletLocateComponent; @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>(); + @Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>(); private currentStructure: Structure; public map: Map; @@ -250,4 +251,8 @@ export class MapComponent implements OnChanges { ) ); } + + public sendLocationEvent(event: any): void { + this.locatationTrigger.emit(true); + } } diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts index d54028a50845dbe74dc8431d7e48c2c49d023d7c..dca476a8cc08574ba47b524fd4efc5ae1e69df93 100644 --- a/src/app/structure-list/components/search/search.component.ts +++ b/src/app/structure-list/components/search/search.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { forkJoin } from 'rxjs'; import { GeoJson } from '../../../map/models/geojson.model'; @@ -15,15 +15,17 @@ import { SearchService } from '../../services/search.service'; templateUrl: './search.component.html', styleUrls: ['./search.component.scss'], }) -export class SearchComponent implements OnInit { +export class SearchComponent implements OnInit, OnChanges { + @Output() searchEvent = new EventEmitter(); + @Output() locatationReset: EventEmitter<boolean> = new EventEmitter<boolean>(); + @Input() locate = false; + constructor(public searchService: SearchService, private fb: FormBuilder, private geoJsonService: GeojsonService) { this.searchForm = this.fb.group({ searchTerm: '', }); } - @Output() searchEvent = new EventEmitter(); - // Form search input public searchForm: FormGroup; // Modal variable @@ -48,6 +50,12 @@ export class SearchComponent implements OnInit { this.checkedModulesFilter = new Array(); } + ngOnChanges(changes: SimpleChanges): void { + if (changes.locate && changes.locate.currentValue) { + this.locateMe(); + } + } + // Accessor to template angular. public get TypeModal(): typeof TypeModal { return TypeModal; @@ -57,6 +65,9 @@ export class SearchComponent implements OnInit { public clearInput(): void { this.searchForm.reset(); this.applyFilter(null); + if (this.locate) { + this.locatationReset.emit(true); + } } // Sends an array containing all filters diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html index 57b306f09d6a1232fd3faf304ce1f67e573adfde..c0951d65cbc277770d88017e9bf72b8297bbf69e 100644 --- a/src/app/structure-list/structure-list.component.html +++ b/src/app/structure-list/structure-list.component.html @@ -1,5 +1,9 @@ <div class="topBlock hide-on-print"> - <app-structure-list-search (searchEvent)="fetchResults($event)"></app-structure-list-search> + <app-structure-list-search + (searchEvent)="fetchResults($event)" + (locatationReset)="sendLocatationReset($event)" + [locate]="locate" + ></app-structure-list-search> </div> <div class="nbStructuresLabel hide-on-print"> {{ structureList ? structureList.length : '0' }} structure{{ structureList && structureList.length > 1 ? 's' : '' }} diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts index b1a5c31b10387e6abc704db14d0f703a2fc77b52..58f2b662103aa7b8c6504313ac8ebb28a591c4c7 100644 --- a/src/app/structure-list/structure-list.component.ts +++ b/src/app/structure-list/structure-list.component.ts @@ -14,9 +14,11 @@ export class StructureListComponent implements OnChanges { @Output() searchEvent = new EventEmitter(); @Input() public location: GeoJson; @Input() public selectedStructure: Structure = new Structure(); + @Input() public locate = false; @Output() public displayMapMarkerId: EventEmitter<string> = new EventEmitter<string>(); @Output() public selectedMarkerId: EventEmitter<string> = new EventEmitter<string>(); @Output() public updatedStructure: EventEmitter<Structure> = new EventEmitter<Structure>(); + @Output() public locatationReset: EventEmitter<boolean> = new EventEmitter<boolean>(); public showStructureDetails = false; public structure: Structure; @@ -83,4 +85,8 @@ export class StructureListComponent implements OnChanges { this.structuresListChunked = [...this.structuresListChunked, ...newStructures]; } } + + public sendLocatationReset(): void { + this.locatationReset.emit(true); + } }