Merge branch 'master' into staging

17 files changed, 483 insertions, 319 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
index 30fa872dd..f5a3357eb 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -169,31 +169,38 @@ const actions = {
         if(hasError == true) {
           dispatch(actions.unavailableServer())
         } else {
-          let val
-          for (val of json){
-            for (let stop_point of val.route_short_description.stop_points){
-              stop_point.checked = false
-              val.stop_area_short_descriptions.map((element) => {
-                if(element.stop_area_short_description.id === stop_point.id){
-                  stop_point.checked = true
-                }
+          if(json.length != 0){
+            let val
+            for (val of json){
+              for (let stop_point of val.route_short_description.stop_points){
+                stop_point.checked = false
+                val.stop_area_short_descriptions.map((element) => {
+                  if(element.stop_area_short_description.id === stop_point.id){
+                    stop_point.checked = true
+                  }
+                })
+              }
+              journeyPatterns.push({
+                name: val.name,
+                object_id: val.object_id,
+                published_name: val.published_name,
+                registration_number: val.registration_number,
+                stop_points: val.route_short_description.stop_points,
+                deletable: false
               })
             }
-            journeyPatterns.push({
-              name: val.name,
-              object_id: val.object_id,
-              published_name: val.published_name,
-              registration_number: val.registration_number,
-              stop_points: val.route_short_description.stop_points,
-              deletable: false
-            })
-          }
-          if(journeyPatterns.length != window.journeyPatternsPerPage){
-            dispatch(actions.updateTotalCount(journeyPatterns.length - window.journeyPatternsPerPage))
+            if(journeyPatterns.length != window.journeyPatternsPerPage){
+              dispatch(actions.updateTotalCount(journeyPatterns.length - window.journeyPatternsPerPage))
+            }
           }
           dispatch(actions.receiveJourneyPatterns(journeyPatterns))
         }
       })
+  },
+  getChecked : (jp) => {
+    return jp.filter((obj) => {
+      return obj.checked
+    })
   }
 }
 
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
index d9fbf07f8..5e51f469c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
@@ -4,28 +4,35 @@ 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-dialog'>
-      <div className='modal-content'>
-        <div className='modal-body'>
-          <p> Voulez-vous enregistrer vos modifications avant de changer de page? </p>
-        </div>
-        <div className='modal-footer'>
-          <button
-            className='btn btn-default'
-            data-dismiss='modal'
-            type='button'
-            onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
-            >
-            Ne pas enregistrer
-          </button>
-          <button
-            className='btn btn-danger'
-            data-dismiss='modal'
-            type='button'
-            onClick = {() => {onModalAccept(modal.confirmModal.callback, journeyPatterns)}}
-            >
-            Enregistrer
-          </button>
+    <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 enregistrer 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 enregistrer
+            </button>
+            <button
+              className='btn btn-primary'
+              data-dismiss='modal'
+              type='button'
+              onClick = {() => {onModalAccept(modal.confirmModal.callback, journeyPatterns)}}
+              >
+              Enregistrer
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
index 0b966d6d9..d9a4df099 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
@@ -34,71 +34,73 @@ class CreateModal extends Component {
             </button>
 
             <div className={ 'modal fade ' + ((this.props.modal.type == 'create') ? 'in' : '') } id='NewJourneyPatternModal'>
-              <div className='modal-dialog'>
-                <div className='modal-content'>
-                  <div className='modal-header clearfix'>
-                    <h4>Ajouter une mission</h4>
-                  </div>
+              <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>
+                    {(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='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>N° d'enregistrement</label>
-                              <input
-                                type='text'
-                                ref='registration_number'
-                                className='form-control'
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                                required
-                                />
+                          <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 is-required'>N° d'enregistrement</label>
+                                <input
+                                  type='text'
+                                  ref='registration_number'
+                                  className='form-control'
+                                  onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                  required
+                                  />
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
-                          >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-danger'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
-                          >
-                          Valider
-                        </button>
-                      </div>
-                    </form>
-                  )}
+                        <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>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
index 7d7dd40a4..37f2b5547 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
@@ -18,110 +18,86 @@ class EditModal extends Component {
   render() {
     return (
       <div className={ 'modal fade ' + ((this.props.modal.type == 'edit') ? 'in' : '') } id='JourneyPatternModal'>
-        <div className='modal-dialog'>
-          <div className='modal-content'>
-            <div className='modal-header clearfix'>
-              <h4 className='pull-left'>
-                Modifier la mission
-                {(this.props.modal.type == 'edit') && (
-                  <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>
-                )}
-              </h4>
-              <div className='btn-group btn-group-sm pull-right'>
-                <button
-                  type='button'
-                  className='btn btn-primary dropdown-toggle'
-                  data-toggle='dropdown'
-                  >
-                  <span className='fa fa-bars'></span>
-                  <span className='caret'></span>
-                </button>
-
-                <ul className='dropdown-menu'>
-                  <li><a href='#'>Horaires des courses</a></li>
-                  <li>
-                    <a
-                      href='#'
-                      data-dismiss='modal'
-                      onClick={(e) => {
-                        e.preventDefault()
-                        this.props.onDeleteJourneyPattern(this.props.modal.modalProps.index)}
-                      }
-                      >
-                      Supprimer la mission
-                    </a>
-                  </li>
-                </ul>
+        <div className='modal-container'>
+          <div className='modal-dialog'>
+            <div className='modal-content'>
+              <div className='modal-header'>
+                <h4 className='modal-title'>
+                  Modifier la mission
+                  {(this.props.modal.type == 'edit') && (
+                    <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>
+                  )}
+                </h4>
               </div>
-            </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>
+              {(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 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>
-                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                      <div className='form-group'>
-                        <label className='control-label is-required'>N° d'enregistrement</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)}
-                          required
-                          />
+                      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                        <div className='form-group'>
+                          <label className='control-label is-required'>N° d'enregistrement</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)}
+                            required
+                            />
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
 
-                <div className='modal-footer'>
-                  <button
-                    className='btn btn-default'
-                    data-dismiss='modal'
-                    type='button'
-                    onClick={this.props.onModalClose}
-                    >
-                    Annuler
-                  </button>
-                  <button
-                    className='btn btn-danger'
-                    type='button'
-                    onClick={this.handleSubmit.bind(this)}
-                    >
-                    Valider
-                  </button>
-                </div>
-              </form>
-            )}
+                  <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>
@@ -133,8 +109,7 @@ EditModal.propTypes = {
   index: PropTypes.number,
   modal: PropTypes.object,
   onModalClose: PropTypes.func.isRequired,
-  saveModal: PropTypes.func.isRequired,
-  onDeleteJourneyPattern: PropTypes.func.isRequired
+  saveModal: PropTypes.func.isRequired
 }
 
 module.exports = EditModal
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
index c0272a476..72ba2061a 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -1,64 +1,125 @@
 var React = require('react')
+var Component = require('react').Component
 var PropTypes = require('react').PropTypes
+var actions = require('../actions')
 
-const JourneyPattern = (props) => {
-  return (
-    <div className={'tc-item' + (props.value.deletable ? ' disabled' : '') + (props.value.object_id ? '' : ' to_record')}>
-      {/* Errors */}
-      {(props.value.errors) && (
-        <ul className='alert alert-danger small' style={{paddingLeft: 30}}>
-          {Object.keys(props.value.errors).map(function(key, i) {
-            return (
-              <li key={i} style={{listStyleType: 'disc'}}>
-                <strong>'{key}'</strong> {props.value.errors[key]}
-              </li>
-            )
-          })}
-        </ul>
-      )}
+class JourneyPattern extends Component{
+  constructor(props){
+    super(props)
+    this.previousCity = undefined
+  }
 
-      <div className='tc-th'>
-        <span>{props.value.object_id}</span>
-        <span>{props.value.registration_number}</span>
-        <span>n</span>
+  vehicleJourneyURL(oid) {
+    // oid will be used later, for params in URL...
 
-        <div className='clearfix' style={{display: 'inline-block', verticalAlign: 'top', width: '25px'}}>
-          <button className={(props.value.deletable ? 'disabled' : '') + ' btn btn-xs btn-danger pull-right'} onClick={props.onOpenEditModal} data-toggle='modal' data-target='#JourneyPatternModal'>
-            <span className='fa fa-pencil'></span>
-          </button>
-        </div>
+    let routeURL = window.location.pathname.split('/', 7).join('/')
+    let vjURL = routeURL + '/vehicle_journeys'
+
+    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 ? 'disabled' : ''}
+            >
+          </input>
+          <span className='radio-label'></span>
+        </span>
       </div>
-      <div className='tc-td'>
-        <ul className='list-group'>
-          {props.value.stop_points.map((stopPoint, i) =>
-            <li
-              key={ i }
-              className='list-group-item clearfix'
-              >
-              <span className='label label-default' style={{marginRight: 5}}>{stopPoint.id}</span>
-              <span>{stopPoint.name}</span>
-              <span className='pull-right'>
-                <input
-                  onChange = {(e) => props.onCheckboxChange(e)}
-                  type='checkbox'
-                  id={stopPoint.id}
-                  checked={stopPoint.checked}
-                  disabled={props.value.deletable ? 'disabled' : ''}
-                  ></input>
-              </span>
-            </li>
+    )
+  }
+
+  render() {
+    this.previousCity = undefined
+
+    return (
+      <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '') + (this.props.value.object_id ? '' : ' to_record')}>
+        {/* Errors */}
+        {(this.props.value.errors) && (
+          <ul className='alert alert-danger small' style={{paddingLeft: 30}}>
+            {Object.keys(this.props.value.errors).map(function(key, i) {
+              return (
+                <li key={i} style={{listStyleType: 'disc'}}>
+                  <strong>'{key}'</strong> {this.props.value.errors[key]}
+                  </li>
+                )
+              })}
+            </ul>
           )}
-        </ul>
-      </div>
-    </div>
-  )
+
+          <div className='th'>
+            <div className='strong mb-xs'>{this.props.value.object_id ? 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.props.value.deletable ? 'disabled' : ''}>
+                  <a
+                    href='#'
+                    onClick={this.props.onOpenEditModal}
+                    data-toggle='modal'
+                    data-target='#JourneyPatternModal'
+                    >
+                    Modifier
+                  </a>
+                </li>
+                <li>{this.vehicleJourneyURL(this.props.value.object_id)}</li>
+                <li className='delete-action'>
+                  <a
+                    href='#'
+                    onClick={(e) => {
+                      e.preventDefault()
+                      this.props.onDeleteJourneyPattern(this.props.index)}
+                    }
+                    >
+                    <span className='fa fa-trash'></span>Supprimer
+                    </a>
+                  </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
+  onOpenEditModal: PropTypes.func.isRequired,
+  onDeleteJourneyPattern: PropTypes.func.isRequired
 }
 
 module.exports = JourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
index 2d922d745..69d36abe6 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
@@ -6,12 +6,74 @@ var JourneyPattern = require('./JourneyPattern')
 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>{sp.name}</span>
+      </div>
+    )
+  }
 
   render() {
+    this.previousCity = undefined
+
     if(this.props.status.isFetching == true) {
       return (
         <div className="isLoading" style={{marginTop: 80, marginBottom: 80}}>
@@ -29,27 +91,34 @@ class JourneyPatterns extends Component{
               </div>
             )}
 
-            <div className='table table-cbyc mt-sm mb-sm'>
-              <div className='tc-wrapper'>
-                <div className='tc-head'>
-                  <div className='tc-th'>
-                    <span>ID Mission</span>
-                    <span>Code mission</span>
-                    <span>Nb arrêts</span>
-                  </div>
-                  {this.props.stopPointsList.map((sp, i) =>
-                    <span key={i} className='tc-td'>{sp}</span>
-                  )}
+            <div className='table table-2entries mt-sm mb-sm'>
+              <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>
 
-                {this.props.journeyPatterns.map((journeyPattern, index) =>
-                  <JourneyPattern
-                    value={ journeyPattern }
-                    key={ index }
-                    onCheckboxChange= {(e) => this.props.onCheckboxChange(e, index)}
-                    onOpenEditModal= {() => this.props.onOpenEditModal(index, journeyPattern)}
-                    />
-                )}
+              <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)}
+                      />
+                  )}
+                </div>
               </div>
             </div>
           </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
index def7d1471..839d8f72e 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
@@ -28,20 +28,24 @@ let Navigate = ({ dispatch, journeyPatterns, pagination, status }) => {
                   e.preventDefault()
                   dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged, dispatch))
                 }}
