From 3137895561d6921f26d71c73b0546a2d1533b0ab Mon Sep 17 00:00:00 2001
From: Chuck Callebs <chuck@callebs.io>
Date: Wed, 23 Mar 2016 19:23:35 -0400
Subject: [PATCH] Implement naive dashboard filtering by experiment name.

---
 .../dashboard/public/dashboard-filtering.js   | 19 +++++++++++++++++++
 lib/split/dashboard/public/style.css          |  4 ++++
 lib/split/dashboard/views/_experiment.erb     |  2 +-
 lib/split/dashboard/views/index.erb           |  5 ++++-
 lib/split/dashboard/views/layout.erb          |  3 ++-
 5 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 lib/split/dashboard/public/dashboard-filtering.js

diff --git a/lib/split/dashboard/public/dashboard-filtering.js b/lib/split/dashboard/public/dashboard-filtering.js
new file mode 100644
index 00000000..98436824
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/lib/split/dashboard/public/style.css b/lib/split/dashboard/public/style.css
index 1222e89b..088570c8 100644
--- a/lib/split/dashboard/public/style.css
+++ b/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;
+}
+
 
diff --git a/lib/split/dashboard/views/_experiment.erb b/lib/split/dashboard/views/_experiment.erb
index d7e42873..8646cb1c 100644
--- a/lib/split/dashboard/views/_experiment.erb
+++ b/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 %>
diff --git a/lib/split/dashboard/views/index.erb b/lib/split/dashboard/views/index.erb
index 1d2e8167..fa0025d7 100644
--- a/lib/split/dashboard/views/index.erb
+++ b/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 %>
\ No newline at end of file
+<% end %>
diff --git a/lib/split/dashboard/views/layout.erb b/lib/split/dashboard/views/layout.erb
index 767828ea..f7edb9f8 100644
--- a/lib/split/dashboard/views/layout.erb
+++ b/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>
\ No newline at end of file
+</html>