Refs #5556 @0.25h; Show total time and distance in JP editor

2 files changed, 55 insertions, 17 deletions

diff --git a/app/assets/stylesheets/modules/_jp_collection.sass b/app/assets/stylesheets/modules/_jp_collection.sass
index 9d68a217f..b4370a5ac 100644
--- a/app/assets/stylesheets/modules/_jp_collection.sass
+++ b/app/assets/stylesheets/modules/_jp_collection.sass
@@ -5,7 +5,6 @@
 #journey_patterns
   .table-2entries
     .t2e-head
-
       > .td
         position: relative
         padding-left: 25px
@@ -119,6 +118,12 @@
           .td
             padding: 15px 8px
 
+          .totals
+            color: $blue
+            padding-top: 4px
+            i
+              padding-right: 3px
+
           $link-size: 10px
           .link
             position: absolute
diff --git a/app/javascript/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js
index 8dc542bc8..b951b4445 100644
--- a/app/javascript/journey_patterns/components/JourneyPattern.js
+++ b/app/javascript/journey_patterns/components/JourneyPattern.js
@@ -74,18 +74,60 @@ export default class JourneyPattern extends Component{
     return !this.props.status.policy[`journey_patterns.${action}`]
   }
 
+  totals(){
+    let totalTime = 0
+    let totalDistance = 0
+    let from = null
+    this.props.value.stop_points.map((stopPoint, i) =>{
+      if(from && stopPoint.checked){
+        let [costsKey, costs, time, distance] = this.getTimeAndDistanceBetweenStops(from, stopPoint.id)
+        totalTime += time
+        totalDistance += distance
+      }
+      if(stopPoint.checked){
+        from = stopPoint.id
+      }
+    })
+    return [this.formatTime(totalTime), this.formatDistance(totalDistance)]
+  }
+
+  getTimeAndDistanceBetweenStops(from, to){
+    let costsKey = from + "-" + to
+    let costs = this.props.value.costs[costsKey] || {distance: 0, time: 0}
+    let time = costs['time'] || 0
+    let distance = costs['distance'] || 0
+    return [costsKey, costs, time, distance]
+  }
+
+  formatDistance(distance){
+    return parseFloat(Math.round(distance * 100) / 100).toFixed(2) + " km"
+  }
+
+  formatTime(time){
+    if(time < 60){
+      return time + " min"
+    }
+    else{
+      let hours = parseInt(time/60)
+      return hours + " h " + (time - 60*hours) + " min"
+    }
+  }
+
   render() {
     this.previousSpId = undefined
+    let [totalTime, totalDistance] = this.totals()
     return (
       <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) : '' */}
-
         <div className='th'>
           <div className='strong mb-xs'>{this.props.value.object_id ? this.props.value.short_id : '-'}</div>
           <div>{this.props.value.registration_number}</div>
           <div>{actions.getChecked(this.props.value.stop_points).length} arrêt(s)</div>
-
+          {this.hasFeature('costs_in_journey_patterns') &&
+            <div className="small row totals">
+              <span className="col-md-6"><i className="fa fa-arrows-h"></i>{totalTime}</span>
+              <span className="col-md-6"><i className="fa fa-clock-o"></i>{totalDistance}</span>
+            </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'}
@@ -132,17 +174,8 @@ export default class JourneyPattern extends Component{
             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"
-              }
+              [costsKey, costs, time, distance] = this.getTimeAndDistanceBetweenStops(this.previousSpId, stopPoint.id)
+              time_in_words = this.formatTime(time)
             }
             if(stopPoint.checked){
               this.previousSpId = stopPoint.id
@@ -165,7 +198,7 @@ export default class JourneyPattern extends Component{
                     </p>
                   </div>}
                   {!this.props.editMode && <div>
-                    <p><i className="fa fa-arrows-h"></i>{(costs['distance'] || 0) + " km"}</p>
+                    <p><i className="fa fa-arrows-h"></i>{this.formatDistance(costs['distance'] || 0)}</p>
                     <p><i className="fa fa-clock-o"></i>{time_in_words}</p>
                   </div>}
                 </div>}