From da1f748fcdfd15c5b873de3d05dc1a1803bca047 Mon Sep 17 00:00:00 2001 From: Thomas Haddad Date: Mon, 30 Jan 2017 15:32:51 +0100 Subject: Refs #2406: Automatically fill sidebar when toggling map, and disable confirm button when stoparea already selected Signed-off-by: Thomas Shawarma Haddad --- .../itineraries/components/BSelect2.js | 3 +- .../itineraries/components/OlMap.js | 49 +++++++++++++++------- .../es6_browserified/itineraries/index.js | 2 + .../itineraries/reducers/stopPoints.js | 14 ++++++- 4 files changed, 49 insertions(+), 19 deletions(-) (limited to 'app/assets/javascripts') 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{

Nom de l'arrêt : - {this.props.value.olMap.json.text} -

-

- ID de l'arrêt : - {this.props.value.olMap.json.stoparea_id} + {this.props.value.olMap.json.name}

N° d'enregistrement : @@ -97,13 +111,16 @@ class OlMap extends Component{ {this.props.value.olMap.json.user_objectid}

-
{this.props.onUpdateViaOlMap(this.props.index, this.props.value.olMap.json)}} - >Sélectionner
-
-
-
+ {/* TODO change text to stoparea_id */} + {(this.props.value.text != this.props.value.olMap.json.text) &&( +
{this.props.onUpdateViaOlMap(this.props.index, this.props.value.olMap.json)}} + >Sélectionner
+ )}
+
+
+
) } 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 : {}}) -- cgit v1.2.3