Update IHM for vehicle journey frequency

14 files changed, 141 insertions, 86 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 74e680a68..1ae76cd05 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -23,12 +23,11 @@
 //= require footable/footable.paginate
 //= require footable/footable.sort
 //= require tools
-//= require datatables
-//= require datatables-fixedcolumns
 //= require_directory ./plugins
 //= require_directory .
 //= require_directory ./stop_areas
 //= require_directory ./vehicle_journeys
+//= require_directory ./vehicle_journey_frequencies
 //= require_directory ./import_tasks
 //= require_directory ./compliance_check_tasks
 //= require_directory ./compliance_checks
diff --git a/app/assets/javascripts/vehicle_journey_frequencies.js.coffee b/app/assets/javascripts/vehicle_journey_frequencies.js.coffee
index 020283116..e69de29bb 100644
--- a/app/assets/javascripts/vehicle_journey_frequencies.js.coffee
+++ b/app/assets/javascripts/vehicle_journey_frequencies.js.coffee
@@ -1,13 +0,0 @@
-(($) ->
-  $ ->
-    $('.ce-VehicleJourneyFrequencyTableBlock').dataTable
-      searching: false,
-      ordering: false,
-      paging: false,
-      scrollX: true,
-      fixedColumns: true,
-      bInfo: false
-    window.setTimeout('$( ".dataTables_scrollBody" ).animate({scrollLeft: 100}, 500).animate({scrollLeft: 0}, 500)', 1000)
-    return
-  return
-) jQuery
diff --git a/app/assets/javascripts/vehicle_journey_frequencies/index.js.coffee b/app/assets/javascripts/vehicle_journey_frequencies/index.js.coffee
new file mode 100644
index 000000000..4f4fccc18
--- /dev/null
+++ b/app/assets/javascripts/vehicle_journey_frequencies/index.js.coffee
@@ -0,0 +1,4 @@
+$(".vehicle_journey_frequencies.index").ready ->
+  $( 'body' ).popover({html: true, trigger: "click", selector: '[rel="popover"]'}).on("show.bs.popover", (event)->
+    $('[aria-describedby]').click()
+    $(event.target).data("bs.popover").tip().css("maxWidth", "350px"))
diff --git a/app/assets/javascripts/vehicle_journeys/index.js.coffee b/app/assets/javascripts/vehicle_journeys/index.js.coffee
index e21580f4e..02de558d4 100644
--- a/app/assets/javascripts/vehicle_journeys/index.js.coffee
+++ b/app/assets/javascripts/vehicle_journeys/index.js.coffee
@@ -1,4 +1,4 @@
-$(".vehicle_journeys.index, .vehicle_journey_frequencies.index").ready ->
+$(".vehicle_journeys.index").ready ->
 
   $( 'body' ).popover({html: true, trigger: "focus", selector: 'thead th button'})
   .on("show.bs.popover", (event)->
diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
index f29ca4738..770e3c82b 100644
--- a/app/assets/stylesheets/application.css.scss.erb
+++ b/app/assets/stylesheets/application.css.scss.erb
@@ -30,8 +30,6 @@ $body-bg: #eee;
 @import "formtastic";
 @import 'eonasdan-bootstrap-datetimepicker';
 @import 'footable';
-@import 'datatables';
-@import 'datatables-fixedcolumns';
 
 @import "vendor/openlayers_style";
 @import "vendor/openlayers_ie6-style";
diff --git a/app/assets/stylesheets/main/vehicle_journey_frequencies.scss b/app/assets/stylesheets/main/vehicle_journey_frequencies.scss
index 911a3f267..f973de209 100644
--- a/app/assets/stylesheets/main/vehicle_journey_frequencies.scss
+++ b/app/assets/stylesheets/main/vehicle_journey_frequencies.scss
@@ -103,4 +103,51 @@
   .ce-VehicleJourneyFrequencyTableBlock {
     margin: 0 !important;
   }
+  .ce-VehicleJourneyFrequenciesMatrix {
+    margin: 0;
+    padding: 0;
+    > li {
+      background-color: #eee;
+      height: 22px;
+      margin-bottom: 20px;
+      position: relative;
+      > ul {
+        margin: 0;
+        padding: 0;
+        > li {
+          cursor: pointer;
+          position: absolute;
+          padding: 0 2px;
+          top: 0;
+          bottom: 0;
+          background-color: $brand-primary;
+          border-left: 1px solid #000;
+          border-right: 1px solid #000;
+          &:hover {
+            z-index: 9999;
+            background-color: #4d7809;
+            top: -2px;
+            bottom: -2px;
+            > span {
+              display: block;
+            }
+          }
+        }
+      }
+    }
+  }
+  .ce-VehicleJourneyFrequenciesMatrix-firstDepartureTime,
+  .ce-VehicleJourneyFrequenciesMatrix-lastDepartureTime {
+    display: none;
+    position: absolute;
+    top: -13px;
+    font-size: 11px;
+    color: #262626;
+  }
+  .ce-VehicleJourneyFrequenciesMatrix-firstDepartureTime {
+    left: -32px;
+  }
+  .ce-VehicleJourneyFrequenciesMatrix-lastDepartureTime {
+    right: -32px;
+  }
 }
