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

13 files changed, 118 insertions, 82 deletions

diff --git a/Gemfile b/Gemfile
index 1ab629699..ae9412a77 100644
--- a/Gemfile
+++ b/Gemfile
@@ -85,9 +85,9 @@ gem "modernizr-rails", "~> 2.0.6"
 
 # Javascript
 source 'https://rails-assets.org' do
-  gem 'rails-assets-morrisjs', "~> 0.5.1"
-  gem 'rails-assets-raphael', "~> 2.1.3"
-  gem 'rails-assets-datatables'
+  gem 'rails-assets-morrisjs',   '~> 0.5.1'
+  gem 'rails-assets-raphael',    '~> 2.1.3'
+  gem 'rails-assets-footable',   '~> 2.0.3'
 
   # Use twitter bootstrap resources
   gem 'rails-assets-bootstrap-sass-official', '~> 3.3.0'
diff --git a/Gemfile.lock b/Gemfile.lock
index 93d13e01a..f925a3a23 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -307,12 +307,12 @@ GEM
       rails-assets-jquery (>= 1.9.0)
     rails-assets-bootstrap-sass-official (3.3.4)
       rails-assets-jquery (>= 1.9.0)
-    rails-assets-datatables (1.10.7)
-      rails-assets-jquery (>= 1.7.0)
     rails-assets-eonasdan-bootstrap-datetimepicker (3.1.3)
       rails-assets-bootstrap (>= 3.0)
       rails-assets-jquery (>= 1.8.3)
       rails-assets-moment (>= 2.8.0)
+    rails-assets-footable (2.0.3)
+      rails-assets-jquery (>= 1.4.4)
     rails-assets-jquery (2.1.4)
     rails-assets-jquery-tokeninput (1.7.0)
       rails-assets-jquery (>= 1.5)
@@ -535,8 +535,8 @@ DEPENDENCIES
   rabl
   rails (= 4.1.10)
   rails-assets-bootstrap-sass-official (~> 3.3.0)!
-  rails-assets-datatables!
   rails-assets-eonasdan-bootstrap-datetimepicker (~> 3.1.3)!
+  rails-assets-footable (~> 2.0.3)!
   rails-assets-jquery-tokeninput (~> 1.7.0)!
   rails-assets-morrisjs (~> 0.5.1)!
   rails-assets-raphael (~> 2.1.3)!
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>
diff --git a/config/locales/ie_report.en.yml b/config/locales/ie_report.en.yml
index 8f7567958..e0035f150 100644
--- a/config/locales/ie_report.en.yml
+++ b/config/locales/ie_report.en.yml
@@ -2,6 +2,7 @@ en:
   shared:
     ie_report:
       html:
+        search: 'Search'
         tab:
           file: 'Files'
           line: 'Lines'
diff --git a/config/locales/ie_report.fr.yml b/config/locales/ie_report.fr.yml
index 977b59775..0b6ddda4d 100644
--- a/config/locales/ie_report.fr.yml
+++ b/config/locales/ie_report.fr.yml
@@ -2,6 +2,7 @@ fr:
   shared:
     ie_report:
       html:
+        search: 'Recherche'
         tab:
           file: 'Fichiers'
           line: 'Lignes'
diff --git a/vendor/assets/javascripts/data_table/i18n/en.json b/vendor/assets/javascripts/data_table/i18n/en.json
deleted file mode 100644
index 9a32f76df..000000000
--- a/vendor/assets/javascripts/data_table/i18n/en.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-    "sEmptyTable":     "No data available in table",
-    "sInfo":           "Showing _START_ to _END_ of _TOTAL_ entries",
-    "sInfoEmpty":      "Showing 0 to 0 of 0 entries",
-    "sInfoFiltered":   "(filtered from _MAX_ total entries)",
-    "sInfoPostFix":    "",
-    "sInfoThousands":  ",",
-    "sLengthMenu":     "Show _MENU_ entries",
-    "sLoadingRecords": "Loading...",
-    "sProcessing":     "Processing...",
-    "sSearch":         "Search:",
-    "sZeroRecords":    "No matching records found",
-    "oPaginate": {
-        "sFirst":    "First",
-        "sLast":     "Last",
-        "sNext":     "Next",
-        "sPrevious": "Previous"
-    },
-    "oAria": {
-        "sSortAscending":  ": activate to sort column ascending",
-        "sSortDescending": ": activate to sort column descending"
-    }
-}
diff --git a/vendor/assets/javascripts/data_table/i18n/fr.json b/vendor/assets/javascripts/data_table/i18n/fr.json
deleted file mode 100644
index 7a7cf9465..000000000
--- a/vendor/assets/javascripts/data_table/i18n/fr.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-    "sProcessing":     "Traitement en cours...",
-    "sSearch":         "Rechercher&nbsp;:",
-    "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
-    "sInfo":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
-    "sInfoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
-    "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
-    "sInfoPostFix":    "",
-    "sLoadingRecords": "Chargement en cours...",
-    "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
-    "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
-    "oPaginate": {
-        "sFirst":      "Premier",
-        "sPrevious":   "Pr&eacute;c&eacute;dent",
-        "sNext":       "Suivant",
-        "sLast":       "Dernier"
-    },
-    "oAria": {
-        "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
-        "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
-    }
-}