Refs #2726: updating VJ filter integration

4 files changed, 116 insertions, 75 deletions

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 f6875442c..d5f419747 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -9,7 +9,6 @@ var Tools = require('../containers/Tools')
 
 const App = () => (
   <div>
-    <Filters />
 
     <div className='row'>
       <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
@@ -20,6 +19,7 @@ const App = () => (
       </div>
     </div>
 
+    <Filters />
     <VehicleJourneysList />
 
     <div className='row'>
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 9cef77ba8..bddb29434 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
@@ -5,79 +5,119 @@ var TimetableSelect2 = require('./tools/select2s/TimetableSelect2')
 
 const Filters = ({filters, pagination, onFilter, onResetFilters, onUpdateStartTimeFilter, onUpdateEndTimeFilter, onToggleWithoutSchedule, onSelect2Timetable, onSelect2JourneyPattern}) => {
   return (
-    <div className = 'form-filter mb-lg'>
-      <div className = 'form-group'>
-        <span>
-          <MissionSelect2
-            onSelect2JourneyPattern={onSelect2JourneyPattern}
-            filters= {filters}
-            isFilter={true}
-          />
-        </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) => {onUpdateStartTimeFilter(e, 'hour')}}
-          value={filters.query.interval.start.hour}
-        />
-        <input
-          type='number'
-          min='00'
-          max='59'
-          onChange={(e) => {onUpdateStartTimeFilter(e, 'minute')}}
-          value={filters.query.interval.start.minute}
-        />
-        <span> Fin </span>
-        <input
-          type='number'
-          min='00'
-          max='23'
-          onChange={(e) => {onUpdateEndTimeFilter(e, 'hour')}}
-          value={filters.query.interval.end.hour}
-        />
-        <input
-          type='number'
-          min='00'
-          max='59'
-          onChange={(e) => {onUpdateEndTimeFilter(e, 'minute')}}
-          value={filters.query.interval.end.minute}
-        />
-      </div>
-      <div className = 'form-group'>
-        <span>
-          <TimetableSelect2
-            onSelect2Timetable={onSelect2Timetable}
-            hasRoute={true}
-            chunkURL= {("/autocomplete_time_tables.json?route_id=" + String(window.route_id))}
-            filters= {filters}
-            isFilter= {true}
-          />
-        </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 = {(e) => onResetFilters(e, pagination)}>
-          EFFACER
-        </span>
-        <span
-          className='btn btn-primary'
-          onClick={(e) => onFilter(e, pagination)}>
-          FILTRER
-        </span>
+    <div className='row'>
+      <div className='col-lg-12'>
+        <div className='form form-filter'>
+          <div className='ffg-row'>
+            {/* Missions */}
+            <div className='form-group w40'>
+              <MissionSelect2
+                onSelect2JourneyPattern={onSelect2JourneyPattern}
+                filters={filters}
+                isFilter={true}
+                />
+            </div>
+
+            {/* Calendriers */}
+            <div className='form-group w40'>
+              <TimetableSelect2
+                onSelect2Timetable={onSelect2Timetable}
+                hasRoute={true}
+                chunkURL={("/autocomplete_time_tables.json?route_id=" + String(window.route_id))}
+                filters={filters}
+                isFilter={true}
+                />
+            </div>
+          </div>
+
+          <div className='ffg-row'>
+            {/* Plage horaire */}
+            <div className='form-group togglable'>
+              <label className='control-label'>Plage horaire au départ de la course</label>
+              <div className='filter_menu'>
+                <div className='form-group time filter_menu-item'>
+                  <label className='control-label time'>Début</label>
+                  <div className='form-inline'>
+                    <div className='input-group time'>
+                      <input
+                        type='number'
+                        className='form-control'
+                        min='00'
+                        max='23'
+                        onChange={(e) => {onUpdateStartTimeFilter(e, 'hour')}}
+                        value={filters.query.interval.start.hour}
+                        />
+                      <span>:</span>
+                      <input
+                        type='number'
+                        className='form-control'
+                        min='00'
+                        max='59'
+                        onChange={(e) => {onUpdateStartTimeFilter(e, 'minute')}}
+                        value={filters.query.interval.start.minute}
+                        />
+                    </div>
+                  </div>
+                </div>
+                <div className='form-group time filter_menu-item'>
+                  <label className='control-label time'>Fin</label>
+                  <div className='form-inline'>
+                    <div className='input-group time'>
+                      <input
+                        type='number'
+                        className='form-control'
+                        min='00'
+                        max='23'
+                        onChange={(e) => {onUpdateEndTimeFilter(e, 'hour')}}
+                        value={filters.query.interval.end.hour}
+                        />
+                      <span>:</span>
+                      <input
+                        type='number'
+                        className='form-control'
+                        min='00'
+                        max='59'
+                        onChange={(e) => {onUpdateEndTimeFilter(e, 'minute')}}
+                        value={filters.query.interval.end.minute}
+                        />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Switch avec/sans horaires */}
+            <div className='form-group has_switch w40'>
+              <label className='control-label col-sm-8'>Afficher les courses sans horaires</label>
+              <div className='form-group col-sm-4' style={{padding: 0}}>
+                <div className='checkbox'>
+                  <label>
+                    <input
+                      type='checkbox'
+                      onChange={onToggleWithoutSchedule}
+                      checked={filters.query.withoutSchedule}
+                      ></input>
+                    <span className='switch-label' data-checkedvalue='Oui' data-uncheckedvalue='Non'></span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className='actions'>
+            <span
+              className='btn btn-link'
+              onClick={(e) => onResetFilters(e, pagination)}>
+              Effacer
+            </span>
+            <span
+              className='btn btn-default'
+              onClick={(e) => onFilter(e, pagination)}>
+              Filtrer
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   )
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js
index bde4acba8..2b4e1cd80 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js
@@ -23,6 +23,7 @@ class BSelect4 extends React.Component{
         options={{
           allowClear: false,
           theme: 'bootstrap',
+          placeholder: 'Filtrer par mission...',
           width: '100%',
           ajax: {
             url: origin + path + '/journey_patterns_collection.json',
@@ -34,7 +35,6 @@ class BSelect4 extends React.Component{
               };
             },
             processResults: function(data, params) {
-
               return {
                 results: data.map(
                   item => Object.assign(
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
index 5ef8c4fd8..fd1e30afb 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
@@ -24,6 +24,7 @@ class BSelect4 extends React.Component{
           allowClear: false,
           theme: 'bootstrap',
           width: '100%',
+          placeholder: 'Filtrer par calendrier...',
           ajax: {
             url: origin + path + this.props.chunkURL,
             dataType: 'json',