Refs #4126 @6h; Add i18n to JS

28 files changed, 149 insertions, 46 deletions

diff --git a/.gitignore b/.gitignore
index acdb5e230..dd4d057ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,8 @@
 /tmp
 *~
 public/assets/
+public/javascripts/i18n.js
+public/javascripts/translations.js
 
 # for vim users
 *.swp
diff --git a/Gemfile b/Gemfile
index bb1a42df0..db5202bdf 100644
--- a/Gemfile
+++ b/Gemfile
@@ -103,6 +103,7 @@ gem 'will_paginate-bootstrap'
 gem 'gretel'
 gem 'country_select'
 gem 'flag-icons-rails'
+gem 'i18n-js'
 
 # Format Output
 gem 'json'
diff --git a/Gemfile.lock b/Gemfile.lock
index 805ee460d..a6f54f9cb 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -271,6 +271,8 @@ GEM
       multi_xml (>= 0.5.2)
     i18n (0.9.3)
       concurrent-ruby (~> 1.0)
+    i18n-js (3.0.4)
+      i18n (~> 0.6, >= 0.6.6)
     i18n-tasks (0.9.15)
       activesupport (>= 4.0.2)
       ast (>= 2.1.0)
@@ -638,6 +640,7 @@ DEPENDENCIES
   gretel
   has_array_of!
   htmlbeautifier
+  i18n-js
   i18n-tasks
   inherited_resources
   jbuilder (~> 2.0)
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 4c5aff22f..6a79f7e8e 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -22,3 +22,6 @@
 //= require_directory .
 // require('whatwg-fetch')
 // require('babel-polyfill')
+//= require "i18n"
+//= require "i18n/extended"
+//= require "i18n/translations"
diff --git a/app/assets/javascripts/i18n/extended.coffee b/app/assets/javascripts/i18n/extended.coffee
new file mode 100644
index 000000000..aeb67bd09
--- /dev/null
+++ b/app/assets/javascripts/i18n/extended.coffee
@@ -0,0 +1,24 @@
+#= require i18n
+
+decorateI18n = (_i18n)->
+  _i18n.tc = (key, opts={}) ->
+    out = _i18n.t(key, opts)
+    out += " " if _i18n.locale == "fr"
+    out + ":"
+
+  _i18n.model_name = (model, opts={}) ->
+    last_key = if opts.plural then "other" else "one"
+    _i18n.t("activerecord.models.#{model}.#{last_key}")
+
+  _i18n.attribute_name = (model, attribute, opts={}) ->
+    _i18n.t("activerecord.attributes.#{model}.#{attribute}")
+
+  _i18n.enumerize = (enumerize, key, opts={}) ->
+    I18n.t("enumerize.#{enumerize}.#{key}")
+
+  _i18n
+
+module?.exports = decorateI18n
+
+if I18n?
+  decorateI18n(I18n)
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
index 35e1122f3..5f8b06f09 100644
--- a/app/assets/stylesheets/components/_tables.sass
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -9,7 +9,6 @@
       font-weight: 700
       border-bottom: 2px solid $darkgrey
       vertical-align: middle
-
       > a
         position: relative
         display: block
@@ -326,6 +325,8 @@
     padding: 6px 8px
     border-bottom: 2px solid rgba($grey, 0.5)
     border-top: 1px solid rgba($grey, 0.5)
+    text-transform: capitalize
+    
   .td
     position: relative
     padding: 6px 8px
diff --git a/app/javascript/vehicle_journeys/components/ConfirmModal.js b/app/javascript/vehicle_journeys/components/ConfirmModal.js
index 3bfc852fb..75e8a3932 100644
--- a/app/javascript/vehicle_journeys/components/ConfirmModal.js
+++ b/app/javascript/vehicle_journeys/components/ConfirmModal.js
@@ -7,7 +7,7 @@ export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCan
       <div className='modal-dialog'>
         <div className='modal-content'>
           <div className='modal-body'>
