Merge pull request #25 from obfuscurity/labels

Expose abstract types in the UI
obfuscurity · Jan 31, 2015 · 287c923 · 287c923
2 parents 132b9ee + 97dd276
commit 287c923
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 11 deletions.
diff --git a/app/controllers/abstracts.rb b/app/controllers/abstracts.rb
@@ -33,10 +33,12 @@ class Web < Sinatra::Base
 
     get '/abstracts/:id/?' do
       @abstract = Abstract.fetch_one_abstract_with_score_by_judge(:id => params[:id], :judge => session[:user])
+      @label = Abstract.type_label(@abstract.type)
       @progress = Score.judge_progress(session[:user])
       status 200
       erb :'abstracts/show', :locals => {
         :abstract => @abstract,
+        :label => @label,
         :progress => @progress,
         :dataset_user_complete => dataset_user_complete
       }

diff --git a/app/models/abstracts.rb b/app/models/abstracts.rb
@@ -95,4 +95,18 @@ def self.fetch_one_random_unscored_by_user(user)
     raise Judy::JudgingComplete if @abstracts.empty?
     return @abstracts[rand(@abstracts.count).to_i]
   end
+
+  def self.type_label(type)
+    # here we're associating a Bootstrap label class with each type
+    case type
+    when 'session'
+      return 'primary'
+    when 'workshop'
+      return 'success'
+    when 'lightning'
+      return 'warning'
+    else
+      return 'default'
+    end
+  end
 end
diff --git a/app/public/css/style.css b/app/public/css/style.css
@@ -8,7 +8,10 @@
 h1 {
   font-family: 'Roboto Slab', serif;
   font-size: 3.0em;
-  margin: 40px 0;
+}
+
+h4#label {
+  margin: 25px 0 35px;
 }
 
 .charts span.title {
@@ -56,6 +59,10 @@ ul {
   margin: 30px 0;
 }
 
+ul.abstracts li.hidden {
+  display: none;
+}
+
 ul.abstracts li, ul.events li {
   font-family: 'Roboto Slab', serif;
   margin: 12px 0;

diff --git a/app/views/abstracts/show.erb b/app/views/abstracts/show.erb
@@ -23,6 +23,7 @@
 
 <div class="abstract col-xs-12 col-md-6 col-md-offset-3">
   <h1 id="title"><%= abstract.title.gsub(/: /, ':<br />') %></h1>
+  <h4 id="label"><span class="label label-<%= label %>"><%= abstract.type %></span></h4>
   <div id="body">
     <%= abstract.body.gsub(/\n/, '<br />').gsub(/\r\n\r/, '<br /><br />') %>
   </div>

diff --git a/app/views/scores/index.erb b/app/views/scores/index.erb
@@ -10,15 +10,28 @@
     <span id="totalReviewed"></span>
     <div class="buttons pull-right col-xs-12 col-sm-6 col-md-4">
       <div class="btn-group pull-right">
-        <button id="sort" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-          Sort
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" role="menu">
-          <li><a href="?sort=mean">Mean</a></li>
-          <li><a href="?sort=median">Median</a></li>
-          <li><a href="?sort=mode">Mode</a></li>
-        </ul>
+        <div class="btn-group">
+          <button id="sort" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            Sort
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="?sort=mean">Mean</a></li>
+            <li><a href="?sort=median">Median</a></li>
+            <li><a href="?sort=mode">Mode</a></li>
+          </ul>
+        </div>
+        <div class="btn-group">
+          <button id="type" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            <span id="name">Abstract Type</span>
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu filter-types" role="menu">
+            <li><a id="session">Sessions</a></li>
+            <li><a id="workshop">Workshops</a></li>
+            <li><a id="lightning">Lightning Talks</a></li>
+          </ul>
+        </div>
       </div>
     </div>
   </h1>
@@ -27,7 +40,7 @@
 <div>
   <ul class="abstracts">
     <% @abstracts.each do |abstract| %>
-    <li>
+    <li class="<%= abstract.type %>">
       <span class="score">
         <% sort_type = "#{@sort}_score".to_sym %>
         <% if ! abstract[sort_type].nil? %>
@@ -43,3 +56,30 @@
     <% end %>
   </ul>
 </div>
+
+<script>
+  /*
+  // We perform filtering based on abstract type
+  // here in the frontend rather than backend like
+  // we do for the sorting functionality.
+  //
+  // We show Sessions by default and hide the others.
+  */
+
+  var updateTypeButton = function(label) {
+    $('button#type span#name').text(label);
+  };
+
+  var showAbstracts = function(type) {
+    $('.abstracts li').addClass('hidden');
+    $('.abstracts li.' + type).removeClass('hidden');
+  };
+
+  showAbstracts('session');
+  updateTypeButton('Sessions');
+
+  $('.filter-types li').on('click', 'a', function() {
+    showAbstracts(this.id);
+    updateTypeButton($(this).text());
+  });
+</script>