Refs #4614

Add trad to React itineraries

17 files changed, 128 insertions, 43 deletions

diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/App.js b/app/assets/javascripts/es6_browserified/itineraries/components/App.js
index e662d140c..f4cc5e4a6 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/App.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/App.js
@@ -1,12 +1,28 @@
 var React = require('react')
+var { Component, PropTypes } = require('react')
 var AddStopPoint = require('../containers/AddStopPoint')
 var VisibleStopPoints = require('../containers/VisibleStopPoints')
+const clone = require('../../helpers/clone')
+const I18n = clone(window , "I18n", true)
 
-const App = () => (
-  <div>
-    <VisibleStopPoints />
-    <AddStopPoint />
-  </div>
-)
+class App extends Component {
+
+  getChildContext() {
+    return { I18n }
+  }
+
+  render() {
+    return (
+      <div>
+        <VisibleStopPoints />
+        <AddStopPoint />
+      </div>
+    )  
+  } 
+}
+
+App.childContextTypes = {
+  I18n: PropTypes.object
+}
 
 module.exports = App
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js b/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
index 64c6d3ac7..9a82b7925 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
@@ -1,6 +1,6 @@
 var _ = require('lodash')
 var React = require('react')
-var PropTypes = require('react').PropTypes
+var { Component, PropTypes } = require('react')
 var Select2 = require('react-select2')
 
 
@@ -9,9 +9,9 @@ var origin = window.location.origin
 var path = window.location.pathname.split('/', 3).join('/')
 
 
