Refs #2503: Add toggle for vehicle journeys arrival

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

11 files changed, 103 insertions, 12 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
index ce0ef6d9b..ae43d6823 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
@@ -29,6 +29,9 @@ const actions = {
       return callback
     }
   },
+  toggleArrivals : () => ({
+    type: 'TOGGLE_ARRIVALS',
+  }),
   fetchVehicleJourneys : (dispatch, currentPage, nextPage) => {
     if(currentPage == undefined){
       currentPage = 1
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
index bd6fef237..12c340553 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -1,10 +1,12 @@
 var React = require('react')
 var VehicleJourneysList = require('../containers/vehicleJourneysList')
 var Navigate = require('../containers/Navigate')
+var FiltersList = require('../containers/FiltersList')
 
 const App = () => (
   <div>
     <div className='clearfix' style={{ marginBottom: 10 }}>
+      <FiltersList />
       <Navigate />
     </div>
     <VehicleJourneysList />
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
new file mode 100644
index 000000000..37c33d993
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
@@ -0,0 +1,22 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+
+const Filters = ({filters, onToggleArrivals}) => {
+  return (
+    <div className='list-group'>
+        <span> Afficher les horaires d'arrivée</span>
+        <input
+          onChange = {onToggleArrivals}
+          type = 'checkbox'
+          checked = {filters.toggleArrivals}
+        ></input>
+    </div>
+  )
+}
+
+Filters.propTypes = {
+  filters : PropTypes.object.isRequired,
+  onToggleArrivals: PropTypes.func.isRequired
+}
+
+module.exports = Filters
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 27f3c7ed6..fa9463271 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
@@ -1,33 +1,35 @@
 var React = require('react')
 var PropTypes = require('react').PropTypes
 
-const VehicleJourney = (props) => {
+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>{props.value.journey_pattern_id}
+          <strong>Id: </strong>{value.journey_pattern_id}
         </p>
 
         {/* Published name */}
         <p className='small'>
-          <strong>Objectid: </strong>{props.value.objectid}
+          <strong>Objectid: </strong>{value.objectid}
         </p>
 
         {/* Registration number */}
         <p className='small'>
-          <strong>Registration number: </strong>{props.value.registration_number}
+          <strong>Registration number: </strong>{value.registration_number}
         </p>
         <ul className='list-group'>
-          {props.value.vehicle_journey_at_stops.map((vj, i) =>
+          {value.vehicle_journey_at_stops.map((vj, i) =>
             <li
               key={i}
             >
               <input type='text' defaultValue={vj.arrival_time}/>
               <span></span>
-              <input type='text' defaultValue={vj.departure_time}/>
+              {filters.toggleArrivals &&
+                <input type='text' defaultValue={vj.departure_time}/>
+              }
             </li>
           )}
         </ul>
@@ -38,8 +40,8 @@ const VehicleJourney = (props) => {
 }
 
 VehicleJourney.propTypes = {
-  value: PropTypes.object,
-  index: PropTypes.number,
+  value: PropTypes.object.isRequired,
+  filters: PropTypes.object.isRequired
 }
 
 module.exports = VehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js
index fe96555d1..0fbb5feaa 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js
@@ -29,8 +29,9 @@ class VehicleJourneys extends Component{
           )}
           {this.props.vehicleJourneys.map((vj, index) =>
             <VehicleJourney
-              value={ vj }
-              key={ index }
+              value = {vj}
+              key = {index}
+              filters = {this.props.filters}
               />
           )}
         </div>
@@ -42,6 +43,7 @@ class VehicleJourneys extends Component{
 VehicleJourneys.propTypes = {
   status: PropTypes.object.isRequired,
   onLoadFirstPage: PropTypes.func.isRequired,
+  filters: PropTypes.object.isRequired
 }
 
 module.exports = VehicleJourneys
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/FiltersList.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/FiltersList.js
new file mode 100644
index 000000000..a04e76cd6
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/FiltersList.js
@@ -0,0 +1,21 @@
+var actions = require('../actions')
+var connect = require('react-redux').connect
+var Filters = require('../components/Filters')
+
+const mapStateToProps = (state) => {
+  return {
+    filters: state.filters
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onToggleArrivals: () =>{
+      dispatch(actions.toggleArrivals())
+    }
+  }
+}
+
+const FiltersList = connect(mapStateToProps, mapDispatchToProps)(Filters)
+
+module.exports = FiltersList
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js
index e028b7eb3..b9aba78af 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js
@@ -5,7 +5,8 @@ var VehicleJourneys = require('../components/VehicleJourneys')
 const mapStateToProps = (state) => {
   return {
     vehicleJourneys: state.vehicleJourneys,
-    status: state.status
+    status: state.status,
+    filters: state.filters
   }
 }
 
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
index 6caed1834..0402fe459 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
@@ -20,7 +20,9 @@ var initialState = {
   filters: {
     selectedJourneyPatterns : selectedJP,
     // TODO retrieve policy from controller
-    policy: true
+    policy: true,
+    toggleArrivals: false
+
   },
   status: {
     fetchSuccess: true,
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/filters.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/filters.js
index 7b9c4418a..5457b6800 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/filters.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/filters.js
@@ -2,6 +2,8 @@ var actions = require("../actions")
 
 const filters = (state = {}, action) => {
   switch (action.type) {
+    case 'TOGGLE_ARRIVALS':
+      return Object.assign({}, state, {toggleArrivals: !state.toggleArrivals})
     default:
       return state
   }
diff --git a/spec/javascripts/vehicle_journeys/actions_spec.js b/spec/javascripts/vehicle_journeys/actions_spec.js
index 8999d4cb6..d09531564 100644
--- a/spec/javascripts/vehicle_journeys/actions_spec.js
+++ b/spec/javascripts/vehicle_journeys/actions_spec.js
@@ -29,3 +29,11 @@ describe('when receiveJourneyPatterns is triggered', () => {
     expect(actions.receiveVehicleJourneys()).toEqual(expectedAction)
   })
 })
+describe('when toggling arrivals', () => {
+  it('should create an action to toggleArrivals', () => {
+    const expectedAction = {
+      type: 'TOGGLE_ARRIVALS',
+    }
+    expect(actions.toggleArrivals()).toEqual(expectedAction)
+  })
+})
diff --git a/spec/javascripts/vehicle_journeys/reducers/filters_spec.js b/spec/javascripts/vehicle_journeys/reducers/filters_spec.js
new file mode 100644
index 000000000..ecb80f3c3
--- /dev/null
+++ b/spec/javascripts/vehicle_journeys/reducers/filters_spec.js
@@ -0,0 +1,26 @@
+var statusReducer = require('es6_browserified/vehicle_journeys/reducers/filters')
+
+let state = {}
+
+describe('filters reducer', () => {
+  beforeEach(() => {
+    state = {
+      toggleArrivals: false,
+    }
+  })
+
+  it('should return the initial state', () => {
+    expect(
+      statusReducer(undefined, {})
+    ).toEqual({})
+  })
+
+  it('should handle TOGGLE_ARRIVALS', () => {
+    expect(
+      statusReducer(state, {
+        type: 'TOGGLE_ARRIVALS'
+      })
+    ).toEqual(Object.assign({}, state, {toggleArrivals: true}))
+  })
+
+})