Refs #2629: updating route subform, updating olmap and itineraries reactux

1 files changed, 25 insertions, 25 deletions

diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
index ec57be6a5..37ee76e65 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
@@ -20,22 +20,22 @@ class OlMap extends Component{
         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)])),
+        geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(this.props.value.longitude), parseFloat(this.props.value.latitude)]))
       })
 
-      var selectedStyles = new ol.style.Style({
+      var defaultStyles = new ol.style.Style({
         image: new ol.style.Circle(({
-          radius: 5,
+          radius: 4,
           fill: new ol.style.Fill({
-            color: '#da2f36'
+            color: '#004d87'
           })
         }))
       })
-      var defaultStyles = new ol.style.Style({
+      var selectedStyles = new ol.style.Style({
         image: new ol.style.Circle(({
-          radius: 5,
+          radius: 6,
           fill: new ol.style.Fill({
-            color: '#004d87'
+            color: '#da2f36'
           })
         }))
       })
@@ -44,21 +44,13 @@ class OlMap extends Component{
         source: new ol.source.Vector({
           features: [feature]
         }),
-        style: new ol.style.Style({
-          image: new ol.style.Circle(({
-            radius: 7,
-            stroke: new ol.style.Stroke({
-              color: '#da2f36',
-              width: 1
-            })
-          }))
-        }),
-        zIndex: 1
+        style: selectedStyles,
+        zIndex: 2
       })
       var vectorLayer = new ol.layer.Vector({
         source: source,
         style: defaultStyles,
-        zIndex: 2
+        zIndex: 1
       });
 
       var map = new ol.Map({
@@ -91,31 +83,39 @@ class OlMap extends Component{
       map.addInteraction(select);
 
       select.on('select', function(e) {
-        if(e.selected.length != 0){
+        feature.setStyle(defaultStyles);
+        centerLayer.setZIndex(0);
+
+        if(e.selected[0].getGeometry() == feature.getGeometry()) {
+          feature.setStyle(selectedStyles);
+          centerLayer.setZIndex(2);
+        }
+
+        if(e.selected.length != 0) {
           let data = Object.assign({}, e.selected[0].getProperties(), {geometry: undefined});
+
           this.props.onSelectMarker(this.props.index, data)
         } else {
           this.props.onUnselectMarker(this.props.index)
         }
       }, this);
-
     }
   }
 
   render() {
     if (this.props.value.olMap.isOpened) {
       return (
-        <div className='row'>
-          <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4" style={{marginTop: 15}}>
+        <div className='map_container'>
+          <div className='map_metas'>
             <p>
               <strong>Nom de l'arrêt : </strong>
               {this.props.value.olMap.json.name}
             </p>
-            <p className='small'>
+            <p>
               <strong>N° d'enregistrement : </strong>
               {this.props.value.olMap.json.registration_number}
             </p>
-            <p className='small'>
+            <p>
               <strong>OiD de l'utilisateur : </strong>
               {this.props.value.olMap.json.user_objectid}
             </p>
@@ -126,7 +126,7 @@ class OlMap extends Component{
               >Sélectionner</div>
             )}
           </div>
-            <div className='col-lg-8 col-md-8 col-sm-8 col-xs-8'>
+            <div className='map_content'>
               <div id={"stoppoint_map" + this.props.index} className='map'></div>
             </div>
         </div>