Introduce the query panel component

contribs/gmf/apps/desktop/index.html.ejs

@@ -84,6 +84,10 @@
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Profile'|translate}}">
               <span class="fa fa-chart-area"></span>
             </button>
+            <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.queryPanelActive"
+              data-toggle="tooltip" data-placement="left" data-original-title="{{'Selection'|translate}}">
+              <span class="fa fa-info"></span>
+            </button>
             <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.importDataSourceActive"
                     data-toggle="tooltip" data-placement="left" data-original-title="{{'Import Layer'|translate}}">
               <span class="fa fa-upload"></span>
@@ -193,6 +197,15 @@
               </div>
             </div>
           </div>
+          <div ng-show="mainCtrl.queryPanelActive" class="row">
+            <div class="col-sm-12">
+              <div class="gmf-app-tools-content-heading">
+                {{'Selection'|translate}}
+                <a class="btn close" ng-click="mainCtrl.queryPanelActive = false">&times;</a>
+              </div>
+              <ngeo-query-panel></ngeo-query-panel>
+            </div>
+          </div>
           <div ng-show="mainCtrl.importDataSourceActive" class="row">
             <div class="col-sm-12">
               <div class="gmf-app-tools-content-heading">

contribs/gmf/apps/desktop_alt/index.html.ejs

@@ -85,6 +85,10 @@
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Street View'|translate}}">
               <span class="fa fa-street-view"></span>
             </button>
+            <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.queryPanelActive"
+              data-toggle="tooltip" data-placement="left" data-original-title="{{'Selection'|translate}}">
+              <span class="fa fa-info"></span>
+            </button>
             <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.importDataSourceActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Import Layer'|translate}}">
               <span class="fa fa-upload"></span>
@@ -225,6 +229,15 @@
               </ngeo-googlestreetview>
             </div>
           </div>
+          <div ng-show="mainCtrl.queryPanelActive" class="row">
+            <div class="col-sm-12">
+              <div class="gmf-app-tools-content-heading">
+                {{'Selection'|translate}}
+                <a class="btn close" ng-click="mainCtrl.queryPanelActive = false">&times;</a>
+              </div>
+              <ngeo-query-panel></ngeo-query-panel>
+            </div>
+          </div>
           <div ng-show="mainCtrl.importDataSourceActive" class="row">
             <div class="col-sm-12">
               <div class="gmf-app-tools-content-heading">

contribs/gmf/src/controllers/AbstractDesktopController.js

@@ -10,6 +10,7 @@ import gmfRasterComponent from 'gmf/raster/component.js';
 import ngeoMapswipeModule from 'ngeo/map/swipe.js';
 import ngeoDrawFeatures from 'ngeo/draw/features.js';
 import ngeoMiscToolActivate from 'ngeo/misc/ToolActivate.js';
+import ngeoQueryPanelComponent from 'ngeo/query/panelComponent.js';
 import gmfImportModule from 'gmf/import/module.js';
 import olCollection from 'ol/Collection.js';
 import {listen} from 'ol/events.js';
