Refs #5455 @6h; Add time and distance between stops in Journey Patterns

- Adds a `JSON` attribute in the model
- Adds the fields in the editor

5 files changed, 102 insertions, 9 deletions

diff --git a/app/javascript/journey_patterns/actions/index.js b/app/javascript/journey_patterns/actions/index.js
index 1c2eb68b2..09e2001c1 100644
--- a/app/javascript/journey_patterns/actions/index.js
+++ b/app/javascript/journey_patterns/actions/index.js
@@ -64,6 +64,11 @@ const actions = {
     type : 'DELETE_JOURNEYPATTERN',
     index,
   }),
+  updateJourneyPatternCosts : (index, costs) => ({
+    type : 'UPDATE_JOURNEYPATTERN_COSTS',
+    index,
+    costs
+  }),
   closeModal : () => ({
     type : 'CLOSE_MODAL'
   }),
@@ -194,6 +199,7 @@ const actions = {
                   }
                 })
               }
+<<<<<<< HEAD
               journeyPatterns.push({
                 name: val.name,
                 object_id: val.object_id,
@@ -204,6 +210,14 @@ const actions = {
                 stop_points: val.route_short_description.stop_points,
                 deletable: false
               })
+=======
+              journeyPatterns.push(
+                _.assign({}, val, {
+                  stop_points: val.route_short_description.stop_points,
+                  deletable: false
+                })
+              )
+>>>>>>> Refs #5455 @6h; Add time and distance between stops in Journey Patterns
             }
           }
           window.currentItemsLength = journeyPatterns.length
