Ie report : add FooTable, sort, paginate, filter tables

7 files changed, 110 insertions, 31 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index da1def5cb..212ccdff8 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -18,7 +18,10 @@
 //= require moment/locale/fr
 //= require eonasdan-bootstrap-datetimepicker
 //= require tagmanager
-//= require datatables
+//= require footable
+//= require footable/footable.filter
+//= require footable/footable.paginate
+//= require footable/footable.sort
 //= require_directory ./plugins
 //= require_directory .
 //= require_directory ./stop_areas
diff --git a/app/assets/javascripts/partials/ie_report.js.coffee.erb b/app/assets/javascripts/partials/ie_report.js.coffee.erb
index 90a267d19..20c6dbb16 100644
--- a/app/assets/javascripts/partials/ie_report.js.coffee.erb
+++ b/app/assets/javascripts/partials/ie_report.js.coffee.erb
@@ -5,6 +5,17 @@ $(".imports.show, .exports.show, .compliance_checks.show").ready ->
     reloadPage = () -> window.location.reload()
     setInterval(reloadPage,refreshInterval * 1000)
 
+  footableFilter = (parent, el) ->
+    $(parent).footable().bind 'footable_filtering', (e) ->
+      selected =  $("select#{el} option:selected").val()
+      if selected and selected.length > 0
+        e.filter += if e.filter and e.filter.length > 0 then ' ' + selected else selected
+        e.clear = !e.filter
+      return
+    $("select#{el}").change (e) ->
+      e.preventDefault()
+      $(parent).trigger 'footable_filter', filter: $("select#{el} option:selected").val()
+      return
 
-  $('.data-table').DataTable language:
-    url: "/assets/data_table/i18n/#{$('html').attr('lang')}.json"
+  footableFilter('#table-file', '.filter-file-status')
+  footableFilter('#table-line', '.filter-line-status')
diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
index 4899582e2..52405c14c 100644
--- a/app/assets/stylesheets/application.css.scss.erb
+++ b/app/assets/stylesheets/application.css.scss.erb
@@ -28,7 +28,7 @@ $body-bg: #eee;
 @import "morrisjs";
 @import "formtastic";
 @import 'eonasdan-bootstrap-datetimepicker';
-@import 'datatables';
+@import 'footable';
 
 @import "vendor/openlayers_style";
 @import "vendor/openlayers_ie6-style";
diff --git a/app/assets/stylesheets/partials/ie_report.css.scss b/app/assets/stylesheets/partials/ie_report.css.scss
index b8b37f918..312dac9ad 100644
--- a/app/assets/stylesheets/partials/ie_report.css.scss
+++ b/app/assets/stylesheets/partials/ie_report.css.scss
@@ -23,11 +23,28 @@
     text-align :center;
     font-weight: bold;
   }