-            <p> Voulez-vous valider vos modifications avant de changer de page? </p>
+            <p> {I18n.t('vehicle_journeys.vehicle_journeys_matrix.modal_confirm')} </p>
           </div>
           <div className='modal-footer'>
             <button
@@ -31,11 +31,11 @@ export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCan
       </div>
     </div>
   )
-} 
+}
 
 ConfirmModal.propTypes = {
   vehicleJourneys: PropTypes.array.isRequired,
   modal: PropTypes.object.isRequired,
   onModalAccept: PropTypes.func.isRequired,
   onModalCancel: PropTypes.func.isRequired
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/components/Filters.js b/app/javascript/vehicle_journeys/components/Filters.js
index 2bd912e3e..f8697c930 100644
--- a/app/javascript/vehicle_journeys/components/Filters.js
+++ b/app/javascript/vehicle_journeys/components/Filters.js
@@ -46,10 +46,10 @@ export default function Filters({filters, pagination, missions, onFilter, onRese
           <div className='ffg-row'>
             {/* Plage horaire */}
             <div className='form-group togglable'>
-              <label className='control-label'>Plage horaire au départ de la course</label>
+              <label className='control-label'>{I18n.t("vehicle_journeys.form.departure_range.label")}</label>
               <div className='filter_menu'>
                 <div className='form-group time filter_menu-item'>
-                  <label className='control-label time'>Début</label>
+                  <label className='control-label time'>{I18n.t("vehicle_journeys.form.departure_range.start")}</label>
                   <div className='form-inline'>
                     <div className='input-group time'>
                       <input
@@ -73,7 +73,7 @@ export default function Filters({filters, pagination, missions, onFilter, onRese
                   </div>
                 </div>
                 <div className='form-group time filter_menu-item'>
-                  <label className='control-label time'>Fin</label>
+                  <label className='control-label time'>{I18n.t("vehicle_journeys.form.departure_range.end")}</label>
                   <div className='form-inline'>
                     <div className='input-group time'>
                       <input
@@ -101,7 +101,7 @@ export default function Filters({filters, pagination, missions, onFilter, onRese
 
             {/* Switch avec/sans horaires */}
             <div className='form-group has_switch'>
-              <label className='control-label pull-left'>Afficher les courses sans horaires</label>
+              <label className='control-label pull-left'>{I18n.t("vehicle_journeys.form.show_journeys_without_schedule")}</label>
               <div className='form-group pull-left' style={{padding: 0}}>
                 <div className='checkbox'>
                   <label>
@@ -110,8 +110,8 @@ export default function Filters({filters, pagination, missions, onFilter, onRese
                       onChange={onToggleWithoutSchedule}
                       checked={filters.query.withoutSchedule}
                       ></input>
-                    <span className='switch-label' data-checkedvalue='Non' data-uncheckedvalue='Oui'>
-                      {filters.query.withoutSchedule ? 'Oui' : 'Non'}
+                    <span className='switch-label' data-checkedvalue={I18n.t("no")} data-uncheckedvalue={I18n.t("yes")}>
+                      {filters.query.withoutSchedule ? I18n.t("yes") : I18n.t("no")}
                     </span>
                   </label>
                 </div>
@@ -122,7 +122,7 @@ export default function Filters({filters, pagination, missions, onFilter, onRese
           <div className="ffg-row">
             {/* Switch avec/sans calendrier */}
             <div className='form-group has_switch'>
-              <label className='control-label pull-left'>Afficher les courses avec calendrier</label>
+              <label className='control-label pull-left'>{I18n.t("vehicle_journeys.form.show_journeys_with_calendar")}</label>
               <div className='form-group pull-left' style={{padding: 0}}>
                 <div className='checkbox'>
                   <label>
@@ -131,8 +131,8 @@ export default function Filters({filters, pagination, missions, onFilter, onRese
                       onChange={onToggleWithoutTimeTable}
                       checked={filters.query.withoutTimeTable}
                       ></input>
-                    <span className='switch-label' data-checkedvalue='Non' data-uncheckedvalue='Oui'>
-                      {filters.query.withoutTimeTable ? 'Oui' : 'Non'}
+                    <span className='switch-label' data-checkedvalue={I18n.t("no")} data-uncheckedvalue={I18n.t("yes")}>
+                      {filters.query.withoutTimeTable ? I18n.t("yes") : I18n.t("no")}
                     </span>
                   </label>
                 </div>
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourney.js b/app/javascript/vehicle_journeys/components/VehicleJourney.js
index 99a458f50..4a9432231 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourney.js
@@ -23,7 +23,7 @@ export default class VehicleJourney extends Component {
     let ttURL = refURL + '/time_tables/' + tt.id
 
     return (
-      <a href={ttURL} title='Voir le calendrier'><span className='fa fa-calendar' style={{ color: (tt.color ? tt.color : '#4B4B4B')}}></span></a>
+      <a href={ttURL} title={I18n.t('vehicle_journeys.vehicle_journeys_matrix.show_timetable')}><span className='fa fa-calendar' style={{ color: (tt.color ? tt.color : '#4B4B4B')}}></span></a>
     )
   }
 
@@ -32,7 +32,7 @@ export default class VehicleJourney extends Component {
     let ttURL = refURL + '/purchase_windows/' + tt.id
 
     return (
-      <a href={ttURL} title='Voir le calendrier commercial'><span className='fa fa-calendar' style={{color: (tt.color ? tt.color : '')}}></span></a>
+      <a href={ttURL} title={I18n.t('vehicle_journeys.vehicle_journeys_matrix.show_purchase_window')}><span className='fa fa-calendar' style={{color: (tt.color ? tt.color : '')}}></span></a>
     )
   }
 
@@ -65,7 +65,7 @@ export default class VehicleJourney extends Component {
           }
           >
           <div className='strong mb-xs'>{this.props.value.short_id || '-'}</div>
-          <div>{this.props.value.published_journey_name && this.props.value.published_journey_name != "non renseigné" ? this.props.value.published_journey_name : '-'}</div>
+          <div>{this.props.value.published_journey_name && this.props.value.published_journey_name != I18n.t('undefined') ? this.props.value.published_journey_name : '-'}</div>
           <div>{this.props.value.journey_pattern.short_id || '-'}</div>
           <div>{this.props.value.company ? this.props.value.company.name : '-'}</div>
           <div>
@@ -100,7 +100,7 @@ export default class VehicleJourney extends Component {
           <div key={i} className='td text-center'>
             <div className={'cellwrap' + (this.cityNameChecker(vj) ? ' headlined' : '')}>
               {this.props.filters.toggleArrivals &&
-                <div data-headline='Arrivée à'>
+                <div data-headline={I18n.t("vehicle_journeys.form.arrival_at")}>
                   <span className={((this.isDisabled(this.props.value.deletable, vj.dummy) || this.props.filters.policy['vehicle_journeys.update'] == false) ? 'disabled ' : '') + 'input-group time'}>
                     <input
                       type='number'
@@ -131,7 +131,7 @@ export default class VehicleJourney extends Component {
                     <span className='sb sb-chrono sb-lg text-warning' data-textinside={vj.delta}></span>
                   }
                 </div>
-                <div data-headline='Départ à'>
+                <div data-headline={I18n.t("vehicle_journeys.form.departure_at")}>
                   <span className={((this.isDisabled(this.props.value.deletable, vj.dummy) || this.props.filters.policy['vehicle_journeys.update'] == false) ? 'disabled ' : '') + 'input-group time'}>
                     <input
                       type='number'
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
index ae852b35a..01e07ee0c 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
@@ -106,14 +106,14 @@ export default class VehicleJourneys extends Component {
           <div className='col-lg-12'>
             {(this.props.status.fetchSuccess == false) && (
               <div className='alert alert-danger mt-sm'>
-                <strong>Erreur : </strong>
-                la récupération des missions a rencontré un problème. Rechargez la page pour tenter de corriger le problème.
+                <strong>{I18n.tc("error")}</strong>
+                {I18n.t("vehicle_journeys.vehicle_journeys_matrix.fetching_error")}
               </div>
             )}
 
             { this.vehicleJourneysList().errors && this.vehicleJourneysList().errors.length && _.some(this.vehicleJourneysList(), 'errors') && (
               <div className="alert alert-danger mt-sm">
-                <strong>Erreur : </strong>
+                <strong>{I18n.tc("error")}</strong>
                 {this.vehicleJourneysList().map((vj, index) =>
                   vj.errors && vj.errors.map((err, i) => {
                     return (
@@ -129,12 +129,12 @@ export default class VehicleJourneys extends Component {
             <div className={'table table-2entries mt-sm mb-sm' + ((this.vehicleJourneysList().length > 0) ? '' : ' no_result')}>
               <div className='t2e-head w20'>
                 <div className='th'>
-                  <div className='strong mb-xs'>ID course</div>
-                  <div>Nom course</div>
-                  <div>ID mission</div>
-                  <div>Transporteur</div>
-                  <div>Calendriers</div>
-                  { this.hasFeature('purchase_windows') && <div>Calendriers Commerciaux</div> }
+                  <div className='strong mb-xs'>{I18n.attribute_name("vehicle_journey", "id")}</div>
+                  <div>{I18n.attribute_name("vehicle_journey", "name")}</div>
+                  <div>{I18n.attribute_name("vehicle_journey", "journey_pattern_id")}</div>
+                  <div>{I18n.model_name("company")}</div>
+                  <div>{I18n.model_name("time_table", "plural": true)}</div>
+                  { this.hasFeature('purchase_windows') && <div>{I18n.model_name("purchase_window", "plural": true)}</div> }
                 </div>
                 {this.stopPoints().map((sp, i) =>{
                   return (
diff --git a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
index f6a0e3c61..bcfd4eb41 100644
--- a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -128,7 +128,7 @@ export default class EditVehicleJourney extends Component {
                               <input
                                 type='text'
                                 className='form-control'
-                                value={window.I18n.fr.enumerize.transport_mode[this.props.modal.modalProps.vehicleJourney.transport_mode]}
+                                value={I18n.enumerize('transport_mode', this.props.modal.modalProps.vehicleJourney.transport_mode)}
                                 disabled={true}
                               />
                             </div>
diff --git a/app/views/calendars/_form_advanced.html.slim b/app/views/calendars/_form_advanced.html.slim
index b4154166b..e796e2e36 100644
--- a/app/views/calendars/_form_advanced.html.slim
+++ b/app/views/calendars/_form_advanced.html.slim
@@ -2,7 +2,7 @@
 
 = javascript_tag do
   | window.actionType = "#{raw params[:action]}";
-  | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
+  // | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
   | window.timetablesUrl = "#{calendar_url(@calendar).html_safe}";
 
 = javascript_pack_tag 'calendars/edit.js'
diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
index 34b373295..3921c8701 100644
--- a/app/views/layouts/application.html.slim
+++ b/app/views/layouts/application.html.slim
@@ -13,6 +13,8 @@ html lang=I18n.locale
 
     = javascript_pack_tag 'application'
     = javascript_include_tag 'application'
+    = javascript_tag do
+      | I18n.locale = '#{I18n.locale}'
 
   body
     = render 'layouts/navigation/main_nav'
diff --git a/app/views/routes/_form.html.slim b/app/views/routes/_form.html.slim
index 29e5be3d2..81f719437 100644
--- a/app/views/routes/_form.html.slim
+++ b/app/views/routes/_form.html.slim
@@ -27,7 +27,7 @@
 // Get JSON data for route stop points
 = javascript_tag do
   | window.itinerary_stop = "#{URI.escape(route_json_for_edit(@route))}";
-  | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
+  // | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
 
 / StopPoints Reactux component
 = javascript_pack_tag 'routes/edit.js'
diff --git a/app/views/time_tables/edit.html.slim b/app/views/time_tables/edit.html.slim
index e1c566ff4..d8cffb1b0 100644
--- a/app/views/time_tables/edit.html.slim
+++ b/app/views/time_tables/edit.html.slim
@@ -8,6 +8,6 @@
 
 = javascript_tag do
   | window.actionType = "#{raw params[:action]}";
-  | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
+  // | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
 
 = javascript_pack_tag 'time_tables/edit.js'
diff --git a/app/views/time_tables/index.html.slim b/app/views/time_tables/index.html.slim
index f58fbb5ea..6913712a0 100644
--- a/app/views/time_tables/index.html.slim
+++ b/app/views/time_tables/index.html.slim
@@ -61,6 +61,6 @@
           = replacement_msg t('time_tables.search_no_results')
 
 = javascript_tag do
-  | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
+  // | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
 = javascript_pack_tag 'date_filters'
diff --git a/app/views/vehicle_journeys/index.html.slim b/app/views/vehicle_journeys/index.html.slim
index caa8450a0..d53d8b50c 100644
--- a/app/views/vehicle_journeys/index.html.slim
+++ b/app/views/vehicle_journeys/index.html.slim
@@ -29,7 +29,7 @@
   | window.features = #{raw @features};
   | window.all_missions = #{(@all_missions.to_json).html_safe};
   | window.custom_fields = #{(@custom_fields.to_json).html_safe};
-  | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
+  // | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
 - if has_feature?(:vehicle_journeys_return_route)
   = javascript_tag do
diff --git a/app/views/workbenches/show.html.slim b/app/views/workbenches/show.html.slim
index a162ca334..aae34c51b 100644
--- a/app/views/workbenches/show.html.slim
+++ b/app/views/workbenches/show.html.slim
@@ -72,6 +72,6 @@
           = replacement_msg t('referentials.search_no_results')
 
 = javascript_tag do
-  | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
+  // | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
 = javascript_pack_tag 'date_filters'
diff --git a/config/environments/development.rb b/config/environments/development.rb
index 1d2fee44f..446e72190 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -95,6 +95,7 @@ Rails.application.configure do
   config.i18n.available_locales = [:fr, :en]
 
   config.middleware.insert_after(ActionDispatch::Static, Rack::LiveReload) if ENV['LIVERELOAD']
+  config.middleware.use I18n::JS::Middleware
   config.development_toolbar = false
   if ENV['TOOLBAR'] && File.exists?("config/development_toolbar.rb")
     config.development_toolbar = OpenStruct.new
diff --git a/config/locales/en.yml b/config/locales/en.yml
index e59960f95..d78d51dbe 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3,6 +3,7 @@ en:
   "false": "No"
   "unknown": "Unknown"
 
+
   time:
     formats:
       hour: "%Hh%M"
@@ -61,3 +62,7 @@ en:
   reflex_data: 'Reflex datas'
   objectid: 'ID'
   brandname: IBOO
+  error: "Error"
+  undefined: 'undefined'
+  yes: yes
+  no: no
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 175b71ebc..d89c286af 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -61,3 +61,7 @@ fr:
   reflex_data: 'Données Reflex'
   objectid: 'ID'
   brandname: IBOO
+  error: "Erreur"
+  undefined: 'non renseigné'
+  yes: oui
+  no: non
diff --git a/config/locales/vehicle_journeys.en.yml b/config/locales/vehicle_journeys.en.yml
index abb1da530..a1f20a7e8 100644
--- a/config/locales/vehicle_journeys.en.yml
+++ b/config/locales/vehicle_journeys.en.yml
@@ -2,6 +2,10 @@ en:
   vehicle_journeys:
     vehicle_journeys_matrix:
       line_routes: "Line's routes"
+      fetching_error: "There has been a problem fetching the data. Please reload the page to try again."
+      show_timetable: 'Show calendar'
+      show_purchase_window: 'Show the purchase window'
+      modal_confirm: 'Do you want to save mofications before moving on to the next page ?'
     vehicle_journey:
       title_stopless: "Vehicle journey %{name}"
       title: "Vehicle journey leaving from %{stop} at %{time}"
@@ -28,6 +32,8 @@ en:
       stop_title: "Stop"
       departure: "Departure"
       arrival: "Arrival"
+      departure_at: "Departure at"
+      arrival_at: "Arrival at"
       to_arrivals: "Copy departures to arrivals"
       to_departures: "Copy arrivals to departures"
       time_tables: "Associated calendars to vehicle journey"
@@ -35,6 +41,12 @@ en:
       slide_title: "Shift all vehicle passing times"
       set: "Set"
       to: "at"
+      departure_range:
+        label: Journey departure range
+        start: Start
+        end: End
+      show_journeys_without_schedule: "Show journeys without schedule"
+      show_journeys_with_calendar: "Show journeys with calendar"
       slide_departure: "departure time at first stop"
       slide_arrival: "arrival time at first stop"
       submit_timed: "Create vehicle journey"
@@ -81,6 +93,7 @@ en:
         line: "Line"
         route: "Route"
         journey_pattern: "Journey Pattern"
+        journey_pattern_id: "Pattern ID"
         time_tables: "Calendars"
         time_slot: "Time Slot"
         company: "Company"
@@ -112,6 +125,8 @@ en:
         departure_time: "Departure"
         arrival_time: "Arrival"
         purchase_window: "Purchase availability"
+        name: "Journey Name"
+        id: "Journey ID"
     errors:
       models:
         vehicle_journey:
diff --git a/config/locales/vehicle_journeys.fr.yml b/config/locales/vehicle_journeys.fr.yml
index ca8475812..be5be2382 100644
--- a/config/locales/vehicle_journeys.fr.yml
+++ b/config/locales/vehicle_journeys.fr.yml
@@ -2,6 +2,10 @@ fr:
   vehicle_journeys:
     vehicle_journeys_matrix:
       line_routes: "Séquences d'arrêts de la ligne"
+      fetching_error: "La récupération des missions a rencontré un problème. Rechargez la page pour tenter de corriger le problème."
+      show_timetable: 'Voir le calendrier'
+      show_purchase_window: 'Voir le calendrier commercial'
+      modal_confirm: 'Voulez-vous valider vos modifications avant de changer de page?'
     vehicle_journey:
       title_stopless: "Course %{name}"
       title: "Course partant de %{stop} à %{time}"
@@ -27,7 +31,10 @@ fr:
     form:
       stop_title: "Arrêt"
       departure: "Départ"
+      departure_at: "Départ à"
       arrival: "Arrivée"
+      arrival_at: "Arrivée à"
+      to_arrivals: "Copie départs vers arrivées"
       to_arrivals: "Copie départs vers arrivées"
       to_departures: "Copie arrivées vers départs"
       time_tables: "Calendriers associés à la course"
@@ -35,6 +42,12 @@ fr:
       slide_title: "Décaler l'ensemble des horaires de course"
       set: "Fixer"
       to: "à"
+      departure_range:
+        label: Plage horaire au départ de la course
+        start: Début
+        end: Fin
+      show_journeys_without_schedule: "Afficher les courses sans horaires"
+      show_journeys_with_calendar: "Afficher les courses avec calendrier"
       slide_departure: "horaire de départ au 1° arrêt à"
       slide_arrival: "horaire d'arrivée au 1° arrêt à"
       submit_timed: "Créer course"
@@ -81,6 +94,7 @@ fr:
         line: "Ligne"
         route: "Séquence d'arrêt"
         journey_pattern: "Mission"
+        journey_pattern_id: "ID Mission"
         time_tables: "Calendriers"
         time_slot: "Fréquence"
         company: "Transporteur"
@@ -112,6 +126,8 @@ fr:
         departure_time: "Départ"
         arrival_time: "Arrivée"
         purchase_window: "Disponibilité commerciale"
+        name: "Nom Course"
+        id: "ID Course"
     errors:
       models:
         vehicle_journey:
diff --git a/lib/tasks/ci.rake b/lib/tasks/ci.rake
index 13d7b8d73..889a5c0ad 100644
--- a/lib/tasks/ci.rake
+++ b/lib/tasks/ci.rake
@@ -38,7 +38,7 @@ namespace :ci do
   end
 
   task :jest => "ci:assets" do
-    sh "yarn --no-progress install" # Hack to force install jest after webpack 
+    sh "yarn --no-progress install" # Hack to force install jest after webpack
     sh "node_modules/.bin/jest" unless ["CHOUETTE_JEST_DISABLED"]
   end
 
@@ -59,4 +59,4 @@ namespace :ci do
 end
 
 desc "Run continuous integration tasks (spec, ...)"
-task :ci => ["ci:setup", "ci:spec", "ci:jest", "cucumber", "ci:check_security", "ci:deploy", "ci:clean"]
+task :ci => ["ci:setup", "ci:spec", "i18n:js:export", "ci:jest", "cucumber", "ci:check_security", "ci:deploy", "ci:clean"]
diff --git a/package.json b/package.json
index e80f5231e..25b158e3d 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,10 @@
     "roots": [
       "<rootDir>/spec/javascript"
     ],
+    "transform": {
+      "^.+\\.coffee$": "<rootDir>/spec/javascript/preprocessor.js",
+      "^.+\\.jsx?$": "babel-jest"
+    },
     "testEnvironment": "jest-environment-jsdom-global",
     "setupFiles": [
       "<rootDir>/spec/javascript/spec_helper.js",
diff --git a/spec/javascript/preprocessor.js b/spec/javascript/preprocessor.js
new file mode 100644
index 000000000..a2de8e4be
--- /dev/null
+++ b/spec/javascript/preprocessor.js
@@ -0,0 +1,15 @@
+'use strict';
+
+var coffee = require('coffeescript');
+
+module.exports = {
+  process: function(src, filename) {
+    if (coffee.helpers.isCoffee(filename)) {
+      return coffee.compile(src, {
+        'bare': false,
+        'inlineMap': true
+      })
+    }
+    return src;
+  }
+};
diff --git a/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js b/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js
index 87151c64b..2a84cb9ca 100644
--- a/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js
+++ b/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js
@@ -1,6 +1,13 @@
 import React, { Component } from 'react'
 import VehicleJourneys from '../../../../app/javascript/vehicle_journeys/components/VehicleJourneys'
 import renderer from 'react-test-renderer'
+import fs from 'fs'
+
+import I18n from '../../../../public/javascripts/i18n'
+import decorateI18n from '../../../../app/assets/javascripts/i18n/extended.coffee'
+window.I18n = decorateI18n(I18n)
+I18n.locale = "fr"
+eval(fs.readFileSync('./public/javascripts/translations.js')+'')
 
 describe('stopPointHeader', () => {
   set('features', () => {
diff --git a/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap b/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap
index 703f727d7..cdd34cbbd 100644
--- a/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap
+++ b/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap
@@ -19,19 +19,19 @@ exports[`stopPointHeader should display the city name 1`] = `
           <div
             className="strong mb-xs"
           >
-            ID course
+            ID Course
           </div>
           <div>
-            Nom course
+            Nom Course
           </div>
           <div>
-            ID mission
+            ID Mission
           </div>
           <div>
-            Transporteur
+            transporteur
           </div>
           <div>
-            Calendriers
+            calendrier
           </div>
         </div>
         <div
@@ -109,19 +109,19 @@ exports[`stopPointHeader with the "long_distance_routes" feature should display
           <div
             className="strong mb-xs"
           >
-            ID course
+            ID Course
           </div>
           <div>
-            Nom course
+            Nom Course
           </div>
           <div>
-            ID mission
+            ID Mission
           </div>
           <div>
-            Transporteur
+            transporteur
           </div>
           <div>
-            Calendriers
+            calendrier
           </div>
         </div>
         <div