Refs #2502: setup momentjs to parse departure / arrival for vj

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

2 files changed, 57 insertions, 35 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
index fa9463271..7504d5328 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
@@ -1,42 +1,63 @@
 var React = require('react')
+var Component = require('react').Component
 var PropTypes = require('react').PropTypes
+var moment = require('moment')
 
-const VehicleJourney = ({value, filters}) => {
-  return (
-    <div className={'list-group-item'}>
-
-      <div style={{display: 'inline-block', verticalAlign: 'top', width: 'calc(100% - 25px)'}}>
-        {/* Name */}
-        <p className='small'>
-          <strong>Id: </strong>{value.journey_pattern_id}
-        </p>
-
-        {/* Published name */}
-        <p className='small'>
-          <strong>Objectid: </strong>{value.objectid}
-        </p>
-
-        {/* Registration number */}
-        <p className='small'>
-          <strong>Registration number: </strong>{value.registration_number}
-        </p>
-        <ul className='list-group'>
-          {value.vehicle_journey_at_stops.map((vj, i) =>
-            <li
-              key={i}
-            >
-              <input type='text' defaultValue={vj.arrival_time}/>
-              <span></span>
-              {filters.toggleArrivals &&
-                <input type='text' defaultValue={vj.departure_time}/>
-              }
-            </li>
-          )}
-        </ul>
-      </div>
+class VehicleJourney extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  format(e){
+    if(e.target.value < 10 && e.target.value.length == 1){
+      e.target.value = '0' + e.target.value;
+    }
+  }
+
+  render() {
+    return (
+      <div className={'list-group-item'}>
+
+        <div style={{display: 'inline-block', verticalAlign: 'top', width: 'calc(100% - 25px)'}}>
+          {/* Name */}
+          <p className='small'>
+            <strong>Id: </strong>{this.props.value.journey_pattern_id}
+          </p>
 
-    </div>
-  )
+          {/* Published name */}
+          <p className='small'>
+            <strong>Objectid: </strong>{this.props.value.objectid}
+          </p>
+
+          {/* Registration number */}
+          <p className='small'>
+            <strong>Registration number: </strong>{this.props.value.registration_number}
+          </p>
+          <ul className='list-group'>
+            {this.props.value.vehicle_journey_at_stops.map((vj, i) =>
+              <li
+                key={i}
+              >
+                <span>
+                  <input type='number' min='00' max='23' onInput={(e) => {this.format(e)}} defaultValue={moment(vj.arrival_time).format('hh')}/>
+                  <span>:</span>
+                  <input type='number' min='00' max='59' onInput={(e) => {this.format(e)}} defaultValue={moment(vj.arrival_time).format('mm')}/>
+                </span>
+                {this.props.filters.toggleArrivals &&
+                  <span>
+                    <input type='number' min='00' max='23' onInput={(e) => {this.format(e)}} defaultValue={moment(vj.departure_time).format('hh')}/>
+                    <span>:</span>
+                    <input type='number' min='00' max='59' onInput={(e) => {this.format(e)}} defaultValue={moment(vj.departure_time).format('mm')}/>
+                  </span>
+                }
+              </li>
+            )}
+          </ul>
+        </div>
+
+      </div>
+    )
+  }
 }
 
 VehicleJourney.propTypes = {
diff --git a/package.json b/package.json
index 5bc8bbab1..3f389793e 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "babelify": "7.3.0",
     "browserify": "13.1.1",
     "browserify-incremental": "3.1.1",
+    "moment": "^2.17.1",
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "react-redux": "4.4.5",