diff --git a/app/javascript/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js
index d4c9816ec..40a6899e2 100644
--- a/app/javascript/journey_patterns/components/JourneyPattern.js
+++ b/app/javascript/journey_patterns/components/JourneyPattern.js
@@ -5,6 +5,17 @@ export default class JourneyPattern extends Component{
   constructor(props){
     super(props)
     this.previousCity = undefined
+    this.previousSpId = undefined
+    this.updateCosts = this.updateCosts.bind(this)
+  }
+
+  updateCosts(e) {
+    let costs = {
+      [e.target.dataset.costsKey]: {
+        [e.target.name]: parseInt(e.target.value)
+      }
+    }
+    this.props.onUpdateJourneyPatternCosts(costs)
   }
 
   vehicleJourneyURL(jpOid) {
@@ -16,16 +27,26 @@ export default class JourneyPattern extends Component{
     )
   }
 
+  hasFeature(key) {
+    return this.props.status.features[key]
+  }
+
   cityNameChecker(sp) {
     let bool = false
+
     if(sp.city_name != this.previousCity){
       bool = true
       this.previousCity = sp.city_name
     }
+    return bool
+  }
+
+  spNode(sp, headlined){
     return (
       <div
-        className={(bool) ? 'headlined' : ''}
+        className={(headlined) ? 'headlined' : ''}
       >
+        <div className={'link '}></div>
         <span className='has_radio'>
           <input
             onChange = {(e) => this.props.onCheckboxChange(e)}
@@ -61,9 +82,9 @@ export default class JourneyPattern extends Component{
 
   render() {
     this.previousCity = undefined
-
+    this.previousSpId = undefined
     return (
-      <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '') + (this.props.value.object_id ? '' : ' to_record') + (this.props.value.errors ? ' has-error': '')}>
+      <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '') + (this.props.value.object_id ? '' : ' to_record') + (this.props.value.errors ? ' has-error': '') + (this.hasFeature('costs_in_journey_patterns') ? ' with-costs' : '')}>
         {/* Errors */}
         {/* this.props.value.errors ? this.getErrors(this.props.value.errors) : '' */}
 
@@ -112,9 +133,49 @@ export default class JourneyPattern extends Component{
           </div>
 
           {this.props.value.stop_points.map((stopPoint, i) =>{
+            let costs = null
+            let costsKey = null
+            let time = null
+            let distance = null
+            let time_in_words = null
+            if(this.previousSpId && stopPoint.checked){
+              costsKey = this.previousSpId + "-" + stopPoint.id
+              costs = this.props.value.costs[costsKey] || {distance: 0, time: 0}
+              time = costs['time'] || 0
+              distance = costs['distance'] || 0
+              if(time < 60){
+                time_in_words = time + " min"
+              }
+              else{
+                let hours = parseInt(time/60)
+                time_in_words = hours + " h " + (time - 60*hours) + " min"
+              }
+            }
+            if(stopPoint.checked){
+              this.previousSpId = stopPoint.id
+            }
+            let headlined = this.cityNameChecker(stopPoint)
             return (
-              <div key={i} className='td'>
-                {this.cityNameChecker(stopPoint)}
+              <div key={i} className={(stopPoint.checked ? 'activated' : 'deactivated') + (this.props.editMode ? ' edit-mode' : '')}>
+                <div className={'td' + (headlined ? ' with-headline' : '')}>
+                  {this.spNode(stopPoint, headlined)}
+                </div>
+                {this.hasFeature('costs_in_journey_patterns') && costs && <div className='costs' id={'costs-' + this.props.value.id + '-' + costsKey }>
+                  {this.props.editMode && <div>
+                    <p>
+                      <input type="number" value={costs['distance'] || 0} min='0' name="distance" onChange={this.updateCosts} data-costs-key={costsKey}/>
+                      <span>km</span>
+                    </p>
+                    <p>
+                      <input type="number" value={costs['time'] || 0} min='0' name="time" onChange={this.updateCosts} data-costs-key={costsKey}/>
+                      <span>min</span>
+                    </p>
+                  </div>}
+                  {!this.props.editMode && <div>
+                    <p><i className="fa fa-arrows-h"></i>{(costs['distance'] || 0) + " km"}</p>
+                    <p><i className="fa fa-clock-o"></i>{time_in_words}</p>
+                  </div>}
+                </div>}
               </div>
             )
           })}
@@ -129,4 +190,4 @@ JourneyPattern.propTypes = {
   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
index 4b2badabb..69024050f 100644
--- a/app/javascript/journey_patterns/components/JourneyPatterns.js
+++ b/app/javascript/journey_patterns/components/JourneyPatterns.js
@@ -131,6 +131,7 @@ export default class JourneyPatterns extends Component {
                       onCheckboxChange= {(e) => this.props.onCheckboxChange(e, index)}
                       onOpenEditModal= {() => this.props.onOpenEditModal(index, journeyPattern)}
                       onDeleteJourneyPattern={() => this.props.onDeleteJourneyPattern(index)}
+                      onUpdateJourneyPatternCosts={(costs) => this.props.onUpdateJourneyPatternCosts(index, costs)}
                       status= {this.props.status}
                       editMode= {this.props.editMode}
                       />
@@ -152,4 +153,4 @@ JourneyPatterns.propTypes = {
   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/containers/JourneyPatternList.js b/app/javascript/journey_patterns/containers/JourneyPatternList.js
index d98734407..d338345f2 100644
--- a/app/javascript/journey_patterns/containers/JourneyPatternList.js
+++ b/app/javascript/journey_patterns/containers/JourneyPatternList.js
@@ -25,7 +25,10 @@ const mapDispatchToProps = (dispatch) => {
     },
     onDeleteJourneyPattern: (index) =>{
       dispatch(actions.deleteJourneyPattern(index))
-    }
+    },
+    onUpdateJourneyPatternCosts: (index, costs) =>{
+      dispatch(actions.updateJourneyPatternCosts(index, costs))
+    },
   }
 }
 
diff --git a/app/javascript/journey_patterns/reducers/journeyPatterns.js b/app/javascript/journey_patterns/reducers/journeyPatterns.js
index 0bbcba976..1ce069522 100644
--- a/app/javascript/journey_patterns/reducers/journeyPatterns.js
+++ b/app/javascript/journey_patterns/reducers/journeyPatterns.js
@@ -17,6 +17,7 @@ const journeyPattern = (state = {}, action) =>{
         published_name: action.data.published_name.value,
         registration_number: action.data.registration_number.value,
         stop_points: stopPoints,
+        costs: {},
         deletable: false
       }
     case 'UPDATE_CHECKBOX_VALUE':
@@ -67,6 +68,19 @@ export default function journeyPatterns (state = [], action)  {
           return j
         }
       })
+    case 'UPDATE_JOURNEYPATTERN_COSTS':
+      return state.map((j, i) =>{
+        if(i == action.index) {
+          const new_costs = Object.assign({}, j.costs)
+          Object.keys(action.costs).map((key) => {
+            let new_costs_for_key = Object.assign({}, j.costs[key] || {}, action.costs[key])
+            new_costs[key] = new_costs_for_key
+          })
+          return _.assign({}, j, {costs: new_costs})
+        } else {
+          return j
+        }
+      })
     case 'ADD_JOURNEYPATTERN':
       return [
         journeyPattern(state, action),
@@ -87,4 +101,4 @@ export default function journeyPatterns (state = [], action)  {
     default:
       return state
   }
-}
\ No newline at end of file
+}