Query panel code base to kickoff development

package.json

@@ -108,6 +108,7 @@
     "react-color": "2.4.0",
     "react-confirm-button": "0.0.2",
     "react-copy-to-clipboard": "4.1.0",
+    "react-dock": "0.2.3",
     "react-dom": "0.14.8",
     "react-draggable": "1.3.4",
     "react-dnd": "2.1.3",
@@ -133,7 +134,10 @@
     "redux-undo": "0.5.0",
     "reselect": "2.5.1",
     "shpjs": "3.3.2",
-    "turf": "3.0.10",
+    "turf-buffer": "3.0.10",
+    "turf-intersect": "3.0.10",
+    "turf-union": "3.0.10",
+    "turf-bbox": "3.0.10",
     "url": "0.10.3",
     "w3c-schemas": "1.3.1",
     "xml2js": "0.4.17"

web/client/actions/wfsquery.js

@@ -0,0 +1,144 @@
+/**
+ * Copyright 2016, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const FEATURE_TYPE_SELECTED = 'FEATURE_TYPE_SELECTED';
+const FEATURE_TYPE_LOADED = 'FEATURE_TYPE_LOADED';
+const FEATURE_LOADED = 'FEATURE_LOADED';
+const FEATURE_TYPE_ERROR = 'FEATURE_TYPE_ERROR';
+const FEATURE_ERROR = 'FEATURE_ERROR';
+const QUERY_RESULT = 'QUERY_RESULT';
+const QUERY_ERROR = 'QUERY_ERROR';
+const RESET_QUERY = 'RESET_QUERY';
+
+const axios = require('../libs/ajax');
+function featureTypeSelected(url, typeName) {
+    return {
+        type: FEATURE_TYPE_SELECTED,
+        url,
+        typeName
+    };
+}
+function featureTypeLoaded(typeName, featureType) {
+    return {
+        type: FEATURE_TYPE_LOADED,
+        typeName,
+        featureType
+    };
+}
+
+function featureTypeError(typeName, error) {
+    return {
+        type: FEATURE_TYPE_ERROR,
+        typeName,
+        error
+    };
+}
+
+function featureLoaded(typeName, feature) {
+    return {
+        type: FEATURE_LOADED,
+        typeName,
+        feature
+    };
+}
+
+function featureError(typeName, error) {
+    return {
+        type: FEATURE_ERROR,
+        typeName,
+        error
+    };
+}
+
+function querySearchResponse(result) {
+    return {
+        type: QUERY_RESULT,
+        result
+    };
+}
+
+function queryError(error) {
+    return {
+        type: QUERY_ERROR,
+        error
+    };
+}
+
+function describeFeatureType(baseUrl, typeName) {
+    return (dispatch) => {
+        return axios.get(baseUrl + '?service=WFS&version=1.1.0&request=DescribeFeatureType&typeName=' + typeName + '&outputFormat=application/json').then((response) => {
+            if (typeof response.data === 'object') {
+                dispatch(featureTypeLoaded(typeName, response.data));
+            } else {
+                try {
+                    JSON.parse(response.data);
+                } catch(e) {
+                    dispatch(featureTypeError(typeName, 'Error from WFS: ' + e.message));
+                }
+
+            }
+
+        }).catch((e) => {
+            dispatch(featureTypeError(typeName, e));
+        });
+    };
+}
+
+function loadFeature(baseUrl, typeName) {
+    return (dispatch) => {
+        return axios.get(baseUrl + '?service=WFS&version=1.1.0&request=GetFeature&typeName=' + typeName + '&outputFormat=application/json').then((response) => {
+            if (typeof response.data === 'object') {
+                dispatch(featureLoaded(typeName, response.data));
+            } else {
+                try {
+                    JSON.parse(response.data);
+                } catch(e) {
+                    dispatch(featureError(typeName, 'Error from WFS: ' + e.message));
+                }
+
+            }
+
+        }).catch((e) => {
+            dispatch(featureError(typeName, e));
+        });
+    };
+}
+
+function query(seachURL, data) {
+    return (dispatch) => {
+        return axios.post(seachURL + '?service=WFS&&outputFormat=json', data, {
+          timeout: 60000,
+          headers: {'Accept': 'application/json', 'Content-Type': 'application/json'}
+        }).then((response) => {
+            dispatch(querySearchResponse(response.data));
+        }).catch((e) => {
+            dispatch(queryError(e));
+        });
+    };
+}
+
+function resetQuery() {
+    return {
+        type: RESET_QUERY
+    };
+}
+
+module.exports = {
+    FEATURE_TYPE_SELECTED,
+    FEATURE_TYPE_LOADED,
+    FEATURE_LOADED,
+    FEATURE_TYPE_ERROR,
+    FEATURE_ERROR,
+    QUERY_RESULT,
+    QUERY_ERROR,
+    RESET_QUERY,
+    featureTypeSelected,
+    describeFeatureType,
+    loadFeature,
+    query,
+    resetQuery
+};

web/client/components/TOC/DefaultLayer.jsx

@@ -25,6 +25,7 @@ var DefaultLayer = React.createClass({
         propertiesChangeHandler: React.PropTypes.func,
         retrieveLayerData: React.PropTypes.func,
         onToggle: React.PropTypes.func,
+        onToggleQuerypanel: React.PropTypes.func,
         onZoom: React.PropTypes.func,
         onSettings: React.PropTypes.func,
         style: React.PropTypes.object,
@@ -36,6 +37,7 @@ var DefaultLayer = React.createClass({
         activateLegendTool: React.PropTypes.bool,
         activateRemoveLayer: React.PropTypes.bool,
         activateSettingsTool: React.PropTypes.bool,
+        activateQueryTool: React.PropTypes.bool,
         activateZoomTool: React.PropTypes.bool,
         settingsText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         opacityText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
@@ -58,9 +60,11 @@ var DefaultLayer = React.createClass({
             onZoom: () => {},
             onSettings: () => {},
             retrieveLayerData: () => {},
+            onToggleQuerypanel: () => {},
             activateRemoveLayer: false,
             activateLegendTool: false,
             activateSettingsTool: false,
+            activateQueryTool: false,
             activateZoomTool: false,
             includeDeleteButtonInSettings: false,
             modalOptions: {},
@@ -142,6 +146,16 @@ var DefaultLayer = React.createClass({
                         onClick={(node) => this.props.onToggle(node.id, node.expanded)}/>
                 );
         }
+        if (this.props.activateQueryTool) {
+            tools.push(
+                <LayersTool key="toolquery"
+                        className="toc-queryTool"
+                        ref="target"
+                        style={{"float": "right", cursor: "pointer"}}
+                        glyph="search"
+                        onClick={(node) => this.props.onToggleQuerypanel(node.url, node.name)}/>
+                );
+        }
         if (this.props.activateZoomTool && this.props.node.bbox && !this.props.node.loadingError) {
             tools.push(
                 <LayersTool key="toolzoom"

web/client/components/TOC/fragments/css/settingsModal.css

@@ -1,4 +1,4 @@
-// all this css rules are related to the slider, copy paste from advanced layertree example
+/* all this css rules are related to the slider, copy paste from advanced layertree example */
 
 .noUi-target,
 .noUi-target * {