From a99e9b4356022e1c9a385cf2533eee68a2d08636 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Fri, 22 Jan 2021 16:22:53 +0100
Subject: [PATCH] feat: sync locate from search bar to map
---
src/app/home/home.component.html | 4 ++++
src/app/home/home.component.ts | 9 +++++++++
src/app/map/components/map.component.html | 6 +++++-
src/app/map/components/map.component.ts | 5 +++++
.../components/search/search.component.ts | 19 +++++++++++++++----
.../structure-list.component.html | 6 +++++-
.../structure-list.component.ts | 6 ++++++
7 files changed, 49 insertions(+), 6 deletions(-)
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 11b58a671..af7a97934 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 ec5984d94..1f4aa6916 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 4fc632608..4d4054218 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 e22a7c412..e09c095bc 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 d54028a50..dca476a8c 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 57b306f09..c0951d65c 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 b1a5c31b1..58f2b6621 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);
+ }
}
--
GitLab