-class BSelect3 extends React.Component{
-  constructor(props) {
-    super(props)
+class BSelect3 extends Component{
+  constructor(props, context) {
+    super(props, context)
   }
   onChange(e) {
     this.props.onChange(this.props.index, {
@@ -73,7 +73,7 @@ class BSelect3 extends React.Component{
   }
 }
 
-class BSelect2 extends React.Component{
+class BSelect2 extends Component{
   componentDidMount() {
     this.refs.newSelect.el.select2('open')
   }
@@ -85,7 +85,7 @@ class BSelect2 extends React.Component{
         onSelect={ this.props.onSelect }
         ref='newSelect'
         options={{
-          placeholder: 'Sélectionnez un arrêt existant...',
+          placeholder: this.context.I18n.routes.edit.select2.placeholder,
           allowClear: true,
           language: 'fr', /* Doesn't seem to work... :( */
           theme: 'bootstrap',
@@ -121,4 +121,8 @@ class BSelect2 extends React.Component{
   }
 }
 
+BSelect2.contextTypes = {
+  I18n: PropTypes.object
+}
+
 module.exports = BSelect3
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
index b9e106c1a..937871346 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
@@ -1,11 +1,10 @@
 var _ = require('lodash')
 var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
+var { Component, PropTypes } = require('react')
 
 class OlMap extends Component{
-  constructor(props){
-    super(props)
+  constructor(props, context){
+    super(props, context)
   }
 
   fetchApiURL(id){
@@ -116,40 +115,40 @@ class OlMap extends Component{
               <strong>{this.props.value.olMap.json.name}</strong>
             </p>
             <p>
-              <strong>Type d'arrêt : </strong>
+              <strong>{this.context.I18n.routes.edit.stop_point_type} : </strong>
               {this.props.value.olMap.json.area_type}
             </p>
             <p>
-              <strong>Nom court : </strong>
+              <strong>{this.context.I18n.routes.edit.short_name} : </strong>
               {this.props.value.olMap.json.short_name}
             </p>
             <p>
-              <strong>ID Reflex : </strong>
+              <strong>{this.context.I18n.id_reflex} : </strong>
               {this.props.value.olMap.json.user_objectid}
             </p>
 
-            <p><strong>Coordonnées : </strong></p>
+            <p><strong>{this.context.I18n.routes.edit.map.coordinates} : </strong></p>
             <p style={{paddingLeft: 10, marginTop: 0}}>
-              <em>Proj.: </em>WSG84<br/>
-              <em>Lat.: </em>{this.props.value.olMap.json.latitude} <br/>
-              <em>Lon.: </em>{this.props.value.olMap.json.longitude}
+              <em>{this.context.I18n.routes.edit.map.proj}.: </em>WSG84<br/>
+              <em>{this.context.I18n.routes.edit.map.lat}.: </em>{this.props.value.olMap.json.latitude} <br/>
+              <em>{this.context.I18n.routes.edit.map.lon}.: </em>{this.props.value.olMap.json.longitude}
             </p>
             <p>
-              <strong>Code Postal : </strong>
+              <strong>{this.context.I18n.routes.edit.map.postal_code} : </strong>
               {this.props.value.olMap.json.zip_code}
             </p>
             <p>
-              <strong>Commune : </strong>
+              <strong>{this.context.I18n.routes.edit.map.city} : </strong>
               {this.props.value.olMap.json.city_name}
             </p>
             <p>
-              <strong>Commentaire : </strong>
+              <strong>{this.context.I18n.routes.edit.map.comment} : </strong>
               {this.props.value.olMap.json.comment}
             </p>
             {(this.props.value.stoparea_id != this.props.value.olMap.json.stoparea_id) &&(
               <div className='btn btn-outline-primary btn-sm'
                 onClick= {() => {this.props.onUpdateViaOlMap(this.props.index, this.props.value.olMap.json)}}
-              >Sélectionner</div>
+              >{this.context.I18n.actions.select}</div>
             )}
           </div>
             <div className='map_content'>
@@ -163,7 +162,11 @@ class OlMap extends Component{
   }
 }
 
-OlMap.propTypes = {
+OlMap.PropTypes = {
+}
+
+OlMap.contextTypes = {
+  I18n: PropTypes.object
 }
 
 module.exports = OlMap
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
index 48f77b8e9..c3996f5b3 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
@@ -3,7 +3,7 @@ var PropTypes = require('react').PropTypes
 var BSelect2 = require('./BSelect2')
 var OlMap = require('./OlMap')
 
-const StopPoint = (props) => {
+const StopPoint = (props, {I18n}) => {
   return (
     <div className='nested-fields'>
       <div className='wrapper'>
@@ -17,15 +17,15 @@ const StopPoint = (props) => {
 
         <div>
           <select className='form-control' value={props.value.for_boarding} id="for_boarding" onChange={props.onSelectChange}>
-            <option value="normal">Montée autorisée</option>
-            <option value="forbidden">Montée interdite</option>
+            <option value="normal">{I18n.routes.edit.stop_point.boarding.normal}</option>
+            <option value="forbidden">{I18n.routes.edit.stop_point.boarding.forbidden}</option>
           </select>
         </div>
 
         <div>
           <select className='form-control' value={props.value.for_alighting} id="for_alighting" onChange={props.onSelectChange}>
-            <option value="normal">Descente autorisée</option>
-            <option value="forbidden">Descente interdite</option>
+            <option value="normal">{I18n.routes.edit.stop_point.alighting.normal}</option>
+            <option value="forbidden">{I18n.routes.edit.stop_point.alighting.forbidden}</option>
           </select>
         </div>
 
@@ -90,4 +90,8 @@ StopPoint.propTypes = {
   value: PropTypes.object
 }
 
+StopPoint.contextTypes = {
+  I18n: PropTypes.object
+}
+
 module.exports = StopPoint
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js b/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js
index 77077dbd8..37a480fca 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js
@@ -2,29 +2,29 @@ var React = require('react')
 var PropTypes = require('react').PropTypes
 var StopPoint = require('./StopPoint')
 
-const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onToggleEdit, onSelectMarker, onUnselectMarker, onUpdateViaOlMap }) => {
+const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onToggleEdit, onSelectMarker, onUnselectMarker, onUpdateViaOlMap }, {I18n}) => {
   return (
     <div className='subform'>
       <div className='nested-head'>
         <div className="wrapper">
           <div style={{width: 100}}>
             <div className="form-group">
-              <label className="control-label">ID Reflex</label>
+              <label className="control-label">{I18n.reflex_id}</label>
             </div>
           </div>
           <div>
             <div className="form-group">
-              <label className="control-label">Arrêt</label>
+              <label className="control-label">{I18n.simple_form.labels.stop_point.name}</label>
             </div>
           </div>
           <div>
             <div className="form-group">
-              <label className="control-label">Montée</label>
+              <label className="control-label">{I18n.simple_form.labels.stop_point.for_boarding}</label>
             </div>
           </div>
           <div>
             <div className="form-group">
-              <label className="control-label">Descente</label>
+              <label className="control-label">{I18n.simple_form.labels.stop_point.for_alighting}</label>
             </div>
           </div>
           <div className='actions-5'></div>
@@ -65,4 +65,8 @@ StopPointList.propTypes = {
   onUnselectMarker : PropTypes.func.isRequired
 }
 
+StopPointList.contextTypes = {
+  I18n: PropTypes.object
+}
+
 module.exports = StopPointList
diff --git a/app/assets/javascripts/es6_browserified/itineraries/index.js b/app/assets/javascripts/es6_browserified/itineraries/index.js
index bb06126f7..13d89bec5 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/index.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/index.js
@@ -5,7 +5,9 @@ var createStore = require('redux').createStore
 var reducers = require('./reducers')
 var App = require('./components/App')
 var { handleForm, handleStopPoints } = require('./form_helper')
-let datas = JSON.parse(decodeURIComponent(window.itinerary_stop))
+let clone = require('../helpers/clone')
+let datas = clone(window, "itinerary_stop", true)
+datas = JSON.parse(decodeURIComponent(datas))
 
 // logger, DO NOT REMOVE
 // var applyMiddleware = require('redux').applyMiddleware
diff --git a/app/assets/javascripts/es6_browserified/itineraries/show.js b/app/assets/javascripts/es6_browserified/itineraries/show.js
index 79a11701f..e88469900 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/show.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/show.js
@@ -1,4 +1,7 @@
+const clone = require('../helpers/clone')
+let route = clone(window, "route", true)
 route = JSON.parse(decodeURIComponent(route))
+
 const geoColPts = []
 const geoColLns= []
 const geoColEdges = [
diff --git a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
index 361e89c36..a421a8ed6 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -1,5 +1,6 @@
 const _ = require('lodash')
-const { I18n } = window
+const clone = require('../../helpers/clone')
+const I18n = clone(window, "I18n")
 
 const actions = {
   weekDays: (index) => {
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
index 772747104..f12fb8a71 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
@@ -9,7 +9,9 @@ var PeriodForm = require('./PeriodForm')
 var SaveTimetable = require('./SaveTimetable')
 var ConfirmModal = require('./ConfirmModal')
 var ErrorModal = require('./ErrorModal')
-const { I18n } = window
+
+const clone = require('../../helpers/clone')
+const I18n = clone(window, "I18n", true)
 
 class App extends Component {
   componentDidMount(){
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/assets/javascripts/es6_browserified/time_tables/index.js
index a91747991..6c352df6b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/index.js
@@ -5,6 +5,9 @@ var createStore = require('redux').createStore
 var timeTablesApp = require('./reducers')
 var App = require('./containers/App')
 
+const clone = require('../helpers/clone')
+const actionType = clone(window, "actionType", true)
+
 // logger, DO NOT REMOVE
 // var applyMiddleware = require('redux').applyMiddleware
 // var createLogger = require('redux-logger')
@@ -13,7 +16,7 @@ var App = require('./containers/App')
 
 var initialState = {
   status: {
-    actionType: window.actionType,
+    actionType: actionType,
     policy: window.perms,
     fetchSuccess: true,
     isFetching: false
diff --git a/app/views/routes/_form.html.slim b/app/views/routes/_form.html.slim
index 244b427dc..24c0d3c4a 100644
--- a/app/views/routes/_form.html.slim
+++ b/app/views/routes/_form.html.slim
@@ -26,7 +26,8 @@
 
 // Get JSON data for route stop points
 = javascript_tag do
-  | window.itinerary_stop = "#{URI.escape(route_json_for_edit(@route))}"
+  | window.itinerary_stop = "#{URI.escape(route_json_for_edit(@route))}";
+  | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
 
 / StopPoints Reactux component
 = javascript_include_tag 'es6_browserified/itineraries/index.js'
diff --git a/config/locales/actions.en.yml b/config/locales/actions.en.yml
index 44e55067d..c34462d0d 100644
--- a/config/locales/actions.en.yml
+++ b/config/locales/actions.en.yml
@@ -20,6 +20,7 @@ en:
     filter: 'Filter'
     erase: 'Erase'
     create_api_key: "Create an API key"
+    select: Select
   or: "or"
   cancel: "Cancel"
   back: "Go Back"
diff --git a/config/locales/actions.fr.yml b/config/locales/actions.fr.yml
index ee35fbb31..df16d2aab 100644
--- a/config/locales/actions.fr.yml
+++ b/config/locales/actions.fr.yml
@@ -20,6 +20,7 @@ fr:
     filter: 'Filtrer'
     erase: 'Effacer'
     create_api_key: "Créer une clé d'API"
+    select: Sélectionner
   or: "ou"
   cancel: "Annuler"
   back: "Retour"
diff --git a/config/locales/routes.en.yml b/config/locales/routes.en.yml
index 63d7b198c..3b1fd85cc 100644
--- a/config/locales/routes.en.yml
+++ b/config/locales/routes.en.yml
@@ -17,6 +17,25 @@ en:
       title: "Add a new route"
     edit:
       title: "Update route %{route}"
+      select2:
+        placeholder: "Select a stop point..."
+      map:
+        stop_point_type: Stop point type
+        short_name: Short name
+        coordinates: Coordinates
+        proj: Proj
+        lat: Lat
+        lon: Lon
+        postal_code: Zip Code
+        city: City
+        comment: Comment
+      stop_point:
+        boarding:
+          normal: Normal boarding
+          forbidden: Forbidden boarding
+        alighting:
+          normal: Normal alighting
+          forbidden: Forbidden alighting
     show:
       title: "Route %{route}"
       stop_points: "Stop point on route list"
diff --git a/config/locales/routes.fr.yml b/config/locales/routes.fr.yml
index a494e60ec..43c40645d 100644
--- a/config/locales/routes.fr.yml
+++ b/config/locales/routes.fr.yml
@@ -17,6 +17,25 @@ fr:
       title: "Ajouter un itinéraire"
     edit:
       title: "Editer l'itinéraire %{route}"
+      select2:
+        placeholder: "Sélectionnez un arrêt existant..."
+      map:
+        stop_point_type: Type d'arrêt
+        short_name: Nom court
+        coordinates: Coordonnées
+        proj: Proj
+        lat: Lat
+        lon: Lon
+        postal_code: Code Postal
+        city: Commune
+        comment: Commentaire
+      stop_point:
+        boarding:
+          normal: Montée autorisée
+          forbidden: Montée interdite
+        alighting:
+          normal: Descente autorisée
+          forbidden: Descente interdite
     show:
       title: "Itinéraire %{route} de la ligne %{line}"
       stop_points: "Liste des arrêts de l'itinéraire"
diff --git a/config/locales/stop_points.en.yml b/config/locales/stop_points.en.yml
index 1ef8002d0..d22d85731 100644
--- a/config/locales/stop_points.en.yml
+++ b/config/locales/stop_points.en.yml
@@ -52,5 +52,6 @@ en:
   simple_form:
     labels:
       stop_point:
+        name: Stop Point
         for_boarding: "Pickup"
         for_alighting: "Drop off"
diff --git a/config/locales/stop_points.fr.yml b/config/locales/stop_points.fr.yml
index d90041945..d3c873442 100644
--- a/config/locales/stop_points.fr.yml
+++ b/config/locales/stop_points.fr.yml
@@ -52,5 +52,6 @@ fr:
   simple_form:
     labels:
       stop_point:
+        name: Arrêt 
         for_boarding: "Montée"
         for_alighting: "Descente"