feat(toast-panel): Add a warning icon/tooltip if the selected result …

…is out of the current view. (#541) * feat(demo) more example for each format * feat(toast-panel) add a warning icon/tooltip if the selected result is out of the current view * wip * wip * wip
infra-geo-ouverte · Oct 26, 2020 · d31366a · d31366a
1 parent d57948c
commit d31366a
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 4 deletions.
diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.html b/src/app/pages/portal/toast-panel/toast-panel.component.html
@@ -46,10 +46,15 @@
       mat-icon-button
       igoStopPropagation
       panelRightButton
-      [matTooltip]="'toastPanel.zoomOnFeatureTooltip' | translate"
+      [matTooltip]="((isSelectedResultOutOfView$ | async) ? 'toastPanel.zoomOnFeatureTooltipOutOfView' : 'toastPanel.zoomOnFeatureTooltip') | translate"
       matTooltipShowDelay="500"
       (click)="zoomTo()">
-      <mat-icon svgIcon="magnify-plus-outline"></mat-icon>
+      <mat-icon
+      [matBadge]="(isSelectedResultOutOfView$ | async) ? '!' : ''"
+      matBadgeColor="accent"
+      matBadgeSize="small"
+      [matBadgeHidden]="!(isSelectedResultOutOfView$ | async)"     
+      svgIcon="magnify-plus-outline"></mat-icon>
     </button>
 
     <button

diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.ts b/src/app/pages/portal/toast-panel/toast-panel.component.ts
@@ -10,7 +10,7 @@ import {
   OnDestroy
 } from '@angular/core';
 import { BehaviorSubject, Observable, combineLatest, Subscription } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { debounceTime, map, tap } from 'rxjs/operators';
 import olFormatGeoJSON from 'ol/format/GeoJSON';
 import olFeature from 'ol/Feature';
 import olPoint from 'ol/geom/Point';
@@ -32,7 +32,9 @@ import {
   featuresAreTooDeepInView,
   featureFromOl,
   getMarkerStyle,
-  getSelectedMarkerStyle
+  getSelectedMarkerStyle,
+  featuresAreOutOfView,
+  computeOlFeaturesExtent
 } from '@igo2/geo';
 import {
   Media,
@@ -137,6 +139,8 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
 
   private multiple$ = new BehaviorSubject(false);
   private isResultSelected$ = new BehaviorSubject(false);
+  public isSelectedResultOutOfView$ = new BehaviorSubject(false);
+  private isSelectedResultOutOfView$$: Subscription;
   private initialized = true;
 
   private format = new olFormatGeoJSON();
@@ -231,10 +235,30 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
     this.fullExtent = this.storageService.get('fullExtent') as boolean;
   }
 
+  private monitorResultOutOfView() {
+    this.isSelectedResultOutOfView$$ = combineLatest([
+      this.map.viewController.state$,
+      this.resultSelected$
+    ])
+    .pipe(debounceTime(100))
+    .subscribe((bunch) => {
+      const selectedResult = bunch[1];
+      if (!selectedResult) {
+        this.isSelectedResultOutOfView$.next(false);
+        return;
+      }
+      const selectedOlFeature = featureToOl(selectedResult.data, this.map.projection);
+      const selectedOlFeatureExtent = computeOlFeaturesExtent(this.map, [selectedOlFeature]);
+      this.isSelectedResultOutOfView$.next(featuresAreOutOfView(this.map, selectedOlFeatureExtent));
+    });
+  }
+
+
   ngOnInit() {
     this.store.entities$.subscribe(() => {
       this.initialized = true;
     });
+    this.monitorResultOutOfView();
 
     let latestResult;
     let trigger;
@@ -371,6 +395,9 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
     if (this.resultOrResolution$$) {
       this.resultOrResolution$$.unsubscribe();
     }
+    if (this.isSelectedResultOutOfView$$) {
+      this.isSelectedResultOutOfView$$.unsubscribe();
+    }
   }
 
   private buildResultEmphasis(

diff --git a/src/app/pages/portal/toast-panel/toast-panel.module.ts b/src/app/pages/portal/toast-panel/toast-panel.module.ts
@@ -10,10 +10,12 @@ import { IgoLanguageModule } from '@igo2/core';
 import { IgoFeatureModule, IgoSearchResultsModule } from '@igo2/geo';
 
 import { ToastPanelComponent } from './toast-panel.component';
+import { MatBadgeModule } from '@angular/material/badge';
 
 @NgModule({
   imports: [
     CommonModule,
+    MatBadgeModule,
     MatIconModule,
     MatButtonModule,
     MatTooltipModule,

diff --git a/src/contexts/_contexts.json b/src/contexts/_contexts.json
@@ -26,5 +26,9 @@
   {
     "uri": "testExport",
     "title": "Test export"
+  },
+  {
+    "uri": "variousFormats",
+    "title": "Divers format à titre d'exemple"
   }
 ]
diff --git a/src/contexts/variousFormats.json b/src/contexts/variousFormats.json
@@ -0,0 +1,72 @@
+{
+    "uri": "variousFormats",
+    "base": "_base",
+    "layers": [
+      {
+        "title": "MSP Tel. Urgence",
+        "sourceOptions": {
+          "type": "wms",
+          "url": "https://geoegl.msp.gouv.qc.ca/apis/ws/igo_gouvouvert.fcgi",
+          "params": {
+            "layers": "telephone_urg",
+            "version": "1.3.0"
+          },
+          "queryable": true,
+          "queryFormat": "gml2",
+          "queryTitle": "desclocal"
+        }
+      },
+      {
+        "title": "MVT",
+        "visible": true,
+        "sourceOptions": {
+          "queryable": true,
+          "queryTitle": "nomcartrou",
+          "type": "mvt",
+          "url": "http://geoegl.msp.gouv.qc.ca/apis/ws/swtq?mode=tile&tilemode=gmap&tile={x}+{y}+{z}&layers=lieuhabite&map.imagetype=mvt"
+        }
+      },
+      {
+        "title": "WFS",
+        "sourceOptions": {
+          "type": "wfs",
+          "url": "https://geoegl.msp.gouv.qc.ca/apis/ws/igo_gouvouvert.fcgi",
+          "queryable": true,
+          "params": {
+            "featureTypes": "vg_observation_v_autre_wmst",
+            "fieldNameGeometry": "geometry",
+            "maxFeatures": 1000,
+            "version": "2.0.0",
+            "outputFormatDownload": "shp"
+          },
+          "sourceFields": [
+            { "name": "code_municipalite", "alias": "# de la municipalitée" },
+            { "name": "date_observation", "allowedOperatorsType": "time" },
+            { "name": "urgence", "values": ["Immédiate", "Inconnue"], "allowedOperatorsType": "basic" }
+          ],
+          "ogcFilters": {
+            "allowedOperatorsType": "all",
+            "enabled": true,
+            "editable": true,
+            "filters": {
+              "operator": "PropertyIsEqualTo",
+              "propertyName": "code_municipalite",
+              "expression": "10043"
+            }
+          }
+        }
+      },
+      {
+        "title": "Cluster",
+        "visible": true,
+        "sourceOptions": {
+          "queryable": true,
+          "queryTitle": "identificationDesTravaux",
+          "url": "http://geoegl.msp.gouv.qc.ca/apis/ws/swtq?service=WFS&request=GetFeature&version=1.1.0&typename=chantiers_mtmdet&outputFormat=geojson",
+          "type": "cluster",
+          "distance": 50
+        }
+      }
+    ]
+  }
+
diff --git a/src/locale/en.json b/src/locale/en.json
@@ -11,6 +11,7 @@
     "backToList": "Return to the list",
     "zoomOnFeature": "Zoom on feature",
     "zoomOnFeatureTooltip": "Zoom on selected feature ( shortcut = z )",
+    "zoomOnFeatureTooltipOutOfView": "The feature is out of view. Zoom on selected feature ( shortcut = z )",
     "zoomOnFeatures": "Zoom on all features",
     "zoomOnFeaturesTooltip": "Zoom on all the selected features",
     "zoomAuto": "Zoom auto",

diff --git a/src/locale/fr.json b/src/locale/fr.json
@@ -10,6 +10,7 @@
     "backToList": "Retourner à la liste",
     "zoomOnFeature": "Zoom sur l'élément",
     "zoomOnFeatureTooltip": "Zoomer sur l'élément sélectionné ( raccouci clavier = z )",
+    "zoomOnFeatureTooltipOutOfView": "L'élément est hors de la vue. Zoomer sur l'élément sélectionné ( raccouci clavier = z )",
     "zoomOnFeatures": "Zoom sur les éléments",
     "zoomOnFeaturesTooltip": "Zoomer sur les éléments sélectionnés",
     "zoomAuto": "Zoom auto",