+
+  dl.inline dd {
+    display: inline;
+    margin: 0;
+  }
+  dl.inline dd:after{
+    display: block;
+    content: '';
+  }
+  dl.inline dt{
+    display: inline-block;
+    min-width: 180px;
+  }
 }
 
 .report {
   margin-top: 20px;
 
+  .form-group {
+    margin-right: 20px;
+  }
+
   .files {
     img {
       margin-right: 5px;
diff --git a/app/views/shared/_ie_report.html.erb b/app/views/shared/_ie_report.html.erb
index 9c799ef1c..ef400f6ef 100644
--- a/app/views/shared/_ie_report.html.erb
+++ b/app/views/shared/_ie_report.html.erb
@@ -1,25 +1,25 @@
 <div class="resume">
   <% if job.respond_to?(:file_path) %>
   <ul class="nav nav-tabs" role="tablist">
-      <li role="presentation" class="active">
-        <a href="#ie_tab_file" class="ie_tab_file" aria-controls="ie_tab_file" role="tab" data-toggle="tab">
-          <%=t('.tab.file')%>
-        </a>
-      </li>
-    <li role="presentation">
+    <li role="presentation" class="active">
       <a href="#ie_tab_line" class="ie_tab_line"  aria-controls="ie_tab_line" role="tab" data-toggle="tab">
         <%=t('.tab.line')%>
       </a>
     </li>
+    <li role="presentation">
+      <a href="#ie_tab_file" class="ie_tab_file" aria-controls="ie_tab_file" role="tab" data-toggle="tab">
+        <%=t('.tab.file')%>
+      </a>
+    </li>
   </ul>
 
   <div class="tab-content">
-      <div role="tabpanel" class="tab-pane active" id="ie_tab_file">
-        <%= render partial: 'shared/ie_report_file', locals: { job: job } %>
-      </div>
-    <div role="tabpanel" class="tab-pane" id="ie_tab_line">
+    <div role="tabpanel" class="tab-pane active" id="ie_tab_line">
         <%= render partial: 'shared/ie_report_line', locals: { job: job } %>
     </div>
+    <div role="tabpanel" class="tab-pane" id="ie_tab_file">
+      <%= render partial: 'shared/ie_report_file', locals: { job: job } %>
+    </div>
   </div>
   <% else %>
     <%= render partial: 'shared/ie_report_line', locals: { job: job } %>
diff --git a/app/views/shared/_ie_report_file.html.erb b/app/views/shared/_ie_report_file.html.erb
index 6f7395532..20e4bb659 100644
--- a/app/views/shared/_ie_report_file.html.erb
+++ b/app/views/shared/_ie_report_file.html.erb
@@ -2,7 +2,24 @@
 <p class="caption"><%= t(".title_default", {:job => job.class.model_name.human, :extension => job.filename_extension} ) %></p>
 </p>
 <div class="report results" data-refresh-interval="<%= job_refresh_interval(job) %>">
-  <table class="table table-hover table-striped data-table">
+  <p>
+    <form class="form-inline">
+      <div class="form-group">
+        <label><%= t("shared.ie_report.html.search") %></label>
+        <input id="filter-file" type="text" class="form-control">
+      </div>
+      <div class="form-group">
+        <label><%= t(".table.state") %></label>
+        <select class="filter-file-status form-control">
+          <option></option>
+          <option value="ok"><%=t(".table.ok")%></option>
+          <option value="error"><%=t(".table.error")%></option>
+          <option value="ignored"><%=t(".table.ignored")%></option>
+        </select>
+      </div>
+    </form>
+  </p>
+  <table id="table-file" class="table table-hover table-striped data-table" data-filter="#filter-file" data-page-size="20">
     <thead>
       <tr>
         <th class="state"><%= t(".table.state") %></th>
@@ -13,11 +30,16 @@
     <tbody>
       <% job.report.files.each do |file| %>
         <tr class="<%= file.status == 'ERROR' ? 'danger' : nil %>">
-          <td><%= t(".table.#{file.status.downcase}") %></td>
+          <td data-value="<%= file.status.downcase %>"><%= t(".table.#{file.status.downcase}") %></td>
           <td><%= file.name %></td>
           <td><%= file.errors.map{|e| "#{e.code} : #{e.description}"}.join(' | ') if file.errors.present? %></td>
         </tr>
       <% end %>
     </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="5"><ul class="pagination pagination-centered"></ul></td>
+      </tr>
+    </tfoot>
   </table>
 </div>
diff --git a/app/views/shared/_ie_report_line.html.erb b/app/views/shared/_ie_report_line.html.erb
index 9f320af6c..b9fc5dd45 100644
--- a/app/views/shared/_ie_report_line.html.erb
+++ b/app/views/shared/_ie_report_line.html.erb
@@ -1,27 +1,48 @@
-<p class="lead">
-  <p><b><%=t('.read_lines') %></b> : <%= job.report.lines %></p>
-  <p><b><%=t('.saved_lines') %></b> : <%= job.report.saved_lines %></p>
-  <p><b><%=t('.unsaved_lines') %></b> : <%= job.report.unsaved_lines %></p>
+<p class='lead'>
+  <dl class="inline">
+    <dt><%=t('.read_lines') %> :</dt>
+    <dd><%= job.report.lines %></dd>
+    <dt><%=t('.saved_lines') %> :</dt>
+    <dd><%= job.report.saved_lines %></dd>
+    <dt><%=t('.unsaved_lines') %> :</dt>
+    <dd><%= job.report.unsaved_lines %></dd>
+  </dl>
 </p>
 <div class="report" data-refresh-interval="<%= job_refresh_interval(job) %>">
-   <table class="table table-hover table-striped data-table">
+  <p>
+    <form class="form-inline">
+      <div class="form-group">
+        <label><%= t("shared.ie_report.html.search") %></label>
+        <input id="filter-line" type="text" class="form-control">
+      </div>
+      <div class="form-group">
+        <label><%= t(".table.line.state") %></label>
+        <select class="filter-line-status form-control">
+          <option></option>
+          <option value="true"><%=t('.saved_lines') %></option>
+          <option value="false"><%=t('.unsaved_lines') %></option>
+        </select>
+      </div>
+    </form>
+  </p>
+  <table id="table-line" class="table table-hover table-striped data-table" data-filter="#filter-line" data-page-size="20">
     <thead>
       <tr>
-        <th class="state"><%= t(".table.line.state") %></th>
-        <th class="lines"><%= t(".table.line.lines") %></th>
-        <th class="routes"><%= t(".table.line.routes") %></th>
-        <th class="connection_links"><%= t(".table.line.connection_links") %></th>
-        <th class="time_tables"><%= t(".table.line.time_tables") %></th>
-        <th class="stop_areas"><%= t(".table.line.stop_areas") %></th>
-        <th class="access_points"><%= t(".table.line.access_points") %></th>
-        <th class="vehicle_journeys"><%= t(".table.line.vehicle_journeys") %></th>
-        <th class="journey_patterns"><%= t(".table.line.journey_patterns") %></th>
+        <th><%= t(".table.line.state") %></th>
+        <th data-toggle="true"><%= t(".table.line.lines") %></th>
+        <th data-hide="all"><%= t(".table.line.routes") %></th>
+        <th data-hide="all"><%= t(".table.line.connection_links") %></th>
+        <th data-hide="all"><%= t(".table.line.time_tables") %></th>
+        <th data-hide="all"><%= t(".table.line.stop_areas") %></th>
+        <th data-hide="all"><%= t(".table.line.access_points") %></th>
+        <th data-hide="all"><%= t(".table.line.vehicle_journeys") %></th>
+        <th data-hide="all"><%= t(".table.line.journey_patterns") %></th>
       </tr>
     </thead>
     <tbody>
       <% job.report.line_items.each_with_index do |line_item, index| %>
         <tr>
-          <td><%= line_item.status ? font_awesome_classic_tag("fa-check") : font_awesome_classic_tag("fa-times")  %></td>
+          <td data-value="<%=line_item.status%>"><%= line_item.status ? font_awesome_classic_tag("fa-check") : font_awesome_classic_tag("fa-times")  %></td>
           <td><%= line_item.name %></td>
           <td><%= line_item.routes %></td>
           <td><%= line_item.connection_links %></td>
@@ -33,5 +54,10 @@
         </tr>
       <% end %>
     </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="5"><ul class="pagination pagination-centered"></ul></td>
+      </tr>
+    </tfoot>
   </table>
 </div>