Skip to content

Commit

Permalink
Fix #1194: Style selector for wms (#1246)
Browse files Browse the repository at this point in the history
* Fix #1194. First commits

* add error handling and legend

* Add manual edit style. Add translations and tests

* fix button translation
  • Loading branch information
offtherailz authored and mbarto committed Nov 4, 2016
1 parent b956654 commit 311d212
Show file tree
Hide file tree
Showing 18 changed files with 463 additions and 20 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"react-motion": "0.4.4",
"react-router": "2.4.0",
"react-router-redux": "2.1.0",
"react-select": "1.0.0-beta14",
"react-select": "1.0.0-rc.1",
"react-transform-catch-errors": "1.0.2",
"redbox-react": "1.2.4",
"redux-devtools": "3.1.1",
Expand Down
24 changes: 23 additions & 1 deletion web/client/actions/__tests__/layers-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ var {
removeLayer,
showSettings,
hideSettings,
updateSettings
updateSettings,
getLayerCapabilities
} = require('../layers');

describe('Test correctness of the layers actions', () => {
Expand Down Expand Up @@ -167,4 +168,25 @@ describe('Test correctness of the layers actions', () => {
expect(action.type).toBe(UPDATE_SETTINGS);
expect(action.options).toEqual({opacity: 0.5, size: 500});
});
it('get layer capabilities', (done) => {
const layer = {
id: "TEST_ID",
name: 'testworkspace:testlayer',
title: 'Layer',
visibility: true,
storeIndex: 9,
type: 'shapefile',
url: 'base/web/client/test-resources/geoserver/wms'
};
const actionCall = getLayerCapabilities(layer);
expect(actionCall).toExist();
actionCall((action)=> {
expect(action).toExist();
expect(action.options).toExist();
expect(action.type === UPDATE_NODE);
if (action.options.capabilities) {
done();
}
});
});
});
1 change: 0 additions & 1 deletion web/client/actions/catalog.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const RECORD_LIST_LOAD_ERROR = 'RECORD_LIST_LOAD_ERROR';
const CHANGE_CATALOG_FORMAT = 'CHANGE_CATALOG_FORMAT';
const ADD_LAYER_ERROR = 'ADD_LAYER_ERROR';
const CATALOG_RESET = 'CATALOG_RESET';

