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

3 files changed, 90 insertions, 38 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>
diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 864fc4b66..fd5f90006 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -10,16 +10,4 @@
 
 @import 'layout'
 
-@import 'components/buttons'
-@import 'components/alerts'
-@import 'components/modals'
-@import 'components/labels'
-@import 'components/select2'
-@import 'components/forms'
-@import 'components/tables'
-@import 'components/lists'
-@import 'components/panels'
-@import 'components/pagination'
-@import 'components/main_nav'
-@import 'components/page_header'
-@import 'components/loader'
+@import 'components/*'
diff --git a/app/assets/stylesheets/components/_olMap.sass b/app/assets/stylesheets/components/_olMap.sass
new file mode 100644
index 000000000..acbbbeade
--- /dev/null
+++ b/app/assets/stylesheets/components/_olMap.sass
@@ -0,0 +1,64 @@
+//---------//
+//  OlMap  //
+//---------//
+
+.map_container
+  margin: 0 -5px
+  border-top: 1px solid #ccc
+
+  > *
+    display: inline-block
+    vertical-align: top
+    height: 300px
+    width: 100%
+
+  .map_metas
+    width: 33.3333%
+    background-color: #fff
+    padding: 15px
+
+    > p
+      font-size: 0.85em
+      margin: 5px 0 0 0
+
+      &:first-child
+        margin-top: 0
+
+    > .btn
+      float: right
+      margin-top: 30px
+
+    + .map_content
+      width: 66.6666%
+      border-left: 1px solid #ccc
+
+.map
+  height: 300px
+  width: 100%
+
+.ol-scale-line
+  // background-color: rgba($blue, 0.5)
+  bottom: 5px
+  right: 5px
+  padding: 3px
+  position: absolute
+
+  .ol-scale-line-inner
+    position: relative
+    border-bottom: 1px solid $darkgrey
+    border-top: none
+    color: $blue
+    font-size: 0.85em
+    text-align: center
+    font-weight: 700
+
+    &:before
+      content: ''
+      display: block
+      position: absolute
+      left: 0
+      bottom: 0
+      right: 0
+      height: 5px
+      border-left: 1px solid $darkgrey
+      border-right: 1px solid $darkgrey