Refs #2406: Automatically fill sidebar when toggling map, and disable confirm button when stoparea already selected

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

4 files changed, 49 insertions, 19 deletions

diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js b/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
index dbe0e4f5c..78a0bbc3f 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
@@ -25,7 +25,8 @@ class BSelect3 extends React.Component{
       stoparea_id: e.currentTarget.value,
       user_objectid: e.params.data.user_objectid,
       longitude: e.params.data.longitude,
-      latitude: e.params.data.latitude
+      latitude: e.params.data.latitude,
+      name: e.params.data.name
     })
     this.setState({edit: false})
   }
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
index 20ff8f84b..55a6a813f 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
@@ -15,11 +15,29 @@ class OlMap extends Component{
 
   componentDidUpdate(prevProps, prevState){
     if(prevProps.value.olMap.isOpened == false && this.props.value.olMap.isOpened == true){
-      var vectorLayer = new ol.layer.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 centerLayer = new ol.layer.Vector({
         source: new ol.source.Vector({
-          format: new ol.format.GeoJSON(),
-          url: this.fetchApiURL(this.props.value.stoparea_id)
-        }),
+          features: [feature]
+        })
+      })
+      var vectorLayer = new ol.layer.Vector({
+        source: source,
         style: new ol.style.Style({
           image: new ol.style.Circle(({
             radius: 4,
@@ -36,6 +54,7 @@ class OlMap extends Component{
         new ol.layer.Tile({
           source: new ol.source.OSM()
         }),
+        centerLayer,
         vectorLayer
         ],
         controls: [ new ol.control.ScaleLine() ],
@@ -50,7 +69,6 @@ class OlMap extends Component{
           zoom: 18
         })
       });
-
       // Selectable marker
       var select = new ol.interaction.Select({
         style: new ol.style.Style({
@@ -82,11 +100,7 @@ class OlMap extends Component{
           <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>
-              {this.props.value.olMap.json.text}
-            </p>
-            <p className='small'>
-              <strong>ID de l'arrêt : </strong>
-              {this.props.value.olMap.json.stoparea_id}
+              {this.props.value.olMap.json.name}
             </p>
             <p className='small'>
               <strong>N° d'enregistrement : </strong>
@@ -97,13 +111,16 @@ class OlMap extends Component{
               {this.props.value.olMap.json.user_objectid}
             </p>
 
-            <div className='btn btn-primary btn-sm'
-              onClick= {() => {this.props.onUpdateViaOlMap(this.props.index, this.props.value.olMap.json)}}
-            >Sélectionner</div>
-          </div>
-          <div className='col-lg-8 col-md-8 col-sm-8 col-xs-8'>
-            <div id={"stoppoint_map" + this.props.index} className='map'></div>
+            {/* TODO change text to stoparea_id */}
+            {(this.props.value.text != this.props.value.olMap.json.text) &&(
+              <div className='btn btn-primary btn-sm'
+                onClick= {() => {this.props.onUpdateViaOlMap(this.props.index, this.props.value.olMap.json)}}
+              >Sélectionner</div>
+            )}
           </div>
+            <div className='col-lg-8 col-md-8 col-sm-8 col-xs-8'>
+              <div id={"stoppoint_map" + this.props.index} className='map'></div>
+            </div>
         </div>
       )
     } else {
diff --git a/app/assets/javascripts/es6_browserified/itineraries/index.js b/app/assets/javascripts/es6_browserified/itineraries/index.js
index c7d8eac40..011e40abb 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/index.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/index.js
@@ -28,6 +28,8 @@ const getInitialState = () => {
       index: index,
       city_name: value.city_name,
       zip_code: value.zip_code,
+      name: value.name,
+      registration_number: value.registration_number,
       text: fancyText,
       for_boarding: value.for_boarding || "normal",
       for_alighting: value.for_alighting || "normal",
diff --git a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js b/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
index c802e6afc..756363f16 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
@@ -62,7 +62,16 @@ const stopPoints = (state = [], action) => {
           return Object.assign(
             {},
             t,
-            {stoppoint_id: "", text: action.text.text, stoparea_id: action.text.stoparea_id, user_objectid: action.text.user_objectid, latitude: action.text.latitude, longitude: action.text.longitude}
+            {
+              stoppoint_id: "",
+              text: action.text.text,
+              stoparea_id: action.text.stoparea_id,
+              user_objectid: action.text.user_objectid,
+              latitude: action.text.latitude,
+              longitude: action.text.longitude,
+              name: action.text.name,
+              registration_number: action.text.registration_number
+            }
           )
         } else {
           return t
@@ -82,7 +91,8 @@ const stopPoints = (state = [], action) => {
       return state.map( (t, i) => {
         if (i === action.index){
           let val = !t.olMap.isOpened
-          let stateMap = Object.assign({}, t.olMap, {isOpened: val, json: {}})
+          let jsonData = val ? Object.assign({}, t, {olMap: undefined}) : {}
+          let stateMap = Object.assign({}, t.olMap, {isOpened: val, json: jsonData})
           return Object.assign({}, t, {olMap: stateMap})
         }else {
           let emptyMap = Object.assign({}, t.olMap, {isOpened: false, json : {}})