Merge pull request #373 from cs169/187391447-schedule-jump-to-time-bu…

…tton

Add "jump to current event" button to events schedule

app/assets/javascripts/osem-schedule.js

@@ -80,6 +80,35 @@ $(document).ready( function() {
   $('.unscheduled-events .schedule-event-delete-button').hide();
   $('.non_schedulable .schedule-event-delete-button').hide();
 
+  $('#current-event-btn').on('click', function() {
+    var now = new Date();
+    var closestEventId = null;
+    var smallestDiff = Infinity;
+    var i=0
+
+    $('.event-item').each(function() {
+
+      var eventTimeStr = $(this).data('time');
+
+        if (eventTimeStr) {
+            var eventTime = new Date(eventTimeStr);
+            var diff = Math.abs(eventTime - now);
+
+            if (diff < smallestDiff) {
+                smallestDiff = diff;
+                closestEventId = $(this).attr('class').split(' ')[1];
+            }
+        }
+    });
+
+    if (closestEventId) {
+      //Instead of relying on hash it's probably better to scroll using javascript
+      //Since the users and click button->scroll->click again, which won't re-scroll
+      $('.highlighted').removeClass('highlighted');
+      $('.' + closestEventId).addClass('highlighted').get(0).scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  });
+
   // set events as draggable
   $('.schedule-event').not('.non_schedulable').draggable({
     snap: '.schedule-room-slot',

app/assets/stylesheets/osem-schedule.scss

@@ -185,3 +185,10 @@
 h3.event-panel-title small {
   line-height: 1.4;
 }
+
+#current-event-btn {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  z-index: 1000;
+}

app/views/schedules/events.html.haml

@@ -52,7 +52,7 @@
       - unless start_ymd.eql?(date)
         .col-xs-12.col-md-12
           .date-content
-            %span.date-title{ id: start_ymd }
+            %span.date-title
               = inyourtz(event_schedule.start_time, @conference.timezone) do
                 = date = start_ymd
             %a.pull-right{ title: "Go up", href: "#program" }
@@ -64,7 +64,8 @@
             = time + ' ' + timezone_text(tz_object)
       .col-xs-12.col-md-11
         - cache [@program, event_schedule, event_schedule.event, current_user, event_schedule.happening_now?, '#scheduled#full#panel'] do
-          = render 'event', event: event_schedule.event, event_schedule: event_schedule
+          .event-item{ data: { time: event_schedule.start_time.iso8601 }, class: "event-#{event_schedule.event.id}" }
+            = render 'event', event: event_schedule.event, event_schedule: event_schedule
 
     / confirmed events that are not scheduled
     - if @unscheduled_events.any?
@@ -79,6 +80,8 @@
           .unscheduled-event
             - cache [@program, event, current_user, '#unscheduled#full#panel'] do
               = render 'event', event: event, event_schedule: nil
+  %button.btn.btn-primary#current-event-btn{ type: "button" }
+    Jump to Current Event
 
 :javascript
   $('.program-selector').on('click', function(e) {

spec/features/event_schedules_spec.rb

@@ -0,0 +1,46 @@
+require 'spec_helper'
+
+describe EventSchedule, js: true do
+  Timecop.return
+  let(:test_date) { Time.current }
+  let!(:conference) do
+    create(:full_conference, start_date: test_date - 1.hour, end_date: test_date + 5.days, start_hour: 0, end_hour: 24)
+  end
+  let!(:program) { conference.program }
+  let!(:selected_schedule) { create(:schedule, program: program) }
+  let!(:scheduled_event_early) do
+    program.update!(selected_schedule: selected_schedule)
+    create(:event, program: program, state: 'confirmed', abstract: '`markdown`')
+  end
+  let!(:event_schedule_early) do
+    create(:event_schedule, event: scheduled_event_early, schedule: selected_schedule,
+   start_time: test_date - 1.hours)
+  end
+  let!(:scheduled_event_mid) do
+    program.update!(selected_schedule: selected_schedule)
+    create(:event, program: program, state: 'confirmed')
+  end
+  let!(:event_schedule_mid) do
+    create(:event_schedule, event: scheduled_event_mid, schedule: selected_schedule,
+   start_time: test_date)
+  end
+  let!(:scheduled_event_late) do
+    program.update!(selected_schedule: selected_schedule)
+    create(:event, program: program, state: 'confirmed')
+  end
+  let!(:event_schedule_late) do
+    create(:event_schedule, event: scheduled_event_late, schedule: selected_schedule,
+   start_time: test_date + 1.hours)
+  end
+
+  before do
+    login_as(create(:user), scope: :user)
+    visit events_conference_schedule_path(conference_id: conference.short_title, favourites: false)
+  end
+
+  it 'jumps to the closest event' do
+    find('#current-event-btn').click
+    highlighted_element = page.find('.highlighted', visible: true, wait: 1)
+    expect(highlighted_element[:class]).to include("event-#{scheduled_event_mid.id}")
+  end
+end