Add webpacker gem and migrate the React apps

99 files changed, 866 insertions, 766 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/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/javascript/date_filters/calendar.js b/app/javascript/date_filters/calendar.js
new file mode 100644
index 000000000..266fcd16a
--- /dev/null
+++ b/app/javascript/date_filters/calendar.js
@@ -0,0 +1,6 @@
+const DateFilter = require('../helpers/date_filters')
+
+const calendarDF = new DateFilter("calendar_filter_btn", "Tous les champs du filtre de date doivent être remplis", "#q_contains_date_NUMi")
+
+module.exports = calendarDF
+
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..8ac90f54d
--- /dev/null
+++ b/app/javascript/date_filters/compliance_control_set.js
@@ -0,0 +1,5 @@
+const DateFilter = require('../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")
+
+module.exports = 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..997dbd3f6
--- /dev/null
+++ b/app/javascript/date_filters/import.js
@@ -0,0 +1,5 @@
+const DateFilter = require('../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")
+
+module.exports = 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..1e09c8cf6
--- /dev/null
+++ b/app/javascript/date_filters/index.js
@@ -0,0 +1,13 @@
+const calendarDF = require('./calendar')
+const complianceControlSetDF = require('./compliance_control_set')
+const timetableDF = require('./time_table')
+const importDF = require('./import')
+const workbenchDF = require('./workbench')
+
+module.exports = {
+  calendarDF: () => calendarDF,
+  complianceControlSetDF: () => complianceControlSetDF,
+  timetableDF: () => timetableDF,
+  importDF: () => importDF,
+  workbenchDF: () => workbenchDF
+}
\ 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..e211bc12e
--- /dev/null
+++ b/app/javascript/date_filters/time_table.js
@@ -0,0 +1,5 @@
+const DateFilter = require('../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")
+
+module.exports = timetableDF
diff --git a/app/javascript/date_filters/workbench.js b/app/javascript/date_filters/workbench.js
new file mode 100644
index 000000000..e5fd58e53
--- /dev/null
+++ b/app/javascript/date_filters/workbench.js
@@ -0,0 +1,3 @@
+const DateFilter = require('../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")
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/assets/javascripts/helpers/date_filters.js b/app/javascript/helpers/date_filters.js
index 1f48bb28f..621e163ad 100644
--- a/app/assets/javascripts/helpers/date_filters.js
+++ b/app/javascript/helpers/date_filters.js
@@ -1,4 +1,4 @@
-const DateFilter = function(buttonId, message, ...inputIds) {
+export default function DateFilter(buttonId, message, ...inputIds) {
   this.buttonId = buttonId
   this.inputIds = inputIds
   this.message = message
@@ -24,15 +24,12 @@ const DateFilter = function(buttonId, message, ...inputIds) {
     return getDates().every(date => !date)
   }
 
-  const execute = () => {
-    $(this.buttonId).on("click", (e) => {
-      if (allInputFilled() == false && noInputFilled() == false) {
-        e.preventDefault()
-        alert(this.message)
-      }
-    })
-  }
-  return execute
-}
+  const button = document.getElementById(this.buttonId)
 
-module.exports = DateFilter
+  button && 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..54b106ee0
--- /dev/null
+++ b/app/javascript/packs/application.js
@@ -0,0 +1,10 @@
+/* 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
+
+console.log('Hello World from Webpacker')
diff --git a/app/javascript/packs/date_filters.js b/app/javascript/packs/date_filters.js
new file mode 100644
index 000000000..db58bd679
--- /dev/null
+++ b/app/javascript/packs/date_filters.js
@@ -0,0 +1 @@
+const DateFilter = require('../date_filters/index')
\ 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..810489353
--- /dev/null
+++ b/app/javascript/packs/routes/edit.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+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 { handleForm, handleStopPoints } 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()
+    handleForm("#route_name", "#route_published_name")
+  }
+
+  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/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..5cc9561e9 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-wrapper'
 
 
 // get JSON full path
@@ -73,7 +72,7 @@ class BSelect3 extends Component{
   }
 }
 
-class BSelect2 extends Component{
+export default class BSelect2 extends Component{
   componentDidMount() {
     this.refs.newSelect.el.select2('open')
   }
@@ -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..25679e747 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 { addInput } from '../form_helper'
 
 const stopPoint = (state = {}, action, length) => {
   switch (action.type) {
@@ -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..5a02e8523 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/javascript/time_tables/actions/index.js
@@ -1,5 +1,5 @@
-const _ = require('lodash')
-const clone = require('../../helpers/clone')
+import _ from 'lodash'
+import clone from '../../helpers/clone'
 const I18n = clone(window, "I18n")
 
 const actions = {
@@ -318,7 +318,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..6ae80bce0 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 _ from 'lodash'
+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
   }
@@ -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..893a1fa6a
--- /dev/null
+++ b/app/javascript/time_tables/components/PeriodForm.js
@@ -0,0 +1,148 @@
+import React, { PropTypes } from 'react'
+import _ from '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
+}
+
+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..0dffc7936 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/SaveTimetable.js
+++ b/app/javascript/time_tables/components/SaveTimetable.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 _ from 'lodash'
+import actions from '../actions'
 
-class SaveTimetable extends Component{
+export default class SaveTimetable extends Component{
   constructor(props){
     super(props)
   }
@@ -41,6 +39,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..24f473f42 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/TagsSelect2.js
+++ b/app/javascript/time_tables/components/TagsSelect2.js
@@ -1,14 +1,12 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
+import React, { PropTypes, Component } from 'react'
+import _ from 'lodash'
+import Select2 from 'react-select2-wrapper'
 
 // 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)
   }
@@ -76,6 +74,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..49e79f348 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 _ from 'lodash'
+import actions from '../actions'
+import PeriodFormComponent from '../components/PeriodForm'
+
+
 
 const mapStateToProps = (state) => {
   return {
@@ -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..548798012 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
+++ b/app/javascript/time_tables/reducers/metas.js
@@ -1,7 +1,7 @@
-const _ = require('lodash')
-const actions = require('../actions')
+import _ from 'lodash'
+import actions from '../actions'
 
-const metas = (state = {}, action) => {
+export default function metas(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_TIME_TABLES':
       return _.assign({}, state, {
@@ -37,6 +37,4 @@ const metas = (state = {}, action) => {
     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..a530b2717 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 _ from 'lodash'
+import actions from '../actions'
 
 let newModalProps = {}
 let emptyDate = {
@@ -9,7 +9,7 @@ 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')
@@ -61,6 +61,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/time_tables/reducers/pagination.js b/app/javascript/time_tables/reducers/pagination.js
index f38b124d9..e9ca9e1ec 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
+++ b/app/javascript/time_tables/reducers/pagination.js
@@ -1,6 +1,6 @@
-var _ = require('lodash')
+import _ from 'lodash'
 
-const pagination = (state = {}, action) => {
+export default function pagination(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_TIME_TABLES':
       return _.assign({}, 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/assets/javascripts/es6_browserified/time_tables/reducers/status.js b/app/javascript/time_tables/reducers/status.js
index fc205d0ae..8d93bc2e2 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
+++ b/app/javascript/time_tables/reducers/status.js
@@ -1,6 +1,6 @@
-var _ = require('lodash')
+import _ from 'lodash'
 
-const status = (state = {}, action) => {
+export default function status(state = {}, action) {
   switch (action.type) {
     case 'UNAVAILABLE_SERVER':
       return _.assign({}, state, {fetchSuccess: false})
@@ -12,6 +12,4 @@ const status = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = status
+}
\ 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..274153a69 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js
+++ b/app/javascript/time_tables/reducers/timetable.js
@@ -1,8 +1,8 @@
-const _ = require('lodash')
-var actions = require('../actions')
+import _ from 'lodash'
+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, {
@@ -114,6 +114,4 @@ const timetable = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = timetable
+}
\ 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..496a53242 100644
--- a/app/views/layouts/application.html.slim
+++ b/app/views/layouts/application.html.slim
@@ -12,6 +12,7 @@ html lang=I18n.locale
     = stylesheet_link_tag 'application'
 
     = javascript_include_tag 'application'
+    = javascript_pack_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/workbenches/show.html.slim b/app/views/workbenches/show.html.slim
index fd72979ea..80b5c16a2 100644
--- a/app/views/workbenches/show.html.slim
+++ b/app/views/workbenches/show.html.slim
@@ -78,4 +78,5 @@
 = javascript_tag do
   | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
-= javascript_include_tag 'filters/workbench.js'
+/ = javascript_pack_tag 'date_filters/workbench'
+= javascript_pack_tag 'date_filters'