Merge pull request #86 from af83/webpacker

Add webpacker gem and migrate the React apps

158 files changed, 1314 insertions, 1279 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 0024b62b5..4c5aff22f 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -20,5 +20,5 @@
 //= require footable/footable.sort
 //= require_directory ./plugins
 //= require_directory .
-require('whatwg-fetch')
-require('babel-polyfill')
+// require('whatwg-fetch')
+// require('babel-polyfill')
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/App.js b/app/assets/javascripts/es6_browserified/itineraries/components/App.js
deleted file mode 100644
index f4cc5e4a6..000000000
--- a/app/assets/javascripts/es6_browserified/itineraries/components/App.js
+++ /dev/null
@@ -1,28 +0,0 @@
-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)
-
-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/reducers/index.js b/app/assets/javascripts/es6_browserified/itineraries/reducers/index.js
deleted file mode 100644
index 446c9ed36..000000000
--- a/app/assets/javascripts/es6_browserified/itineraries/reducers/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var combineReducers = require('redux').combineReducers
-var stopPoints = require('./stopPoints')
-
-const stopPointsApp = combineReducers({
-  stopPoints
-})
-
-module.exports = stopPointsApp
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
deleted file mode 100644
index 7513fc506..000000000
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
+++ /dev/null
@@ -1,21 +0,0 @@
-var React = require('react')
-var AddJourneyPattern = require('../containers/AddJourneyPattern')
-var Navigate = require('../containers/Navigate')
-var Modal = require('../containers/Modal')
-var ConfirmModal = require('../containers/ConfirmModal')
-var SaveJourneyPattern = require('../containers/SaveJourneyPattern')
-var JourneyPatternList = require('../containers/JourneyPatternList')
-
-const App = () => (
-  <div>
-    <Navigate />
-    <JourneyPatternList />
-    <Navigate />
-    <AddJourneyPattern />
-    <SaveJourneyPattern />
-    <ConfirmModal />
-    <Modal/>
-  </div>
-)
-
-module.exports = App
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
deleted file mode 100644
index c2229d991..000000000
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
+++ /dev/null
@@ -1,48 +0,0 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-
-const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, journeyPatterns}) => (
-  <div className={ 'modal fade ' + ((modal.type == 'confirm') ? 'in' : '') } id='ConfirmModal'>
-    <div className='modal-container'>
-      <div className='modal-dialog'>
-        <div className='modal-content'>
-          <div className='modal-header'>
-            <h4 className='modal-title'>Confirmation</h4>
-          </div>
-          <div className='modal-body'>
-            <div className='mt-md mb-md'>
-              <p>Vous vous apprêtez à changer de page. Voulez-vous valider vos modifications avant cela ?</p>
-            </div>
-          </div>
-          <div className='modal-footer'>
-            <button
-              className='btn btn-link'
-              data-dismiss='modal'
-              type='button'
-              onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
-              >
-              Ne pas valider
-            </button>
-            <button
-              className='btn btn-primary'
-              data-dismiss='modal'
-              type='button'
-              onClick = {() => {onModalAccept(modal.confirmModal.callback, journeyPatterns)}}
-              >
-              Valider
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-ConfirmModal.propTypes = {
-  modal: PropTypes.object.isRequired,
-  onModalAccept: PropTypes.func.isRequired,
-  onModalCancel: PropTypes.func.isRequired
-}
-
-module.exports = ConfirmModal
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
deleted file mode 100644
index a9c28b83e..000000000
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var combineReducers = require('redux').combineReducers
-var editMode = require('./editMode')
-var status = require('./status')
-var journeyPatterns = require('./journeyPatterns')
-var pagination = require('./pagination')
-var modal = require('./modal')
-var stopPointsList = require('./stopPointsList')
-
-const journeyPatternsApp = combineReducers({
-  editMode,
-  status,
-  journeyPatterns,
-  pagination,
-  stopPointsList,
-  modal
-})
-
-module.exports = journeyPatternsApp
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js
deleted file mode 100644
index 9abacc8c8..000000000
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const stopPointsList = (state = [], action) => {
-  switch (action.type) {
-    default:
-      return state
-  }
-}
-
-module.exports = stopPointsList
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/time_tables/components/ConfirmModal.js
deleted file mode 100644
index 674a03296..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/components/ConfirmModal.js
+++ /dev/null
@@ -1,51 +0,0 @@
-var React = require('react')
-var { PropTypes } = require('react')
-
-const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, timetable, metas}, {I18n}) => (
-  <div className={ 'modal fade ' + ((modal.type == 'confirm') ? 'in' : '') } id='ConfirmModal'>
-    <div className='modal-container'>
-      <div className='modal-dialog'>
-        <div className='modal-content'>
-          <div className='modal-header'>
-            <h4 className='modal-title'>{I18n.time_tables.edit.confirm_modal.title}</h4>
-          </div>
-          <div className='modal-body'>
-            <div className='mt-md mb-md'>
-              <p>{I18n.time_tables.edit.confirm_modal.message}</p>
-            </div>
-          </div>
-          <div className='modal-footer'>
-            <button
-              className='btn btn-link'
-              data-dismiss='modal'
-              type='button'
-              onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
-              >
-              {I18n.cancel}
-            </button>
-            <button
-              className='btn btn-primary'
-              data-dismiss='modal'
-              type='button'
-              onClick = {() => {onModalAccept(modal.confirmModal.callback, timetable, metas)}}
-              >
-              {I18n.actions.submit}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-ConfirmModal.propTypes = {
-  modal: PropTypes.object.isRequired,
-  onModalAccept: PropTypes.func.isRequired,
-  onModalCancel: PropTypes.func.isRequired
-}
-
-ConfirmModal.contextTypes = {
-  I18n: PropTypes.object
-}
-
-module.exports = ConfirmModal
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/ErrorModal.js b/app/assets/javascripts/es6_browserified/time_tables/components/ErrorModal.js
deleted file mode 100644
index 2597a4870..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/components/ErrorModal.js
+++ /dev/null
@@ -1,43 +0,0 @@
-var React = require('react')
-var { PropTypes } = require('react')
-var { errorModalMessage } = require('../actions')
-
-const ErrorModal = ({dispatch, modal, onModalClose}, {I18n}) => (
-  <div className={ 'modal fade ' + ((modal.type == 'error') ? 'in' : '') } id='ErrorModal'>
-    <div className='modal-container'>
-      <div className='modal-dialog'>
-        <div className='modal-content'>
-          <div className='modal-header'>
-            <h4 className='modal-title'>{I18n.time_tables.edit.error_modal.title}</h4>
-          </div>
-          <div className='modal-body'>
-            <div className='mt-md mb-md'>
-              <p>{errorModalMessage(modal.modalProps.error)}</p>
-            </div>
-          </div>
-          <div className='modal-footer'>
-            <button
-              className='btn btn-link'
-              data-dismiss='modal'
-              type='button'
-              onClick= {() => {onModalClose()}}
-              >
-              {I18n.back}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-ErrorModal.propTypes = {
-  modal: PropTypes.object.isRequired,
-  onModalClose: PropTypes.func.isRequired
-}
-
-ErrorModal.contextTypes = {
-  I18n: PropTypes.object
-}
-
-module.exports = ErrorModal
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
deleted file mode 100644
index d494109cc..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
+++ /dev/null
@@ -1,149 +0,0 @@
-var React = require('react')
-var { PropTypes } = require('react')
-var _ = require('lodash')
-let monthsArray = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
-
-const formatNumber = (val) => {
-  return ("0" + val).slice(-2)
-}
-
-const makeDaysOptions = (daySelected) => {
-  let arr = []
-  for(let i = 1; i < 32; i++) {
-    arr.push(<option value={formatNumber(i)} key={i}>{formatNumber(i)}</option>)
-  }
-  return arr
-}
-
-const makeMonthsOptions = (monthSelected) => {
-  let arr = []
-  for(let i = 1; i < 13; i++) {
-    arr.push(<option value={formatNumber(i)} key={i}>{monthsArray[i - 1]}</option>)
-  }
-  return arr
-}
-
-const makeYearsOptions = (yearSelected) => {
-  let arr = []
-  let startYear = new Date().getFullYear() - 3
-  for(let i = startYear; i <= startYear + 6; i++) {
-    arr.push(<option key={i}>{i}</option>)
-  }
-  return arr
-}
-
-const PeriodForm = ({modal, timetable, metas, onOpenAddPeriodForm, onClosePeriodForm, onUpdatePeriodForm, onValidatePeriodForm}, {I18n}) => (
-  <div className="container-fluid">
-    <div className="row">
-      <div className="col lg-6 col-lg-offset-3">
-        <div className='subform'>
-          {modal.modalProps.active &&
-            <div>
-              <div className="nested-head">
-                <div className="wrapper">
-                  <div>
-                    <div className="form-group">
-                      <label htmlFor="" className="control-label required">
-                        {I18n.time_tables.edit.period_form.begin}
-                        <abbr title="requis">*</abbr>
-                      </label>
-                    </div>
-                  </div>
-                  <div>
-                    <div className="form-group">
-                      <label htmlFor="" className="control-label required">
-                      {I18n.time_tables.edit.period_form.end}
-                        <abbr title="requis">*</abbr>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="nested-fields">
-                <div className="wrapper">
-                  <div>
-                    <div className={'form-group date ' + (modal.modalProps.error ? ' has-error' : '')}>
-                      <div className="form-inline">
-                        <select value={formatNumber(modal.modalProps.begin.day)} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'day', modal.modalProps)} id="q_validity_period_begin_gteq_3i" className="date required form-control">
-                          {makeDaysOptions(modal.modalProps.begin.day)}
-                        </select>
-                        <select value={formatNumber(modal.modalProps.begin.month)} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'month', modal.modalProps)} id="q_validity_period_begin_gteq_2i" className="date required form-control">
-                          {makeMonthsOptions(modal.modalProps.begin.month)}
-                        </select>
-                        <select value={modal.modalProps.begin.year} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'year', modal.modalProps)} id="q_validity_period_begin_gteq_1i" className="date required form-control">
-                          {makeYearsOptions(modal.modalProps.begin.year)}
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div>
-                    <div className={'form-group date ' + (modal.modalProps.error ? ' has-error' : '')}>
-                      <div className="form-inline">
-                        <select value={formatNumber(modal.modalProps.end.day)} onChange={(e) => onUpdatePeriodForm(e, 'end', 'day', modal.modalProps)} id="q_validity_period_end_gteq_3i" className="date required form-control">
-                          {makeDaysOptions(modal.modalProps.end.day)}
-                        </select>
-                        <select value={formatNumber(modal.modalProps.end.month)} onChange={(e) => onUpdatePeriodForm(e, 'end', 'month', modal.modalProps)} id="q_validity_period_end_gteq_2i" className="date required form-control">
-                          {makeMonthsOptions(modal.modalProps.end.month)}
-                        </select>
-                        <select value={modal.modalProps.end.year} onChange={(e) => onUpdatePeriodForm(e, 'end', 'year', modal.modalProps)} id="q_validity_period_end_gteq_1i" className="date required form-control">
-                          {makeYearsOptions(modal.modalProps.end.year)}
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className='links nested-linker'>
-                <span className='help-block small text-danger pull-left mt-xs ml-sm'>
-                  {modal.modalProps.error}
-                </span>
-                <button
-                  type='button'
-                  className='btn btn-link'
-                  onClick={onClosePeriodForm}
-                >
-                  {I18n.cancel}
-                </button>
-                <button
-                  type='button'
-                  className='btn btn-outline-primary mr-sm'
-                  onClick={() => onValidatePeriodForm(modal.modalProps, timetable.time_table_periods, metas, _.filter(timetable.time_table_dates, ['in_out', true]))}
-                >
-                  {I18n.actions.submit}
-                </button>
-              </div>
-            </div>
-          }
-          {!modal.modalProps.active &&
-            <div className="text-right">
-              <button
-                type='button'
-                className='btn btn-outline-primary'
-                onClick={onOpenAddPeriodForm}
-                >
-                {I18n.time_tables.actions.add_period}
-              </button>
-            </div>
-          }
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-PeriodForm.propTypes = {
-  modal: PropTypes.object.isRequired,
-  metas: PropTypes.object.isRequired,
-  onOpenAddPeriodForm: PropTypes.func.isRequired,
-  onClosePeriodForm: PropTypes.func.isRequired,
-  onUpdatePeriodForm: PropTypes.func.isRequired,
-  onValidatePeriodForm: PropTypes.func.isRequired,
-  timetable: PropTypes.object.isRequired
-}
-
-PeriodForm.contextTypes = {
-  I18n: PropTypes.object
-}
-
-module.exports = PeriodForm
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/index.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/index.js
deleted file mode 100644
index 5b05aadda..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-var combineReducers = require('redux').combineReducers
-var status = require('./status')
-var pagination = require('./pagination')
-var modal = require('./modal')
-var timetable = require('./timetable')
-var metas = require('./metas')
-
-const timeTablesApp = combineReducers({
-  timetable,
-  metas,
-  status,
-  pagination,
-  modal
-})
-
-module.exports = timeTablesApp
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
deleted file mode 100644
index fc205d0ae..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
+++ /dev/null
@@ -1,17 +0,0 @@
-var _ = require('lodash')
-
-const status = (state = {}, action) => {
-  switch (action.type) {
-    case 'UNAVAILABLE_SERVER':
-      return _.assign({}, state, {fetchSuccess: false})
-    case 'FETCH_API':
-      return _.assign({}, state, {isFetching: true})
-    case 'RECEIVE_TIME_TABLES':
-    case 'RECEIVE_MONTH':
-      return _.assign({}, state, {fetchSuccess: true, isFetching: false})
-    default:
-      return state
-  }
-}
-
-module.exports = status
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/batch.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/batch.js
deleted file mode 100644
index 284d7b268..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/batch.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-exports.batchActions = batchActions;
-exports.enableBatching = enableBatching;
-var BATCH = exports.BATCH = 'BATCH';
-
-function batchActions(actions) {
-	return {
-    type: BATCH,
-    payload: actions
-  };
-}
-
-function enableBatching(reduce) {
-	return function batchingReducer(state, action) {
-		switch (action.type) {
-			case BATCH:
-				return action.payload.reduce(batchingReducer, state);
-			default:
-				return reduce(state, action);
-		}
-	};
-}
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
deleted file mode 100644
index d5f419747..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ /dev/null
@@ -1,38 +0,0 @@
-var React = require('react')
-var VehicleJourneysList = require('../containers/VehicleJourneysList')
-var Navigate = require('../containers/Navigate')
-var ToggleArrivals = require('../containers/ToggleArrivals')
-var Filters = require('../containers/Filters')
-var SaveVehicleJourneys = require('../containers/SaveVehicleJourneys')
-var ConfirmModal = require('../containers/ConfirmModal')
-var Tools = require('../containers/Tools')
-
-const App = () => (
-  <div>
-
-    <div className='row'>
-      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-        <ToggleArrivals />
-      </div>
-      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right'>
-        <Navigate />
-      </div>
-    </div>
-
-    <Filters />
-    <VehicleJourneysList />
-
-    <div className='row'>
-      <div className='col-lg-12 text-right'>
-        <Navigate />
-      </div>
-    </div>
-
-    <SaveVehicleJourneys />
-    <Tools />
-
-    <ConfirmModal />
-  </div>
-)
-
-module.exports = App
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ConfirmModal.js
deleted file mode 100644
index 54f0287c6..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ConfirmModal.js
+++ /dev/null
@@ -1,42 +0,0 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-
-const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, vehicleJourneys}) => (
-  <div className={ 'modal fade ' + ((modal.type == 'confirm') ? 'in' : '') } id='ConfirmModal'>
-    <div className='modal-dialog'>
-      <div className='modal-content'>
-        <div className='modal-body'>
-          <p> Voulez-vous valider vos modifications avant de changer de page? </p>
-        </div>
-        <div className='modal-footer'>
-          <button
-            className='btn btn-default'
-            data-dismiss='modal'
-            type='button'
-            onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
-            >
-            Ne pas valider
-          </button>
-          <button
-            className='btn btn-danger'
-            data-dismiss='modal'
-            type='button'
-            onClick = {() => {onModalAccept(modal.confirmModal.callback, vehicleJourneys)}}
-            >
-            Valider
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-ConfirmModal.propTypes = {
-  vehicleJourneys: PropTypes.array.isRequired,
-  modal: PropTypes.object.isRequired,
-  onModalAccept: PropTypes.func.isRequired,
-  onModalCancel: PropTypes.func.isRequired
-}
-
-module.exports = ConfirmModal
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/index.js
deleted file mode 100644
index 4e0839102..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-var combineReducers = require('redux').combineReducers
-var vehicleJourneys = require('./vehicleJourneys')
-var pagination = require('./pagination')
-var modal = require('./modal')
-var status = require('./status')
-var filters = require('./filters')
-var editMode = require('./editMode')
-var stopPointsList = require('./stopPointsList')
-
-const vehicleJourneysApp = combineReducers({
-  vehicleJourneys,
-  pagination,
-  modal,
-  status,
-  filters,
-  editMode,
-  stopPointsList
-})
-
-module.exports = vehicleJourneysApp
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/stopPointsList.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/stopPointsList.js
deleted file mode 100644
index 9abacc8c8..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/stopPointsList.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const stopPointsList = (state = [], action) => {
-  switch (action.type) {
-    default:
-      return state
-  }
-}
-
-module.exports = stopPointsList
diff --git a/app/assets/javascripts/filters/calendar.js b/app/assets/javascripts/filters/calendar.js
deleted file mode 100644
index a4e84777c..000000000
--- a/app/assets/javascripts/filters/calendar.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const DateFilter = require('../helpers/date_filters')
-
-$(document).ready(function(){
-  const calendarDF = new DateFilter("#calendar_filter_btn", "Tous les champs du filtre de date doivent être remplis", "#q_contains_date_NUMi")
-  calendarDF()
-})
diff --git a/app/assets/javascripts/filters/compliance_control_set.js b/app/assets/javascripts/filters/compliance_control_set.js
deleted file mode 100644
index b0b00dea5..000000000
--- a/app/assets/javascripts/filters/compliance_control_set.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const DateFilter = require('../helpers/date_filters')
-
-$(document).ready(function () {
-  const complianceControlSetDF = new DateFilter("#compliance_control_set_filter_btn", "Tous les champs du filtre de date doivent être remplis", "#q_updated_at_start_date_NUMi", "#q_updated_at_end_date_NUMi")
-  complianceControlSetDF()
-})
diff --git a/app/assets/javascripts/filters/import.js b/app/assets/javascripts/filters/import.js
deleted file mode 100644
index d437dc7ed..000000000
--- a/app/assets/javascripts/filters/import.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const DateFilter = require('../helpers/date_filters')
-
-$(document).ready(function(){
-  const importDF = new DateFilter("#import_filter_btn", "Tous les champs du filtre de date doivent être remplis", "#q_started_at_start_date_NUMi", "#q_started_at_end_date_NUMi")
-  importDF()
-})
diff --git a/app/assets/javascripts/filters/time_table.js b/app/assets/javascripts/filters/time_table.js
deleted file mode 100644
index a336d2664..000000000
--- a/app/assets/javascripts/filters/time_table.js
+++ /dev/null
@@ -1,7 +0,0 @@
-$(document).ready(function(){
-  const DateFilter = require('../helpers/date_filters')
-
-  const timetableDF = new DateFilter("#time_table_filter_btn", window.I18n.fr.time_tables.error_period_filter, "#q_bounding_dates_start_date_NUMi", "#q_bounding_dates_end_date_NUMi")
-
-  timetableDF()
-})
diff --git a/app/assets/javascripts/filters/workbench.js b/app/assets/javascripts/filters/workbench.js
deleted file mode 100644
index dc5ac8487..000000000
--- a/app/assets/javascripts/filters/workbench.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const DateFilter = require('../helpers/date_filters')
-
-$(document).ready(function(){
-  const workbenchDF = new DateFilter("#referential_filter_btn", window.I18n.fr.referentials.error_period_filter, "#q_validity_period_start_date_NUMi", "#q_validity_period_end_date_NUMi")
-  workbenchDF()
-})
diff --git a/app/assets/javascripts/helpers/date_filters.js b/app/assets/javascripts/helpers/date_filters.js
deleted file mode 100644
index 1f48bb28f..000000000
--- a/app/assets/javascripts/helpers/date_filters.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const DateFilter = function(buttonId, message, ...inputIds) {
-  this.buttonId = buttonId
-  this.inputIds = inputIds
-  this.message = message
-
-  const getVal = (str, key) => {
-    let newStr = str.replace(/NUM/, key)
-    return $(newStr).val()
-  }
-
-  const getDates = () => {
-    return this.inputIds.reduce((arr, id) => {
-      let newIds = [1, 2, 3].map(key => getVal(id, key))
-      arr.push(...newIds)
-      return arr
-    },[])
-  }
-
-  const allInputFilled = () => {
-    return getDates().every(date => !!date)
-  }
-
-  const noInputFilled = () => {
-    return getDates().every(date => !date)
-  }
-
-  const execute = () => {
-    $(this.buttonId).on("click", (e) => {
-      if (allInputFilled() == false && noInputFilled() == false) {
-        e.preventDefault()
-        alert(this.message)
-      }
-    })
-  }
-  return execute
-}
-
-module.exports = DateFilter
diff --git a/app/javascript/date_filters/calendar.js b/app/javascript/date_filters/calendar.js
new file mode 100644
index 000000000..7e5f678e2
--- /dev/null
+++ b/app/javascript/date_filters/calendar.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const calendarDF = new DateFilter("calendar_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_contains_date_NUMi")
+
+export default calendarDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/compliance_check_set.js b/app/javascript/date_filters/compliance_check_set.js
new file mode 100644
index 000000000..09544a3cd
--- /dev/null
+++ b/app/javascript/date_filters/compliance_check_set.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const complianceCheckSetDF = new DateFilter("compliance_check_set_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_created_at_start_date_NUMi", "q_created_at_end_date_NUMi")
+
+export default complianceCheckSetDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/compliance_control_set.js b/app/javascript/date_filters/compliance_control_set.js
new file mode 100644
index 000000000..60d8e3bfa
--- /dev/null
+++ b/app/javascript/date_filters/compliance_control_set.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const complianceControlSetDF = new DateFilter("compliance_control_set_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_updated_at_start_date_NUMi", "q_updated_at_end_date_NUMi")
+
+export default complianceControlSetDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/import.js b/app/javascript/date_filters/import.js
new file mode 100644
index 000000000..356371d30
--- /dev/null
+++ b/app/javascript/date_filters/import.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const importDF = new DateFilter("import_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_started_at_start_date_NUMi", "q_started_at_end_date_NUMi")
+
+export default importDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/index.js b/app/javascript/date_filters/index.js
new file mode 100644
index 000000000..ee892a7fe
--- /dev/null
+++ b/app/javascript/date_filters/index.js
@@ -0,0 +1,17 @@
+import calendarDF from './calendar'
+import complianceControlSetDF from './compliance_control_set'
+import complianceCheckSetDF from './compliance_check_set'
+import timetableDF from './time_table'
+import importDF from './import'
+import workbenchDF from './workbench'
+
+const DateFilters = {
+  calendarDF,
+  complianceCheckSetDF,
+  complianceControlSetDF,
+  importDF,
+  timetableDF,
+  workbenchDF
+}
+
+export default DateFilters
\ No newline at end of file
diff --git a/app/javascript/date_filters/time_table.js b/app/javascript/date_filters/time_table.js
new file mode 100644
index 000000000..d26693993
--- /dev/null
+++ b/app/javascript/date_filters/time_table.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const timetableDF = new DateFilter("time_table_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_bounding_dates_start_date_NUMi", "q_bounding_dates_end_date_NUMi")
+
+export default timetableDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/workbench.js b/app/javascript/date_filters/workbench.js
new file mode 100644
index 000000000..cc4112d73
--- /dev/null
+++ b/app/javascript/date_filters/workbench.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const workbenchDF = new DateFilter("referential_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_validity_period_start_date_NUMi", "q_validity_period_end_date_NUMi")
+
+export default workbenchDF
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/helpers/clone.js b/app/javascript/helpers/clone.js
index c3b627858..00127e2b1 100644
--- a/app/assets/javascripts/es6_browserified/helpers/clone.js
+++ b/app/javascript/helpers/clone.js
@@ -1,14 +1,12 @@
-const _ = require("lodash")
+import _ from 'lodash'
 
 /* This function helps having a bit more security when we pass data from the backend to the React parts
   It clones the obj (window variable) and then conditionnaly delete the window variable
 */
 
-const clone = (window, key, deletable = false) => {
+export default function clone(window, key, deletable = false) {
   let obj = _.cloneDeep(window[key])
   
   if (deletable) delete window[key]
   return obj
-}
-
-module.exports = clone
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/javascript/helpers/date_filters.js b/app/javascript/helpers/date_filters.js
new file mode 100644
index 000000000..53c9da641
--- /dev/null
+++ b/app/javascript/helpers/date_filters.js
@@ -0,0 +1,29 @@
+export default function DateFilter(buttonId, message, ...inputIds) {
+  this.button = document.getElementById(buttonId)
+  this.inputIds = inputIds
+  this.message = message
+
+  const getVal = (str, key) => {
+    let newStr = str.replace(/NUM/, key)
+    return document.getElementById(newStr).value
+  }
+
+  const getDates = () => {
+    return this.inputIds.reduce((arr, id) => {
+      let newIds = [1, 2, 3].map(key => getVal(id, key))
+      arr.push(...newIds)
+      return arr
+    }, [])
+  }
+
+  const allInputFilled = () => getDates().every(date => !!date)
+
+  const noInputFilled = () => getDates().every(date => !date)
+  
+  this.button && this.button.addEventListener('click', (event) => {
+    if (!allInputFilled() && !noInputFilled()) {
+      event.preventDefault()
+      alert(this.message)
+    }
+  })
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js b/app/javascript/journey_patterns/actions/index.js
index 825e7bb7d..0c1cb5f5c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/javascript/journey_patterns/actions/index.js
@@ -1,4 +1,4 @@
-var Promise = require('promise-polyfill')
+import Promise from 'promise-polyfill'
 
 // To add to window
 if (!window.Promise) {
@@ -217,4 +217,4 @@ const actions = {
   }
 }
 
-module.exports = actions
+export default actions
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/components/App.js b/app/javascript/journey_patterns/components/App.js
new file mode 100644
index 000000000..ac6214cc1
--- /dev/null
+++ b/app/javascript/journey_patterns/components/App.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import AddJourneyPattern from '../containers/AddJourneyPattern'
+import Navigate from '../containers/Navigate'
+import Modal from '../containers/Modal'
+import ConfirmModal from '../containers/ConfirmModal'
+import SaveJourneyPattern from '../containers/SaveJourneyPattern'
+import JourneyPatternList from '../containers/JourneyPatternList'
+
+const App = () => (
+  <div>
+    <Navigate />
+    <JourneyPatternList />
+    <Navigate />
+    <AddJourneyPattern />
+    <SaveJourneyPattern />
+    <ConfirmModal />
+    <Modal/>
+  </div>
+)
+
+export default App
diff --git a/app/javascript/journey_patterns/components/ConfirmModal.js b/app/javascript/journey_patterns/components/ConfirmModal.js
new file mode 100644
index 000000000..2cc1bef44
--- /dev/null
+++ b/app/javascript/journey_patterns/components/ConfirmModal.js
@@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react'
+
+export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCancel, journeyPatterns}) {
+  return (
+    <div className={'modal fade ' + ((modal.type == 'confirm') ? 'in' : '')} id='ConfirmModal'>
+      <div className='modal-container'>
+        <div className='modal-dialog'>
+          <div className='modal-content'>
+            <div className='modal-header'>
+              <h4 className='modal-title'>Confirmation</h4>
+            </div>
+            <div className='modal-body'>
+              <div className='mt-md mb-md'>
+                <p>Vous vous apprêtez à changer de page. Voulez-vous valider vos modifications avant cela ?</p>
+              </div>
+            </div>
+            <div className='modal-footer'>
+              <button
+                className='btn btn-link'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalCancel(modal.confirmModal.callback) }}
+              >
+                Ne pas valider
+            </button>
+              <button
+                className='btn btn-primary'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalAccept(modal.confirmModal.callback, journeyPatterns) }}
+              >
+                Valider
+            </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ConfirmModal.propTypes = {
+  modal: PropTypes.object.isRequired,
+  onModalAccept: PropTypes.func.isRequired,
+  onModalCancel: PropTypes.func.isRequired
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js b/app/javascript/journey_patterns/components/CreateModal.js
index 12871431a..d0eff6e57 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
+++ b/app/javascript/journey_patterns/components/CreateModal.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class CreateModal extends Component {
+export default class CreateModal extends Component {
   constructor(props) {
     super(props)
   }
@@ -121,6 +119,4 @@ CreateModal.propTypes = {
   onOpenCreateModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   onAddJourneyPattern: PropTypes.func.isRequired
-}
-
-module.exports = CreateModal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js b/app/javascript/journey_patterns/components/EditModal.js
index 1fc935932..699f89b85 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
+++ b/app/javascript/journey_patterns/components/EditModal.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class EditModal extends Component {
+export default class EditModal extends Component {
   constructor(props) {
     super(props)
   }
@@ -109,6 +107,4 @@ EditModal.propTypes = {
   modal: PropTypes.object,
   onModalClose: PropTypes.func.isRequired,
   saveModal: PropTypes.func.isRequired
-}
-
-module.exports = EditModal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js
index 1e569d584..dde73a957 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/javascript/journey_patterns/components/JourneyPattern.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class JourneyPattern extends Component{
+export default class JourneyPattern extends Component{
   constructor(props){
     super(props)
     this.previousCity = undefined
@@ -130,6 +128,4 @@ JourneyPattern.propTypes = {
   onCheckboxChange: PropTypes.func.isRequired,
   onOpenEditModal: PropTypes.func.isRequired,
   onDeleteJourneyPattern: PropTypes.func.isRequired
-}
-
-module.exports = JourneyPattern
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js b/app/javascript/journey_patterns/components/JourneyPatterns.js
index 6506b706c..4b2badabb 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
+++ b/app/javascript/journey_patterns/components/JourneyPatterns.js
@@ -1,10 +1,9 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var JourneyPattern = require('./JourneyPattern')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import _ from 'lodash'
+import JourneyPattern from './JourneyPattern'
 
-class JourneyPatterns extends Component{
+
+export default class JourneyPatterns extends Component {
   constructor(props){
     super(props)
     this.previousCity = undefined
@@ -153,6 +152,4 @@ JourneyPatterns.propTypes = {
   onCheckboxChange: PropTypes.func.isRequired,
   onLoadFirstPage: PropTypes.func.isRequired,
   onOpenEditModal: PropTypes.func.isRequired
-}
-
-module.exports = JourneyPatterns
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js b/app/javascript/journey_patterns/components/Navigate.js
index 5747aa5ce..f2fdd668f 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
+++ b/app/javascript/journey_patterns/components/Navigate.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-let Navigate = ({ dispatch, journeyPatterns, pagination, status }) => {
+export default function Navigate({ dispatch, journeyPatterns, pagination, status }) {
   let firstPage = 1
   let lastPage = Math.ceil(pagination.totalCount / window.journeyPatternsPerPage)
 
@@ -61,6 +59,4 @@ Navigate.propTypes = {
   status: PropTypes.object.isRequired,
   pagination: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired
-}
-
-module.exports = Navigate
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
index 767dab088..d071fa542 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js
+++ b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class SaveJourneyPattern extends Component{
+export default class SaveJourneyPattern extends Component {
   constructor(props){
     super(props)
   }
@@ -38,6 +36,4 @@ SaveJourneyPattern.propTypes = {
   journeyPatterns: PropTypes.array.isRequired,
   status: PropTypes.object.isRequired,
   page: PropTypes.number.isRequired
-}
-
-module.exports = SaveJourneyPattern
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js b/app/javascript/journey_patterns/containers/AddJourneyPattern.js
index 7aa27754e..b093fd111 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js
+++ b/app/javascript/journey_patterns/containers/AddJourneyPattern.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var CreateModal = require('../components/CreateModal')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import CreateModal from '../components/CreateModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const AddJourneyPattern = connect(mapStateToProps, mapDispatchToProps)(CreateModal)
 
-module.exports = AddJourneyPattern
+export default AddJourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js b/app/javascript/journey_patterns/containers/ConfirmModal.js
index d66425a3a..92ce09f33 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js
+++ b/app/javascript/journey_patterns/containers/ConfirmModal.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ConfirmModal = require('../components/ConfirmModal')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import ConfirmModal from '../components/ConfirmModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ConfirmModalContainer = connect(mapStateToProps, mapDispatchToProps)(ConfirmModal)
 
-module.exports = ConfirmModalContainer
+export default ConfirmModalContainer
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js b/app/javascript/journey_patterns/containers/JourneyPatternList.js
index 228df3ede..d98734407 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
+++ b/app/javascript/journey_patterns/containers/JourneyPatternList.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var JourneyPatterns = require('../components/JourneyPatterns')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import JourneyPatterns from '../components/JourneyPatterns'
 
 const mapStateToProps = (state) => {
   return {
@@ -31,4 +31,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const JourneyPatternList = connect(mapStateToProps, mapDispatchToProps)(JourneyPatterns)
 
-module.exports = JourneyPatternList
+export default JourneyPatternList
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js b/app/javascript/journey_patterns/containers/Modal.js
index ef6a4a6b1..ace71a857 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
+++ b/app/javascript/journey_patterns/containers/Modal.js
@@ -1,7 +1,7 @@
-var connect = require('react-redux').connect
-var EditModal = require('../components/EditModal')
-var CreateModal = require('../components/CreateModal')
-var actions = require('../actions')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import EditModal from '../components/EditModal'
+import CreateModal from '../components/CreateModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -23,4 +23,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ModalContainer = connect(mapStateToProps, mapDispatchToProps)(EditModal, CreateModal)
 
-module.exports = ModalContainer
+export default ModalContainer
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js b/app/javascript/journey_patterns/containers/Navigate.js
index ef9f8859c..d34e0b4c5 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js
+++ b/app/javascript/journey_patterns/containers/Navigate.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var NavigateComponent = require('../components/Navigate')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import NavigateComponent from '../components/Navigate'
 
 const mapStateToProps = (state) => {
   return {
@@ -11,7 +10,6 @@ const mapStateToProps = (state) => {
   }
 }
 
-
 const Navigate = connect(mapStateToProps)(NavigateComponent)
 
-module.exports = Navigate
+export default Navigate
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js b/app/javascript/journey_patterns/containers/SaveJourneyPattern.js
index 434264fea..b630c121c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js
+++ b/app/javascript/journey_patterns/containers/SaveJourneyPattern.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var SaveJourneyPatternComponent = require('../components/SaveJourneyPattern')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import SaveJourneyPatternComponent from '../components/SaveJourneyPattern'
 
 const mapStateToProps = (state) => {
   return {
@@ -25,4 +24,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const SaveJourneyPattern = connect(mapStateToProps, mapDispatchToProps)(SaveJourneyPatternComponent)
 
-module.exports = SaveJourneyPattern
+export default SaveJourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/editMode.js b/app/javascript/journey_patterns/reducers/editMode.js
index 2e8af1aa8..bff976804 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/editMode.js
+++ b/app/javascript/journey_patterns/reducers/editMode.js
@@ -1,4 +1,4 @@
-const editMode = (state = {}, action ) => {
+export default function editMode(state = {}, action ) {
   switch (action.type) {
     case "ENTER_EDIT_MODE":
       return true
@@ -7,6 +7,4 @@ const editMode = (state = {}, action ) => {
     default:
       return state
   }
-}
-
-module.exports = editMode
+}
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/reducers/index.js b/app/javascript/journey_patterns/reducers/index.js
new file mode 100644
index 000000000..2ffaf86d4
--- /dev/null
+++ b/app/javascript/journey_patterns/reducers/index.js
@@ -0,0 +1,18 @@
+import { combineReducers } from 'redux'
+import editMode from './editMode'
+import status from './status'
+import journeyPatterns from './journeyPatterns'
+import pagination from './pagination'
+import modal from './modal'
+import stopPointsList from './stopPointsList'
+
+const journeyPatternsApp = combineReducers({
+  editMode,
+  status,
+  journeyPatterns,
+  pagination,
+  stopPointsList,
+  modal
+})
+
+export default journeyPatternsApp
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js b/app/javascript/journey_patterns/reducers/journeyPatterns.js
index d4f7257d7..7702e21bc 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
+++ b/app/javascript/journey_patterns/reducers/journeyPatterns.js
@@ -1,7 +1,7 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from "../actions"
 
-const journeyPattern = (state = {}, action) => {
+export default function journeyPattern(state = {}, action) {
   switch (action.type) {
     case 'ADD_JOURNEYPATTERN':
       let stopPoints = window.stopPoints
@@ -87,6 +87,4 @@ const journeyPatterns = (state = [], action) => {
     default:
       return state
   }
-}
-
-module.exports = journeyPatterns
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js b/app/javascript/journey_patterns/reducers/modal.js
index 86cfb5a25..0a96f1679 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
+++ b/app/javascript/journey_patterns/reducers/modal.js
@@ -1,5 +1,6 @@
-var _ = require('lodash')
-const modal = (state = {}, action) => {
+import _ from 'lodash'
+
+export default function modal(state = {}, action) {
   switch (action.type) {
     case 'OPEN_CONFIRM_MODAL':
       $('#ConfirmModal').modal('show')
@@ -37,6 +38,4 @@ const modal = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = modal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/pagination.js b/app/javascript/journey_patterns/reducers/pagination.js
index 0714ca843..01fdf21d4 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/pagination.js
+++ b/app/javascript/journey_patterns/reducers/pagination.js
@@ -1,5 +1,6 @@
-var _ = require('lodash')
-const pagination = (state = {}, action) => {
+import _ from 'lodash'
+
+export default function pagination (state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_JOURNEY_PATTERNS':
       return _.assign({}, state, {stateChanged: false})
@@ -31,6 +32,4 @@ const toggleOnConfirmModal = (arg = '') =>{
   $('.confirm').each(function(){
     $(this).data('toggle','')
   })
-}
-
-module.exports = pagination
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js b/app/javascript/journey_patterns/reducers/status.js
index 07bbdc249..88c75966d 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js
+++ b/app/javascript/journey_patterns/reducers/status.js
@@ -1,7 +1,7 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from '../actions'
 
-const status = (state = {}, action) => {
+export default function status (state = {}, action) {
   switch (action.type) {
     case 'UNAVAILABLE_SERVER':
       return _.assign({}, state, {fetchSuccess: false})
@@ -18,6 +18,4 @@ const status = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = status
+}
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/reducers/stopPointsList.js b/app/javascript/journey_patterns/reducers/stopPointsList.js
new file mode 100644
index 000000000..ee5eb1a80
--- /dev/null
+++ b/app/javascript/journey_patterns/reducers/stopPointsList.js
@@ -0,0 +1,6 @@
+export default function stopPointsList (state = [], action) {
+  switch (action.type) {
+    default:
+      return state
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
new file mode 100644
index 000000000..0b3711e53
--- /dev/null
+++ b/app/javascript/packs/application.js
@@ -0,0 +1,11 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+// import jQuery from 'jquery'
+// import {} from 'jquery-ujs'
diff --git a/app/javascript/packs/date_filters.js b/app/javascript/packs/date_filters.js
new file mode 100644
index 000000000..88f508152
--- /dev/null
+++ b/app/javascript/packs/date_filters.js
@@ -0,0 +1 @@
+import DateFilter from '../date_filters'
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/index.js b/app/javascript/packs/journey_patterns/index.js
index ca9efd2d0..fde28b45d 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/index.js
+++ b/app/javascript/packs/journey_patterns/index.js
@@ -1,9 +1,10 @@
-var React = require('react')
-var render = require('react-dom').render
-var Provider = require('react-redux').Provider
-var createStore = require('redux').createStore
-var journeyPatternsApp = require('./reducers')
-var App = require('./components/App')
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import journeyPatternsApp from '../../journey_patterns/reducers'
+import App from '../../journey_patterns/components/App'
+import clone from '../../helpers/clone'
 
 // logger, DO NOT REMOVE
 // var applyMiddleware = require('redux').applyMiddleware
diff --git a/app/javascript/packs/routes/edit.js b/app/javascript/packs/routes/edit.js
new file mode 100644
index 000000000..d6ceed60f
--- /dev/null
+++ b/app/javascript/packs/routes/edit.js
@@ -0,0 +1,81 @@
+import React, { PropTypes } from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+
+import reducers from '../../routes/reducers'
+import App from '../../routes/components/App'
+import formHelper from '../../routes/form_helper'
+import clone from '../../helpers/clone'
+let datas = clone(window, "itinerary_stop", true)
+datas = JSON.parse(decodeURIComponent(datas))
+
+// logger, DO NOT REMOVE
+var applyMiddleware = require('redux').applyMiddleware
+var createLogger = require('redux-logger')
+var thunkMiddleware = require('redux-thunk').default
+var promise = require('redux-promise')
+
+const getInitialState = () => {
+  let state = []
+
+  datas.map(function (v, i) {
+    let fancyText = v.name.replace("&#39;", "\'")
+    if (v.zip_code && v.city_name)
+      fancyText += ", " + v.zip_code + " " + v.city_name.replace("&#39;", "\'")
+
+    state.push({
+      stoppoint_id: v.stoppoint_id,
+      stoparea_id: v.stoparea_id,
+      user_objectid: v.user_objectid,
+      short_name: v.short_name ? v.short_name.replace("&#39;", "\'") : '',
+      area_type: v.area_type,
+      index: i,
+      edit: false,
+      city_name: v.city_name ? v.city_name.replace("&#39;", "\'") : '',
+      zip_code: v.zip_code,
+      name: v.name ? v.name.replace("&#39;", "\'") : '',
+      registration_number: v.registration_number,
+      text: fancyText,
+      for_boarding: v.for_boarding || "normal",
+      for_alighting: v.for_alighting || "normal",
+      longitude: v.longitude || 0,
+      latitude: v.latitude || 0,
+      comment: v.comment ? v.comment.replace("&#39;", "\'") : '',
+      olMap: {
+        isOpened: false,
+        json: {}
+      }
+    })
+  })
+
+  return state
+}
+
+var initialState = { stopPoints: getInitialState() }
+const loggerMiddleware = createLogger()
+let store = createStore(
+  reducers,
+  initialState,
+  applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
+)
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('stop_points')
+)
+
+document.querySelector('input[name=commit]').addEventListener('click', (event) => {
+  let state = store.getState()
+
+  let name = $("#route_name").val()
+  let publicName = $("#route_published_name").val()
+  if (name == "" || publicName == "") {
+    event.preventDefault()
+    formHelper.handleForm("#route_name", "#route_published_name")
+  }
+
+  formHelper.handleStopPoints(event, state)
+})
diff --git a/app/javascript/packs/routes/show.js b/app/javascript/packs/routes/show.js
new file mode 100644
index 000000000..7f14a6f11
--- /dev/null
+++ b/app/javascript/packs/routes/show.js
@@ -0,0 +1,102 @@
+import clone from '../../helpers/clone'
+let route = clone(window, "route", true)
+route = JSON.parse(decodeURIComponent(route))
+
+const geoColPts = []
+const geoColLns = []
+const geoColEdges = [
+  new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(route[0].longitude), parseFloat(route[0].latitude)]))
+  }),
+  new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(route[route.length - 1].longitude), parseFloat(route[route.length - 1].latitude)]))
+  })
+]
+route.forEach(function (stop, i) {
+  if (i < route.length - 1) {
+    geoColLns.push(new ol.Feature({
+      geometry: new ol.geom.LineString([
+        ol.proj.fromLonLat([parseFloat(route[i].longitude), parseFloat(route[i].latitude)]),
+        ol.proj.fromLonLat([parseFloat(route[i + 1].longitude), parseFloat(route[i + 1].latitude)])
+      ])
+    }))
+  }
+  geoColPts.push(new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(stop.longitude), parseFloat(stop.latitude)]))
+  })
+  )
+})
+var edgeStyles = new ol.style.Style({
+  image: new ol.style.Circle(({
+    radius: 5,
+    stroke: new ol.style.Stroke({
+      color: '#007fbb',
+      width: 2
+    }),
+    fill: new ol.style.Fill({
+      color: '#007fbb',
+      width: 2
+    })
+  }))
+})
+var defaultStyles = new ol.style.Style({
+  image: new ol.style.Circle(({
+    radius: 4,
+    stroke: new ol.style.Stroke({
+      color: '#007fbb',
+      width: 2
+    }),
+    fill: new ol.style.Fill({
+      color: '#ffffff',
+      width: 2
+    })
+  }))
+})
+var lineStyle = new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    color: '#007fbb',
+    width: 3
+  })
+})
+
+var vectorPtsLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: geoColPts
+  }),
+  style: defaultStyles,
+  zIndex: 2
+})
+var vectorEdgesLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: geoColEdges
+  }),
+  style: edgeStyles,
+  zIndex: 3
+})
+var vectorLnsLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: geoColLns
+  }),
+  style: [lineStyle],
+  zIndex: 1
+})
+
+var map = new ol.Map({
+  target: 'route_map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    }),
+    vectorPtsLayer,
+    vectorEdgesLayer,
+    vectorLnsLayer
+  ],
+  controls: [new ol.control.ScaleLine(), new ol.control.Zoom(), new ol.control.ZoomSlider()],
+  interactions: ol.interaction.defaults({
+    zoom: true
+  }),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([parseFloat(route[0].longitude), parseFloat(route[0].latitude)]),
+    zoom: 13
+  })
+});
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/javascript/packs/time_tables/edit.js
index 6c352df6b..cf058d501 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/index.js
+++ b/app/javascript/packs/time_tables/edit.js
@@ -1,11 +1,11 @@
-var React = require('react')
-var render = require('react-dom').render
-var Provider = require('react-redux').Provider
-var createStore = require('redux').createStore
-var timeTablesApp = require('./reducers')
-var App = require('./containers/App')
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import timeTablesApp from '../../time_tables/reducers'
+import App from '../../time_tables/containers/App'
+import clone from '../../helpers/clone'
 
