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>

6 files changed, 62 insertions, 22 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 : {}})
diff --git a/app/views/autocomplete_stop_areas/around.rabl b/app/views/autocomplete_stop_areas/around.rabl
index f2cf03254..53e9449ef 100644
--- a/app/views/autocomplete_stop_areas/around.rabl
+++ b/app/views/autocomplete_stop_areas/around.rabl
@@ -12,7 +12,7 @@ child @stop_areas, root: :features, object_root: false do
       name: s.name,
       registration_number: s.registration_number,
       stoparea_id: s.id,
-      text: "#{s.name} #{s.zip_code} #{s.city_name}",
+      text: "#{s.name}, #{s.zip_code} #{s.city_name}",
       user_objectid: s.user_objectid,
       latitude: s.latitude,
       longitude: s.longitude
diff --git a/spec/javascripts/itineraries/reducers/stop_points_spec.js b/spec/javascripts/itineraries/reducers/stop_points_spec.js
index 72fbbeb6d..d6917f782 100644
--- a/spec/javascripts/itineraries/reducers/stop_points_spec.js
+++ b/spec/javascripts/itineraries/reducers/stop_points_spec.js
@@ -176,16 +176,19 @@ describe('stops reducer', () => {
         index: 0,
         text: {
           text: "new value",
+          name: 'new',
           stoparea_id: 1,
           user_objectid: "1234",
           longitude: 123,
-          latitude: 123
+          latitude: 123,
+          registration_number: '0'
         }
       })
     ).toEqual(
       [
         {
           text: 'new value',
+          name: 'new',
           index: 0,
           stoppoint_id: '',
           stoparea_id: 1,
@@ -194,6 +197,7 @@ describe('stops reducer', () => {
           user_objectid: "1234",
           longitude: 123,
           latitude: 123,
+          registration_number: '0',
           olMap: {
             isOpened: false,
             json: {}
@@ -262,7 +266,13 @@ describe('stops reducer', () => {
           for_alighting: 'normal',
           olMap: {
             isOpened: true,
-            json: {}
+            json: {
+              text: 'first',
+              index: 0,
+              for_boarding: 'normal',
+              for_alighting: 'normal',
+              olMap: undefined
+            }
           }
         },
         {