-
Notifications
You must be signed in to change notification settings - Fork 383
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FeatureInfo coordinates in aeronautical format (#3676)
- Loading branch information
1 parent
db35bee
commit c461d1b
Showing
14 changed files
with
281 additions
and
93 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
web/client/components/data/identify/coordinates/Coordinate.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| /* | ||
| * Copyright 2019, 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 React = require('react'); | ||
| const Editor = require('./Editor'); | ||
| const Viewer = require('./Viewer'); | ||
|
|
||
| /** | ||
| * Visualize the coordinate editor or viewer for the point clicked | ||
| * @prop {object} coordinate coordinate in format `lat` `lon` | ||
| * @prop {string} formatCoord `decimal` or `aeronautical` | ||
| * @prop {boolean} edit true to visualize in edit mode | ||
| * @prop {function} onChange handler to change the point coordinates. 2st argument is the key `lat` or `lon`, 2nd argument is the new numeric value. | ||
| * @prop {function} onChangeFormat handler to change the formatCoord. 1st argument is the formatCoord string. | ||
| */ | ||
| module.exports = ({ | ||
| coordinate = {}, | ||
| formatCoord, | ||
| edit, | ||
| onChange = () => {}, | ||
| onChangeFormat = () => {} | ||
| }) => | ||
| edit ? | ||
| (<Editor | ||
| removeVisible={false} | ||
| formatCoord={formatCoord} | ||
| coordinate={coordinate || {lat: "", lon: ""}} | ||
| onChange={onChange} | ||
| onChangeFormat={onChangeFormat} | ||
| />) | ||
| : (<Viewer | ||
| className="text-center" | ||
| formatCoord={formatCoord} | ||
| coordinate={coordinate || { lat: "", lon: "" }} | ||
| />); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
web/client/components/data/identify/coordinates/Viewer.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| /* | ||
| * Copyright 2019, 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 React = require('react'); | ||
| const { Row, Col } = require('react-bootstrap'); | ||
| const {isNil} = require('lodash'); | ||
| const NumberFormat = require('../../../I18N/Number'); | ||
| const decimalToAeronautical = require('../../../misc/coordinateeditors/enhancers/decimalToAeronautical'); | ||
|
|
||
| /** | ||
| * Format 1 decimal coordinate into degrees, minutes, seconds, direction format. | ||
| * @prop {value} value to format | ||
| * | ||
| */ | ||
| const AeronauticalCoordinate = decimalToAeronautical(({ | ||
| degrees = 0, | ||
| minutes = 0, | ||
| seconds = 0, | ||
| direction, | ||
| integerFormat, | ||
| decimalFormat | ||
| }) => (<span className="coordinate-dms"> | ||
| <NumberFormat key="latD" numberParams={integerFormat} value={degrees} /> | ||
| <span>° </span><NumberFormat key="latM" numberParams={integerFormat} value={minutes} /><span>' </span> | ||
| <NumberFormat key="latS" numberParams={decimalFormat} value={seconds} /><span>'' </span> | ||
| <span>{direction}</span> | ||
| </span>)); | ||
|
|
||
| /** | ||
| * Display coordinates in "decimal" or "aeronautical" formats. | ||
| * TODO: maybe is better move formatting components in some common place. | ||
| */ | ||
| module.exports = ({ | ||
| integerFormat = {style: "decimal", minimumIntegerDigits: 2, maximumFractionDigits: 0}, | ||
| decimalFormat = {style: "decimal", minimumIntegerDigits: 2, maximumFractionDigits: 4, minimumFractionDigits: 4}, | ||
| coordinate = {}, | ||
| formatCoord = "decimal", | ||
| className | ||
| }) => | ||
| (<Row className={className}> | ||
| { | ||
| (<Col xs={12}> | ||
| {(isNil(coordinate.lat) || isNil(coordinate.lon)) | ||
| ? null | ||
| : formatCoord === "decimal" | ||
| ? <div className="ms-coordinates-decimal">Lat: <NumberFormat value={(Math.round(coordinate.lat * 100000) / 100000)} /> - Long: <NumberFormat value={coordinate.lon} /></div> | ||
| : <div className="ms-coordinates-aeronautical"> | ||
| <span>Lat: <AeronauticalCoordinate integerFormat={integerFormat} decimalFormat={decimalFormat} value={coordinate.lat} /></span> | ||
| <span> - </span> | ||
| <span> Long: <AeronauticalCoordinate coordinate="lon" integerFormat={integerFormat} decimalFormat={decimalFormat} value={coordinate.lon} /></span> | ||
| </div> | ||
| } | ||
| </Col>)} | ||
| </Row>); | ||
|
|
51 changes: 51 additions & 0 deletions
51
web/client/components/data/identify/coordinates/__tests__/Coordinate-test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| /* | ||
| * Copyright 2019, 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 React = require('react'); | ||
| const ReactDOM = require('react-dom'); | ||
| const ReactTestUtils = require('react-dom/test-utils'); | ||
|
|
||
| const expect = require('expect'); | ||
| const Coordinate = require('../Coordinate'); | ||
| describe('Identify Coordinate component', () => { | ||
| beforeEach((done) => { | ||
| document.body.innerHTML = '<div id="container"></div>'; | ||
| setTimeout(done); | ||
| }); | ||
| afterEach((done) => { | ||
| ReactDOM.unmountComponentAtNode(document.getElementById("container")); | ||
| document.body.innerHTML = ''; | ||
| setTimeout(done); | ||
| }); | ||
| it('Coordinate rendering with defaults', () => { | ||
| ReactDOM.render(<Coordinate />, document.getElementById("container")); | ||
| const container = document.getElementById('container'); | ||
| const el = container.querySelector('.text-center'); | ||
| expect(el).toExist(); | ||
| }); | ||
| it('Coordinate rendering with content', () => { | ||
| ReactDOM.render(<Coordinate coordinate={{lat: 1, lon: 1}} />, document.getElementById("container")); | ||
| const container = document.getElementById('container'); | ||
| const el = container.querySelector('.ms-coordinates-decimal'); | ||
| expect(el).toExist(); | ||
| }); | ||
| it('Coordinate edit mode', () => { | ||
| ReactDOM.render(<Coordinate edit coordinate={{ lat: 1, lon: 1 }} />, document.getElementById("container")); | ||
| const container = document.getElementById('container'); | ||
| const el = container.querySelector('.coord-editor'); | ||
| expect(el).toExist(); | ||
| }); | ||
| it('Test Editor onChangeFormat correctly passed', () => { | ||
| const actions = { | ||
| onChangeFormat: () => { } | ||
| }; | ||
| const spyonChange = expect.spyOn(actions, 'onChangeFormat'); | ||
| ReactDOM.render(<Coordinate edit onChangeFormat={actions.onChangeFormat} />, document.getElementById("container")); | ||
| ReactTestUtils.Simulate.click(document.querySelector('a > span')); // <-- trigger event callback | ||
| expect(spyonChange).toHaveBeenCalled(); | ||
| }); | ||
| }); |
42 changes: 42 additions & 0 deletions
42
web/client/components/data/identify/coordinates/__tests__/Editor-test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| const React = require('react'); | ||
| const ReactDOM = require('react-dom'); | ||
| const ReactTestUtils = require('react-dom/test-utils'); | ||
| const expect = require('expect'); | ||
| const Editor = require('../Editor'); | ||
| describe('Identify Coordinate Editor component', () => { | ||
| beforeEach((done) => { | ||
| document.body.innerHTML = '<div id="container"></div>'; | ||
| setTimeout(done); | ||
| }); | ||
| afterEach((done) => { | ||
| ReactDOM.unmountComponentAtNode(document.getElementById("container")); | ||
| document.body.innerHTML = ''; | ||
| setTimeout(done); | ||
| }); | ||
| it('Editor rendering with defaults', () => { | ||
| ReactDOM.render(<Editor />, document.getElementById("container")); | ||
| const container = document.getElementById('container'); | ||
| const el = container.querySelector('.coord-editor'); | ||
| expect(el).toExist(); | ||
| }); | ||
| it('Test Editor onChange correctly passed and argument mapping', () => { | ||
| const actions = { | ||
| onChange: () => {} | ||
| }; | ||
| const spyonChange = expect.spyOn(actions, 'onChange'); | ||
| ReactDOM.render(<Editor onChange={actions.onChange} />, document.getElementById("container")); | ||
| ReactTestUtils.Simulate.change(document.querySelector('input'), { target: { value: 20} }); // <-- trigger event callback | ||
| expect(spyonChange).toHaveBeenCalled(); | ||
| expect(spyonChange.calls[0].arguments[0]).toBe('lat'); | ||
| expect(spyonChange.calls[0].arguments[1]).toBe(20); | ||
| }); | ||
| it('Test Editor onChangeFormat correctly passed', () => { | ||
| const actions = { | ||
| onChangeFormat: () => { } | ||
| }; | ||
| const spyonChange = expect.spyOn(actions, 'onChangeFormat'); | ||
| ReactDOM.render(<Editor onChangeFormat={actions.onChangeFormat} />, document.getElementById("container")); | ||
| ReactTestUtils.Simulate.click(document.querySelector('a > span')); // <-- trigger event callback | ||
| expect(spyonChange).toHaveBeenCalled(); | ||
| }); | ||
| }); |
Oops, something went wrong.