diff --git a/app/assets/stylesheets/vendor/bootstrap_changes.css.scss b/app/assets/stylesheets/vendor/bootstrap_changes.css.scss
index 67cf90ae4..6e2ccc1f6 100644
--- a/app/assets/stylesheets/vendor/bootstrap_changes.css.scss
+++ b/app/assets/stylesheets/vendor/bootstrap_changes.css.scss
@@ -11,6 +11,7 @@
 
     span.included_day_type {
         color: black;
+        font-weight: bold;
     }
     span.excluded_day_type {
     }
@@ -32,3 +33,26 @@
         color: $brand-success;
     }
 }
+.popover-title {
+  display: table;
+  width: 100%;
+  > a {
+    display: table-cell;
+    vertical-align: top;
+    &:first-child {
+      padding-right: 10px;
+    }
+    &:last-child {
+      width: 32px;
+    }
+  }
+}
+.popover-content {
+  > ul {
+    margin: 0;
+    padding: 0;
+    > li {
+      list-style: none !important;
+    }
+  }
+}
diff --git a/app/helpers/vehicle_journey_frequencies_helper.rb b/app/helpers/vehicle_journey_frequencies_helper.rb
index 5d62aaf7f..237c9b371 100644
--- a/app/helpers/vehicle_journey_frequencies_helper.rb
+++ b/app/helpers/vehicle_journey_frequencies_helper.rb
@@ -1,2 +1,9 @@
 module VehicleJourneyFrequenciesHelper
+  def journey_frequency_percent(journey_frequency)
+    base = 100.0 / 2359.0
+    left = base * journey_frequency.first_departure_time.strftime("%H%M").to_i
+    right = base * journey_frequency.last_departure_time.strftime("%H%M").to_i
+    width = right - left
+    [left.round(2), width.round(2)]
+  end
 end
diff --git a/app/helpers/vehicle_journeys_helper.rb b/app/helpers/vehicle_journeys_helper.rb
index 9b4f055a1..c5f3242be 100644
--- a/app/helpers/vehicle_journeys_helper.rb
+++ b/app/helpers/vehicle_journeys_helper.rb
@@ -25,12 +25,20 @@ module VehicleJourneysHelper
     l(departure_time, :format => :hour).gsub( /  /, ' ')
   end
   
-  def vehicle_title(vehicle, departure_time=nil)
+  def vehicle_title(vehicle, journey_frequency=nil)
     return t("vehicle_journeys.vehicle_journey#{'_frequency' if vehicle.frequency?}.title_stopless", :name => vehicle_name( vehicle)) if vehicle.vehicle_journey_at_stops.empty?
     first_vjas = vehicle.vehicle_journey_at_stops.first
-    t("vehicle_journeys.vehicle_journey#{'_frequency' if vehicle.frequency?}.title",
-          :stop => first_vjas.stop_point.stop_area.name,
-          :time => vehicle_departure(vehicle, departure_time))
+    if vehicle.frequency? && journey_frequency
+      t("vehicle_journeys.vehicle_journey_frequency.title_frequency",
+        :interval => l(journey_frequency.scheduled_headway_interval, format: :hour),
+        :stop => first_vjas.stop_point.stop_area.name,
+        :time_first => vehicle_departure(nil, journey_frequency.first_departure_time),
+        :time_last => vehicle_departure(nil, journey_frequency.last_departure_time))
+    else
+      t("vehicle_journeys.vehicle_journey#{'_frequency' if vehicle.frequency?}.title",
+            :stop => first_vjas.stop_point.stop_area.name,
+            :time => vehicle_departure(vehicle, (journey_frequency ? journey_frequency.first_departure_time : nil )))
+    end
   end
   
   def edit_vehicle_title( vehicle)
