Refs #2629: updating route subform, olmap (second pass)

8 files changed, 111 insertions, 102 deletions

diff --git a/app/assets/javascripts/es6_browserified/itineraries/actions/index.js b/app/assets/javascripts/es6_browserified/itineraries/actions/index.js
index 6b5b35bd6..13b2d60b2 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/actions/index.js
@@ -41,6 +41,10 @@ const actions = {
     type: 'TOGGLE_MAP',
     index
   }),
+  toggleEdit: (index) =>({
+    type: 'TOGGLE_EDIT',
+    index
+  }),
   closeMaps: () => ({
     type : 'CLOSE_MAP'
   }),
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js b/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
index a91be9301..cad7a9130 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
@@ -11,13 +11,6 @@ var path = window.location.pathname.split('/', 3).join('/')
 class BSelect3 extends React.Component{
   constructor(props) {
     super(props)
-    this.state = {
-      edit: false
-    }
-  }
-  onToggleEdit(e) {
-    e.preventDefault()
-    this.setState({edit: !this.state.edit})
   }
   onChange(e) {
     this.props.onChange(this.props.index, {
@@ -28,20 +21,13 @@ class BSelect3 extends React.Component{
       latitude: e.params.data.latitude,
       name: e.params.data.name
     })
-    this.setState({edit: false})
   }
 
   render() {
-    if(this.state.edit)
+    if(this.props.value.edit)
       return (
-        <div className='input-group select2-bootstrap-append'>
+        <div className='select2-bootstrap-append'>
           <BSelect2 {...this.props} onSelect={ this.onChange.bind(this) }/>
-
-          <span className='input-group-btn'>
-            <button type='button' className='btn btn-link' onClick={this.onToggleEdit.bind(this)}>
-              <span className='fa fa-undo'></span>
-            </button>
-          </span>
         </div>
       )
     else
@@ -53,21 +39,13 @@ class BSelect3 extends React.Component{
         )
       else
         return (
-          <div className='input-group'>
-            <a
-              className='form-control form-control-link'
-              href={origin + path + '/stop_areas/' + this.props.value.stoparea_id}
-              title={"Voir l'arrêt '" + this.props.value.text + "'"}
-              style={{lineHeight: '22px', overflow: 'hidden'}}
-            >
-              {this.props.value.text}
-            </a>
-            <span className='input-group-btn'>
-              <button type='button' className='btn btn-link' onClick={this.onToggleEdit.bind(this)}>
-                <span className='fa fa-pencil'></span>
-              </button>
-            </span>
-          </div>
+          <a
+            className='navlink'
+            href={origin + path + '/stop_areas/' + this.props.value.stoparea_id}
+            title="Voir l'arrêt"
+          >
+            {this.props.value.text}
+          </a>
         )
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
index 55a6a813f..ec57be6a5 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
@@ -15,47 +15,60 @@ class OlMap extends Component{
 
   componentDidUpdate(prevProps, prevState){
     if(prevProps.value.olMap.isOpened == false && this.props.value.olMap.isOpened == true){
-      var source= new ol.source.Vector({
+      var source = new ol.source.Vector({
         format: new ol.format.GeoJSON(),
         url: this.fetchApiURL(this.props.value.stoparea_id)
       })
       var feature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(this.props.value.longitude), parseFloat(this.props.value.latitude)])),
-        style: new ol.style.Style({
-          image: new ol.style.Circle(({
-            radius: 6,
-            stroke: new ol.style.Stroke({
-              color: '#cccccc',
-              width: 6
-            })
-          }))
-        })
       })
+
+      var selectedStyles = new ol.style.Style({
+        image: new ol.style.Circle(({
+          radius: 5,
+          fill: new ol.style.Fill({
+            color: '#da2f36'
+          })
+        }))
+      })
+      var defaultStyles = new ol.style.Style({
+        image: new ol.style.Circle(({
+          radius: 5,
+          fill: new ol.style.Fill({
+            color: '#004d87'
+          })
+        }))
+      })
+
       var centerLayer = new ol.layer.Vector({
         source: new ol.source.Vector({
           features: [feature]
-        })
-      })
-      var vectorLayer = new ol.layer.Vector({
-        source: source,
+        }),
         style: new ol.style.Style({
           image: new ol.style.Circle(({
-            radius: 4,
+            radius: 7,
             stroke: new ol.style.Stroke({
-              color: '#000000',
-              width: 2
+              color: '#da2f36',
+              width: 1
             })
           }))
-        })
+        }),
+        zIndex: 1
+      })
+      var vectorLayer = new ol.layer.Vector({
+        source: source,
+        style: defaultStyles,
+        zIndex: 2
       });
