Refs #2507: Add query filter state, component logic for filters

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

3 files changed, 94 insertions, 7 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
index 00612da31..5f539a067 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
@@ -1,15 +1,79 @@
 var React = require('react')
 var PropTypes = require('react').PropTypes
+var MissionSelect2 = require('./tools/select2s/MissionSelect2')
+var TimetableSelect2 = require('./tools/select2s/TimetableSelect2')
 
-const Filters = ({filters, onFilters}) => {
+const Filters = ({filters, onFilter, onResetFilters, onUpdateTimeFilter, onToggleWithoutSchedule}) => {
   return (
-    <span>Filters</span>
+    <div className = 'form-filter'>
+      <div className = 'form-group'>
+        <span><MissionSelect2 /></span>
+      </div>
+      <div className = 'form-group'>
+        <span>Plage horaire au départ de la course </span>
+        <span> Début </span>
+        <input
+          type='number'
+          min='00'
+          max='23'
+          onChange={(e) => {onUpdateTimeFilter(e, 'hour')}}
+          value={filters.query.interval.start.hour}
+        />
+        <input
+          type='number'
+          min='00'
+          max='59'
+          onChange={(e) => {onUpdateTimeFilter(e, 'minute')}}
+          value={filters.query.interval.start.minute}
+        />
+        <span> Fin </span>
+        <input
+          type='number'
+          min='00'
+          max='23'
+          onChange={(e) => {onUpdateTimeFilter(e, 'hour')}}
+          value={filters.query.interval.end.hour}
+        />
+        <input
+          type='number'
+          min='00'
+          max='59'
+          onChange={(e) => {onUpdateTimeFilter(e, 'minute')}}
+          value={filters.query.interval.end.minute}
+        />
+      </div>
+      <div className = 'form-group'>
+        <span><TimetableSelect2 /></span>
+      </div>
+      <div className = 'form-group'>
+        <span>Afficher les courses sans horaires</span>
+        <input
+          onChange = {onToggleWithoutSchedule}
+          type = 'checkbox'
+          checked = {filters.query.withoutSchedule}
+        ></input>
+      </div>
+      <div className = 'actions'>
+        <span
+          className = 'btn btn-link'
+          onClick = {onResetFilters}>
+          EFFACER
+        </span>
+        <span
+          className='btn btn-primary'
+          onClick={onFilter}>
+          FILTRER
+        </span>
+      </div>
+    </div>
   )
 }
 
 Filters.propTypes = {
   filters : PropTypes.object.isRequired,
-  onFilters: PropTypes.func.isRequired
+  onFilter: PropTypes.func.isRequired,
+  onResetFilters: PropTypes.func.isRequired,
+  onUpdateTimeFilter: PropTypes.func.isRequired
 }
 
 module.exports = Filters
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Filters.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Filters.js
index 61fc29cb7..5339aa02e 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Filters.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Filters.js
@@ -10,8 +10,17 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    onFilters: () =>{
-      dispatch(actions.toggleArrivals())
+    onUpdateTimeFilter: (e, unit) =>{
+      dispatch(actions.updateTimeFilter(e.target.value, unit))
+    },
+    onToggleWithoutSchedule: () =>{
+      dispatch(actions.toggleWithoutSchedule())
+    },
+    onResetFilters: () =>{
+      dispatch(actions.resetFilters())
+    },
+    onFilter: () =>{
+      dispatch(actions.filterQuery())
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
index 70edeafeb..e0a68cbc3 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
@@ -19,9 +19,23 @@ if (window.journeyPatternId)
 var initialState = {
   filters: {
     selectedJourneyPatterns : selectedJP,
-    // TODO retrieve policy from controller
     policy: window.perms,
-    toggleArrivals: false
+    toggleArrivals: false,
+    query: {
+      interval: {
+        start:{
+          hour: '00',
+          minute: '00'
+        },
+        end:{
+          hour: '23',
+          minute: '59'
+        }
+      },
+      journeyPattern: {},
+      timetable: {},
+      withoutSchedule: false
+    }
 
   },
   status: {