diff --git a/app/views/vehicle_journey_frequencies/_vehicle_journeys_matrix.html.erb b/app/views/vehicle_journey_frequencies/_vehicle_journeys_matrix.html.erb
index c915e4f54..c023f9cfb 100644
--- a/app/views/vehicle_journey_frequencies/_vehicle_journeys_matrix.html.erb
+++ b/app/views/vehicle_journey_frequencies/_vehicle_journeys_matrix.html.erb
@@ -1,41 +1,22 @@
-<table class="table table-hover table-striped ce-VehicleJourneyFrequencyTableBlock">
-  <thead>
-    <tr>
-      <th class="title">
-        <button data-style="primary" data-container="body" rel="popover" data-toggle="popover" title='<%= t(".line_routes") %>'
-                data-placement="top" data-content='<%= render( partial: "vehicle_journeys/route_popover", :locals => { :selected_route => @route }) %>'
-                class="route_popover btn btn-default btn-sm">
-          <i class='fa fa-search'></i>
-          <%= Chouette::Route.model_name.human.capitalize %>
-        </button>
-      </th>
-      <% @matrix.each do |departure_time, vj| %>
-        <th class="vehicle_journey">
-          <button data-style="primary" data-container="body" rel="popover" data-toggle="popover"
-                  data-title='<%= link_to(vehicle_title(vj, departure_time), [@referential, @line, @route, vj] ) %>
-                  <%= link_to('<span class="fa fa-pencil"></span>'.html_safe,
-                              send("edit_referential_line_route_vehicle_journey#{'_frequency' if vj.frequency?}_path", @referential, @line, @route, vj),
-                              :class => "btn btn-default btn-sm" ) %>'
-                  data-placement= "top"
-                  data-content='<%= render( partial: "vehicle_journeys/show_popover", :locals => { :vehicle_journey => vj }) %>'
-                  class="vehicle_journey_popover btn btn-default btn-sm">
-            <i class='fa fa-search'></i>
-          </button>
-        </th>
+<ul class="ce-VehicleJourneyFrequenciesMatrix">
+<% @vehicle_journeys.each do |vj| %>
+  <li>
+    <ul>
+      <% vj.journey_frequencies.each do |jf| %>
+        <% left, width = journey_frequency_percent(jf) %>
+        <li style="left:<%= left %>%;width:<%= width %>%"
+            data-style="primary" data-container="body" rel="popover" data-toggle="popover"
+            data-title='<%= link_to(vehicle_title(vj, jf), [@referential, @line, @route, vj] ) %>
+                        <%= link_to('<span class="fa fa-pencil"></span>'.html_safe,
+                                    send("edit_referential_line_route_vehicle_journey#{'_frequency' if vj.frequency?}_path", @referential, @line, @route, vj),
+                                    :class => "btn btn-default btn-sm" ) %>'
+            data-placement= "top"
+            data-content='<%= render 'vehicle_journeys/show_popover', { vehicle_journey: vj } %>'>
+          <span class="ce-VehicleJourneyFrequenciesMatrix-firstDepartureTime"><%= l(jf.first_departure_time, format: :hour) %></span>
+          <span class="ce-VehicleJourneyFrequenciesMatrix-lastDepartureTime"><%= l(jf.last_departure_time, format: :hour) %></span>
+        </li>
       <% end %>
-    </tr>
-  </thead>
-  <tbody>
-    <% @matrix_interval = Chouette::VehicleJourneyFrequency.matrix_interval(@matrix) %>
-    <% @route.stop_points.each do |sp| %>
-      <tr class="<%= cycle('odd', 'even') %>">
-        <td class="stop_area"><%= sp.stop_area.name %></td>
-        <% @matrix.each do |departure_time, vj| %>
-          <% next unless @matrix_interval[sp.id] %>
-          <% vjas = @matrix_interval[sp.id][departure_time.to_i] %>
-          <td><%= (vjas && vjas.departure_time) ? l( vjas.departure_time, format: :hour) : '--' %></td>
-        <% end %>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+    </ul>
+  </li>
+<% end %>
+</ul>
diff --git a/app/views/vehicle_journey_frequencies/_vehicle_journeys_page_info.html.erb b/app/views/vehicle_journey_frequencies/_vehicle_journeys_page_info.html.erb
deleted file mode 100644
index fe3ae29e0..000000000
--- a/app/views/vehicle_journey_frequencies/_vehicle_journeys_page_info.html.erb
+++ /dev/null
@@ -1 +0,0 @@
-<span class="search"> <%= t("will_paginate.page_entries_info.search") %></span> <%= page_entries_info @vehicle_journeys %> <%= t('.with_matrix_size', matrix_size: @matrix.size) %>
diff --git a/app/views/vehicle_journeys/_vehicle_journeys.html.erb b/app/views/vehicle_journeys/_vehicle_journeys.html.erb
index 8dc2a74ef..9d553e48b 100644
--- a/app/views/vehicle_journeys/_vehicle_journeys.html.erb
+++ b/app/views/vehicle_journeys/_vehicle_journeys.html.erb
@@ -1,5 +1,6 @@
 <div class="page_info">
-  <%= render 'vehicle_journeys_page_info' %>
+  <span class="search"><%= t("will_paginate.page_entries_info.search") %></span>
+  <%= page_entries_info @vehicle_journeys %>
 </div>
 <div class="pagination">
   <%= will_paginate @vehicle_journeys, :container => false, renderer: RemoteBootstrapPaginationLinkRenderer %>
