Refs #2648: jp_collection post-refacto fixes + cities display feature

5 files changed, 202 insertions, 111 deletions

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 9e554b38e..e6b560317 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -1,84 +1,108 @@
 var React = require('react')
+var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 var actions = require('../actions')
 
-const JourneyPattern = (props) => {
-  return (
-    <div className={'t2e-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='th'>
-        <div className='strong mb-xs'>{props.value.object_id ? props.value.object_id : '-'}</div>
-        <div>{props.value.registration_number}</div>
-        <div>{actions.getChecked(props.value.stop_points).length} arrêt(s)</div>
-
-        <div className={props.value.deletable ? 'btn-group disabled' : 'btn-group'}>
-          <div
-            className={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={props.value.deletable ? 'disabled' : ''}>
-              <a
-                href='#'
-                onClick={props.onOpenEditModal}
-                data-toggle='modal'
-                data-target='#JourneyPatternModal'
-              >
-                Modifier
-              </a>
-            </li>
-            <li>
-              <a href='#'>Horaires des courses</a>
-            </li>
-            <li className='delete-action'>
-              <a
-                href='#'
-                onClick={(e) => {
-                  e.preventDefault()
-                  props.onDeleteJourneyPattern(props.index)}
-                }
-              >
-                <span className='fa fa-trash'></span>Supprimer
-              </a>
-            </li>
-          </ul>
-        </div>
+  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>
+    )
+  }
+
+  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>
+          )}
 
-      {props.value.stop_points.map((stopPoint, i) =>
-        <div
-          key={ i }
-          className='td'
-          >
-          <span className='has_radio'>
-            <input
-              onChange = {(e) => props.onCheckboxChange(e)}
-              type='checkbox'
-              id={stopPoint.id}
-              checked={stopPoint.checked}
-              disabled={props.value.deletable ? 'disabled' : ''}
-              >
-            </input>
-            <span className='radio-label'></span>
-          </span>
-        </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>
+                  <a href='#'>Horaires des courses</a>
+                </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 = {
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 dc55038c3..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,6 +6,7 @@ var JourneyPattern = require('./JourneyPattern')
 class JourneyPatterns extends Component{
   constructor(props){
     super(props)
+    this.previousCity = undefined
   }
   componentDidMount() {
     this.props.onLoadFirstPage()
@@ -53,7 +54,26 @@ class JourneyPatterns extends Component{
     }
   }
 
+  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}}>
@@ -78,9 +98,13 @@ class JourneyPatterns extends Component{
                   <div>Code mission</div>
                   <div>Nb arrêts</div>
                 </div>
-                {this.props.stopPointsList.map((sp, i) =>
-                  <div key={i} className='td'>{sp.name}</div>
-                )}
+                {this.props.stopPointsList.map((sp, i) =>{
+                  return (
+                    <div key={i} className='td'>
+                      {this.cityNameChecker(sp)}
+                    </div>
+                  )
+                })}
               </div>
 
               <div className='t2e-item-list w80'>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js
index d030ba9eb..b4b278ae4 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js
@@ -25,7 +25,7 @@ class SaveJourneyPattern extends Component{
             <form className='jp_collection formSubmitr ml-xs' onSubmit={e => {e.preventDefault()}}>
               <button
                 className='btn btn-default'
-                type='submit'
+                type='button'
                 onClick={e => {
                   e.preventDefault()
                   actions.submitJourneyPattern(this.props.dispatch, this.props.journeyPatterns)
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
index 322613397..f4519f549 100644
--- a/app/assets/stylesheets/components/_tables.sass
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -121,10 +121,12 @@
 //-----------------------------//
 
 .table.table-2entries
-  display: block
+  display: table
+  table-layout: fixed
+  width: 100%
 
   > *
-    display: inline-block
+    display: table-cell
     vertical-align: top
 
   .th
@@ -134,6 +136,24 @@
   .td
     padding: 6px 8px
     border-bottom: 1px solid rgba($grey, 0.5)
+    word-wrap: break-word
+    hyphens: auto
+
+    > div
+      position: relative
+      height: 100%
+
+      &.headlined:before
+        content: ''
+        display: block
+        border-bottom: 1px solid rgba($grey, 0.5)
+        margin: -6px -9px 6px -8px
+        padding: 6px 9px 6px 8px
+        border-right: 1px solid #fff
+        height: calc(1.4em + 12px)
+        overflow: hidden
+        text-overflow: ellipsis
+        white-space: nowrap
 
   .t2e-head
     border-right: 1px solid rgba($grey, 0.5)
@@ -142,6 +162,12 @@
       text-align: right
       border-top-color: transparent
 
+    .td > .headlined
+      &:before
+        content: attr(data-headline)
+        text-transform: uppercase
+        color: rgba($grey, 0.75)
+
   .t2e-item-list
     +emptyzone(rgba($grey, 0.075), rgba($grey, 0.015))
 
@@ -152,6 +178,7 @@
       white-space: nowrap
       border-right: 1px solid rgba($grey, 0.5)
       max-width: 100%
+      padding-right: 1px
 
     .t2e-item
       display: inline-block
@@ -168,9 +195,13 @@
           padding-right: 30px
 
       .td
-        > .has_radio
-          top: 50%
-          margin-top: -10px
+        > div
+          > .has_radio
+            top: 50%
+            margin-top: -10px
+
+          &.headlined > .has_radio
+            margin-top: calc((1.4em + 6px) * -1)
 
       &.disabled
         color: rgba($darkgrey, 0.5)
diff --git a/app/assets/stylesheets/modules/_jp_collection.sass b/app/assets/stylesheets/modules/_jp_collection.sass
index a7aa5a0dc..05485dcf9 100644
--- a/app/assets/stylesheets/modules/_jp_collection.sass
+++ b/app/assets/stylesheets/modules/_jp_collection.sass
@@ -9,36 +9,48 @@
         position: relative
         padding-left: 25px
 
-        &:before
-          content: ''
-          display: block
-          width: 10px
-          height: 10px
-          background-color: #fff
-          border: 2px solid $blue
-          border-radius: 50%
-          position: absolute
-          z-index: 5
-          left: 5px
-          top: 50%
-          margin-top: -5px
-
-        &:after
-          content: ''
-          display: block
-          width: 4px
-          margin: 0 3px
-          background-color: rgba($grey, 0.5)
-          position: absolute
-          z-index: 3
-          top: 0
-          left: 5px
-          bottom: 0
-
-        &:last-child
+        > .headlined
+          &:before
+            margin-left: -25px
+            padding-left: 25px
+
+        > div > span
+          position: relative
+
+          &:before
+            content: ''
+            display: block
+            width: 10px
+            height: 10px
+            background-color: #fff
+            border: 2px solid $blue
+            border-radius: 50%
+            position: absolute
+            z-index: 5
+            left: -20px
+            top: 50%
+            margin-top: -5px
+
+          &:after
+            content: ''
+            display: block
+            width: 4px
+            margin: 0 3px
+            background-color: rgba($grey, 0.5)
+            position: absolute
+            z-index: 3
+            top: -6px
+            left: -20px
+            bottom: -6px
+
+        > .headlined > span
+          &:after
+            top: calc((1.4em + 18px) * -1)
+
+        &:last-child > div > span
           &:after
             bottom: 50%
 
-        &:nth-child(2)
+        &:nth-child(2) > div > span
           &:after
             top: 50%