-                type="submit"
+                type='button'
                 data-toggle=''
                 data-target='#ConfirmModal'
-                className={'previous_page' + (pagination.page == firstPage ? ' disabled' : '')}>
+                className={'previous_page' + (pagination.page == firstPage ? ' disabled' : '')}
+                disabled={'previous_page' + (pagination.page == firstPage ? ' disabled' : '')}
+              >
               </button>
               <button
                 onClick={e => {
                   e.preventDefault()
                   dispatch(actions.checkConfirmModal(e, actions.goToNextPage(dispatch, pagination), pagination.stateChanged, dispatch))
                 }}
-                type="submit"
+                type='button'
                 data-toggle=''
                 data-target='#ConfirmModal'
-                className={'next_page' + (pagination.page == lastPage ? ' disabled' : '')}>
+                className={'next_page' + (pagination.page == lastPage ? ' disabled' : '')}
+                disabled={'next_page' + (pagination.page == lastPage ? ' disabled' : '')}
+              >
               </button>
             </form>
           </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js
new file mode 100644
index 000000000..b4b278ae4
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js
@@ -0,0 +1,52 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+var actions = require('../actions')
+
+class SaveJourneyPattern extends Component{
+  constructor(props){
+    super(props)
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if(prevProps.status.isFetching == true){
+      submitMover();
+    }
+  }
+
+  render() {
+    if(this.props.status.isFetching == true) {
+      return false
+    }
+    if(this.props.status.fetchSuccess == true) {
+      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()
+                  actions.submitJourneyPattern(this.props.dispatch, this.props.journeyPatterns)
+                }}
+                >
+                Enregistrer
+              </button>
+            </form>
+          </div>
+        </div>
+      )
+    } else {
+      return false
+    }
+  }
+}
+
+SaveJourneyPattern.propTypes = {
+  journeyPatterns: PropTypes.array.isRequired,
+  status: PropTypes.object.isRequired,
+  page: PropTypes.number.isRequired
+}
+
+module.exports = SaveJourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
index bace802e5..bc2aaf95b 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
@@ -21,6 +21,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     onOpenEditModal: (index, journeyPattern) =>{
       dispatch(actions.openEditModal(index, journeyPattern))
+    },
+    onDeleteJourneyPattern: (index) =>{
+      dispatch(actions.deleteJourneyPattern(index))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
index 4b1809fa1..ef6a4a6b1 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
@@ -17,9 +17,6 @@ const mapDispatchToProps = (dispatch) => {
     },
     saveModal: (index, data) =>{
       dispatch(actions.saveModal(index, data))
-    },
-    onDeleteJourneyPattern: (index) =>{
-      dispatch(actions.deleteJourneyPattern(index))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js
index 24ccdcd5a..33442c5a0 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js
@@ -1,34 +1,7 @@
 var React = require('react')
 var connect = require('react-redux').connect
 var actions = require('../actions')
-
-let SaveJourneyPattern = ({ dispatch, journeyPatterns, page, status }) => {
-  if(status.isFetching == true) {
-    return false
-  }
-  if(status.fetchSuccess == true) {
-    return (
-      <div className='row mt-md'>
-        <div className='col-lg-12 text-right'>
-          <form className='jp_collection_submitr' onSubmit={e => {e.preventDefault()}}>
-            <button
-              className='btn btn-danger'
-              type='submit'
-              onClick={e => {
-                e.preventDefault()
-                actions.submitJourneyPattern(dispatch, journeyPatterns)
-              }}
-              >
-              Enregistrer
-            </button>
-          </form>
-        </div>
-      </div>
-    )
-  } else {
-    return false
-  }
-}
+var SaveJourneyPatternComponent = require('../components/SaveJourneyPattern')
 
 const mapStateToProps = (state) => {
   return {
@@ -38,6 +11,6 @@ const mapStateToProps = (state) => {
   }
 }
 
-SaveJourneyPattern = connect(mapStateToProps)(SaveJourneyPattern)
+const SaveJourneyPattern = connect(mapStateToProps)(SaveJourneyPatternComponent)
 
 module.exports = SaveJourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
index 6db78445f..a2e1c2fb6 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
@@ -17,7 +17,7 @@ var initialState = {
     isFetching: false
   },
   journeyPatterns: [],
-  stopPointsList: [],
+  stopPointsList: window.stopPoints,
   pagination: {
     page : 1,
     totalCount: window.journeyPatternLength,
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
index 85817616a..aa35adf0e 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
@@ -8,8 +8,8 @@ var stopPointsList = require('./stopPointsList')
 const journeyPatternsApp = combineReducers({
   status,
   journeyPatterns,
-  stopPointsList,
   pagination,
+  stopPointsList,
   modal
 })
 
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
index 13f1100b3..92381f018 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
@@ -3,11 +3,14 @@ var actions = require("../actions")
 const journeyPattern = (state = {}, action) => {
   switch (action.type) {
     case 'ADD_JOURNEYPATTERN':
-      let stopPoints = JSON.parse(JSON.stringify(state[0].stop_points))
-      stopPoints.map((s)=>{
-        s.checked = false
-        return s
-      })
+      let stopPoints = window.stopPoints
+
+      if(stopPoints != undefined) {
+        stopPoints.map((s)=>{
+          s.checked = false
+          return s
+        })
+      }
       return {
         name: action.data.name.value,
         published_name: action.data.published_name.value,
@@ -65,8 +68,8 @@ const journeyPatterns = (state = [], action) => {
       })
     case 'ADD_JOURNEYPATTERN':
       return [
-        ...state,
-        journeyPattern(state, action)
+        journeyPattern(state, action),
+        ...state
       ]
     case 'SAVE_MODAL':
       return state.map((j, i) =>{
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js
index 407a8e382..9abacc8c8 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js
@@ -1,12 +1,5 @@
-const stopPointsList = (state = {}, action) => {
+const stopPointsList = (state = [], action) => {
   switch (action.type) {
-    case 'RECEIVE_JOURNEY_PATTERNS':
-      let sp = action.json[0].stop_points
-      let spArray = []
-      sp.map((s) => {
-        spArray.push(s.name)
-      })
-      return [...spArray]
     default:
       return state
   }
diff --git a/app/assets/javascripts/forms.coffee b/app/assets/javascripts/forms.coffee
index ff35066c5..c8dd69581 100644
--- a/app/assets/javascripts/forms.coffee
+++ b/app/assets/javascripts/forms.coffee
@@ -18,6 +18,9 @@
         labelCont.text(labelCont.data('checkedvalue'))
 
 @submitMover = ->
+  if $('.page-action').children('.formSubmitr').length > 0
+    $('.page-action').children('.formSubmitr').remove()
+
   $('.formSubmitr').appendTo('.page-action')
 
   # IE fix
diff --git a/app/assets/javascripts/selectable_table.coffee b/app/assets/javascripts/selectable_table.coffee
index 1b4b95c0b..84475857e 100644
--- a/app/assets/javascripts/selectable_table.coffee
+++ b/app/assets/javascripts/selectable_table.coffee
@@ -28,11 +28,26 @@
           elm = selection.indexOf(e.currentTarget.id)
           selection.splice(elm, 1)
 
+      # console.log(selection)
+
       # Updating toolbox, according to selection
       if selection.length > 0
         toolbox
           .removeClass 'noselect'
           .children('.info-msg').children('span').text(selection.length)
+
+        # Injecting selection into action urls
+        toolbox.find('.st_action').each ->
+          actionURL = $(this).children('a').attr('data-path')
+
+          newSelection = []
+          i = 0
+          while i < selection.length
+            newSelection[i] = 'referentials[]=' + selection[i] + ''
+            i++
+
+          $(this).children('a').attr('href', actionURL + '?' + newSelection.join('&'))
+
       else
         toolbox
           .addClass 'noselect'