Refs #2726: updating VJ filter integration

5 files changed, 137 insertions, 78 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',
diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass
index b9ac7b663..81bc28046 100644
--- a/app/assets/stylesheets/components/_forms.sass
+++ b/app/assets/stylesheets/components/_forms.sass
@@ -350,7 +350,7 @@ table, .table
   display: block
   position: relative
   background-color: rgba($grey, 0.15)
-  padding-right: 185px
+  padding-right: 195px
   min-height: 42px
   border-top: 1px solid #fff
 
@@ -362,7 +362,9 @@ table, .table
     vertical-align: top
     padding: 7px 15px
 
-  > .form-group
+  > .form-group, > div > .form-group
+    display: inline-block
+    vertical-align: top
     border-right: 1px solid #fff
     margin: 0
     min-height: 44px
@@ -410,7 +412,7 @@ table, .table
           color: #fff
           transition: 0.2s
 
-  > .form-group
+  > .form-group, > div > .form-group
     position: relative
 
     &.togglable
@@ -572,6 +574,17 @@ table, .table
             &[type='checkbox']:checked + span:before
               background-color: $blue
 
+  > .ffg-row
+    display: block
+    padding: 0
+    border-right: 1px solid #fff
+
+    + .ffg-row
+      border-top: 1px solid #fff
+
+    > .form-group:last-child
+      border-right: none
+
 // Form group date
 .form-group.date
   .form-inline
@@ -613,6 +626,11 @@ table, .table
     .form-control, select.date, select.date:first-child, select.date:nth-child(3)
       border-color: $red
 
+// Form group time
+.form-group.time
+  .control-label.time
+    min-width: 60px
+
 // Nested fields
 .nested-fields
   margin: 0