Refs #4126 @6h; Add i18n to JS

15 files changed, 64 insertions, 34 deletions

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'