linked context menu with coordinates research

infra-geo-ouverte · Jun 4, 2019 · 706a0d1 · 706a0d1
1 parent 7837be2
commit 706a0d1
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 22 deletions.
diff --git a/demo/src/app/geo/search/search.component.ts b/demo/src/app/geo/search/search.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import * as proj from 'ol/proj';
 
 import { LanguageService } from '@igo2/core';
@@ -20,7 +20,6 @@ import {
 
 import { SearchState } from '@igo2/integration';
 import { GoogleLinks} from '../../../../../packages/geo/src/lib/utils/googleLinks';
-import {QueryService} from '../../../../../packages/geo/src/lib/query/shared';
 
 @Component({
   selector: 'app-search',
@@ -48,7 +47,7 @@ export class AppSearchComponent implements OnInit, OnDestroy {
   public osmLayer: Layer;
 
   @ViewChild('mapBrowser', {read: ElementRef}) mapBrowser: ElementRef;
-  public contextmenuPoint: { x: number, y: number };
+
   public lonlat;
   public mapProjection: string;
 
@@ -63,8 +62,7 @@ export class AppSearchComponent implements OnInit, OnDestroy {
     private mapService: MapService,
     private layerService: LayerService,
     private searchState: SearchState,
-    private searchService: SearchService,
-    private queryService: QueryService
+    private searchService: SearchService
   ) {
     this.mapService.setMap(this.map);
 
@@ -179,21 +177,35 @@ export class AppSearchComponent implements OnInit, OnDestroy {
   }
 
   onContextMenuOpen(event: { x: number, y: number }) {
-    this.contextmenuPoint = event;
-    this.contextmenuPoint.y = this.contextmenuPoint.y - this.mapBrowser.nativeElement.getBoundingClientRect().top + window.scrollY;
-    this.contextmenuPoint.x = this.contextmenuPoint.x - this.mapBrowser.nativeElement.getBoundingClientRect().left + window.scrollX;
-    const position = [this.contextmenuPoint.x, this.contextmenuPoint.y];
+    const position = this.mapPosition(event);
     const coord = this.mapService.getMap().ol.getCoordinateFromPixel(position);
     this.mapProjection = this.mapService.getMap().projection;
-    console.log(this.mapProjection);
     this.lonlat = proj.transform(coord, this.mapProjection, 'EPSG:4326');
+  }
 
-    console.log(this.lonlat);
+  mapPosition(event: { x: number, y: number }) {
+    const contextmenuPoint = event;
+    contextmenuPoint.y = contextmenuPoint.y - this.mapBrowser.nativeElement.getBoundingClientRect().top + window.scrollY;
+    contextmenuPoint.x = contextmenuPoint.x - this.mapBrowser.nativeElement.getBoundingClientRect().left + window.scrollX;
+    const position = [contextmenuPoint.x, contextmenuPoint.y];
+    return position;
   }
 
   onSearchCoordinate() {
-    console.log(this.lonlat);
-    this.searchService.reverseSearch(this.lonlat);
+    this.searchStore.clear();
+    const results = this.searchService.reverseSearch(this.lonlat);
+
+    for (const i in results) {
+      if (results.length > 0) {
+        results[i].request.subscribe((_results: SearchResult<Feature>[]) => {
+          this.onSearch({research: results[i], results: _results});
+          /*if (_results[i].source.options.title === 'Coordinates') {
+            this.onResultSelect(_results[0]);
+          }*/
+          console.log(_results[0]);
+        });
+      }
+    }
   }
 
   onOpenGoogleMaps() {

diff --git a/demo/src/app/geo/search/search.module.ts b/demo/src/app/geo/search/search.module.ts
@@ -23,9 +23,9 @@ import { IgoAppSearchModule } from '@igo2/integration';
 
 import { AppSearchComponent } from './search.component';
 import { AppSearchRoutingModule } from './search-routing.module';
-import {IgoActionbarModule} from '../../../../../packages/common/src/lib/action/actionbar/actionbar.module';
-import {IgoContextMenuModule} from '../../../../../packages/common/src/lib/context-menu/context-menu.module';
-import {IgoFeatureModule} from '../../../../../packages/geo/src/lib/feature/feature.module';
+import { IgoActionbarModule } from '../../../../../packages/common/src/lib/action/actionbar/actionbar.module';
+import { IgoContextMenuModule } from '../../../../../packages/common/src/lib/context-menu/context-menu.module';
+import { IgoFeatureModule } from '../../../../../packages/geo/src/lib/feature/feature.module';
 
 @NgModule({
   declarations: [AppSearchComponent],

diff --git a/packages/geo/src/lib/feature/feature-details/feature-details.component.html b/packages/geo/src/lib/feature/feature-details/feature-details.component.html
@@ -14,7 +14,11 @@
         {{property.key }}
       </td>
 
-      <td *ngIf="feature.properties.target === undefined && !isObject(property.value)" [innerHTML]=property.value>
+      <td *ngIf="feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value)" [innerHTML]=property.value>
+      </td>
+
+      <td *ngIf="feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value)">
+        <a href="{{property.value}}" target='_blank'>{{ 'igo.geo.targetHtmlUrl' | translate }} </a>
       </td>
 
       <td *ngIf="feature.properties.target === undefined && isObject(property.value)" [innerHTML]="property.value | json">
@@ -23,4 +27,4 @@
     </tr>
   </tbody>
 </table>
-<iframe *ngIf="feature && isObject(feature.properties) && feature.properties.target === 'iframe'" [src]='isUrl(feature.properties.url)'></iframe>
+<iframe *ngIf="feature && isObject(feature.properties) && feature.properties.target === 'iframe'" [src]='htmlSanitizer(feature.properties.url)'></iframe>
diff --git a/packages/geo/src/lib/feature/feature-details/feature-details.component.ts b/packages/geo/src/lib/feature/feature-details/feature-details.component.ts
@@ -42,14 +42,20 @@ export class FeatureDetailsComponent {
     private sanitizer: DomSanitizer
   ) { }
 
-  isUrl(value): SafeResourceUrl {
+  htmlSanitizer(value): SafeResourceUrl {
     return this.sanitizer.bypassSecurityTrustResourceUrl(value);
   }
 
   isObject(value) {
     return typeof value === 'object';
   }
 
+  isUrl(value) {
+    if (typeof (value) === 'string') {
+      return ((value.slice(0, 8) === 'https://') || (value.slice(0, 7) === 'http://')) ;
+    } else {return false; }
+  }
+
   filterFeatureProperties(feature) {
     const allowedFieldsAndAlias = feature.meta.alias;
     const properties = Object.assign({}, feature.properties);

diff --git a/packages/geo/src/lib/search/shared/sources/coordinates.ts b/packages/geo/src/lib/search/shared/sources/coordinates.ts
@@ -30,7 +30,6 @@ export class CoordinatesSearchResultFormatter {
 export class CoordinatesReverseSearchSource extends SearchSource implements ReverseSearch {
   static id = 'coordinatesreverse';
   static type = FEATURE;
-  static propertiesBlacklist: string[] = ['doc_type'];
 
   constructor(
     private http: HttpClient,
@@ -76,9 +75,10 @@ export class CoordinatesReverseSearchSource extends SearchSource implements Reve
         properties: {
           type: 'point',
           coordonnees: String(data[0]) + ', ' + String(data[1]),
+          format: 'degrés decimaux',
           systemeCoordonnees: 'WGS84',
-          GoogleMaps: GoogleLinks.getGoogleMapsLink(data[1], data[0]),
-          GoogleStreetView: GoogleLinks.getGoogleStreetViewLink(data[1], data[0])
+          GoogleMaps: GoogleLinks.getGoogleMapsLink(data[0], data[1]),
+          GoogleStreetView: GoogleLinks.getGoogleStreetViewLink(data[0], data[1])
         }
       },
       meta: {