function recordsLoaded(options, result) {
return {
type: RECORD_LIST_LOADED,
Expand Down
19 changes: 13 additions & 6 deletions web/client/actions/layers.js
Original file line number Diff line number Diff line change
Expand Up @@ -185,39 +185,46 @@ function getDescribeLayer(url, layer, options) {
}

function getLayerCapabilities(layer, options) {
// geoserver's specific.
// geoserver's specific. TODO parse layer.capabilitiesURL.
let reqUrl = layer.url;
let urlParts = reqUrl.split("/geoserver/");
if (urlParts.length === 2) {
let layerParts = layer.name.split(":");
if (layerParts.length === 2) {
reqUrl = urlParts[0] + "/geoserver/" + layerParts [0] + "/" + layerParts[1] + "/" + urlParts[1];
}

}
return (dispatch) => {
// TODO, look ad current cached capabilities;
dispatch(updateNode(layer.id, "id", {
capabilitiesLoading: true
}));
return WMS.getCapabilities(reqUrl, options).then((capabilities) => {
let layers = _.get(capabilities, "capability.layer.layer");
let layerCapability;

layerCapability = _.head(layers.filter( ( capability ) => {
if (layer.name.split(":").length === 2 && capability.name.split(":").length === 2 ) {
if (layer.name.split(":").length === 2 && capability.name && capability.name.split(":").length === 2 ) {
return layer.name === capability.name;
} else if (capability.name.split(":").length === 2) {
} else if (capability.name && capability.name.split(":").length === 2) {
return (layer.name === capability.name.split(":")[1]);
} else if (layer.name.split(":").length === 2) {
return layer.name.split(":")[1] === capability.name;
}
return layer.name === capability.name;
}));
if (layerCapability) {
dispatch(updateNode(layer.id, "id", {capabilities: layerCapability, boundingBox: layerCapability.latLonBoundingBox}));
dispatch(updateNode(layer.id, "id", {
capabilities: layerCapability,
capabilitiesLoading: null,
boundingBox: layerCapability.latLonBoundingBox,
availableStyles: layerCapability.style && (Array.isArray(layerCapability.style) ? layerCapability.style : [layerCapability.style])
}));
}
// return dispatch(updateNode(layer.id, "id", {capabilities: capabilities || {"error": "no describe Layer found"}}));

}).catch((error) => {
dispatch(updateNode(layer.id, "id", {capabilities: {error: "error getting capabilities", details: error}} ));
dispatch(updateNode(layer.id, "id", {capabilitiesLoading: null, capabilities: {error: "error getting capabilities", details: error}} ));

// return dispatch(updateNode(layer.id, "id", {capabilities: capabilities || {"error": "no describe Layer found"}}));

Expand Down
1 change: 0 additions & 1 deletion web/client/api/WMS.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ const Api = {
resolve(axios.get(parseUrl(getCapabilitiesUrl)).then((response) => {
let json = unmarshaller.unmarshalString(response.data);
return json && json.value;

}));
});
});
Expand Down
3 changes: 3 additions & 0 deletions web/client/components/TOC/DefaultLayer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ var DefaultLayer = React.createClass({
node: React.PropTypes.object,
settings: React.PropTypes.object,
propertiesChangeHandler: React.PropTypes.func,
retrieveLayerData: React.PropTypes.func,
onToggle: React.PropTypes.func,
onZoom: React.PropTypes.func,
onSettings: React.PropTypes.func,
Expand Down Expand Up @@ -56,6 +57,7 @@ var DefaultLayer = React.createClass({
onToggle: () => {},
onZoom: () => {},
onSettings: () => {},
retrieveLayerData: () => {},
activateRemoveLayer: false,
activateLegendTool: false,
activateSettingsTool: false,
Expand Down Expand Up @@ -106,6 +108,7 @@ var DefaultLayer = React.createClass({
tools.push(
<SettingsModal key="toolsettingsmodal" options={this.props.modalOptions}
{...this.props.settingsOptions}
retrieveLayerData={this.props.retrieveLayerData}
hideSettings={this.props.hideSettings}
settings={this.props.settings}
element={this.props.node}
Expand Down
38 changes: 29 additions & 9 deletions web/client/components/TOC/fragments/SettingsModal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const Dialog = require('../../misc/Dialog');
const ConfirmButton = require('../../buttons/ConfirmButton');
const General = require('./settings/General');
const Display = require('./settings/Display');
const WMSStyle = require('./settings/WMSStyle');
const {Portal} = require('react-overlays');
const assign = require('object-assign');
const Message = require('../../I18N/Message');
Expand All @@ -28,6 +29,7 @@ const SettingsModal = React.createClass({
hideSettings: React.PropTypes.func,
updateNode: React.PropTypes.func,
removeNode: React.PropTypes.func,
retrieveLayerData: React.PropTypes.func,
titleText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
opacityText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
saveText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
Expand All @@ -54,12 +56,13 @@ const SettingsModal = React.createClass({
hideSettings: () => {},
updateNode: () => {},
removeNode: () => {},
retrieveLayerData: () => {},
asModal: true,
buttonSize: "large",
closeGlyph: "",
panelStyle: {
minWidth: "300px",
zIndex: 100,
zIndex: 2000,
position: "absolute",
// overflow: "auto",
top: "100px",
Expand Down Expand Up @@ -98,22 +101,39 @@ const SettingsModal = React.createClass({
);
this.props.hideSettings();
},
render() {
const general = (<General
renderGeneral() {
return (<General
updateSettings={this.updateParams}
element={this.props.element}
groups={this.props.groups}
key="general"
on/>);
const display = (<Display
opacityText={this.props.opacityText}
element={this.props.element}
settings={this.props.settings}
onChange={(key, value) => this.updateParams({[key]: value}, this.props.realtimeUpdate)} />);
},
renderDisplay() {
return (<Display
opacityText={this.props.opacityText}
element={this.props.element}
settings={this.props.settings}
onChange={(key, value) => this.updateParams({[key]: value}, this.props.realtimeUpdate)} />);
},
renderStyleTab() {
if (this.props.element.type === "wms") {
return (<WMSStyle
retrieveLayerData={this.props.retrieveLayerData}
updateSettings={this.updateParams}
element={this.props.element}
key="style"
o/>);
}
},
render() {
const general = this.renderGeneral();
const display = this.renderDisplay();
const style = this.renderStyleTab();
const tabs = (<Tabs defaultActiveKey={1} id="layerProperties-tabs">
<Tab eventKey={1} title={<Message msgId="layerProperties.general" />}>{general}</Tab>
<Tab eventKey={2} title={<Message msgId="layerProperties.display" />}>{display}</Tab>
<Tab eventKey={3} title={<Message msgId="layerProperties.style" />} disabled>Tab 3 content</Tab>
<Tab eventKey={3} title={<Message msgId="layerProperties.style" />} disabled={!style} >{style}</Tab>
</Tabs>);
const footer = (<span role="footer">
{this.props.includeCloseButton ? <Button bsSize={this.props.buttonSize} onClick={this.onClose}>{this.props.closeText}</Button> : <span/>}
Expand Down
82 changes: 82 additions & 0 deletions web/client/components/TOC/fragments/settings/WMSStyle.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/**
* 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.
*/

var React = require('react');
const Message = require('../../../I18N/Message');
const Select = require('react-select');
const {Button, Glyphicon, Alert} = require('react-bootstrap');

/**
* General Settings form for layer
*/
const WMSStyle = React.createClass({
propTypes: {
retrieveLayerData: React.PropTypes.func,
updateSettings: React.PropTypes.func,
element: React.PropTypes.object,
groups: React.PropTypes.array
},
getDefaultProps() {
return {
element: {},
retrieveLayerData: () => {},
updateSettings: () => {}
};
},
renderLegend() {
// legend can not added because of this issue
// https://github.com/highsource/ogc-schemas/issues/183
return null;
},
renderError() {
if (this.props.element && this.props.element.capabilities && this.props.element && this.props.element.capabilities.error) {
return <Alert bsStyle="danger"><Message msgId="layerProperties.styleListLoadError" /></Alert>;
}
},
render() {
let options = [{label: "Default Style", value: ""}].concat((this.props.element.availableStyles || []).map((item) => {
return {label: item.title || item.name, value: item.name};
}));
let currentStyleIndex = this.props.element.style && this.props.element.availableStyles && this.props.element.availableStyles.findIndex( el => el.name === this.props.element.style);
if (!(currentStyleIndex >= 0) && this.props.element.style) {
options.push({label: this.props.element.style, value: this.props.element.style });
}
return (<form ref="style">
<Select.Creatable
key="styles-dropdown"
options={options}
isLoading={this.props.element && this.props.element.capabilitiesLoading}
value={this.props.element.style || ""}
onOpen={() => {
// automatic retrieve if availableStyles are not available or capabilities is not present
// that means you don't have a list and you didn't try to load it.
if (this.props.element && !(this.props.element.capabilities && this.props.element.availableStyles)) {
this.props.retrieveLayerData(this.props.element);
}
}}
promptTextCreator={(value) => {
return <Message msgId="layerProperties.styleCustom" msgParams={{value}} />;
}}
onChange={(selected) => {
this.updateEntry("style", {target: {value: (selected && selected.value) || ""}});
}}
/>
<br />
{this.renderLegend()}
{this.renderError()}
<Button bsStyle="primary" style={{"float": "right"}} onClick={() => this.props.retrieveLayerData(this.props.element)}><Glyphicon glyph="refresh" /><Message msgId="layerProperties.stylesRefreshList" /></Button>
<br />
</form>);
},
updateEntry(key, event) {
let value = event.target.value;
this.props.updateSettings({[key]: value});
}
});

module.exports = WMSStyle;
Loading

0 comments on commit 311d212

Please sign in to comment.