Add webpacker gem and migrate the React apps

8 files changed, 686 insertions, 0 deletions

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/javascript/journey_patterns/components/CreateModal.js b/app/javascript/journey_patterns/components/CreateModal.js
new file mode 100644
index 000000000..d0eff6e57
--- /dev/null
+++ b/app/javascript/journey_patterns/components/CreateModal.js
@@ -0,0 +1,122 @@
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
+
+export default class CreateModal extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  handleSubmit() {
+    if(actions.validateFields(this.refs) == true) {
+      this.props.onAddJourneyPattern(this.refs)
+      this.props.onModalClose()
+      $('#NewJourneyPatternModal').modal('hide')
+    }
+  }
+
+  render() {
+    if(this.props.status.isFetching == true || this.props.status.policy['journey_patterns.create'] == false || this.props.editMode == false) {
+      return false
+    }
+    if(this.props.status.fetchSuccess == true) {
+      return (
+        <div className="select_toolbox">
+          <ul>
+            <li className='st_action'>
+              <button
+                type='button'
+                data-toggle='modal'
+                data-target='#NewJourneyPatternModal'
+                onClick={this.props.onOpenCreateModal}
+                >
+                <span className="fa fa-plus"></span>
+              </button>
+
+              <div className={ 'modal fade ' + ((this.props.modal.type == 'create') ? 'in' : '') } id='NewJourneyPatternModal'>
+                <div className='modal-container'>
+                  <div className='modal-dialog'>
+                    <div className='modal-content'>
+                      <div className='modal-header'>
+                        <h4 className='modal-title'>Ajouter une mission</h4>
+                      </div>
+
+                      {(this.props.modal.type == 'create') && (
+                        <form>
+                          <div className='modal-body'>
+                            <div className='form-group'>
+                              <label className='control-label is-required'>Nom</label>
+                              <input
+                                type='text'
+                                ref='name'
+                                className='form-control'
+                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                required
+                                />
+                            </div>
+                            <div className='row'>
+                              <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                                <div className='form-group'>
+                                  <label className='control-label is-required'>Nom public</label>
+                                  <input
+                                    type='text'
+                                    ref='published_name'
+                                    className='form-control'
+                                    onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                    required
+                                    />
+                                </div>
+                              </div>
+                              <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                                <div className='form-group'>
+                                  <label className='control-label'>Code mission</label>
+                                  <input
+                                    type='text'
+                                    ref='registration_number'
+                                    className='form-control'
+                                    onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                    />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div className='modal-footer'>
+                            <button
+                              className='btn btn-link'
+                              data-dismiss='modal'
+                              type='button'
+                              onClick={this.props.onModalClose}
+                              >
+                              Annuler
+                            </button>
+                            <button
+                              className='btn btn-primary'
+                              type='button'
+                              onClick={this.handleSubmit.bind(this)}
+                              >
+                              Valider
+                            </button>
+                          </div>
+                        </form>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      )
+    } else {
+      return false
+    }
+  }
+}
+
+CreateModal.propTypes = {
+  index: PropTypes.number,
+  modal: PropTypes.object.isRequired,
+  status: PropTypes.object.isRequired,
+  onOpenCreateModal: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onAddJourneyPattern: PropTypes.func.isRequired
+}
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/components/EditModal.js b/app/javascript/journey_patterns/components/EditModal.js
new file mode 100644
index 000000000..699f89b85
--- /dev/null
+++ b/app/javascript/journey_patterns/components/EditModal.js
@@ -0,0 +1,110 @@
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
+
+export default class EditModal extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  handleSubmit() {
+    if(actions.validateFields(this.refs) == true) {
+      this.props.saveModal(this.props.modal.modalProps.index, this.refs)
+      $('#JourneyPatternModal').modal('hide')
+    }
+  }
+
+  render() {
+    return (
+      <div className={ 'modal fade ' + ((this.props.modal.type == 'edit') ? 'in' : '') } id='JourneyPatternModal'>
+        <div className='modal-container'>
+          <div className='modal-dialog'>
+            <div className='modal-content'>
+              <div className='modal-header'>
+                <h4 className='modal-title'>
+                  Editer la mission
+                  {(this.props.modal.type == 'edit') && (
+                    <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>
+                  )}
+                </h4>
+              </div>
+
+              {(this.props.modal.type == 'edit') && (
+                <form>
+                  <div className='modal-body'>
+                    <div className='form-group'>
+                      <label className='control-label is-required'>Nom</label>
+                      <input
+                        type='text'
+                        ref='name'
+                        className='form-control'
+                        id={this.props.modal.modalProps.index}
+                        defaultValue={this.props.modal.modalProps.journeyPattern.name}
+                        onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                        required
+                        />
+                    </div>
+
+                    <div className='row'>
+                      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                        <div className='form-group'>
+                          <label className='control-label is-required'>Nom public</label>
+                          <input
+                            type='text'
+                            ref='published_name'
+                            className='form-control'
+                            id={this.props.modal.modalProps.index}
+                            defaultValue={this.props.modal.modalProps.journeyPattern.published_name}
+                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            required
+                            />
+                        </div>
+                      </div>
+                      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                        <div className='form-group'>
+                          <label className='control-label'>Code mission</label>
+                          <input
+                            type='text'
+                            ref='registration_number'
+                            className='form-control'
+                            id={this.props.modal.modalProps.index}
+                            defaultValue={this.props.modal.modalProps.journeyPattern.registration_number}
+                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className='modal-footer'>
+                    <button
+                      className='btn btn-link'
+                      data-dismiss='modal'
+                      type='button'
+                      onClick={this.props.onModalClose}
+                      >
+                      Annuler
+                    </button>
+                    <button
+                      className='btn btn-primary'
+                      type='button'
+                      onClick={this.handleSubmit.bind(this)}
+                      >
+                      Valider
+                    </button>
+                  </div>
+                </form>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+EditModal.propTypes = {
+  index: PropTypes.number,
+  modal: PropTypes.object,
+  onModalClose: PropTypes.func.isRequired,
+  saveModal: PropTypes.func.isRequired
+}
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js
new file mode 100644
index 000000000..dde73a957
--- /dev/null
+++ b/app/javascript/journey_patterns/components/JourneyPattern.js
@@ -0,0 +1,131 @@
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
+
+export default class JourneyPattern extends Component{
+  constructor(props){
+    super(props)
+    this.previousCity = undefined
+  }
+
+  vehicleJourneyURL(jpOid) {
+    let routeURL = window.location.pathname.split('/', 7).join('/')
+    let vjURL = routeURL + '/vehicle_journeys?jp=' + jpOid
+
+    return (
+      <a href={vjURL}>Horaires des courses</a>
+    )
+  }
+
+  cityNameChecker(sp) {
+    let bool = false
+    if(sp.city_name != this.previousCity){
+      bool = true
+      this.previousCity = sp.city_name
+    }
+    return (
+      <div
+        className={(bool) ? 'headlined' : ''}
+      >
+        <span className='has_radio'>
+          <input
+            onChange = {(e) => this.props.onCheckboxChange(e)}
+            type='checkbox'
+            id={sp.id}
+            checked={sp.checked}
+            disabled={(this.props.value.deletable || this.props.status.policy['journey_patterns.update'] == false || this.props.editMode == false) ? 'disabled' : ''}
+            >
+          </input>
+          <span className='radio-label'></span>
+        </span>
+      </div>
+    )
+  }
+
+  getErrors(errors) {
+    let err = Object.keys(errors).map((key, index) => {
+      return (
+        <li key={index} style={{listStyleType: 'disc'}}>
+          <strong>{key}</strong> { errors[key] }
+        </li>
+      )
+    })
+
+    return (
+      <ul className="alert alert-danger">{err}</ul>
+    )
+  }
+
+  isDisabled(action) {
+    return !this.props.status.policy[`journey_patterns.${action}`] && !this.props.editMode
+  }
+
+  render() {
+    this.previousCity = undefined
+
+    return (
+      <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '') + (this.props.value.object_id ? '' : ' to_record') + (this.props.value.errors ? ' has-error': '')}>
+        {/* Errors */}
+        {/* this.props.value.errors ? this.getErrors(this.props.value.errors) : '' */}
+
+        <div className='th'>
+          <div className='strong mb-xs'>{this.props.value.object_id ? actions.humanOID(this.props.value.object_id) : '-'}</div>
+          <div>{this.props.value.registration_number}</div>
+          <div>{actions.getChecked(this.props.value.stop_points).length} arrêt(s)</div>
+
+          <div className={this.props.value.deletable ? 'btn-group disabled' : 'btn-group'}>
+            <div
+              className={this.props.value.deletable ? 'btn dropdown-toggle disabled' : 'btn dropdown-toggle'}
+              data-toggle='dropdown'
+              >
+              <span className='fa fa-cog'></span>
+            </div>
+            <ul className='dropdown-menu'>
+              <li className={this.isDisabled('update') ? 'disabled' : ''}>
+                <button
+                  type='button'
+                  disabled={this.isDisabled('update')}
+                  onClick={this.props.onOpenEditModal}
+                  data-toggle='modal'
+                  data-target='#JourneyPatternModal'
+                  >
+                  Editer
+                </button>
+              </li>
+              <li className={this.props.value.object_id ? '' : 'disabled'}>
+                {this.vehicleJourneyURL(this.props.value.object_id)}
+              </li>
+              <li className={'delete-action' + (this.isDisabled('destroy') ? ' disabled' : '')}>
+                <button
+                  type='button'
+                  disabled={this.isDisabled('destroy') ? 'disabled' : ''}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    this.props.onDeleteJourneyPattern(this.props.index)}
+                  }
+                  >
+                    <span className='fa fa-trash'></span>Supprimer
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          {this.props.value.stop_points.map((stopPoint, i) =>{
+            return (
+              <div key={i} className='td'>
+                {this.cityNameChecker(stopPoint)}
+              </div>
+            )
+          })}
+        </div>
+      )
+  }
+}
+
+JourneyPattern.propTypes = {
+  value: PropTypes.object,
+  index: PropTypes.number,
+  onCheckboxChange: PropTypes.func.isRequired,
+  onOpenEditModal: PropTypes.func.isRequired,
+  onDeleteJourneyPattern: PropTypes.func.isRequired
+}
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/components/JourneyPatterns.js b/app/javascript/journey_patterns/components/JourneyPatterns.js
new file mode 100644
index 000000000..4b2badabb
--- /dev/null
+++ b/app/javascript/journey_patterns/components/JourneyPatterns.js
@@ -0,0 +1,155 @@
+import React, { PropTypes, Component } from 'react'
+import _ from 'lodash'
+import JourneyPattern from './JourneyPattern'
+
+
+export default class JourneyPatterns extends Component {
+  constructor(props){
+    super(props)
+    this.previousCity = undefined
+  }
+  componentDidMount() {
+    this.props.onLoadFirstPage()
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if(this.props.status.isFetching == false){
+      $('.table-2entries').each(function() {
+        var refH = []
+        var refCol = []
+
+        $(this).find('.t2e-head').children('div').each(function() {
+          var h = $(this).outerHeight();
+          refH.push(h)
+        });
+
+        var i = 0
+        $(this).find('.t2e-item').children('div').each(function() {
+          var h = $(this).outerHeight();
+          if(refCol.length < refH.length){
+            refCol.push(h)
+          } else {
+            if(h > refCol[i]) {
+              refCol[i] = h
+            }
+          }
+          if(i == (refH.length - 1)){
+            i = 0
+          } else {
+            i++
+          }
+        });
+
+        for(var n = 0; n < refH.length; n++) {
+          if(refCol[n] < refH[n]) {
+            refCol[n] = refH[n]
+          }
+        }
+
+        $(this).find('.th').css('height', refCol[0]);
+
+        for(var nth = 1; nth < refH.length; nth++) {
+          $(this).find('.td:nth-child('+ (nth + 1) +')').css('height', refCol[nth]);
+        }
+      });
+    }
+  }
+
+  cityNameChecker(sp) {
+    let bool = false
+    if(sp.city_name != this.previousCity){
+      bool = true
+      this.previousCity = sp.city_name
+    }
+    return (
+      <div
+        className={(bool) ? 'headlined' : ''}
+        data-headline={(bool) ? sp.city_name : ''}
+        title={sp.city_name + ' (' + sp.zip_code +')'}
+      >
+        <span><span>{sp.name}</span></span>
+      </div>
+    )
+  }
+
+  render() {
+    this.previousCity = undefined
+
+    if(this.props.status.isFetching == true) {
+      return (
+        <div className="isLoading" style={{marginTop: 80, marginBottom: 80}}>
+          <div className="loader"></div>
+        </div>
+      )
+    } else {
+      return (
+        <div className='row'>
+          <div className='col-lg-12'>
+            {(this.props.status.fetchSuccess == false) && (
+              <div className="alert alert-danger mt-sm">
+                <strong>Erreur : </strong>
+                la récupération des missions a rencontré un problème. Rechargez la page pour tenter de corriger le problème
+              </div>
+            )}
+
+            { _.some(this.props.journeyPatterns, 'errors') && (
+              <div className="alert alert-danger mt-sm">
+                <strong>Erreur : </strong>
+                {this.props.journeyPatterns.map((jp, index) =>
+                  jp.errors && jp.errors.map((err, i) => {
+                    return (
+                      <ul key={i}>
+                        <li>{err}</li>
+                      </ul>
+                    )
+                  })
+                )}
+              </div>
+            )}
+
+            <div className={'table table-2entries mt-sm mb-sm' + ((this.props.journeyPatterns.length > 0) ? '' : ' no_result')}>
+              <div className='t2e-head w20'>
+                <div className='th'>
+                  <div className='strong mb-xs'>ID Mission</div>
+                  <div>Code mission</div>
+                  <div>Nb arrêts</div>
+                </div>
+                {this.props.stopPointsList.map((sp, i) =>{
+                  return (
+                    <div key={i} className='td'>
+                      {this.cityNameChecker(sp)}
+                    </div>
+                  )
+                })}
+              </div>
+
+              <div className='t2e-item-list w80'>
+                <div>
+                  {this.props.journeyPatterns.map((journeyPattern, index) =>
+                    <JourneyPattern
+                      value={ journeyPattern }
+                      key={ index }
+                      onCheckboxChange= {(e) => this.props.onCheckboxChange(e, index)}
+                      onOpenEditModal= {() => this.props.onOpenEditModal(index, journeyPattern)}
+                      onDeleteJourneyPattern={() => this.props.onDeleteJourneyPattern(index)}
+                      status= {this.props.status}
+                      editMode= {this.props.editMode}
+                      />
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    }
+  }
+}
+
+JourneyPatterns.propTypes = {
+  journeyPatterns: PropTypes.array.isRequired,
+  stopPointsList: PropTypes.array.isRequired,
+  status: PropTypes.object.isRequired,
+  onCheckboxChange: PropTypes.func.isRequired,
+  onLoadFirstPage: PropTypes.func.isRequired,
+  onOpenEditModal: PropTypes.func.isRequired
+}
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/components/Navigate.js b/app/javascript/journey_patterns/components/Navigate.js
new file mode 100644
index 000000000..f2fdd668f
--- /dev/null
+++ b/app/javascript/journey_patterns/components/Navigate.js
@@ -0,0 +1,62 @@
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
+
+export default function Navigate({ dispatch, journeyPatterns, pagination, status }) {
+  let firstPage = 1
+  let lastPage = Math.ceil(pagination.totalCount / window.journeyPatternsPerPage)
+
+  let firstItemOnPage = firstPage + (pagination.perPage * (pagination.page - firstPage))
+  let lastItemOnPage = firstItemOnPage + (pagination.perPage - firstPage)
+
+  if(status.isFetching == true) {
+    return false
+  }
+  if(status.fetchSuccess == true) {
+    return (
+      <div className='row'>
+        <div className='col-lg-12 text-right'>
+          <div className='pagination'>
+            Liste des missions {firstItemOnPage} à {(lastItemOnPage < pagination.totalCount) ? lastItemOnPage : pagination.totalCount} sur {pagination.totalCount}
+            <form className='page_links' onSubmit={e => {
+                e.preventDefault()
+              }}>
+              <button
+                onClick={e => {
+                  e.preventDefault()
+                  dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged, dispatch))
+                }}
+                type='button'
+                data-toggle=''
+                data-target='#ConfirmModal'
+                className={'previous_page' + (pagination.page == firstPage ? ' disabled' : '')}
+                disabled={(pagination.page == firstPage ? ' disabled' : '')}
+              >
+              </button>
+              <button
+                onClick={e => {
+                  e.preventDefault()
+                  dispatch(actions.checkConfirmModal(e, actions.goToNextPage(dispatch, pagination), pagination.stateChanged, dispatch))
+                }}
+                type='button'
+                data-toggle=''
+                data-target='#ConfirmModal'
+                className={'next_page' + (pagination.page == lastPage ? ' disabled' : '')}
+                disabled={(pagination.page == lastPage ? 'disabled' : '')}
+              >
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    )
+  } else {
+    return false
+  }
+}
+
+Navigate.propTypes = {
+  journeyPatterns: PropTypes.array.isRequired,
+  status: PropTypes.object.isRequired,
+  pagination: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired
+}
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/components/SaveJourneyPattern.js b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
new file mode 100644
index 000000000..d071fa542
--- /dev/null
+++ b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
@@ -0,0 +1,39 @@
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
+
+export default class SaveJourneyPattern extends Component {
+  constructor(props){
+    super(props)
+  }
+
+  render() {
+    if(this.props.status.policy['journey_patterns.update'] == false) {
+      return false
+    }else{
+      return (
+        <div className='row mt-md'>
+          <div className='col-lg-12 text-right'>
+            <form className='jp_collection formSubmitr ml-xs' onSubmit={e => {e.preventDefault()}}>
+              <button
+                className='btn btn-default'
+                type='button'
+                onClick={e => {
+                  e.preventDefault()
+                  this.props.editMode ? this.props.onSubmitJourneyPattern(this.props.dispatch, this.props.journeyPatterns) : this.props.onEnterEditMode()
+                }}
+                >
+                {this.props.editMode ? "Valider" : "Editer"}
+              </button>
+            </form>
+          </div>
+        </div>
+      )
+    }
+  }
+}
+
+SaveJourneyPattern.propTypes = {
+  journeyPatterns: PropTypes.array.isRequired,
+  status: PropTypes.object.isRequired,
+  page: PropTypes.number.isRequired
+}
\ No newline at end of file