diff --git a/app/views/vehicle_journeys/_vehicle_journeys_page_info.html.erb b/app/views/vehicle_journeys/_vehicle_journeys_page_info.html.erb
deleted file mode 100644
index 30b389ee3..000000000
--- a/app/views/vehicle_journeys/_vehicle_journeys_page_info.html.erb
+++ /dev/null
@@ -1 +0,0 @@
-<span class="search"> <%= t("will_paginate.page_entries_info.search") %></span> <%= page_entries_info @vehicle_journeys %>
diff --git a/app/views/vehicle_journeys/index.html.erb b/app/views/vehicle_journeys/index.html.erb
index 13126b2e1..3fd123c79 100644
--- a/app/views/vehicle_journeys/index.html.erb
+++ b/app/views/vehicle_journeys/index.html.erb
@@ -14,30 +14,31 @@
   <div id="advanced_search" class="panel-collapse collapse">
     <div class="panel-body">
       <div>
-      <%= f.label :time_tables_id_not_eq, "Sans calendrier" %>
-      <%= f.check_box :time_tables_id_not_eq %>
+        <%= f.label :time_tables_id_not_eq, "Sans calendrier" %>
+        <%= f.check_box :time_tables_id_not_eq %>
 
-      <span class="time_tables_id_eq">
-        <%= f.label :time_tables_id_eq, "Sélectionner calendriers" %>
-        <%= f.text_field :time_tables_id_eq, :input_html => { :"data-pre" => [].to_json} %>
-      </span>
+        <span class="time_tables_id_eq">
+          <%= f.label :time_tables_id_eq, "Sélectionner calendriers" %>
+          <%= f.text_field :time_tables_id_eq, :input_html => { :"data-pre" => [].to_json} %>
+        </span>
       </div>
+      <% if controller_name != 'vehicle_journey_frequencies' %>
+        <div>
+          <%= f.label :vehicle_journey_at_stops_departure_time_not_eq, "Sans horaire" %>
+          <%= f.check_box :vehicle_journey_at_stops_departure_time_not_eq %>
 
-      <div>
-      <%= f.label :vehicle_journey_at_stops_departure_time_not_eq, "Sans horaire" %>
-      <%= f.check_box :vehicle_journey_at_stops_departure_time_not_eq %>
-
-      <span class="vehicle_journey_at_stops_departure_time_gt">
-        <input name=<%= "q[vehicle_journey_at_stops_departure_time_gt(3i)]" %> type="hidden" value="1">
-        <input name=<%= "q[vehicle_journey_at_stops_departure_time_gt(2i)]" %> type="hidden" value="1">
-        <input name=<%= "q[vehicle_journey_at_stops_departure_time_gt(1i)]" %> type="hidden" value="2000">
-        <%= f.label :vehicle_journey_at_stops_departure_time_gt, t('.time_range') %>
-        <%= select_hour(@q.send( "vehicle_journey_at_stops_departure_time_gt") ? @q.send( "vehicle_journey_at_stops_departure_time_gt").hour : 0,
-                         :prefix => "q", :field_name => "vehicle_journey_at_stops_departure_time_gt(4i)") %>
-        <%= select_minute(@q.send( "vehicle_journey_at_stops_departure_time_gt") ? @q.send( "vehicle_journey_at_stops_departure_time_gt").min : 0,
-                           :prefix => "q", :field_name => "vehicle_journey_at_stops_departure_time_gt(5i)") %>
-      </span>
-      </div>
+          <span class="vehicle_journey_at_stops_departure_time_gt">
+            <input name=<%= "q[vehicle_journey_at_stops_departure_time_gt(3i)]" %> type="hidden" value="1">
+            <input name=<%= "q[vehicle_journey_at_stops_departure_time_gt(2i)]" %> type="hidden" value="1">
+            <input name=<%= "q[vehicle_journey_at_stops_departure_time_gt(1i)]" %> type="hidden" value="2000">
+            <%= f.label :vehicle_journey_at_stops_departure_time_gt, t('.time_range') %>
+            <%= select_hour(@q.send( "vehicle_journey_at_stops_departure_time_gt") ? @q.send( "vehicle_journey_at_stops_departure_time_gt").hour : 0,
+                             :prefix => "q", :field_name => "vehicle_journey_at_stops_departure_time_gt(4i)") %>
+            <%= select_minute(@q.send( "vehicle_journey_at_stops_departure_time_gt") ? @q.send( "vehicle_journey_at_stops_departure_time_gt").min : 0,
+                               :prefix => "q", :field_name => "vehicle_journey_at_stops_departure_time_gt(5i)") %>
+          </span>
+        </div>
+      <% end %>
     </div>
   </div>
 </div>