Dropdown with date tags in all events

Dropdown with date tags in all events of the schedule

app/assets/stylesheets/osem-schedule.css.scss

@@ -184,6 +184,24 @@ td.no-padding{
    display: inline-block;
  }
 
+.program-dropdown{
+  margin-left: 20%;
+  margin-right: 20%;
+  margin-top: 40px;
+}
+
+.program-dropdown > button{
+  width: 100%;
+}
+
+.program-dropdown > .dropdown-menu{
+  width: 100%;
+}
+
+.no-events-day{
+  color:  #D8D8D8 !important;
+}
+
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
   .room, .event-title{

app/models/program.rb

@@ -91,6 +91,17 @@ class Program < ActiveRecord::Base
     self.languages.split(',').map {|l| ISO_639.find(l).english_name} if self.languages.present?
   end
 
+  ##
+  # Checks if there is any event in the program that starts in the given date
+  #
+  # ====Returns
+  # * +True+ -> If there is any event for the given date
+  # * +False+ -> If there is not any event for the given date
+  def any_event_for_this_date?(date)
+    parsed_date = DateTime.parse("#{date} 00:00").utc
+    events.where(start_time: parsed_date..(parsed_date + 1)).any?
+  end
+
   private
 
   ##

app/views/conference/_all_events.html.erb

@@ -1,4 +1,24 @@
 <h1 class="text-center">Program for <%= @conference.title %></h1>
+<div class="dropdown program-dropdown">
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+    Dates
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <% @dates.each do |date| %>
+      <!-- we check if there is any event that day to indicate it appropiately -->
+      <li class='li-dropdown-program'>
+        <%= link_to date, "#program-" + "#{date}", class: "program-selector#{ ' no-events-day' unless @conference.program.any_event_for_this_date?(date) }" %>
+      </li>
+    <% end %>
+    <% if @unscheduled_events.any? %>
+      <li class='li-dropdown-program'>
+        <%= link_to('Unscheduled', "#program-unscheduled", class: 'program-selector') %>
+      </li>
+    <% end %>
+  </ul>
+</div>
+
 <div class="row">
 
   <!-- scheduled events -->
@@ -46,3 +66,9 @@
     </div>
   <% end %>
 </div>
+
+<%= javascript_tag do %>
+$('.program-selector').on('click', function(e) {
+  $('.li-dropdown-program').removeClass('active');
+});
+<% end %>

app/views/conference/schedule.html.erb

@@ -3,10 +3,10 @@
       <div role="tabpanel">
         <!-- Nav tabs -->
         <ul class="nav nav-tabs" role="tablist">
-          <li role="presentation" class="active">
+          <li role="presentation" class="active schedule">
             <a title="Timetable of the events" href="#schedule" aria-controls="schedule" role="tab" data-toggle="tab">Schedule</a>
           </li>
-          <li role="presentation">
+          <li role="presentation" class="program">
             <a title="All, including unscheduled Events" href="#program" aria-controls="program" role="tab" data-toggle="tab">All Events</a>
           </li>
         </ul>
@@ -25,3 +25,19 @@
       <%= render 'all_events' %>
   <% end %>
 </div>
+
+<%= javascript_tag do %>
+// We set the program tab to active if the url tag starts by 'program-'
+$( document ).ready(function() {
+  if(window.location.hash.substring(1).startsWith('program-')){
+    schedule = $('.schedule');
+    schedule.removeClass('active');
+    schedule.find('a').attr("aria-expanded", "false");
+    $('#schedule').removeClass('active');
+    program = $('.program');
+    program.addClass('active');
+    program.find('a').attr("aria-expanded", "true");
+    $('#program').addClass('active');
+  }
+});
+<% end %>