@@ -62,6 +63,11 @@ export class AbstractDesktopController extends AbstractAPIController {
      */
     this.editFeatureActive = false;
 
+    /**
+     * @type {boolean}
+     */
+    this.queryPanelActive = false;
+
     /**
      * @type {boolean}
      */
@@ -270,6 +276,7 @@ export class AbstractDesktopController extends AbstractAPIController {
  * @hidden
  */
 const module = angular.module('GmfAbstractDesktopControllerModule', [
+  ngeoQueryPanelComponent.name,
   gmfControllersAbstractAPIController.name,
   gmfContextualdataModule.name,
   gmfEditingModule.name,

contribs/gmf/src/controllers/desktop.scss

@@ -873,3 +873,12 @@ ngeo-googlestreetview {
   height: calc(100% - 3.75rem);
   width: $streeview-width;
 }
+
+/**
+ * Ngeo Query Panel Component
+ */
+ngeo-query-panel {
+  .ngeo-query-panel-actions {
+    margin: 2rem 0 0 0;
+  }
+}

examples/base.css

@@ -0,0 +1,15 @@
+.btn.btn-default {
+  background-color: white;
+  border-color: #ccc;
+  color: #333;
+}
+
+.btn.btn-default.active {
+  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+}
+
+.btn.btn-default.active,
+.btn.btn-default.hover {
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}

examples/query.css

@@ -1,5 +1,27 @@
 
+#map,
+.app-query {
+  float: left;
+}
+
 #map {
   width: 600px;
   height: 400px;
 }
+
+.app-query {
+  margin: 1rem;
+}
+
+#desc {
+  clear: both;
+}
+
+ngeo-query-panel {
+  display: block;
+  margin: 1rem 0 0 0;
+}
+
+ngeo-query-panel .ngeo-query-panel-actions {
+  margin: 1rem 0 0 0;
+}

examples/query.html

@@ -13,42 +13,59 @@
       ngeo-map="ctrl.map">
     </div>
 
-    <ngeo-query
+    <div class='app-query'>
+      <ngeo-query
         active="ctrl.queryActive"
         autoclear="ctrl.queryAutoClear"
         map="::ctrl.map">
-    </ngeo-query>
+      </ngeo-query>
+
+      <button
+        ngeo-btn=""
+        class="btn btn-default"
+        ng-model="ctrl.getSetQueryActive"
+        ng-model-options="{getterSetter: true}">Query</button>
+
+      <ngeo-query-panel ng-if="ctrl.queryActive"></ngeo-query-panel>
+    </div>
 
     <p id="desc">
-      This example shows how to use the
+      This example shows how to configure and use the
       <code>
         <a
           href="../apidoc/ngeo.query.component.html"
           title="Read our documentation">ngeo-query</a>
       </code>
-      component. It also shows how the
+      and
+      <code>
+        <a
+          href="../apidoc/ngeo.query.panelComponent.html"
+          title="Read our documentation">ngeo-query-panel</a>
+      </code>
+      components. It also shows how the
       <code>
         <a
           href="../apidoc/ngeo.misc.ToolActivateMgr.html"
           title="Read our documentation">ngeo.misc.ToolActivate</a>
       </code>
       can be used to make the component inactive when an other tool
-      becomes active.  The "Dummy" button here does nothing, but when
-      toggled the query component becomes inactive. Click on the map to
-      issue a query. Hold down the "ctrl" key (meta on MAC) then click twice
-      in the map to draw a box instead. Hold the A key to add the results to
-      existing ones. Hold the X key to remove the results from the existing
-      ones.
+      becomes active. You can how queries are made on the map and what
+      to do with the results using the panel. You can also temporarily
+      change them using keyboard shortcuts:
+      <ul>
+        <li>
+          Hold down the "ctrl" key (meta on MAC) to set the query mode
+          to drawing boxes on the map.
+        </li>
+        <li>
+          Hold the A key to add the results to existing ones.
+        </li>
+        <li>
+          Hold the X key to remove the results from the existing ones.
+        </li>
+      </ul>
     </p>
 
-    <button
-      ngeo-btn=""
-      class="btn btn-info"
-      ng-model="ctrl.getSetDummyActive"
-      ng-model-options="{getterSetter: true}">Dummy</button>
-
-    <span>Mode: {{ ctrl.ngeoQueryModeSelector.mode }}</span>,
-    <span>Action: {{ ctrl.ngeoQueryModeSelector.action }}</span>
     <br />
 
     <app-queryresult></app-queryresult>

examples/query.js

@@ -1,5 +1,6 @@
 import angular from 'angular';
 import {MAPSERVER_PROXY, MAPSERVER_WFS_FEATURE_NS} from './url.js';
+import './base.css';
 import './query.css';
 import EPSG2056 from '@geoblocks/proj/src/EPSG_2056.js';
 
@@ -12,6 +13,7 @@ import ngeoMiscBtnComponent from 'ngeo/misc/btnComponent.js';
 import ngeoMiscToolActivate from 'ngeo/misc/ToolActivate.js';
 import ngeoMiscToolActivateMgr from 'ngeo/misc/ToolActivateMgr.js';
 import ngeoQueryComponent from 'ngeo/query/component.js';
+import ngeoQueryPanelComponent from 'ngeo/query/panelComponent.js';
 import ngeoQueryModule from 'ngeo/query/module.js';
 
 import olMap from 'ol/Map.js';
@@ -30,6 +32,7 @@ const module = angular.module('app', [
   ngeoMiscBtnComponent.name,
   ngeoMiscToolActivateMgr.name,
   ngeoQueryComponent.name,
+  ngeoQueryPanelComponent.name,
   ngeoQueryModule.name,
 ]);
 
@@ -192,10 +195,10 @@ function MainController(
   }));
 
   const queryToolActivate = new ngeoMiscToolActivate(this, 'queryActive');
-  ngeoToolActivateMgr.registerTool('mapTools', queryToolActivate, true);
+  ngeoToolActivateMgr.registerTool('mapTools', queryToolActivate);
 
   const dummyToolActivate = new ngeoMiscToolActivate(this, 'dummyActive');
-  ngeoToolActivateMgr.registerTool('mapTools', dummyToolActivate);
+  ngeoToolActivateMgr.registerTool('mapTools', dummyToolActivate, true);
 
 }
 
@@ -204,11 +207,11 @@ function MainController(
  * @param {boolean|undefined} val Value.
  * @return {boolean|undefined} Value.
  */
-MainController.prototype.getSetDummyActive = function(val) {
+MainController.prototype.getSetQueryActive = function(val) {
   if (val !== undefined) {
-    this.dummyActive = val;
+    this.queryActive = val;
   } else {
-    return this.dummyActive;
+    return this.queryActive;
   }
 };