-const clone = require('../helpers/clone')
 const actionType = clone(window, "actionType", true)
 
 // logger, DO NOT REMOVE
@@ -14,7 +14,7 @@ const actionType = clone(window, "actionType", true)
 // var thunkMiddleware = require('redux-thunk').default
 // var promise = require('redux-promise')
 
-var initialState = {
+let initialState = {
   status: {
     actionType: actionType,
     policy: window.perms,
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js b/app/javascript/packs/vehicle_journeys/index.js
index 53bbcf952..38431af1d 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
+++ b/app/javascript/packs/vehicle_journeys/index.js
@@ -1,11 +1,11 @@
-var React = require('react')
-var render = require('react-dom').render
-var Provider = require('react-redux').Provider
-var createStore = require('redux').createStore
-var vehicleJourneysApp = require('./reducers')
-var App = require('./components/App')
-var actions = require("./actions")
-var enableBatching = require('./batch').enableBatching
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import vehicleJourneysApp from '../../vehicle_journeys/reducers'
+import App from '../../vehicle_journeys/components/App'
+import actions from "../../vehicle_journeys/actions"
+import { enableBatching } from '../../vehicle_journeys/batch'
 
 // logger, DO NOT REMOVE
 // var applyMiddleware = require('redux').applyMiddleware
@@ -99,4 +99,4 @@ render(
     <App />
   </Provider>,
   document.getElementById('vehicle_journeys_wip')
-)
+)
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/actions/index.js b/app/javascript/routes/actions/index.js
index 13b2d60b2..13b2d60b2 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/actions/index.js
+++ b/app/javascript/routes/actions/index.js
diff --git a/app/javascript/routes/components/App.js b/app/javascript/routes/components/App.js
new file mode 100644
index 000000000..0f5786407
--- /dev/null
+++ b/app/javascript/routes/components/App.js
@@ -0,0 +1,25 @@
+import React, { Component, PropTypes } from 'react'
+import AddStopPoint from '../containers/AddStopPoint'
+import VisibleStopPoints from'../containers/VisibleStopPoints'
+import clone  from '../../helpers/clone'
+const I18n = clone(window , "I18n", true)
+
+export default class App extends Component {
+
+  getChildContext() {
+    return { I18n }
+  }
+
+  render() {
+    return (
+      <div>
+        <VisibleStopPoints />
+        <AddStopPoint />
+      </div>
+    )  
+  } 
+}
+
+App.childContextTypes = {
+  I18n: PropTypes.object
+}
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js b/app/javascript/routes/components/BSelect2.js
index 9a82b7925..340d9df95 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
+++ b/app/javascript/routes/components/BSelect2.js
@@ -1,7 +1,6 @@
-var _ = require('lodash')
-var React = require('react')
-var { Component, PropTypes } = require('react')
-var Select2 = require('react-select2')
+import _ from'lodash'
+import React, { Component, PropTypes } from 'react'
+import Select2 from 'react-select2'
 
 
 // get JSON full path
@@ -9,7 +8,7 @@ var origin = window.location.origin
 var path = window.location.pathname.split('/', 3).join('/')
 
 
-class BSelect3 extends Component{
+export default class BSelect3 extends Component {
   constructor(props, context) {
     super(props, context)
   }
@@ -124,5 +123,3 @@ class BSelect2 extends Component{
 BSelect2.contextTypes = {
   I18n: PropTypes.object
 }
-
-module.exports = BSelect3
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js b/app/javascript/routes/components/OlMap.js
index 937871346..2c01dfa7f 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
+++ b/app/javascript/routes/components/OlMap.js
@@ -1,8 +1,7 @@
-var _ = require('lodash')
-var React = require('react')
-var { Component, PropTypes } = require('react')
+import _ from 'lodash'
+import React, { Component, PropTypes } from 'react'
 
-class OlMap extends Component{
+export default class OlMap extends Component{
   constructor(props, context){
     super(props, context)
   }
@@ -168,5 +167,3 @@ OlMap.PropTypes = {
 OlMap.contextTypes = {
   I18n: PropTypes.object
 }
-
-module.exports = OlMap
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js b/app/javascript/routes/components/StopPoint.js
index c3996f5b3..606121f99 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
+++ b/app/javascript/routes/components/StopPoint.js
@@ -1,9 +1,8 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var BSelect2 = require('./BSelect2')
-var OlMap = require('./OlMap')
+import React, { PropTypes } from 'react'
+import BSelect2 from './BSelect2'
+import OlMap from './OlMap'
 
-const StopPoint = (props, {I18n}) => {
+export default function StopPoint(props, {I18n}) {
   return (
     <div className='nested-fields'>
       <div className='wrapper'>
@@ -76,7 +75,7 @@ const StopPoint = (props, {I18n}) => {
   )
 }
 
-StopPoint.propTypes = {
+StopPoint.PropTypes = {
   onToggleMap: PropTypes.func.isRequired,
   onToggleEdit: PropTypes.func.isRequired,
   onDeleteClick: PropTypes.func.isRequired,
@@ -92,6 +91,4 @@ StopPoint.propTypes = {
 
 StopPoint.contextTypes = {
   I18n: PropTypes.object
-}
-
-module.exports = StopPoint
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js b/app/javascript/routes/components/StopPointList.js
index 37a480fca..68af16f57 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js
+++ b/app/javascript/routes/components/StopPointList.js
@@ -1,8 +1,7 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var StopPoint = require('./StopPoint')
+import React, { PropTypes } from 'react'
+import StopPoint from './StopPoint'
 
-const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onToggleEdit, onSelectMarker, onUnselectMarker, onUpdateViaOlMap }, {I18n}) => {
+export default function StopPointList({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onToggleEdit, onSelectMarker, onUnselectMarker, onUpdateViaOlMap }, {I18n}) {
   return (
     <div className='subform'>
       <div className='nested-head'>
@@ -55,7 +54,7 @@ const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownCli
   )
 }
 
-StopPointList.propTypes = {
+StopPointList.PropTypes = {
   stopPoints: PropTypes.array.isRequired,
   onDeleteClick: PropTypes.func.isRequired,
   onMoveUpClick: PropTypes.func.isRequired,
@@ -67,6 +66,4 @@ StopPointList.propTypes = {
 
 StopPointList.contextTypes = {
   I18n: PropTypes.object
-}
-
-module.exports = StopPointList
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/containers/AddStopPoint.js b/app/javascript/routes/containers/AddStopPoint.js
index ea5ae90db..fd9227ff3 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/containers/AddStopPoint.js
+++ b/app/javascript/routes/containers/AddStopPoint.js
@@ -1,6 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
+import React from 'react'
+import { connect } from 'react-redux'
+import actions from '../actions'
 
 let AddStopPoint = ({ dispatch }) => {
   return (
@@ -17,6 +17,4 @@ let AddStopPoint = ({ dispatch }) => {
     </div>
   )
 }
-AddStopPoint = connect()(AddStopPoint)
-
-module.exports = AddStopPoint
+export default AddStopPoint = connect()(AddStopPoint)
diff --git a/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js b/app/javascript/routes/containers/VisibleStopPoints.js
index 8b08a1e5f..67d77af50 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js
+++ b/app/javascript/routes/containers/VisibleStopPoints.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var StopPointList = require('../components/StopPointList')
+import actions from '../actions'
+import  { connect } from 'react-redux'
+import StopPointList from '../components/StopPointList'
 
 const mapStateToProps = (state) => {
   return {
@@ -55,4 +55,4 @@ const VisibleStopPoints = connect(
   mapDispatchToProps
 )(StopPointList)
 
-module.exports = VisibleStopPoints
+export default VisibleStopPoints
diff --git a/app/assets/javascripts/es6_browserified/itineraries/form_helper.js b/app/javascript/routes/form_helper.js
index f682e39c0..8a3277234 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/form_helper.js
+++ b/app/javascript/routes/form_helper.js
@@ -52,4 +52,4 @@ const formHelper = {
   }
 }
 
-module.exports = formHelper
\ No newline at end of file
+export default formHelper
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/index.js b/app/javascript/routes/index.js
index 13d89bec5..febae7d54 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/index.js
+++ b/app/javascript/routes/index.js
@@ -1,11 +1,11 @@
-var React = require('react')
-var render = require('react-dom').render
-var Provider = require('react-redux').Provider
-var createStore = require('redux').createStore
-var reducers = require('./reducers')
-var App = require('./components/App')
-var { handleForm, handleStopPoints } = require('./form_helper')
-let clone = require('../helpers/clone')
+import React from 'react'
+import { render  } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import reducers from './reducers'
+import App from './components/App'
+import { handleForm, handleStopPoints } from './form_helper'
+import clone from '../helpers/clone'
 let datas = clone(window, "itinerary_stop", true)
 datas = JSON.parse(decodeURIComponent(datas))
 
diff --git a/app/javascript/routes/reducers/index.js b/app/javascript/routes/reducers/index.js
new file mode 100644
index 000000000..eb01ea9f7
--- /dev/null
+++ b/app/javascript/routes/reducers/index.js
@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import stopPoints from './stopPoints'
+
+const stopPointsApp = combineReducers({
+  stopPoints
+})
+
+export default stopPointsApp
diff --git a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js b/app/javascript/routes/reducers/stopPoints.js
index f3a26b8d7..eeec06327 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
+++ b/app/javascript/routes/reducers/stopPoints.js
@@ -1,5 +1,5 @@
-var _ = require('lodash')
-var { addInput } = require('../form_helper')
+import _ from 'lodash'
+import formHelper from '../form_helper'
 
 const stopPoint = (state = {}, action, length) => {
   switch (action.type) {
@@ -23,8 +23,8 @@ const stopPoint = (state = {}, action, length) => {
 const updateFormForDeletion = (stop) =>{
   if (stop.stoppoint_id !== undefined){
     let now = Date.now()
-    addInput('id', stop.stoppoint_id, now)
-    addInput('_destroy', 'true', now)
+    formHelper.addInput('id', stop.stoppoint_id, now)
+    formHelper.addInput('_destroy', 'true', now)
   }
 }
 
@@ -141,4 +141,4 @@ const stopPoints = (state = [], action) => {
   }
 }
 
-module.exports = stopPoints
+export default stopPoints
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/show.js b/app/javascript/routes/show.js
index e88469900..e88469900 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/show.js
+++ b/app/javascript/routes/show.js
diff --git a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js b/app/javascript/time_tables/actions/index.js
index a421a8ed6..13cb96b64 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/javascript/time_tables/actions/index.js
@@ -1,10 +1,14 @@
-const _ = require('lodash')
-const clone = require('../../helpers/clone')
+import range from 'lodash/range'
+import assign from 'lodash/assign'
+import reject from 'lodash/reject'
+import some from 'lodash/some'
+import every from 'lodash/every'
+import clone from '../../helpers/clone'
 const I18n = clone(window, "I18n")
 
 const actions = {
   weekDays: (index) => {
-    return _.range(1, 8).map(n => I18n.time_tables.edit.metas.days[n])
+    return range(1, 8).map(n => I18n.time_tables.edit.metas.days[n])
   },
   strToArrayDayTypes: (str) =>{
     return actions.weekDays().map(day => str.indexOf(day) !== -1)
@@ -151,7 +155,7 @@ const actions = {
     type : 'CLOSE_MODAL'
   }),
   monthName(strDate) {
-    let monthList = _.range(1,13).map(n => I18n.calendars.months[n])
+    let monthList = range(1,13).map(n => I18n.calendars.months[n])
     let date = new Date(strDate)
     return monthList[date.getMonth()]
   },
@@ -172,12 +176,12 @@ const actions = {
     return date.toLocaleDateString()
   },
   updateSynthesis: ({current_month, time_table_dates: dates, time_table_periods: periods}) => {
-    let newPeriods = _.reject(periods, 'deleted')
+    let newPeriods = reject(periods, 'deleted')
     let improvedCM = current_month.map((d, i) => {
       let isInPeriod = actions.isInPeriod(newPeriods, d.date)
-      let isIncluded = _.some(dates, {'date': d.date, 'in_out': true})
+      let isIncluded = some(dates, {'date': d.date, 'in_out': true})
 
-      return _.assign({}, current_month[i], {
+      return assign({}, current_month[i], {
         in_periods: isInPeriod,
         include_date: isIncluded,
         excluded_date: !isInPeriod ? false : current_month[i].excluded_date
@@ -271,8 +275,8 @@ const actions = {
   submitTimetable: (dispatch, timetable, metas, next) => {
     dispatch(actions.fetchingApi())
     let strDayTypes = actions.arrayToStrDayTypes(metas.day_types)
-    metas.day_types= strDayTypes
-    let sentState = _.assign({}, timetable, metas)
+    metas.day_types = strDayTypes
+    let sentState = assign({}, timetable, metas)
     let urlJSON = window.location.pathname.split('/', 5).join('/')
     let hasError = false
     fetch(urlJSON + '.json', {
@@ -302,8 +306,8 @@ const actions = {
       })
   },
   errorModalKey: (periods, dayTypes) => {
-    const withoutPeriodsWithDaysTypes = _.reject(periods, 'deleted').length == 0 && _.some(dayTypes) && "withoutPeriodsWithDaysTypes"
-    const withPeriodsWithoutDayTypes = _.reject(periods, 'deleted').length > 0 &&  _.every(dayTypes, dt => dt == false) && "withPeriodsWithoutDayTypes"
+    const withoutPeriodsWithDaysTypes = reject(periods, 'deleted').length == 0 && some(dayTypes) && "withoutPeriodsWithDaysTypes"
+    const withPeriodsWithoutDayTypes = reject(periods, 'deleted').length > 0 &&  every(dayTypes, dt => dt == false) && "withPeriodsWithoutDayTypes"
 
     return (withoutPeriodsWithDaysTypes || withPeriodsWithoutDayTypes) && (withoutPeriodsWithDaysTypes ? "withoutPeriodsWithDaysTypes" : "withPeriodsWithoutDayTypes")
 
@@ -318,7 +322,7 @@ const actions = {
         return errorKey
 
     }
-  },
+  }
 }
 
-module.exports = actions
+export default actions
\ No newline at end of file
diff --git a/app/javascript/time_tables/components/ConfirmModal.js b/app/javascript/time_tables/components/ConfirmModal.js
new file mode 100644
index 000000000..d89170ee7
--- /dev/null
+++ b/app/javascript/time_tables/components/ConfirmModal.js
@@ -0,0 +1,50 @@
+import React, { PropTypes } from 'react'
+
+export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCancel, timetable, metas}, {I18n}) {
+  return (
+    <div className={'modal fade ' + ((modal.type == 'confirm') ? 'in' : '')} id='ConfirmModal'>
+      <div className='modal-container'>
+        <div className='modal-dialog'>
+          <div className='modal-content'>
+            <div className='modal-header'>
+              <h4 className='modal-title'>{I18n.time_tables.edit.confirm_modal.title}</h4>
+            </div>
+            <div className='modal-body'>
+              <div className='mt-md mb-md'>
+                <p>{I18n.time_tables.edit.confirm_modal.message}</p>
+              </div>
+            </div>
+            <div className='modal-footer'>
+              <button
+                className='btn btn-link'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalCancel(modal.confirmModal.callback) }}
+              >
+                {I18n.cancel}
+              </button>
+              <button
+                className='btn btn-primary'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalAccept(modal.confirmModal.callback, timetable, metas) }}
+              >
+                {I18n.actions.submit}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ConfirmModal.propTypes = {
+  modal: PropTypes.object.isRequired,
+  onModalAccept: PropTypes.func.isRequired,
+  onModalCancel: PropTypes.func.isRequired
+}
+
+ConfirmModal.contextTypes = {
+  I18n: PropTypes.object
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/components/ErrorModal.js b/app/javascript/time_tables/components/ErrorModal.js
new file mode 100644
index 000000000..e810f49ab
--- /dev/null
+++ b/app/javascript/time_tables/components/ErrorModal.js
@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react'
+import actions from '../actions'
+
+export default function ErrorModal({dispatch, modal, onModalClose}, {I18n}) {
+  return (
+    <div className={'modal fade ' + ((modal.type == 'error') ? 'in' : '')} id='ErrorModal'>
+      <div className='modal-container'>
+        <div className='modal-dialog'>
+          <div className='modal-content'>
+            <div className='modal-header'>
+              <h4 className='modal-title'>{I18n.time_tables.edit.error_modal.title}</h4>
+            </div>
+            <div className='modal-body'>
+              <div className='mt-md mb-md'>
+                <p>{actions.errorModalMessage(modal.modalProps.error)}</p>
+              </div>
+            </div>
+            <div className='modal-footer'>
+              <button
+                className='btn btn-link'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalClose() }}
+              >
+                {I18n.back}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ErrorModal.propTypes = {
+  modal: PropTypes.object.isRequired,
+  onModalClose: PropTypes.func.isRequired
+}
+
+ErrorModal.contextTypes = {
+  I18n: PropTypes.object
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js b/app/javascript/time_tables/components/ExceptionsInDay.js
index 80c2e4b7a..3335ee89d 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
+++ b/app/javascript/time_tables/components/ExceptionsInDay.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class ExceptionsInDay extends Component {
+export default class ExceptionsInDay extends Component {
   constructor(props) {
     super(props)
   }
@@ -71,5 +69,3 @@ ExceptionsInDay.propTypes = {
   onIncludeDateInPeriod: PropTypes.func.isRequired,
   index: PropTypes.number.isRequired
 }
-
-module.exports = ExceptionsInDay
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js b/app/javascript/time_tables/components/Metas.js
index 26a96e4a6..7098d2b82 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
+++ b/app/javascript/time_tables/components/Metas.js
@@ -1,9 +1,8 @@
-var React = require('react')
-var  { PropTypes }  = require('react')
-const { weekDays } = require('../actions')
-var TagsSelect2 = require('./TagsSelect2')
+import React, { PropTypes } from 'react'
+import actions from '../actions'
+import TagsSelect2 from './TagsSelect2'
 
-const Metas = ({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor, onSelect2Tags, onUnselect2Tags}, {I18n}) => {
+export default function Metas({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor, onSelect2Tags, onUnselect2Tags}, {I18n}) {
   let colorList = ["", "#9B9B9B", "#FFA070", "#C67300", "#7F551B", "#41CCE3", "#09B09C", "#3655D7",   "#6321A0", "#E796C6", "#DD2DAA"]
   return (
     <div className='form-horizontal'>
@@ -112,7 +111,7 @@ const Metas = ({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor, onSelec
                           type="checkbox"
                           checked={day ? 'checked' : ''}
                           />
-                        <span className='lcbx-group-item-label'>{weekDays()[i]}</span>
+                        <span className='lcbx-group-item-label'>{actions.weekDays()[i]}</span>
                       </label>
                     </div>
                   </div>
@@ -138,5 +137,3 @@ Metas.propTypes = {
 Metas.contextTypes = {
   I18n: PropTypes.object
 }
-
-module.exports = Metas
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js b/app/javascript/time_tables/components/Navigate.js
index 6a3690cb0..7307d819b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
+++ b/app/javascript/time_tables/components/Navigate.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import map from 'lodash/map'
+import actions from '../actions'
 
-let Navigate = ({ dispatch, metas, timetable, pagination, status, filters}) => {
+export default function Navigate({ dispatch, metas, timetable, pagination, status, filters}) {
   if(status.isFetching == true) {
     return false
   }
@@ -32,7 +30,7 @@ let Navigate = ({ dispatch, metas, timetable, pagination, status, filters}) => {
                 className='dropdown-menu'
                 aria-labelledby='date_selector'
                 >
-                {_.map(pagination.periode_range, (month, i) => (
+                {map(pagination.periode_range, (month, i) => (
                   <li key={i}>
                     <button
                       type='button'
@@ -87,6 +85,4 @@ Navigate.propTypes = {
   status: PropTypes.object.isRequired,
   pagination: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired
-}
-
-module.exports = Navigate
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/components/PeriodForm.js b/app/javascript/time_tables/components/PeriodForm.js
new file mode 100644
index 000000000..d9f1d3437
--- /dev/null
+++ b/app/javascript/time_tables/components/PeriodForm.js
@@ -0,0 +1,148 @@
+import React, { PropTypes } from 'react'
+import filter from 'lodash/filter'
+let monthsArray = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
+
+const formatNumber = (val) => {
+  return ("0" + val).slice(-2)
+}
+
+const makeDaysOptions = (daySelected) => {
+  let arr = []
+  for(let i = 1; i < 32; i++) {
+    arr.push(<option value={formatNumber(i)} key={i}>{formatNumber(i)}</option>)
+  }
+  return arr
+}
+
+const makeMonthsOptions = (monthSelected) => {
+  let arr = []
+  for(let i = 1; i < 13; i++) {
+    arr.push(<option value={formatNumber(i)} key={i}>{monthsArray[i - 1]}</option>)
+  }
+  return arr
+}
+
+const makeYearsOptions = (yearSelected) => {
+  let arr = []
+  let startYear = new Date().getFullYear() - 3
+  for(let i = startYear; i <= startYear + 6; i++) {
+    arr.push(<option key={i}>{i}</option>)
+  }
+  return arr
+}
+
+export default function PeriodForm({modal, timetable, metas, onOpenAddPeriodForm, onClosePeriodForm, onUpdatePeriodForm, onValidatePeriodForm}, {I18n}) {
+  return (
+    <div className="container-fluid">
+      <div className="row">
+        <div className="col lg-6 col-lg-offset-3">
+          <div className='subform'>
+            {modal.modalProps.active &&
+              <div>
+                <div className="nested-head">
+                  <div className="wrapper">
+                    <div>
+                      <div className="form-group">
+                        <label htmlFor="" className="control-label required">
+                          {I18n.time_tables.edit.period_form.begin}
+                          <abbr title="requis">*</abbr>
+                        </label>
+                      </div>
+                    </div>
+                    <div>
+                      <div className="form-group">
+                        <label htmlFor="" className="control-label required">
+                          {I18n.time_tables.edit.period_form.end}
+                          <abbr title="requis">*</abbr>
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="nested-fields">
+                  <div className="wrapper">
+                    <div>
+                      <div className={'form-group date ' + (modal.modalProps.error ? ' has-error' : '')}>
+                        <div className="form-inline">
+                          <select value={formatNumber(modal.modalProps.begin.day)} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'day', modal.modalProps)} id="q_validity_period_begin_gteq_3i" className="date required form-control">
+                            {makeDaysOptions(modal.modalProps.begin.day)}
+                          </select>
+                          <select value={formatNumber(modal.modalProps.begin.month)} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'month', modal.modalProps)} id="q_validity_period_begin_gteq_2i" className="date required form-control">
+                            {makeMonthsOptions(modal.modalProps.begin.month)}
+                          </select>
+                          <select value={modal.modalProps.begin.year} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'year', modal.modalProps)} id="q_validity_period_begin_gteq_1i" className="date required form-control">
+                            {makeYearsOptions(modal.modalProps.begin.year)}
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div className={'form-group date ' + (modal.modalProps.error ? ' has-error' : '')}>
+                        <div className="form-inline">
+                          <select value={formatNumber(modal.modalProps.end.day)} onChange={(e) => onUpdatePeriodForm(e, 'end', 'day', modal.modalProps)} id="q_validity_period_end_gteq_3i" className="date required form-control">
+                            {makeDaysOptions(modal.modalProps.end.day)}
+                          </select>
+                          <select value={formatNumber(modal.modalProps.end.month)} onChange={(e) => onUpdatePeriodForm(e, 'end', 'month', modal.modalProps)} id="q_validity_period_end_gteq_2i" className="date required form-control">
+                            {makeMonthsOptions(modal.modalProps.end.month)}
+                          </select>
+                          <select value={modal.modalProps.end.year} onChange={(e) => onUpdatePeriodForm(e, 'end', 'year', modal.modalProps)} id="q_validity_period_end_gteq_1i" className="date required form-control">
+                            {makeYearsOptions(modal.modalProps.end.year)}
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className='links nested-linker'>
+                  <span className='help-block small text-danger pull-left mt-xs ml-sm'>
+                    {modal.modalProps.error}
+                  </span>
+                  <button
+                    type='button'
+                    className='btn btn-link'
+                    onClick={onClosePeriodForm}
+                  >
+                    {I18n.cancel}
+                  </button>
+                  <button
+                    type='button'
+                    className='btn btn-outline-primary mr-sm'
+                    onClick={() => onValidatePeriodForm(modal.modalProps, timetable.time_table_periods, metas, filter(timetable.time_table_dates, ['in_out', true]))}
+                  >
+                    {I18n.actions.submit}
+                  </button>
+                </div>
+              </div>
+            }
+            {!modal.modalProps.active &&
+              <div className="text-right">
+                <button
+                  type='button'
+                  className='btn btn-outline-primary'
+                  onClick={onOpenAddPeriodForm}
+                >
+                  {I18n.time_tables.actions.add_period}
+                </button>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  ) 
+}
+
+PeriodForm.propTypes = {
+  modal: PropTypes.object.isRequired,
+  metas: PropTypes.object.isRequired,
+  onOpenAddPeriodForm: PropTypes.func.isRequired,
+  onClosePeriodForm: PropTypes.func.isRequired,
+  onUpdatePeriodForm: PropTypes.func.isRequired,
+  onValidatePeriodForm: PropTypes.func.isRequired,
+  timetable: PropTypes.object.isRequired
+}
+
+PeriodForm.contextTypes = {
+  I18n: PropTypes.object
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js b/app/javascript/time_tables/components/PeriodManager.js
index 704e21331..9922ce2c4 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
+++ b/app/javascript/time_tables/components/PeriodManager.js
@@ -1,8 +1,7 @@
-var React = require('react')
-var { Component, PropTypes } = require('react')
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class PeriodManager extends Component {
+export default class PeriodManager extends Component {
   constructor(props, context) {
     super(props, context)
   }
@@ -83,6 +82,4 @@ PeriodManager.propTypes = {
 
 PeriodManager.contextTypes = {
   I18n: PropTypes.object
-}
-
-module.exports = PeriodManager
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js b/app/javascript/time_tables/components/PeriodsInDay.js
index f56509b99..888537579 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js
+++ b/app/javascript/time_tables/components/PeriodsInDay.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var PeriodManager = require('./PeriodManager')
+import React, { PropTypes, Component } from 'react'
+import PeriodManager from './PeriodManager'
 
-class PeriodsInDay extends Component {
+export default class PeriodsInDay extends Component {
   constructor(props) {
     super(props)
   }
@@ -75,5 +73,3 @@ PeriodsInDay.propTypes = {
   index: PropTypes.number.isRequired,
   onDeletePeriod: PropTypes.func.isRequired
 }
-
-module.exports = PeriodsInDay
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/SaveTimetable.js b/app/javascript/time_tables/components/SaveTimetable.js
index 779fd8e25..d5a57bd1c 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/SaveTimetable.js
+++ b/app/javascript/time_tables/components/SaveTimetable.js
@@ -1,10 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class SaveTimetable extends Component{
+export default class SaveTimetable extends Component{
   constructor(props){
     super(props)
   }
@@ -41,6 +38,4 @@ SaveTimetable.propTypes = {
   timetable: PropTypes.object.isRequired,
   status: PropTypes.object.isRequired,
   metas: PropTypes.object.isRequired
-}
-
-module.exports = SaveTimetable
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/TagsSelect2.js b/app/javascript/time_tables/components/TagsSelect2.js
index 46188cdd1..70a748a04 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/TagsSelect2.js
+++ b/app/javascript/time_tables/components/TagsSelect2.js
@@ -1,21 +1,22 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
+import React, { PropTypes, Component } from 'react'
+import mapKeys from 'lodash/mapKeys'
+import map from 'lodash/map'
+import filter from 'lodash/filter'
+import assign from 'lodash/assign'
+import Select2 from 'react-select2'
 
 // get JSON full path
-var origin = window.location.origin
-var path = window.location.pathname.split('/', 4).join('/')
-var _ = require('lodash')
+let origin = window.location.origin
+let path = window.location.pathname.split('/', 4).join('/')
 
-class TagsSelect2 extends React.Component{
+export default class TagsSelect2 extends Component {
   constructor(props, context) {
     super(props, context)
   }
 
   mapKeys(array){
     return array.map((item) =>
-      _.mapKeys(item, (v, k) =>
+      mapKeys(item, (v, k) =>
         ((k == 'name') ? 'text' : k)
       )
     )
@@ -24,7 +25,7 @@ class TagsSelect2 extends React.Component{
   render() {
     return (
       <Select2
-        value={(this.props.tags.length) ? _.map(this.props.tags, 'id') : undefined}
+        value={(this.props.tags.length) ? map(this.props.tags, 'id') : undefined}
         data={(this.props.initialTags.length) ? this.mapKeys(this.props.initialTags) : undefined}
         onSelect={(e) => this.props.onSelect2Tags(e)}
         onUnselect={(e) => setTimeout( () => this.props.onUnselect2Tags(e, 150))}
@@ -49,10 +50,10 @@ class TagsSelect2 extends React.Component{
               };
             },
             processResults: function(data, params) {
-              let items = _.filter(data, ({name}) => name.includes(params.term) )
+              let items = filter(data, ({name}) => name.includes(params.term) )
               return {
                 results: items.map(
-                  item => _.assign(
+                  item => assign(
                     {},
                     item,
                     {text: item.name}
@@ -76,6 +77,4 @@ const formatRepo = (props) => {
 
 TagsSelect2.contextTypes = {
   I18n: PropTypes.object
-}
-
-module.exports = TagsSelect2
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/TimeTableDay.js b/app/javascript/time_tables/components/TimeTableDay.js
index 93a0a90fe..165c7b848 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/TimeTableDay.js
+++ b/app/javascript/time_tables/components/TimeTableDay.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var { Component, PropTypes } = require('react')
+import React, { PropTypes, Component } from 'react'
 
-class TimeTableDay extends Component {
+export default class TimeTableDay extends Component {
   constructor(props) {
     super(props)
   }
@@ -30,5 +29,3 @@ TimeTableDay.propTypes = {
   index: PropTypes.number.isRequired,
   dayTypeActive: PropTypes.bool.isRequired
 }
-
-module.exports = TimeTableDay
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js b/app/javascript/time_tables/components/Timetable.js
index 22e971c6b..df6e6016b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
+++ b/app/javascript/time_tables/components/Timetable.js
@@ -1,11 +1,11 @@
-var React = require('react')
-var { Component, PropTypes}  = require('react')
-var TimeTableDay = require('./TimeTableDay')
-var PeriodsInDay = require('./PeriodsInDay')
-var ExceptionsInDay = require('./ExceptionsInDay')
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
+import TimeTableDay from './TimeTableDay'
+import PeriodsInDay from './PeriodsInDay'
+import ExceptionsInDay from './ExceptionsInDay'
 
-class Timetable extends Component{
+
+export default class Timetable extends Component {
   constructor(props, context){
     super(props, context)
   }
@@ -113,5 +113,3 @@ Timetable.propTypes = {
 Timetable.contextTypes = {
   I18n: PropTypes.object
 }
-
-module.exports = Timetable
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js b/app/javascript/time_tables/containers/App.js
index f12fb8a71..235dccb50 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
+++ b/app/javascript/time_tables/containers/App.js
@@ -1,16 +1,14 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var { Component, PropTypes} = require('react')
-var actions = require('../actions')
-var Metas = require('./Metas')
-var Timetable = require('./Timetable')
-var Navigate = require('./Navigate')
-var PeriodForm = require('./PeriodForm')
-var SaveTimetable = require('./SaveTimetable')
-var ConfirmModal = require('./ConfirmModal')
-var ErrorModal = require('./ErrorModal')
-
-const clone = require('../../helpers/clone')
+import React, { PropTypes, Component } from 'react'
+import { connect } from'react-redux'
+import actions from '../actions'
+import Metas from './Metas'
+import Timetable from './Timetable'
+import Navigate from './Navigate'
+import PeriodForm from './PeriodForm'
+import SaveTimetable from './SaveTimetable'
+import ConfirmModal from './ConfirmModal'
+import ErrorModal from './ErrorModal'
+import clone from '../../helpers/clone'
 const I18n = clone(window, "I18n", true)
 
 class App extends Component {
@@ -54,4 +52,4 @@ App.childContextTypes = {
 
 const timeTableApp = connect(null, mapDispatchToProps)(App)
 
-module.exports = timeTableApp
+export default timeTableApp
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/ConfirmModal.js b/app/javascript/time_tables/containers/ConfirmModal.js
index 6282c1d1d..f3742b038 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/ConfirmModal.js
+++ b/app/javascript/time_tables/containers/ConfirmModal.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ConfirmModal = require('../components/ConfirmModal')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import ConfirmModal from '../components/ConfirmModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -28,4 +28,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ConfirmModalContainer = connect(mapStateToProps, mapDispatchToProps)(ConfirmModal)
 
-module.exports = ConfirmModalContainer
+export default ConfirmModalContainer
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/ErrorModal.js b/app/javascript/time_tables/containers/ErrorModal.js
index e0b2c1240..37099073b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/ErrorModal.js
+++ b/app/javascript/time_tables/containers/ErrorModal.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ErrorModal = require('../components/ErrorModal')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import ErrorModal from '../components/ErrorModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -19,4 +19,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ErrorModalContainer = connect(mapStateToProps, mapDispatchToProps)(ErrorModal)
 
-module.exports = ErrorModalContainer
+export default ErrorModalContainer
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js b/app/javascript/time_tables/containers/Metas.js
index c4ab2d5b3..ebccf556e 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js
+++ b/app/javascript/time_tables/containers/Metas.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var MetasComponent = require('../components/Metas')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import MetasComponent from '../components/Metas'
 
 const mapStateToProps = (state) => {
   return {
@@ -35,4 +35,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const Metas = connect(mapStateToProps, mapDispatchToProps)(MetasComponent)
 
-module.exports = Metas
+export default Metas
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Navigate.js b/app/javascript/time_tables/containers/Navigate.js
index c70583c25..8d163659c 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Navigate.js
+++ b/app/javascript/time_tables/containers/Navigate.js
@@ -1,7 +1,7 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var NavigateComponent = require('../components/Navigate')
+import React from 'react'
+import { connect } from 'react-redux'
+import actions from '../actions'
+import NavigateComponent from '../components/Navigate'
 
 const mapStateToProps = (state) => {
   return {
@@ -15,4 +15,4 @@ const mapStateToProps = (state) => {
 
 const Navigate = connect(mapStateToProps)(NavigateComponent)
 
-module.exports = Navigate
+export default Navigate
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js b/app/javascript/time_tables/containers/PeriodForm.js
index 951a09741..1bde039e2 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js
+++ b/app/javascript/time_tables/containers/PeriodForm.js
@@ -1,7 +1,9 @@
-var connect = require('react-redux').connect
-var PeriodFormComponent = require('../components/PeriodForm')
-var actions = require('../actions')
-var _ = require('lodash')
+import { connect } from 'react-redux'
+import assign from 'lodash/assign'
+import actions from '../actions'
+import PeriodFormComponent from '../components/PeriodForm'
+
+
 
 const mapStateToProps = (state) => {
   return {
@@ -21,7 +23,7 @@ const mapDispatchToProps = (dispatch) => {
     },
     onUpdatePeriodForm: (e, group, selectType, modalProps) => {
       dispatch(actions.updatePeriodForm(e.currentTarget.value, group, selectType))
-      let mProps = _.assign({}, modalProps)
+      let mProps = assign({}, modalProps)
       mProps[group][selectType] = e.currentTarget.value
       let val = window.correctDay([parseInt(mProps[group]['day']), parseInt(mProps[group]['month']), parseInt(mProps[group]['year'])])
       val = (val < 10) ? '0' + String(val) : String(val)
@@ -41,4 +43,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const PeriodForm = connect(mapStateToProps, mapDispatchToProps)(PeriodFormComponent)
 
-module.exports = PeriodForm
+export default PeriodForm
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/SaveTimetable.js b/app/javascript/time_tables/containers/SaveTimetable.js
index 6287da15b..7574dc5cc 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/SaveTimetable.js
+++ b/app/javascript/time_tables/containers/SaveTimetable.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var SaveTimetableComponent = require('../components/SaveTimetable')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import SaveTimetableComponent from '../components/SaveTimetable'
 
 const mapStateToProps = (state) => {
   return {
@@ -23,4 +22,4 @@ const mapDispatchToProps = (dispatch) => {
 }
 const SaveTimetable = connect(mapStateToProps, mapDispatchToProps)(SaveTimetableComponent)
 
-module.exports = SaveTimetable
+export default SaveTimetable
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js b/app/javascript/time_tables/containers/Timetable.js
index a37e99982..e78e8840a 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
+++ b/app/javascript/time_tables/containers/Timetable.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var TimetableComponent = require('../components/Timetable')
-var actions = require('../actions')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import TimetableComponent from '../components/Timetable'
 
 const mapStateToProps = (state) => {
   return {
@@ -41,4 +41,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const Timetable = connect(mapStateToProps, mapDispatchToProps)(TimetableComponent)
 
-module.exports = Timetable
+export default Timetable
diff --git a/app/javascript/time_tables/reducers/index.js b/app/javascript/time_tables/reducers/index.js
new file mode 100644
index 000000000..aed9035b5
--- /dev/null
+++ b/app/javascript/time_tables/reducers/index.js
@@ -0,0 +1,16 @@
+import { combineReducers } from 'redux'
+import status from './status'
+import pagination from './pagination'
+import modal from './modal'
+import timetable from './timetable'
+import metas from './metas'
+
+const timeTablesApp = combineReducers({
+  timetable,
+  metas,
+  status,
+  pagination,
+  modal
+})
+
+export default timeTablesApp
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js b/app/javascript/time_tables/reducers/metas.js
index ab5ed3d91..51e1ec149 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
+++ b/app/javascript/time_tables/reducers/metas.js
@@ -1,10 +1,11 @@
-const _ = require('lodash')
-const actions = require('../actions')
+import assign from 'lodash/assign'
+import filter from 'lodash/filter'
+import actions from '../actions'
 
-const metas = (state = {}, action) => {
+export default function metas(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_TIME_TABLES':
-      return _.assign({}, state, {
+      return assign({}, state, {
         comment: action.json.comment,
         day_types: actions.strToArrayDayTypes(action.json.day_types),
         tags: action.json.tags,
@@ -14,29 +15,27 @@ const metas = (state = {}, action) => {
       })
     case 'RECEIVE_MONTH':
       let dt = (typeof state.day_types === 'string') ? actions.strToArrayDayTypes(state.day_types) : state.day_types
-      return _.assign({}, state, {day_types: dt})
+      return assign({}, state, {day_types: dt})
     case 'ADD_INCLUDED_DATE':
     case 'REMOVE_INCLUDED_DATE':
     case 'ADD_EXCLUDED_DATE':
     case 'REMOVE_EXCLUDED_DATE':
     case 'DELETE_PERIOD':
     case 'VALIDATE_PERIOD_FORM':
-      return _.assign({}, state, {calendar: null})
+      return assign({}, state, {calendar: null})
     case 'UPDATE_DAY_TYPES':
-      return _.assign({}, state, {day_types: action.dayTypes, calendar : null})
+      return assign({}, state, {day_types: action.dayTypes, calendar : null})
     case 'UPDATE_COMMENT':
-      return _.assign({}, state, {comment: action.comment})
+      return assign({}, state, {comment: action.comment})
     case 'UPDATE_COLOR':
-      return _.assign({}, state, {color: action.color})
+      return assign({}, state, {color: action.color})
     case 'UPDATE_SELECT_TAG':
       let tags = [...state.tags]
       tags.push(action.selectedItem)
-      return _.assign({}, state, {tags: tags})
+      return assign({}, state, {tags: tags})
     case 'UPDATE_UNSELECT_TAG':
-      return _.assign({}, state, {tags: _.filter(state.tags, (t) => (t.id != action.selectedItem.id))})
+      return assign({}, state, {tags: filter(state.tags, (t) => (t.id != action.selectedItem.id))})
     default:
       return state
   }
-}
-
-module.exports = metas
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js b/app/javascript/time_tables/reducers/modal.js
index c61296f1c..5e870a6ef 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
+++ b/app/javascript/time_tables/reducers/modal.js
@@ -1,5 +1,5 @@
-var _ = require('lodash')
-var actions = require('../actions')
+import assign from 'lodash/assign'
+import actions from '../actions'
 
 let newModalProps = {}
 let emptyDate = {
@@ -9,11 +9,11 @@ let emptyDate = {
 }
 let period_start = '', period_end = ''
 
-const modal = (state = {}, action) => {
+export default function modal(state = {}, action) {
   switch (action.type) {
     case 'OPEN_CONFIRM_MODAL':
       $('#ConfirmModal').modal('show')
-      return _.assign({}, state, {
+      return assign({}, state, {
         type: 'confirm',
         confirmModal: {
           callback: action.callback,
@@ -21,14 +21,14 @@ const modal = (state = {}, action) => {
       })
     case 'OPEN_ERROR_MODAL':
       $('#ErrorModal').modal('show')
-      newModalProps = _.assign({}, state.modalProps, {error: action.error})
-      return _.assign({}, state, {type: 'error'}, {modalProps: newModalProps})
+      newModalProps = assign({}, state.modalProps, {error: action.error})
+      return assign({}, state, {type: 'error'}, {modalProps: newModalProps})
     case 'RESET_MODAL_ERRORS':
-      newModalProps = _.assign({}, state.modalProps, {error: ''})
-      return _.assign({}, state, {type: ''}, {modalProps: newModalProps})
+      newModalProps = assign({}, state.modalProps, {error: ''})
+      return assign({}, state, {type: ''}, {modalProps: newModalProps})
     case 'CLOSE_PERIOD_FORM':
-      newModalProps = _.assign({}, state.modalProps, {active: false, error: ""})
-      return _.assign({}, state, {modalProps: newModalProps})
+      newModalProps = assign({}, state.modalProps, {active: false, error: ""})
+      return assign({}, state, {modalProps: newModalProps})
     case 'OPEN_EDIT_PERIOD_FORM':
       period_start = action.period.period_start.split('-')
       period_end = action.period.period_end.split('-')
@@ -45,22 +45,20 @@ const modal = (state = {}, action) => {
       newModalProps.active = true
       newModalProps.index = action.index
       newModalProps.error = ''
-      return _.assign({}, state, {modalProps: newModalProps})
+      return assign({}, state, {modalProps: newModalProps})
     case 'OPEN_ADD_PERIOD_FORM':
-      newModalProps = _.assign({}, state.modalProps, {active: true, begin: emptyDate, end: emptyDate, index: false, error: ''})
-      return _.assign({}, state, {modalProps: newModalProps})
+      newModalProps = assign({}, state.modalProps, {active: true, begin: emptyDate, end: emptyDate, index: false, error: ''})
+      return assign({}, state, {modalProps: newModalProps})
     case 'UPDATE_PERIOD_FORM':
       newModalProps = JSON.parse(JSON.stringify(state.modalProps))
       newModalProps[action.group][action.selectType] = action.val
-      return _.assign({}, state, {modalProps: newModalProps})
+      return assign({}, state, {modalProps: newModalProps})
     case 'VALIDATE_PERIOD_FORM':
       newModalProps = JSON.parse(JSON.stringify(state.modalProps))
       newModalProps.error = action.error
       newModalProps.active = (newModalProps.error == '') ? false : true
-      return _.assign({}, state, {modalProps: newModalProps})
+      return assign({}, state, {modalProps: newModalProps})
     default:
       return state
   }
-}
-
-module.exports = modal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js b/app/javascript/time_tables/reducers/pagination.js
index f38b124d9..53a753356 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
+++ b/app/javascript/time_tables/reducers/pagination.js
@@ -1,25 +1,25 @@
-var _ = require('lodash')
+import assign from 'lodash/assign'
 
-const pagination = (state = {}, action) => {
+export default function pagination(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_TIME_TABLES':
-      return _.assign({}, state, {
+      return assign({}, state, {
         currentPage: action.json.current_periode_range,
         periode_range: action.json.periode_range,
         stateChanged: false
       })
     case 'RECEIVE_MONTH':
     case 'RECEIVE_ERRORS':
-      return _.assign({}, state, {stateChanged: false})
+      return assign({}, state, {stateChanged: false})
     case 'GO_TO_PREVIOUS_PAGE':
     case 'GO_TO_NEXT_PAGE':
       let nextPage = action.nextPage ? 1 : -1
       let newPage = action.pagination.periode_range[action.pagination.periode_range.indexOf(action.pagination.currentPage) + nextPage]
       toggleOnConfirmModal()
-      return _.assign({}, state, {currentPage : newPage, stateChanged: false})
+      return assign({}, state, {currentPage : newPage, stateChanged: false})
     case 'CHANGE_PAGE':
       toggleOnConfirmModal()
-      return _.assign({}, state, {currentPage : action.page, stateChanged: false})
+      return assign({}, state, {currentPage : action.page, stateChanged: false})
     case 'ADD_INCLUDED_DATE':
     case 'REMOVE_INCLUDED_DATE':
     case 'ADD_EXCLUDED_DATE':
@@ -31,7 +31,7 @@ const pagination = (state = {}, action) => {
     case 'UPDATE_DAY_TYPES':
     case 'UPDATE_CURRENT_MONTH_FROM_DAYTYPES':
       toggleOnConfirmModal('modal')
-      return _.assign({}, state, {stateChanged: true})
+      return assign({}, state, {stateChanged: true})
     default:
       return state
   }
@@ -41,6 +41,4 @@ const toggleOnConfirmModal = (arg = '') =>{
   $('.confirm').each(function(){
     $(this).data('toggle','')
   })
-}
-
-module.exports = pagination
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/reducers/status.js b/app/javascript/time_tables/reducers/status.js
new file mode 100644
index 000000000..256059191
--- /dev/null
+++ b/app/javascript/time_tables/reducers/status.js
@@ -0,0 +1,15 @@
+import assign from 'lodash/assign'
+
+export default function status(state = {}, action) {
+  switch (action.type) {
+    case 'UNAVAILABLE_SERVER':
+      return assign({}, state, {fetchSuccess: false})
+    case 'FETCH_API':
+      return assign({}, state, {isFetching: true})
+    case 'RECEIVE_TIME_TABLES':
+    case 'RECEIVE_MONTH':
+      return assign({}, state, {fetchSuccess: true, isFetching: false})
+    default:
+      return state
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js b/app/javascript/time_tables/reducers/timetable.js
index 712808abd..21ca1efed 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js
+++ b/app/javascript/time_tables/reducers/timetable.js
@@ -1,34 +1,37 @@
-const _ = require('lodash')
-var actions = require('../actions')
+import assign from 'lodash/assign'
+import reject from 'lodash/reject'
+import sortBy from 'lodash/sortBy'
+import reduce from 'lodash/reduce'
+import actions from '../actions'
 let newState, newPeriods, newDates, newCM
 
-const timetable = (state = {}, action) => {
+export default function timetable(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_TIME_TABLES':
-      let fetchedState = _.assign({}, state, {
+      let fetchedState = assign({}, state, {
         current_month: action.json.current_month,
         current_periode_range: action.json.current_periode_range,
         periode_range: action.json.periode_range,
         time_table_periods: action.json.time_table_periods,
-        time_table_dates: _.sortBy(action.json.time_table_dates, ['date'])
+        time_table_dates: sortBy(action.json.time_table_dates, ['date'])
       })
-      return _.assign({}, fetchedState, {current_month: actions.updateSynthesis(fetchedState)})
+      return assign({}, fetchedState, {current_month: actions.updateSynthesis(fetchedState)})
     case 'RECEIVE_MONTH':
-      newState = _.assign({}, state, {
+      newState = assign({}, state, {
         current_month: action.json.days
       })
-      return _.assign({}, newState, {current_month: actions.updateSynthesis(newState)})
+      return assign({}, newState, {current_month: actions.updateSynthesis(newState)})
     case 'GO_TO_PREVIOUS_PAGE':
     case 'GO_TO_NEXT_PAGE':
       let nextPage = action.nextPage ? 1 : -1
       let newPage = action.pagination.periode_range[action.pagination.periode_range.indexOf(action.pagination.currentPage) + nextPage]
       $('#ConfirmModal').modal('hide')
       actions.fetchTimeTables(action.dispatch, newPage)
-      return _.assign({}, state, {current_periode_range: newPage})
+      return assign({}, state, {current_periode_range: newPage})
     case 'CHANGE_PAGE':
       $('#ConfirmModal').modal('hide')
       actions.fetchTimeTables(action.dispatch, action.page)
-      return _.assign({}, state, {current_periode_range: action.page})
+      return assign({}, state, {current_periode_range: action.page})
     case 'DELETE_PERIOD':
       newPeriods = state.time_table_periods.map((period, i) =>{
         if(i == action.index){
@@ -37,45 +40,45 @@ const timetable = (state = {}, action) => {
         return period
       })
       let deletedPeriod = Array.of(state.time_table_periods[action.index])
-      newDates = _.reject(state.time_table_dates, d => actions.isInPeriod(deletedPeriod, d.date) && !d.in_out)
-      newState = _.assign({}, state, {time_table_periods : newPeriods, time_table_dates: newDates})
-      return _.assign({}, newState, { current_month: actions.updateSynthesis(newState)})
+      newDates = reject(state.time_table_dates, d => actions.isInPeriod(deletedPeriod, d.date) && !d.in_out)
+      newState = assign({}, state, {time_table_periods : newPeriods, time_table_dates: newDates})
+      return assign({}, newState, { current_month: actions.updateSynthesis(newState)})
     case 'ADD_INCLUDED_DATE':
       newDates = state.time_table_dates.concat({date: action.date, in_out: true})
       newCM = state.current_month.map((d, i) => {
         if (i == action.index) d.include_date = true
         return d
       })
-      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return assign({}, state, {current_month: newCM, time_table_dates: newDates})
     case 'REMOVE_INCLUDED_DATE':
-      newDates = _.reject(state.time_table_dates, ['date', action.date])
+      newDates = reject(state.time_table_dates, ['date', action.date])
       newCM = state.current_month.map((d, i) => {
         if (i == action.index) d.include_date = false
         return d
       })
-      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return assign({}, state, {current_month: newCM, time_table_dates: newDates})
     case 'ADD_EXCLUDED_DATE':
       newDates = state.time_table_dates.concat({date: action.date, in_out: false})
       newCM = state.current_month.map((d, i) => {
         if (i == action.index) d.excluded_date = true
         return d
       })
-      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return assign({}, state, {current_month: newCM, time_table_dates: newDates})
     case 'REMOVE_EXCLUDED_DATE':
-      newDates = _.reject(state.time_table_dates, ['date', action.date])
+      newDates = reject(state.time_table_dates, ['date', action.date])
       newCM = state.current_month.map((d, i) => {
         if (i == action.index) d.excluded_date = false
         return d
       })
-      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return assign({}, state, {current_month: newCM, time_table_dates: newDates})
     case 'UPDATE_DAY_TYPES':
       // We get the week days of the activated day types to reject the out_dates that that are out of newDayTypes
-      let weekDays = _.reduce(action.dayTypes, (array, dt, i) => {
+      let weekDays = reduce(action.dayTypes, (array, dt, i) => {
         if (dt) array.push(i)
         return array
       }, [])
 
-      newDates =  _.reject(state.time_table_dates, (d) => {
+      newDates =  reject(state.time_table_dates, (d) => {
         let weekDay = new Date(d.date).getDay()
 
         if (d.in_out) {
@@ -84,9 +87,9 @@ const timetable = (state = {}, action) => {
           return !weekDays.includes(weekDay)
         }
       })
-      return _.assign({}, state, {time_table_dates: newDates})
+      return assign({}, state, {time_table_dates: newDates})
     case 'UPDATE_CURRENT_MONTH_FROM_DAYTYPES':
-      return _.assign({}, state, {current_month: actions.updateSynthesis(state)})
+      return assign({}, state, {current_month: actions.updateSynthesis(state)})
     case 'VALIDATE_PERIOD_FORM':
       if (action.error != '') return state
 
@@ -99,7 +102,7 @@ const timetable = (state = {}, action) => {
         let updatedPeriod = newPeriods[action.modalProps.index]
         updatedPeriod.period_start = period_start
         updatedPeriod.period_end = period_end
-        newDates = _.reject(state.time_table_dates, d => actions.isInPeriod(newPeriods, d.date) && !d.in_out)
+        newDates = reject(state.time_table_dates, d => actions.isInPeriod(newPeriods, d.date) && !d.in_out)
       }else{
         let newPeriod = {
           period_start: period_start,
@@ -109,11 +112,9 @@ const timetable = (state = {}, action) => {
       }
       
       newDates = newDates || state.time_table_dates
-      newState =_.assign({}, state, {time_table_periods: newPeriods, time_table_dates: newDates})
-      return _.assign({}, newState, {current_month: actions.updateSynthesis(newState)})
+      newState =assign({}, state, {time_table_periods: newPeriods, time_table_dates: newDates})
+      return assign({}, newState, {current_month: actions.updateSynthesis(newState)})
     default:
       return state
   }
-}
-
-module.exports = timetable
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js b/app/javascript/vehicle_journeys/actions/index.js
index 2e2e06514..4272c7915 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/javascript/vehicle_journeys/actions/index.js
@@ -1,10 +1,10 @@
-var Promise = require('promise-polyfill')
+import Promise from 'promise-polyfill'
 
 // To add to window
 if (!window.Promise) {
   window.Promise = Promise;
 }
-var batchActions = require('../batch').batchActions
+import { batchActions } from '../batch'
 
 const actions = {
   enterEditMode: () => ({
@@ -460,4 +460,4 @@ const actions = {
   },
 }
 
-module.exports = actions
+export default actions
diff --git a/app/javascript/vehicle_journeys/batch.js b/app/javascript/vehicle_journeys/batch.js
new file mode 100644
index 000000000..ea08572aa
--- /dev/null
+++ b/app/javascript/vehicle_journeys/batch.js
@@ -0,0 +1,26 @@
+// 'use strict';
+
+// Object.defineProperty(exports, "__esModule", {
+// 	value: true
+// });
+// exports.batchActions = batchActions;
+// exports.enableBatching = enableBatching;
+// var BATCH = exports.BATCH = 'BATCH';
+
+export function batchActions(actions) {
+	return {
+    type: 'BATCH',
+    payload: actions
+  };
+}
+
+export function enableBatching(reduce) {
+	return function batchingReducer(state, action) {
+		switch (action.type) {
+			case 'BATCH':
+				return action.payload.reduce(batchingReducer, state);
+			default:
+				return reduce(state, action);
+		}
+	}
+}
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/App.js b/app/javascript/vehicle_journeys/components/App.js
new file mode 100644
index 000000000..8e5f7aa9d
--- /dev/null
+++ b/app/javascript/vehicle_journeys/components/App.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import VehicleJourneysList from '../containers/VehicleJourneysList'
+import Navigate from '../containers/Navigate'
+import ToggleArrivals from '../containers/ToggleArrivals'
+import Filters from '../containers/Filters'
+import SaveVehicleJourneys from '../containers/SaveVehicleJourneys'
+import ConfirmModal from '../containers/ConfirmModal'
+import Tools from '../containers/Tools'
+
+export default function App() {
+  return (
+    <div>
+
+      <div className='row'>
+        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+          <ToggleArrivals />
+        </div>
+        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right'>
+          <Navigate />
+        </div>
+      </div>
+
+      <Filters />
+      <VehicleJourneysList />
+
+      <div className='row'>
+        <div className='col-lg-12 text-right'>
+          <Navigate />
+        </div>
+      </div>
+
+      <SaveVehicleJourneys />
+      <Tools />
+
+      <ConfirmModal />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/ConfirmModal.js b/app/javascript/vehicle_journeys/components/ConfirmModal.js
new file mode 100644
index 000000000..df3c96c48
--- /dev/null
+++ b/app/javascript/vehicle_journeys/components/ConfirmModal.js
@@ -0,0 +1,40 @@
+import React, { PropTypes, Component } from 'react'
+
+export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCancel, vehicleJourneys}) {
+  return (
+    <div className={'modal fade ' + ((modal.type == 'confirm') ? 'in' : '')} id='ConfirmModal'>
+      <div className='modal-dialog'>
+        <div className='modal-content'>
+          <div className='modal-body'>
+            <p> Voulez-vous valider vos modifications avant de changer de page? </p>
+          </div>
+          <div className='modal-footer'>
+            <button
+              className='btn btn-default'
+              data-dismiss='modal'
+              type='button'
+              onClick={() => { onModalCancel(modal.confirmModal.callback) }}
+            >
+              Ne pas valider
+          </button>
+            <button
+              className='btn btn-danger'
+              data-dismiss='modal'
+              type='button'
+              onClick={() => { onModalAccept(modal.confirmModal.callback, vehicleJourneys) }}
+            >
+              Valider
+          </button>
+          </div>
+        </div>
+      </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/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js b/app/javascript/vehicle_journeys/components/Filters.js
index f74bfa71d..db6707520 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
+++ b/app/javascript/vehicle_journeys/components/Filters.js
@@ -1,10 +1,9 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var MissionSelect2 = require('./tools/select2s/MissionSelect2')
-var VJSelect2 = require('./tools/select2s/VJSelect2')
-var TimetableSelect2 = require('./tools/select2s/TimetableSelect2')
+import React, { PropTypes } from 'react'
+import MissionSelect2 from'./tools/select2s/MissionSelect2'
+import VJSelect2 from'./tools/select2s/VJSelect2'
+import TimetableSelect2 from'./tools/select2s/TimetableSelect2'
 
-const Filters = ({filters, pagination, onFilter, onResetFilters, onUpdateStartTimeFilter, onUpdateEndTimeFilter, onToggleWithoutSchedule, onToggleWithoutTimeTable, onSelect2Timetable, onSelect2JourneyPattern, onSelect2VehicleJourney}) => {
+export default function Filters({filters, pagination, onFilter, onResetFilters, onUpdateStartTimeFilter, onUpdateEndTimeFilter, onToggleWithoutSchedule, onToggleWithoutTimeTable, onSelect2Timetable, onSelect2JourneyPattern, onSelect2VehicleJourney}) {
   return (
     <div className='row'>
       <div className='col-lg-12'>
@@ -166,6 +165,4 @@ Filters.propTypes = {
   onSelect2Timetable: PropTypes.func.isRequired,
   onSelect2JourneyPattern: PropTypes.func.isRequired,
   onSelect2VehicleJourney: PropTypes.func.isRequired
-}
-
-module.exports = Filters
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js b/app/javascript/vehicle_journeys/components/Navigate.js
index a62e034ae..7493b705b 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js
+++ b/app/javascript/vehicle_journeys/components/Navigate.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from'../actions'
 
-let Navigate = ({ dispatch, vehicleJourneys, pagination, status, filters}) => {
+export default function Navigate({ dispatch, vehicleJourneys, pagination, status, filters}) {
   let firstPage = 1
   let lastPage = Math.ceil(pagination.totalCount / pagination.perPage)
   let minVJ = (pagination.page - 1) * pagination.perPage + 1
@@ -54,6 +52,4 @@ Navigate.propTypes = {
   status: PropTypes.object.isRequired,
   pagination: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired
-}
-
-module.exports = Navigate
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/SaveVehicleJourneys.js b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
index 3c45e5758..e8c27f92e 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/SaveVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class SaveVehicleJourneys extends Component{
+export default class SaveVehicleJourneys extends Component{
   constructor(props){
     super(props)
   }
@@ -41,6 +39,4 @@ SaveVehicleJourneys.propTypes = {
   filters: PropTypes.object.isRequired,
   onEnterEditMode: PropTypes.func.isRequired,
   onSubmitVehicleJourneys: PropTypes.func.isRequired
-}
-
-module.exports = SaveVehicleJourneys
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js b/app/javascript/vehicle_journeys/components/ToggleArrivals.js
index 48fee683f..e26ceec3a 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js
+++ b/app/javascript/vehicle_journeys/components/ToggleArrivals.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
+import React, { PropTypes } from 'react'
 
-const ToggleArrivals = ({filters, onToggleArrivals}) => {
+export default function ToggleArrivals({filters, onToggleArrivals}) {
   return (
     <div className='has_switch form-group inline'>
       <label htmlFor='toggleArrivals' className='control-label'>Afficher et éditer les horaires d'arrivée</label>
@@ -25,6 +24,4 @@ const ToggleArrivals = ({filters, onToggleArrivals}) => {
 ToggleArrivals.propTypes = {
   filters : PropTypes.object.isRequired,
   onToggleArrivals: PropTypes.func.isRequired
-}
-
-module.exports = ToggleArrivals
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js b/app/javascript/vehicle_journeys/components/Tools.js
index 4948e6b1a..a717408b9 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js
+++ b/app/javascript/vehicle_journeys/components/Tools.js
@@ -1,15 +1,14 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var AddVehicleJourney = require('../containers/tools/AddVehicleJourney')
-var DeleteVehicleJourneys = require('../containers/tools/DeleteVehicleJourneys')
-var ShiftVehicleJourney = require('../containers/tools/ShiftVehicleJourney')
-var DuplicateVehicleJourney = require('../containers/tools/DuplicateVehicleJourney')
-var EditVehicleJourney = require('../containers/tools/EditVehicleJourney')
-var NotesEditVehicleJourney = require('../containers/tools/NotesEditVehicleJourney')
-var TimetablesEditVehicleJourney = require('../containers/tools/TimetablesEditVehicleJourney')
-var actions = require('../actions')
+import React, { PropTypes } from 'react'
+import actions from '../actions'
+import AddVehicleJourney from '../containers/tools/AddVehicleJourney'
+import DeleteVehicleJourneys from '../containers/tools/DeleteVehicleJourneys'
+import ShiftVehicleJourney from '../containers/tools/ShiftVehicleJourney'
+import DuplicateVehicleJourney from '../containers/tools/DuplicateVehicleJourney'
+import EditVehicleJourney from '../containers/tools/EditVehicleJourney'
+import NotesEditVehicleJourney from '../containers/tools/NotesEditVehicleJourney'
+import TimetablesEditVehicleJourney from '../containers/tools/TimetablesEditVehicleJourney'
 
-const Tools = ({vehicleJourneys, onCancelSelection, filters: {policy}, editMode}) => {
+export default function Tools({vehicleJourneys, onCancelSelection, filters: {policy}, editMode}) {
   return (
     <div>
       {
@@ -37,6 +36,4 @@ Tools.propTypes = {
   vehicleJourneys : PropTypes.array.isRequired,
   onCancelSelection: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = Tools
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js b/app/javascript/vehicle_journeys/components/VehicleJourney.js
index ca6694f61..cb5407f81 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourney.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class VehicleJourney extends Component {
+export default class VehicleJourney extends Component {
   constructor(props) {
     super(props)
     this.previousCity = undefined
@@ -144,6 +142,4 @@ VehicleJourney.propTypes = {
   index: PropTypes.number.isRequired,
   onUpdateTime: PropTypes.func.isRequired,
   onSelectVehicleJourney: PropTypes.func.isRequired
-}
-
-module.exports = VehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
index 8f3f91b25..6bce9766b 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
@@ -1,10 +1,9 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var VehicleJourney = require('./VehicleJourney')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import _ from 'lodash'
+import VehicleJourney from './VehicleJourney'
 
-class VehicleJourneys extends Component{
+
+export default class VehicleJourneys extends Component {
   constructor(props){
     super(props)
     this.previousCity = undefined
@@ -154,6 +153,4 @@ VehicleJourneys.propTypes = {
   onLoadFirstPage: PropTypes.func.isRequired,
   onUpdateTime: PropTypes.func.isRequired,
   onSelectVehicleJourney: PropTypes.func.isRequired
-}
-
-module.exports = VehicleJourneys
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
index 6a1e8ffb9..5b5e2f849 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
@@ -1,11 +1,9 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var MissionSelect2 = require('./select2s/MissionSelect2')
-var CompanySelect2 = require('./select2s/CompanySelect2')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import MissionSelect2 from './select2s/MissionSelect2'
+import CompanySelect2 from './select2s/CompanySelect2'
 
-class CreateModal extends Component {
+export default class CreateModal extends Component {
   constructor(props) {
     super(props)
   }
@@ -130,6 +128,4 @@ CreateModal.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onAddVehicleJourney: PropTypes.func.isRequired,
   onSelect2JourneyPattern: PropTypes.func.isRequired
-}
-
-module.exports = CreateModal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js b/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
index c98b794a8..0a1dedd3c 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
@@ -1,8 +1,7 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
+import React, { PropTypes } from 'react'
+import actions from '../../actions'
 
-const DeleteVehicleJourneys = ({onDeleteVehicleJourneys, vehicleJourneys, filters}) => {
+export default function DeleteVehicleJourneys({onDeleteVehicleJourneys, vehicleJourneys, filters}) {
   return (
     <li className='st_action'>
       <button
@@ -24,6 +23,4 @@ DeleteVehicleJourneys.propTypes = {
   onDeleteVehicleJourneys: PropTypes.func.isRequired,
   vehicleJourneys: PropTypes.array.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = DeleteVehicleJourneys
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
index 9446b993a..0c1c81114 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import _ from 'lodash'
 
-class DuplicateVehicleJourney extends Component {
+export default class DuplicateVehicleJourney extends Component {
   constructor(props) {
     super(props)
     this.state = {}
@@ -195,6 +193,4 @@ DuplicateVehicleJourney.propTypes = {
   onOpenDuplicateModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = DuplicateVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
index d9f81d399..3a4a57024 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var CompanySelect2 = require('./select2s/CompanySelect2')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import CompanySelect2 from './select2s/CompanySelect2'
 
-class EditVehicleJourney extends Component {
+export default class EditVehicleJourney extends Component {
   constructor(props) {
     super(props)
   }
@@ -166,6 +164,4 @@ EditVehicleJourney.propTypes = {
   onOpenEditModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = EditVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
index df6c311e6..1958faf5f 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import _ from 'lodash'
 
-class NotesEditVehicleJourney extends Component {
+export default class NotesEditVehicleJourney extends Component {
   constructor(props) {
     super(props)
   }
@@ -149,6 +147,4 @@ NotesEditVehicleJourney.propTypes = {
   onToggleFootnoteModal: PropTypes.func.isRequired,
   onNotesEditVehicleJourney: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = NotesEditVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
index dd0bade39..c1e2de779 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
 
-class ShiftVehicleJourney extends Component {
+export default class ShiftVehicleJourney extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -113,6 +111,4 @@ ShiftVehicleJourney.propTypes = {
   onOpenShiftModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = ShiftVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
index a26a9b805..fd2304901 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var TimetableSelect2 = require('./select2s/TimetableSelect2')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import TimetableSelect2 from './select2s/TimetableSelect2'
 
-class TimetablesEditVehicleJourney extends Component {
+export default class TimetablesEditVehicleJourney extends Component {
   constructor(props) {
     super(props)
   }
@@ -130,6 +128,4 @@ TimetablesEditVehicleJourney.propTypes = {
   onDeleteCalendarModal: PropTypes.func.isRequired,
   onSelect2Timetable: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = TimetablesEditVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/CompanySelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
index c1ce0e92a..9c259630d 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/CompanySelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
@@ -1,15 +1,14 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
+import _ from 'lodash'
+import React, { PropTypes, Component } from 'react'
+import Select2 from 'react-select2'
 
 // get JSON full path
-var origin = window.location.origin
-var path = window.location.pathname.split('/', 3).join('/')
-var line = window.location.pathname.split('/')[4]
+let origin = window.location.origin
+let path = window.location.pathname.split('/', 3).join('/')
+let line = window.location.pathname.split('/')[4]
 
 
-class BSelect4 extends React.Component{
+export default class BSelect4 extends Component {
   constructor(props) {
     super(props)
   }
@@ -62,6 +61,4 @@ class BSelect4 extends React.Component{
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
-
-module.exports = BSelect4
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
index 2f49e9980..e4abdd651 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
@@ -1,20 +1,18 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
-var humanOID = require('../../../actions').humanOID
+import _ from 'lodash'
+import React, { PropTypes, Component } from 'react'
+import Select2 from 'react-select2'
+import actions from '../../../actions'
 
 // get JSON full path
-var origin = window.location.origin
-var path = window.location.pathname.split('/', 7).join('/')
+let origin = window.location.origin
+let path = window.location.pathname.split('/', 7).join('/')
 
 
-class BSelect4 extends React.Component{
+export default class BSelect4 extends Component {
   constructor(props) {
     super(props)
   }
 
-
   render() {
     return (
       <Select2
@@ -44,7 +42,7 @@ class BSelect4 extends React.Component{
                   item => _.assign(
                     {},
                     item,
-                    { text: "<strong>" + item.published_name + " - " + humanOID(item.object_id) + "</strong><br/><small>" + item.registration_number + "</small>" }
+                    { text: "<strong>" + item.published_name + " - " + actions.humanOID(item.object_id) + "</strong><br/><small>" + item.registration_number + "</small>" }
                   )
                 )
               };
@@ -62,6 +60,4 @@ class BSelect4 extends React.Component{
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
-
-module.exports = BSelect4
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
index 2248175ab..606bf8511 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
@@ -1,15 +1,14 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
-var humanOID = require('../../../actions').humanOID
+import _ from 'lodash'
+import React, { PropTypes, Component } from 'react'
+import Select2 from 'react-select2'
+import actions from '../../../actions'
 
 // get JSON full path
 var origin = window.location.origin
 var path = window.location.pathname.split('/', 3).join('/')
 
 
-class BSelect4 extends React.Component{
+export default class BSelect4 extends Component {
   constructor(props) {
     super(props)
   }
@@ -48,7 +47,7 @@ class BSelect4 extends React.Component{
                   item => _.assign(
                     {},
                     item,
-                    {text: '<strong>' + "<span class='fa fa-circle' style='color:" + (item.color ? item.color : '#4B4B4B') + "'></span> " + item.comment + ' - ' + humanOID(item.objectid) + '</strong><br/><small>' + (item.day_types ? item.day_types.match(/[A-Z]?[a-z]+/g).join(', ') : "") + '</small>'}
+                    {text: '<strong>' + "<span class='fa fa-circle' style='color:" + (item.color ? item.color : '#4B4B4B') + "'></span> " + item.comment + ' - ' + actions.humanOID(item.objectid) + '</strong><br/><small>' + (item.day_types ? item.day_types.match(/[A-Z]?[a-z]+/g).join(', ') : "") + '</small>'}
                   )
                 )
               };
@@ -66,6 +65,4 @@ class BSelect4 extends React.Component{
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
-
-module.exports = BSelect4
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/VJSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/VJSelect2.js
index b9678ea9a..e1af8816d 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/VJSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/VJSelect2.js
@@ -1,15 +1,14 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
-var humanOID = require('../../../actions').humanOID
+import _ from 'lodash'
+import React, { PropTypes, Component } from 'react'
+import Select2 from 'react-select2'
+import actions from '../../../actions'
 
 // get JSON full path
-var origin = window.location.origin
-var path = window.location.pathname.split('/', 7).join('/')
+let origin = window.location.origin
+let path = window.location.pathname.split('/', 7).join('/')
 
 
-class BSelect4b extends React.Component{
+export default class BSelect4b extends Component {
   constructor(props) {
     super(props)
   }
@@ -43,7 +42,7 @@ class BSelect4b extends React.Component{
                   item => _.assign(
                     {},
                     item,
-                    { id: item.objectid, text: humanOID(item.objectid) }
+                    { id: item.objectid, text: actions.humanOID(item.objectid) }
                   )
                 )
               };
@@ -60,6 +59,4 @@ class BSelect4b extends React.Component{
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
-
-module.exports = BSelect4b
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/fr.js b/app/javascript/vehicle_journeys/components/tools/select2s/fr.js
index 20154d412..20154d412 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/fr.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/fr.js
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ConfirmModal.js b/app/javascript/vehicle_journeys/containers/ConfirmModal.js
index e91ba6bf0..e751a70f6 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ConfirmModal.js
+++ b/app/javascript/vehicle_journeys/containers/ConfirmModal.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ConfirmModal = require('../components/ConfirmModal')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import ConfirmModal from '../components/ConfirmModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ConfirmModalContainer = connect(mapStateToProps, mapDispatchToProps)(ConfirmModal)
 
-module.exports = ConfirmModalContainer
+export default ConfirmModalContainer
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Filters.js b/app/javascript/vehicle_journeys/containers/Filters.js
index 831b47ca1..bec3527f4 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Filters.js
+++ b/app/javascript/vehicle_journeys/containers/Filters.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var Filters = require('../components/Filters')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import Filters from '../components/Filters'
 
 const mapStateToProps = (state) => {
   return {
@@ -45,4 +45,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const FiltersList = connect(mapStateToProps, mapDispatchToProps)(Filters)
 
-module.exports = FiltersList
+export default FiltersList
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Navigate.js b/app/javascript/vehicle_journeys/containers/Navigate.js
index a3eca13c8..f6cd4e2a1 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Navigate.js
+++ b/app/javascript/vehicle_journeys/containers/Navigate.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var NavigateComponent = require('../components/Navigate')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import NavigateComponent from '../components/Navigate'
 
 const mapStateToProps = (state) => {
   return {
@@ -15,4 +14,4 @@ const mapStateToProps = (state) => {
 
 const Navigate = connect(mapStateToProps)(NavigateComponent)
 
-module.exports = Navigate
+export default Navigate
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/SaveVehicleJourneys.js b/app/javascript/vehicle_journeys/containers/SaveVehicleJourneys.js
index c1ce90d38..18f9e994e 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/SaveVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/containers/SaveVehicleJourneys.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var SaveVehicleJourneysComponent = require('../components/SaveVehicleJourneys')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import SaveVehicleJourneysComponent from '../components/SaveVehicleJourneys'
 
 const mapStateToProps = (state) => {
   return {
@@ -26,4 +25,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const SaveVehicleJourneys = connect(mapStateToProps, mapDispatchToProps)(SaveVehicleJourneysComponent)
 
-module.exports = SaveVehicleJourneys
+export default SaveVehicleJourneys
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ToggleArrivals.js b/app/javascript/vehicle_journeys/containers/ToggleArrivals.js
index 716485dbf..f6e180f80 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ToggleArrivals.js
+++ b/app/javascript/vehicle_journeys/containers/ToggleArrivals.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ToggleArrivals = require('../components/ToggleArrivals')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import ToggleArrivals from '../components/ToggleArrivals'
 
 const mapStateToProps = (state) => {
   return {
@@ -18,4 +18,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ToggleArrivalsList = connect(mapStateToProps, mapDispatchToProps)(ToggleArrivals)
 
-module.exports = ToggleArrivalsList
+export default ToggleArrivalsList
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Tools.js b/app/javascript/vehicle_journeys/containers/Tools.js
index a4b3056ac..b760b52d6 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Tools.js
+++ b/app/javascript/vehicle_journeys/containers/Tools.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var ToolsComponent = require('../components/Tools')
-var actions = require('../actions')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import ToolsComponent from '../components/Tools'
 
 const mapStateToProps = (state) => {
   return {
@@ -20,4 +20,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const Tools = connect(mapStateToProps, mapDispatchToProps)(ToolsComponent)
 
-module.exports = Tools
+export default Tools
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js b/app/javascript/vehicle_journeys/containers/VehicleJourneysList.js
index f834e4457..38ab9f6d3 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js
+++ b/app/javascript/vehicle_journeys/containers/VehicleJourneysList.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var VehicleJourneys = require('../components/VehicleJourneys')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import VehicleJourneys from '../components/VehicleJourneys'
 
 const mapStateToProps = (state) => {
   return {
@@ -29,4 +29,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const VehicleJourneysList = connect(mapStateToProps, mapDispatchToProps)(VehicleJourneys)
 
-module.exports = VehicleJourneysList
+export default VehicleJourneysList
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/AddVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
index ffe080cdf..b3f777448 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/AddVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
@@ -1,6 +1,6 @@
-var actions = require('../../actions')
-var connect = require('react-redux').connect
-var CreateModal = require('../../components/tools/CreateModal')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import CreateModal from '../../components/tools/CreateModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -34,4 +34,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const AddVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(CreateModal)
 
-module.exports = AddVehicleJourney
+export default AddVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js b/app/javascript/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js
index c012c9706..d7d315da4 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js
@@ -1,6 +1,6 @@
-var actions = require('../../actions')
-var connect = require('react-redux').connect
-var DeleteVJComponent = require('../../components/tools/DeleteVehicleJourneys')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import DeleteVJComponent from '../../components/tools/DeleteVehicleJourneys'
 
 const mapStateToProps = (state) => {
   return {
@@ -19,4 +19,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const DeleteVehicleJourneys = connect(mapStateToProps, mapDispatchToProps)(DeleteVJComponent)
 
-module.exports = DeleteVehicleJourneys
+export default DeleteVehicleJourneys
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js
index 70e8fde4d..e9ca88040 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js
@@ -1,6 +1,6 @@
-var actions = require('../../actions')
-var connect = require('react-redux').connect
-var DuplicateVJComponent = require('../../components/tools/DuplicateVehicleJourney')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import DuplicateVJComponent from '../../components/tools/DuplicateVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const DuplicateVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(DuplicateVJComponent)
 
-module.exports = DuplicateVehicleJourney
+export default DuplicateVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/EditVehicleJourney.js
index ac9772b8a..2d480aa0c 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/EditVehicleJourney.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var EditComponent = require('../../components/tools/EditVehicleJourney')
-var actions = require('../../actions')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import EditComponent from '../../components/tools/EditVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -33,4 +33,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const EditVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(EditComponent)
 
-module.exports = EditVehicleJourney
+export default EditVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js
index 1619300d0..5a96ff273 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var NotesEditComponent = require('../../components/tools/NotesEditVehicleJourney')
-var actions = require('../../actions')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import NotesEditComponent from '../../components/tools/NotesEditVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -30,4 +30,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const NotesEditVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(NotesEditComponent)
 
-module.exports = NotesEditVehicleJourney
+export default NotesEditVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/ShiftVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/ShiftVehicleJourney.js
index 196f6722a..a4b4fbe39 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/ShiftVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/ShiftVehicleJourney.js
@@ -1,6 +1,6 @@
-var actions = require('../../actions')
-var connect = require('react-redux').connect
-var ShiftVJComponent = require('../../components/tools/ShiftVehicleJourney')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import ShiftVJComponent from '../../components/tools/ShiftVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ShiftVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(ShiftVJComponent)
 
-module.exports = ShiftVehicleJourney
+export default ShiftVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js
index 1cfff407c..62150a06e 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var TimetablesEditComponent = require('../../components/tools/TimetablesEditVehicleJourney')
-var actions = require('../../actions')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import TimetablesEditComponent from '../../components/tools/TimetablesEditVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -34,4 +34,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const TimetablesEditVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(TimetablesEditComponent)
 
-module.exports = TimetablesEditVehicleJourney
+export default TimetablesEditVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/editMode.js b/app/javascript/vehicle_journeys/reducers/editMode.js
index 2e8af1aa8..bff976804 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/editMode.js
+++ b/app/javascript/vehicle_journeys/reducers/editMode.js
@@ -1,4 +1,4 @@
-const editMode = (state = {}, action ) => {
+export default function editMode(state = {}, action ) {
   switch (action.type) {
     case "ENTER_EDIT_MODE":
       return true
@@ -7,6 +7,4 @@ const editMode = (state = {}, action ) => {
     default:
       return state
   }
-}
-
-module.exports = editMode
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/filters.js b/app/javascript/vehicle_journeys/reducers/filters.js
index b4a70ec08..76fc98cc5 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/filters.js
+++ b/app/javascript/vehicle_journeys/reducers/filters.js
@@ -1,8 +1,8 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from '../actions'
 let newQuery, newInterval
 
-const filters = (state = {}, action) => {
+export default function  filters(state = {}, action) {
   switch (action.type) {
     case 'RESET_FILTERS':
       let interval = {
@@ -70,6 +70,4 @@ const filters = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = filters
+}
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/reducers/index.js b/app/javascript/vehicle_journeys/reducers/index.js
new file mode 100644
index 000000000..bb24aa185
--- /dev/null
+++ b/app/javascript/vehicle_journeys/reducers/index.js
@@ -0,0 +1,20 @@
+import { combineReducers } from 'redux'
+import vehicleJourneys from './vehicleJourneys'
+import pagination from './pagination'
+import modal from './modal'
+import status from './status'
+import filters from './filters'
+import editMode from './editMode'
+import stopPointsList from './stopPointsList'
+
+const vehicleJourneysApp = combineReducers({
+  vehicleJourneys,
+  pagination,
+  modal,
+  status,
+  filters,
+  editMode,
+  stopPointsList
+})
+
+export default vehicleJourneysApp
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js b/app/javascript/vehicle_journeys/reducers/modal.js
index 1e5ff4294..57f54a144 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
+++ b/app/javascript/vehicle_journeys/reducers/modal.js
@@ -1,6 +1,8 @@
-var _ = require('lodash')
+import _ from 'lodash'
+
 let vehicleJourneysModal, newModalProps
-const modal = (state = {}, action) => {
+
+export default function modal(state = {}, action) {
   switch (action.type) {
     case 'OPEN_CONFIRM_MODAL':
       $('#ConfirmModal').modal('show')
@@ -133,6 +135,4 @@ const modal = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = modal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js b/app/javascript/vehicle_journeys/reducers/pagination.js
index a8189fc97..45c40c4c4 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
+++ b/app/javascript/vehicle_journeys/reducers/pagination.js
@@ -1,5 +1,6 @@
-var _ = require('lodash')
-const pagination = (state = {}, action) => {
+import _ from 'lodash'
+
+export default function pagination(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_JOURNEY_PATTERNS':
     case 'RECEIVE_VEHICLE_JOURNEYS':
@@ -33,6 +34,4 @@ const toggleOnConfirmModal = (arg = '') =>{
   $('.confirm').each(function(){
     $(this).data('toggle','')
   })
-}
-
-module.exports = pagination
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/status.js b/app/javascript/vehicle_journeys/reducers/status.js
index e658e164e..0bbb05124 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/status.js
+++ b/app/javascript/vehicle_journeys/reducers/status.js
@@ -1,7 +1,7 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from '../actions'
 
-const status = (state = {}, action) => {
+export default function status(state = {}, action) {
   switch (action.type) {
     case 'UNAVAILABLE_SERVER':
       return _.assign({}, state, {fetchSuccess: false})
@@ -14,6 +14,4 @@ const status = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = status
+}
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/reducers/stopPointsList.js b/app/javascript/vehicle_journeys/reducers/stopPointsList.js
new file mode 100644
index 000000000..9b22e08f2
--- /dev/null
+++ b/app/javascript/vehicle_journeys/reducers/stopPointsList.js
@@ -0,0 +1,6 @@
+export default function stopPointsList(state = [], action) {
+  switch (action.type) {
+    default:
+      return state
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
index 969b2ddd8..775fefdca 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
@@ -1,5 +1,5 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from '../actions'
 
 const vehicleJourney= (state = {}, action, keep) => {
   switch (action.type) {
@@ -102,7 +102,7 @@ const vehicleJourney= (state = {}, action, keep) => {
   }
 }
 
-const vehicleJourneys = (state = [], action) => {
+export default function vehicleJourneys(state = [], action) {
   switch (action.type) {
     case 'RECEIVE_VEHICLE_JOURNEYS':
       return [...action.json]
@@ -224,6 +224,4 @@ const vehicleJourneys = (state = [], action) => {
     default:
       return state
   }
-}
-
-module.exports = vehicleJourneys
+}
\ No newline at end of file
diff --git a/app/views/calendars/index.html.slim b/app/views/calendars/index.html.slim
index 24ed15484..d3168fa3d 100644
--- a/app/views/calendars/index.html.slim
+++ b/app/views/calendars/index.html.slim
@@ -49,4 +49,4 @@
         .col-lg-12
           = replacement_msg t('calendars.search_no_results')
 
-= javascript_include_tag 'filters/calendar.js'
+= javascript_pack_tag 'date_filters'
diff --git a/app/views/compliance_check_sets/_filters.html.slim b/app/views/compliance_check_sets/_filters.html.slim
index c5c968c6a..3051bda64 100644
--- a/app/views/compliance_check_sets/_filters.html.slim
+++ b/app/views/compliance_check_sets/_filters.html.slim
@@ -20,4 +20,4 @@
 
   .actions
     = link_to t('actions.erase'), @compliance_checks_sets, class: 'btn btn-link'
-    = f.submit t('actions.filter'), class: 'btn btn-default', id: 'referential_filter_btn'
+    = f.submit t('actions.filter'), class: 'btn btn-default', id: 'compliance_check_set_filter_btn'
diff --git a/app/views/compliance_control_sets/index.html.slim b/app/views/compliance_control_sets/index.html.slim
index 22c65dabc..68173fee9 100644
--- a/app/views/compliance_control_sets/index.html.slim
+++ b/app/views/compliance_control_sets/index.html.slim
@@ -53,4 +53,4 @@
           = replacement_msg t('compliance_control_sets.search_no_results')
 
 
-= javascript_include_tag 'filters/compliance_control_set.js'
\ No newline at end of file
+= javascript_pack_tag 'date_filters'
\ No newline at end of file
diff --git a/app/views/imports/index.html.slim b/app/views/imports/index.html.slim
index a6da730f1..cd236ef36 100644
--- a/app/views/imports/index.html.slim
+++ b/app/views/imports/index.html.slim
@@ -48,4 +48,4 @@
         .col-lg-12
           = replacement_msg t('imports.search_no_results')
 
-= javascript_include_tag 'filters/import.js'
+= javascript_pack_tag 'date_filters'
diff --git a/app/views/journey_patterns_collections/show.html.slim b/app/views/journey_patterns_collections/show.html.slim
index bce4f28b5..8c0950536 100644
--- a/app/views/journey_patterns_collections/show.html.slim
+++ b/app/views/journey_patterns_collections/show.html.slim
@@ -20,4 +20,4 @@
   | window.journeyPatternsPerPage = #{@ppage};
   | window.perms = #{raw @perms}
 
-= javascript_include_tag 'es6_browserified/journey_patterns/index.js'
+= javascript_pack_tag 'journey_patterns/index.js'
diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
index d6a22c4f8..1bc9de136 100644
--- a/app/views/layouts/application.html.slim
+++ b/app/views/layouts/application.html.slim
@@ -11,7 +11,9 @@ html lang=I18n.locale
     = stylesheet_link_tag 'base'
     = stylesheet_link_tag 'application'
 
+    = javascript_pack_tag 'application'
     = javascript_include_tag 'application'
+    
 
 
   body
diff --git a/app/views/routes/_form.html.slim b/app/views/routes/_form.html.slim
index 24c0d3c4a..29e5be3d2 100644
--- a/app/views/routes/_form.html.slim
+++ b/app/views/routes/_form.html.slim
@@ -30,4 +30,4 @@
   | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
 
 / StopPoints Reactux component
-= javascript_include_tag 'es6_browserified/itineraries/index.js'
+= javascript_pack_tag 'routes/edit.js'
diff --git a/app/views/routes/show.html.slim b/app/views/routes/show.html.slim
index edc2d254b..83ee62386 100644
--- a/app/views/routes/show.html.slim
+++ b/app/views/routes/show.html.slim
@@ -76,4 +76,5 @@
 
 = javascript_tag do
   | window.route = "#{URI.escape(route_json_for_edit(@route))}"
-= javascript_include_tag 'es6_browserified/itineraries/show.js'
+
+= javascript_pack_tag 'routes/show.js'
\ No newline at end of file
diff --git a/app/views/time_tables/edit.html.slim b/app/views/time_tables/edit.html.slim
index cc6f31489..bf7573c71 100644
--- a/app/views/time_tables/edit.html.slim
+++ b/app/views/time_tables/edit.html.slim
@@ -13,4 +13,4 @@
   | window.actionType = "#{raw params[:action]}";
   | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
 
-= javascript_include_tag 'es6_browserified/time_tables/index.js'
+= 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 b984f95c8..c71a214f1 100644
--- a/app/views/time_tables/index.html.slim
+++ b/app/views/time_tables/index.html.slim
@@ -69,4 +69,4 @@
 = javascript_tag do
   | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
-= javascript_include_tag 'filters/time_table.js'
+= javascript_pack_tag 'date_filters'
diff --git a/app/views/vehicle_journeys/index.html.slim b/app/views/vehicle_journeys/index.html.slim
index 4efc34eaa..f88afc398 100644
--- a/app/views/vehicle_journeys/index.html.slim
+++ b/app/views/vehicle_journeys/index.html.slim
@@ -25,4 +25,4 @@
   | window.perms = #{raw @perms};
   | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
-= javascript_include_tag 'es6_browserified/vehicle_journeys/index.js'
+= javascript_pack_tag 'vehicle_journeys/index.js'
diff --git a/app/views/workbenches/show.html.slim b/app/views/workbenches/show.html.slim
index fd72979ea..32a933cc2 100644
--- a/app/views/workbenches/show.html.slim
+++ b/app/views/workbenches/show.html.slim
@@ -78,4 +78,4 @@
 = javascript_tag do
   | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
-= javascript_include_tag 'filters/workbench.js'
+= javascript_pack_tag 'date_filters'
\ No newline at end of file