Refs #2405: start filling sidebar with marker content w/ redux

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

6 files changed, 34 insertions, 12 deletions

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 (
         <div className='row'>
           <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4" style={{marginTop: 15}}>
-            <p><strong>Nom de l'arrêt : </strong>XXX</p>
+            <p><strong>Nom de l'arrêt : </strong>{this.props.value.olMap.json.text}</p>
             <p className='small'><strong>Nom public : </strong>XXX</p>
             <p className='small'><strong>N° d'enregistrement : </strong>XXX</p>
             <p className='small'><strong>Réseau : </strong>XXX</p>
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) => {
       <OlMap
         value = {props.value}
         index = {props.index}
+        onSelectMarker= {props.onSelectMarker}
       />
     </div>
   )
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 (
     <div className='list-group'>
       {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
   }