+
       var map = new ol.Map({
         target: 'stoppoint_map' + this.props.index,
         layers: [
-        new ol.layer.Tile({
-          source: new ol.source.OSM()
-        }),
-        centerLayer,
-        vectorLayer
+          new ol.layer.Tile({
+            source: new ol.source.OSM()
+          }),
+          vectorLayer,
+          centerLayer
         ],
         controls: [ new ol.control.ScaleLine() ],
         interactions: ol.interaction.defaults({
@@ -69,18 +82,14 @@ class OlMap extends Component{
           zoom: 18
         })
       });
+
       // Selectable marker
       var select = new ol.interaction.Select({
-        style: new ol.style.Style({
-          image: new ol.style.Circle(({
-            radius: 4,
-            fill: new ol.style.Fill({
-              color: '#000000'
-            })
-          }))
-        })
+        style: selectedStyles
       });
+
       map.addInteraction(select);
+
       select.on('select', function(e) {
         if(e.selected.length != 0){
           let data = Object.assign({}, e.selected[0].getProperties(), {geometry: undefined});
@@ -111,9 +120,8 @@ class OlMap extends Component{
               {this.props.value.olMap.json.user_objectid}
             </p>
 
-            {/* TODO change text to stoparea_id */}
-            {(this.props.value.text != this.props.value.olMap.json.text) &&(
-              <div className='btn btn-primary btn-sm'
+            {(this.props.value.stoparea_id != this.props.value.olMap.json.stoparea_id) &&(
+              <div className='btn btn-outline-primary btn-sm'
                 onClick= {() => {this.props.onUpdateViaOlMap(this.props.index, this.props.value.olMap.json)}}
               >Sélectionner</div>
             )}
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
index f632b25b2..de95759e1 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
@@ -7,7 +7,7 @@ const StopPoint = (props) => {
   return (
     <div className='nested-fields'>
       <div className='wrapper'>
-        <div>{props.value.user_objectid}</div>
+        <div style={{width: 90}}>{props.value.user_objectid}</div>
 
         <div>
           <BSelect2 id={'route_stop_points_' + props.id} value={props.value} onChange={props.onChange} index={props.index} />
@@ -27,34 +27,38 @@ const StopPoint = (props) => {
           </select>
         </div>
 
-        <div>
-          <div className='btn-group btn-group-sm'>
-            {props.value.stoparea_id &&
-              <div
-                className='btn btn-primary'
-                onClick={props.onToggleMap}
-                >
-                <span className='fa fa-map-marker'></span>
-              </div>
-            }
-            <div
-              className={'btn btn-primary' + (props.first ? ' disabled' : '')}
-              onClick={props.onMoveUpClick}
-            >
-              <span className='fa fa-arrow-up'></span>
-            </div>
-            <div
-              className={'btn btn-primary' + (props.last ? ' disabled' : '')}
-              onClick={props.onMoveDownClick}
+        <div className='actions-5'>
+          <div
+            className={'btn btn-link' + (props.value.stoparea_id ? '' : ' disabled')}
+            onClick={props.onToggleMap}
             >
-              <span className='fa fa-arrow-down'></span>
-            </div>
-            <div
-              className='btn btn-danger delete'
-              onClick={props.onDeleteClick}
+            <span className='fa fa-map-marker'></span>
+          </div>
+
+          <div
+            className={'btn btn-link' + (props.first ? ' disabled' : '')}
+            onClick={props.onMoveUpClick}
+          >
+            <span className='fa fa-arrow-up'></span>
+          </div>
+          <div
+            className={'btn btn-link' + (props.last ? ' disabled' : '')}
+            onClick={props.onMoveDownClick}
+          >
+            <span className='fa fa-arrow-down'></span>
+          </div>
+          
+          <div
+            className='btn btn-link'
+            onClick={props.onToggleEdit}
             >
-              <span className='fa fa-trash'></span>
-            </div>
+            <span className={'fa' + (props.value.edit ? ' fa-undo' : ' fa-pencil')}></span>
+          </div>
+          <div
+            className='btn btn-link'
+            onClick={props.onDeleteClick}
+          >
+            <span className='fa fa-trash text-danger'></span>
           </div>
         </div>
       </div>
@@ -72,6 +76,7 @@ const StopPoint = (props) => {
 
 StopPoint.propTypes = {
   onToggleMap: PropTypes.func.isRequired,
+  onToggleEdit: PropTypes.func.isRequired,
   onDeleteClick: PropTypes.func.isRequired,
   onMoveUpClick: PropTypes.func.isRequired,
   onMoveDownClick: PropTypes.func.isRequired,
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js b/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js
index 0c85f51c8..f7bd1ee08 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js
@@ -2,12 +2,12 @@ var React = require('react')
 var PropTypes = require('react').PropTypes
 var StopPoint = require('./StopPoint')
 
-const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onSelectMarker, onUnselectMarker, onUpdateViaOlMap }) => {
+const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onToggleEdit, onSelectMarker, onUnselectMarker, onUpdateViaOlMap }) => {
   return (
     <div className='subform'>
       <div className='nested-head'>
         <div className="wrapper">
-          <div>
+          <div style={{width: 90}}>
             <div className="form-group">
               <label className="control-label">ID Codif</label>
             </div>
@@ -33,7 +33,7 @@ const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownCli
             </label>
             </div>
           </div>
-          <div></div>
+          <div className='actions-5'></div>
         </div>
       </div>
       {stopPoints.map((stopPoint, index) =>
@@ -47,6 +47,7 @@ const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownCli
           onChange={ onChange }
           onSelectChange={ (e) => onSelectChange(e, index) }
           onToggleMap={() => onToggleMap(index)}
+          onToggleEdit={() => onToggleEdit(index)}
           onSelectMarker={onSelectMarker}
           onUnselectMarker={onUnselectMarker}
           onUpdateViaOlMap={onUpdateViaOlMap}
diff --git a/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js b/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js
index 0bc5b0319..11c58d9c2 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js
@@ -33,6 +33,9 @@ const mapDispatchToProps = (dispatch) => {
     onToggleMap: (index) =>{
       dispatch(actions.toggleMap(index))
     },
+    onToggleEdit: (index) =>{
+      dispatch(actions.toggleEdit(index))
+    },
     onSelectMarker: (index, data) =>{
       dispatch(actions.selectMarker(index, data))
     },
diff --git a/app/assets/javascripts/es6_browserified/itineraries/index.js b/app/assets/javascripts/es6_browserified/itineraries/index.js
index def100c22..8a32bf407 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/index.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/index.js
@@ -7,10 +7,10 @@ var App = require('./components/App')
 var addInput = require('./form_helper')
 
 // logger, DO NOT REMOVE
-// var applyMiddleware = require('redux').applyMiddleware
-// var createLogger = require('redux-logger')
-// var thunkMiddleware = require('redux-thunk').default
-// var promise = require('redux-promise')
+var applyMiddleware = require('redux').applyMiddleware
+var createLogger = require('redux-logger')
+var thunkMiddleware = require('redux-thunk').default
+var promise = require('redux-promise')
 
 const getInitialState = () => {
   let state = []
@@ -26,6 +26,7 @@ const getInitialState = () => {
       stoparea_id: value.stoparea_id,
       user_objectid: value.user_objectid,
       index: index,
+      edit: false,
       city_name: value.city_name,
       zip_code: value.zip_code,
       name: value.name,
@@ -45,11 +46,11 @@ const getInitialState = () => {
 }
 
 var initialState = {stopPoints: getInitialState()}
-// const loggerMiddleware = createLogger()
+const loggerMiddleware = createLogger()
 let store = createStore(
   reducers,
-  initialState
-  // applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
+  initialState,
+  applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
 )
 
 render(
diff --git a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js b/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
index 756363f16..abbf7a0b7 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
@@ -6,6 +6,7 @@ const stopPoint = (state = {}, action, length) => {
       return {
         text: '',
         index: length,
+        edit: true,
         for_boarding: 'normal',
         for_alighting: 'normal',
         olMap: {
@@ -87,6 +88,14 @@ const stopPoints = (state = [], action) => {
           return t
         }
       })
+    case 'TOGGLE_EDIT':
+      return state.map((t, i) => {
+        if (i === action.index){
+          return Object.assign({}, t, {edit: !t.edit})
+        } else {
+          return t
+        }
+      })
     case 'TOGGLE_MAP':
       return state.map( (t, i) => {
         if (i === action.index){