From a992e8c13703c8e64e66dbef2edceaea8d91c1d0 Mon Sep 17 00:00:00 2001 From: Thomas Haddad Date: Tue, 24 Jan 2017 18:10:47 +0100 Subject: Refs #2405: start filling sidebar with marker content w/ redux Signed-off-by: Thomas Shawarma Haddad --- .../es6_browserified/itineraries/actions/index.js | 5 +++++ .../es6_browserified/itineraries/components/OlMap.js | 15 ++++++++------- .../es6_browserified/itineraries/components/StopPoint.js | 1 + .../itineraries/components/StopPointList.js | 6 ++++-- .../itineraries/containers/VisibleStopPoints.js | 4 ++++ .../es6_browserified/itineraries/reducers/stopPoints.js | 15 ++++++++++++--- 6 files changed, 34 insertions(+), 12 deletions(-) (limited to 'app/assets/javascripts') diff --git a/app/assets/javascripts/es6_browserified/itineraries/actions/index.js b/app/assets/javascripts/es6_browserified/itineraries/actions/index.js index f9886fec2..2efa928a0 100644 --- a/app/assets/javascripts/es6_browserified/itineraries/actions/index.js +++ b/app/assets/javascripts/es6_browserified/itineraries/actions/index.js @@ -40,6 +40,11 @@ const actions = { toggleMap: (index) =>({ type: 'TOGGLE_MAP', index + }), + selectMarker: (index, data) =>({ + type: 'SELECT_MARKER', + index, + data }) } diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js index 3359de091..6236b5682 100644 --- a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js +++ b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js @@ -19,7 +19,7 @@ class OlMap extends Component{ var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ format: new ol.format.GeoJSON(), - url: 'https://gist.githubusercontent.com/ThomasHaddad/7dcc32af24feea2fc4a329445c91af17/raw/4346a71a37326f055ff4fe576eaeb0040596c916/5.geojson' + url: 'https://gist.githubusercontent.com/ThomasHaddad/d9373a76675d630ba98a6fccb51e12b2/raw/d3356d4dbbcd42942d1b3d36518c014a1ca688b0/itineraries_test.geojson' }), style: new ol.style.Style({ image: new ol.style.Circle(({ @@ -66,12 +66,13 @@ class OlMap extends Component{ map.addInteraction(select); select.on('select', function(e) { if(e.selected.length != 0){ - var data = e.selected[0]; - console.log('Selected item'); - console.log('id:' + data.getId()); - console.log('LonLat:' + data.getGeometry().getCoordinates()); + let data = Object.assign({}, e.selected[0].getProperties(), {geometry: undefined}); + this.props.onSelectMarker(this.props.index, data) + // console.log('Selected item'); + // console.log('id:' + data.getId()); + // console.log('LonLat:' + data.getGeometry().getCoordinates()); } - }); + }, this); } } @@ -81,7 +82,7 @@ class OlMap extends Component{ return (
-

Nom de l'arrêt : XXX

+

Nom de l'arrêt : {this.props.value.olMap.json.text}

Nom public : XXX

N° d'enregistrement : XXX

Réseau : XXX

diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js index bd8b957a4..22d3814d1 100644 --- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js +++ b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js @@ -74,6 +74,7 @@ const StopPoint = (props) => {
) diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js b/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js index f26059327..b1bbb3611 100644 --- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js +++ b/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js @@ -2,7 +2,7 @@ var React = require('react') var PropTypes = require('react').PropTypes var StopPoint = require('./StopPoint') -const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap }) => { +const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onSelectMarker }) => { return (
{stopPoints.map((stopPoint, index) => @@ -16,6 +16,7 @@ const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownCli onChange={ onChange } onSelectChange={ (e) => onSelectChange(e, index) } onToggleMap={() => onToggleMap(index)} + onSelectMarker={onSelectMarker} first={ index === 0 } last={ index === (stopPoints.length - 1) } index={ index } @@ -31,7 +32,8 @@ StopPointList.propTypes = { onDeleteClick: PropTypes.func.isRequired, onMoveUpClick: PropTypes.func.isRequired, onMoveDownClick: PropTypes.func.isRequired, - onSelectChange: PropTypes.func.isRequired + onSelectChange: PropTypes.func.isRequired, + onSelectMarker: PropTypes.func.isRequired } module.exports = StopPointList diff --git a/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js b/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js index 21d668cc3..59c4bd554 100644 --- a/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js +++ b/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js @@ -27,7 +27,11 @@ const mapDispatchToProps = (dispatch) => { }, onToggleMap: (index) =>{ dispatch(actions.toggleMap(index)) + }, + onSelectMarker: (index, data) =>{ + dispatch(actions.selectMarker(index, data)) } + } } diff --git a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js b/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js index 40fb2982f..f649aacf4 100644 --- a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js +++ b/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js @@ -72,7 +72,7 @@ const stopPoints = (state = [], action) => { // stopPoint(t, action) // ) case 'UPDATE_SELECT_VALUE': - return state.map( (t,i) => { + return state.map( (t, i) => { if (i === action.index) { let stopState = Object.assign({}, t) stopState[action.select_id] = action.select_value @@ -82,16 +82,25 @@ const stopPoints = (state = [], action) => { } }) case 'TOGGLE_MAP': - return state.map( (t,i) => { + return state.map( (t, i) => { if (i === action.index){ let val = !t.olMap.isOpened - let stateMap = Object.assign({},t.olMap, {isOpened: val}) + let stateMap = Object.assign({}, t.olMap, {isOpened: val}) return Object.assign({}, t, {olMap: stateMap}) }else { let emptyMap = Object.assign({}, t.olMap, {isOpened: false, json : {}}) return Object.assign({}, t, {olMap: emptyMap}) } }) + case 'SELECT_MARKER': + return state.map( (t, i) => { + if (i === action.index){ + let stateMap = Object.assign({}, t.olMap, {json: action.data}) + return Object.assign({}, t, {olMap: stateMap}) + }else { + return t + } + }) default: return state } -- cgit v1.2.3