Implement naive dashboard filtering by experiment name

lib/split/dashboard/public/dashboard-filtering.js

@@ -0,0 +1,19 @@
+$(function() {
+  $('#filter').on('keyup', function() {
+    $input = $(this);
+
+    if ($input.val() == '') {
+      $('div.experiment').show();
+      return false;
+    }
+
+    $('div.experiment').hide();
+    selector = 'div.experiment[data-name*="' + $input.val() + '"]';
+    $(selector).show();
+  });
+
+  $('#clear-filter').on('click', function() {
+    $('#filter').val('');
+    $('div.experiment').show();
+  });
+});

lib/split/dashboard/public/style.css

@@ -312,4 +312,8 @@ a.button.green:focus, button.green:focus, input[type="submit"].green:focus {
   background:#768E7A;
 }
 
+#filter, #clear-filter {
+  padding: 10px;
+}
+
 

lib/split/dashboard/views/_experiment.erb

@@ -6,7 +6,7 @@
 
 <% experiment.calc_winning_alternatives %>
 
-<div class="<%= experiment_class %>">
+<div class="<%= experiment_class %>" data-name="<%= experiment.name %>">
   <div class="experiment-header">
     <h2>
       Experiment: <%= experiment.name %>

lib/split/dashboard/views/index.erb

@@ -1,6 +1,9 @@
 <% if @experiments.any? %>
   <p class="intro">The list below contains all the registered experiments along with the number of test participants, completed and conversion rate currently in the system.</p>
 
+  <input type="text" placeholder="Begin typing to filter" id="filter" />
+  <input type="button" id="clear-filter" value="Clear filter" />
+
   <% @experiments.each do |experiment| %>
     <% if experiment.goals.empty? %>
       <%= erb :_experiment, :locals => {:goal => nil, :experiment => experiment} %>
@@ -14,4 +17,4 @@
 <% else %>
   <p class="intro">No experiments have started yet, you need to define them in your code and introduce them to your users.</p>
   <p class="intro">Check out the <a href='https://github.com/splitrb/split#readme'>Readme</a> for more help getting started.</p>
-<% end %>
+<% end %>

lib/split/dashboard/views/layout.erb

@@ -6,6 +6,7 @@
 <link href="<%= url 'style.css' %>" media="screen" rel="stylesheet" type="text/css">
 <script type="text/javascript" src='<%= url 'dashboard.js' %>'></script>
 <script type="text/javascript" src='<%= url 'jquery-1.11.1.min.js' %>'></script>
+<script type="text/javascript" src='<%= url 'dashboard-filtering.js' %>'></script>
 <title>Split</title>
 
 </head>
@@ -23,4 +24,4 @@
     <p>Powered by <a href="http://github.com/splitrb/split">Split</a> v<%=Split::VERSION %></p>
   </div>
 </body>
-</html>
+</html>