Events calendar view

Gemfile

@@ -52,6 +52,7 @@ gem 'sass-rails'
 gem 'sassc-rails'
 gem 'sidekiq'
 gem 'sidekiq-status'
+gem 'simple_calendar', '~> 2.4'
 gem 'simple_form'
 gem 'simple_token_authentication'
 gem 'sitemap-parser'

Gemfile.lock

@@ -636,6 +636,8 @@ GEM
     sidekiq-status (3.0.3)
       chronic_duration
       sidekiq (>= 6.0, < 8)
+    simple_calendar (2.4.3)
+      rails (>= 3.0)
     simple_form (5.2.0)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
@@ -819,6 +821,7 @@ DEPENDENCIES
   sassc-rails
   sidekiq
   sidekiq-status
+  simple_calendar (~> 2.4)
   simple_form
   simple_token_authentication
   simplecov
@@ -840,4 +843,4 @@ DEPENDENCIES
   will_paginate
 
 BUNDLED WITH
-   2.4.19
+   2.4.20

app/assets/javascripts/application.js

@@ -71,7 +71,14 @@ function reposition_tiles(container, tileClass){
     });
 }
 
-document.addEventListener("turbolinks:load", function() {
+// Perform an ajax request to load the calendar and replace the contents
+window.loadCalendar = function(url) {
+    req = $.ajax(url);
+    req.done((res) => eval(res));
+    return true;
+}
+
+document.addEventListener("turbolinks:load", function(e) {
     // Show the tab associated with the window location hash (e.g. "#packages")
     if (window.location.hash) {
         var tab = $('ul.nav a[href="' + window.location.hash + '"]');
@@ -116,6 +123,41 @@ document.addEventListener("turbolinks:load", function() {
         }
     });
 
+    // Load event calendar when tab is shown for the first time
+    $('.nav li a[data-calendar]').on("show.bs.tab", function(e) {
+        data = e.target.dataset
+        // calendar has already been loaded, only perform the filter sidebar url fragment replacing
+        if (!data.loaded) {
+            let url = data.calendar;
+            if (date = localStorage.getItem('calendar_start_date')) {
+                // Only use the start date in localstorage if it is in the future
+                if (Date.parse(date) > Date.now() - 60*60*24*30*1000) url += '&start_date=' + date
+            }
+
+            loadCalendar(url);
+            // avoid loading again on the second click
+            data.loaded = true;
+        }
+    });
+
+    // after switching tabs automatically update the url fragment
+    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+        addTabToFilters(e.target.href.split('#').pop());
+        // and reposition masonry tiles
+        reposition_tiles('masonry', 'masonry-brick');
+    });
+
+    // Manually trigger bootstrap tab history (we should probably remove the dependency and reimplement in a turbolink-compatible way)
+    // Specialised form of https://github.com/mnarayan01/bootstrap-tab-history/blob/master/vendor/assets/javascripts/bootstrap-tab-history.js
+    // go through the tabs to find one which has ah ref identical to the page we have just moved to and show it
+    $('[data-toggle="tab"]').each(function() {
+        if (("#" + this.href.split("#").pop()) === window.location.hash) {
+            if (!("active" in this.parentElement.classList)) {
+                $(this).tab('show'); 
+            }
+        }
+    })
+
     // Masonry
     $(".nav-tabs a").on("shown.bs.tab", function(e) {
         reposition_tiles('masonry', 'masonry-brick');

app/assets/javascripts/map.js

@@ -42,32 +42,33 @@ var Map = {
     }
 }
 
+/* Set all filter links to include the anchor */
+var addTabToFilters = function (tab) {
+    if (tab) {
+        $(function () {
+            $('.active-filters a').attr('href', function (_, oldHref) {
+                oldHref = oldHref.replace(/\#(.*)/g, "#" + tab);
+                if (oldHref.indexOf('#') == -1)
+                    oldHref += "#" + tab;
+                return oldHref;
+            })
+            $('.nav-item a').attr('href', function (_, oldHref) {
+                oldHref = oldHref.replace(/\#(.*)/g, "#" + tab);
+                if (oldHref.indexOf('#') == -1)
+                    oldHref += "#" + tab;
+                return oldHref;
+            });
+        });
+    }
+};
+
 var EventsMap = {
     map: null,
     init: function () {
         // Map on events index
         var element = $('[data-role="events-map"]');
         if (element.length) {
             EventsMap.map = null;
-            /* Set all filter links to include the anchor */
-            var addTabToFilters = function (tab) {
-                if (tab) {
-                    $(function () {
-                        $('.active-filters a').attr('href', function (_, oldHref) {
-                            oldHref = oldHref.replace(/\#(.*)/g, "#" + tab);
-                            if (oldHref.indexOf('#') == -1)
-                                oldHref += "#" + tab;
-                            return oldHref;
-                        })
-                        $('.nav-item a').attr('href', function (_, oldHref) {
-                            oldHref = oldHref.replace(/\#(.*)/g, "#" + tab);
-                            if (oldHref.indexOf('#') == -1)
-                                oldHref += "#" + tab;
-                            return oldHref;
-                        });
-                    });
-                }
-            };
 
             var getTab = function () {
                 var tab = window.location.hash;

app/assets/stylesheets/application.scss

@@ -27,6 +27,7 @@
 @import "jquery.qtip.min";
 @import "select2";
 @import "select2-bootstrap-theme";
+@import "simple_calendar";
 
 // Sticky but not fixed footer
 // http://cbracco.me/css-sticky-footer-effect/
@@ -984,6 +985,23 @@ div {
   display: inline-block
 }
 
+/* Calendar inset numbers */
+td.day {
+  position: relative;
+}
+td.day .day-number {
+  position: absolute;
+  bottom: 0px;
+  right: 6px;
+  font-size: 1.5em;
+  color: rgb(186, 186, 186);
+}
+td.day .calendar-text {
+  font-size: 12px;
+  line-height: 14px;
+  margin-bottom: 12px;
+}
+
 .source-log {
   max-height: 20pc;
   overflow-y: scroll;

app/controllers/application_controller.rb

@@ -13,12 +13,12 @@ class ApplicationController < ActionController::Base
   protect_from_forgery with: :exception
 
   # Should allow token authentication for API calls
-  acts_as_token_authentication_handler_for User, except: [:index, :show, :embed, :check_exists, :handle_error, :count,
+  acts_as_token_authentication_handler_for User, except: [:index, :show, :embed, :calendar, :check_exists, :handle_error, :count,
                                                           :redirect] #only: [:new, :create, :edit, :update, :destroy]
 
   # User auth should be required in the web interface as well; it's here rather than in routes so that it
   # doesn't override the token auth, above.
-  before_action :authenticate_user!, except: [:index, :show, :embed, :check_exists, :handle_error, :count, :redirect]
+  before_action :authenticate_user!, except: [:index, :show, :embed, :calendar, :check_exists, :handle_error, :count, :redirect]
   before_action :set_current_user
 
   # Should prevent forgery errors for JSON posts.

app/controllers/events_controller.rb

@@ -27,6 +27,36 @@ def index
     end
   end
 
+  # GET /events/calendar
+  # GET /events/calendar.js
+  def calendar
+    # set a higher limit so we ensure to have enough results to fill a month
+    params[:per_page] ||= 200
+    @start_date = Date.parse(params.fetch(:start_date, Date.today.to_s)).beginning_of_month
+
+    set_params
+
+    # override @facet_params to get only events relevant for the current month view
+    @facet_params[:running_during] = "#{Date.today.beginning_of_day}/#{@start_date + 1.month}"
+    fetch_resources
+    events_set = @events
+
+    @facet_params[:running_during] = "#{@start_date}/#{@start_date + 1.month}"
+    fetch_resources
+    events_set += @events
+
+    @events = events_set.to_set.to_a
+
+    # now customize the list by moving all events longer than 3 days into a separate array
+    @long_events, @events = @events.partition { |e| e.end.nil? || e.start.nil? || e.start + TeSS::Config.site.fetch(:calendar_event_maxlength, 5).to_i.days < e.end }
+
+    respond_to do |format|
+      format.js
+      format.html
+    end
+  end
+
+
   # GET /events/1
   # GET /events/1.json
   # GET /events/1.ics

app/helpers/application_helper.rb

@@ -282,12 +282,11 @@ def collapsible_panel(title, id, &block)
     end
   end
 
-  def tab(text, icon, href, disabled: { check: false }, active: false, count: nil, activator: nil)
+  def tab(text, icon, href, disabled: { check: false }, active: false, count: nil, activator: nil, options: {})
     classes = []
     classes << 'disabled' if disabled[:check]
     classes << 'active' if active || activator&.check_tab(href, !disabled[:check])
     content_tag(:li, class: classes.join(' ')) do
-      options = {}
       if disabled[:check]
         options['title'] = disabled[:message]
         options['data-toggle'] = 'tooltip'

app/views/events/calendar.html.erb

@@ -0,0 +1,4 @@
+<div id="events-calendar">
+    <%= render("events/partials/calendar", events: @events) %>
+    <%= render("events/partials/calendar_long_events", events: @long_events) %>
+</div>

app/views/events/calendar.js.erb

@@ -0,0 +1,4 @@
+$("#events_calendar").html("<%= escape_javascript render("events/partials/calendar", events: @events) %>");
+$("#events_calendar_long_events").html("<%= escape_javascript render("events/partials/calendar_long_events", events: @long_events) %>");
+<%# Store the start_date in LocalStorage so we can render the calendar from the correct month %>
+localStorage.setItem('calendar_start_date', '<%= @start_date %>');

app/views/events/index.html.erb

@@ -20,7 +20,9 @@
     <% end %>
     <% content_for :display_options do %>
       <ul class="nav nav-xs nav-pills index-display-options">
+        <%# We should consider setting the active status based on the query fragment so we can deeplink %>
         <%= tab('List', 'fa fa-list', 'home', active: true) %>
+        <%= tab('Calendar', 'fa fa-calendar', 'calendar', options: { 'data-calendar': calendar_events_path(search_and_facet_params.merge(format: :js, per_page: 200))}) %>
         <% if TeSS::Config.map_enabled %>
           <%= tab('Map', 'fa fa-globe', 'map',
                   disabled: { check: (search_and_facet_params[:online] == 'true'),
@@ -42,6 +44,10 @@
           <%= render partial: "search/common/pagination_bar", locals: { resources: @events } %>
         </div>
 
+        <div id="calendar" class="tab-pane fade in">
+          <%= render partial: 'events/partials/calendar_loader' %>
+        </div>
+
         <% if TeSS::Config.map_enabled %>
           <div id="map" class="tab-pane fade">
             <div id="map-count" class="search-results-count"></div>

app/views/events/partials/_calendar.html.erb

@@ -0,0 +1,19 @@
+<%= month_calendar(events: events, attribute: :start, end_attribute: :end) do |date, events| %>
+  <div class="day-number">
+    <%= date.day %>
+  </div>
+
+  <ul class="list-unstyled">
+    <% events.each do |event| %>
+      <li class= "calendar-text">
+        <%= link_to "#{event.title}", event, class: 'clear-both', 'title': "#{l event.start, format: :time_short} - #{l event.end, format: :time_short}" %>
+      </li>
+    <% end %>
+  </ul>
+<% end %>
+
+<% if events.count < 10 %>
+  <div >
+    <%= t('events.pick_date') %>
+  </div>
+<% end %>

app/views/events/partials/_calendar_loader.erb

@@ -0,0 +1,8 @@
+<div id="events_calendar">
+  <div id='map-loading-screen'>
+    <%= image_tag('ajax-loader2.gif') %>
+  </div>
+</div>
+<div id="events_calendar_long_events">
+</div>
+

app/views/events/partials/_calendar_long_events.html.erb

@@ -0,0 +1,13 @@
+<h4><%= t('events.long') %></h4>
+<ul>
+  <% events.each do |event| %>
+    <li>
+      <%= link_to event do %>
+        <%= event.title %>
+        -
+
+        <%= neatly_printed_date_range(event.start, event&.end) %> 
+      <% end %>
+    </li>
+  <% end %>
+</ul>

app/views/simple_calendar/_month_calendar.html.erb

@@ -0,0 +1,41 @@
+<div id="calendar" class="simple-calendar">
+  <div class="calendar-heading">
+    <ul class="pagination">
+      <li class="prev">
+        <%= link_to t('simple_calendar.previous', default: 'Previous'), calendar.url_for_previous_view, remote: true %>
+      </li>
+      <li>
+        <span class="calendar-title" style="min-width: 180px; text-align: center;"><%= t('date.month_names')[start_date.month] %> <%= start_date.year %></span>
+      </li>
+      <li class="next">
+        <%= link_to t('simple_calendar.next', default: 'Next'), calendar.url_for_next_view, remote: true %>
+      </li>
+    </ul>
+  </div>
+
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <% date_range.slice(0, 7).each do |day| %>
+          <th><%= t('date.abbr_day_names')[day.wday] %></th>
+        <% end %>
+      </tr>
+    </thead>
+
+    <tbody>
+      <% date_range.each_slice(7) do |week| %>
+        <tr>
+          <% week.each do |day| %>
+            <%= content_tag :td, class: calendar.td_classes_for(day) do %>
+              <% if defined?(Haml) && respond_to?(:block_is_haml?) && block_is_haml?(passed_block) %>
+                <% capture_haml(day, sorted_events.fetch(day, []), &passed_block) %>
+              <% else %>
+                <% passed_block.call day, sorted_events.fetch(day, []) %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>