Merge pull request #1032 from Ana06/all-events

All events grouped by date and time
This commit is contained in:
Henne Vogelsang 2016-07-25 11:47:28 +02:00 committed by GitHub
commit 63750345e7
20 changed files with 436 additions and 218 deletions

View file

@ -95,7 +95,7 @@ Metrics/BlockNesting:
Max: 4
Metrics/ClassLength:
Max: 570
Max: 575
# avoid redundunt curly braces when it is obvious that hash is used
Style/BracesAroundHashParameters:

View file

@ -69,28 +69,14 @@ a.unstyled-link {
outline: 0;
}
#schedule td.event {
background-image: linear-gradient(to top, #f7faf2 24%, #c2e8be 97%,
#c2e8be 100%);
}
#schedule td.event:hover {
background-image: linear-gradient(to top, #f7faf2 24%, #53ab4a 97%,
#53ab4a 100%);
}
.schedule-dropdown{
.program-dropdown, .schedule-dropdown{
margin-left: 20%;
margin-right: 20%;
margin-top: 20px;
margin-top: 40px;
margin-bottom: 20px;
}
.schedule-dropdown > button{
width: 100%;
}
.schedule-dropdown > .dropdown-menu{
.schedule-dropdown > button, .program-dropdown > button, .program-dropdown > .dropdown-menu, .schedule-dropdown > .dropdown-menu{
width: 100%;
}
@ -149,6 +135,64 @@ td.no-padding{
padding:0px !important;
}
.all-events-title{
margin-top: 40px;
border-bottom: 1px solid #848484;
}
.date-title{
font-size: 23px;
font-weight: bold;
padding-bottom: 2px;
display:inline-block;
}
.start-time{
font-size: 16px;
padding-left: 30px;
margin-top: 32px;
}
.new-time-event{
margin-top: 20px;
}
.date-content{
border-bottom: 1px solid #6E6E6E;
margin-top: 30px;
}
.unscheduled-event{
margin-top: 8px;
}
.all-speaker-pic{
padding: 20px 10px 20px 10px;
}
.track{
padding: 0px 5px 0px 5px;
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{

View file

@ -13,6 +13,10 @@ class ConferenceController < ApplicationController
def schedule
@rooms = @conference.venue.rooms if @conference.venue
unless @conference.program.events.scheduled.any?
redirect_to events_conference_path(@conference.short_title)
end
@events = @conference.program.events
@events_xml = @events.scheduled.order(start_time: :asc).group_by{ |event| event.start_time.to_date }
@dates = @conference.start_date..@conference.end_date
@ -21,11 +25,22 @@ class ConferenceController < ApplicationController
conf_end = 20
@conf_period = conf_end - @conf_start
if @dates == Date.current
@today = Date.current.strftime('%Y-%m-%d')
else
@today = @conference.start_date.strftime('%Y-%m-%d')
end
# the schedule takes you to today if it is a date of the schedule
@current_day = @conference.current_conference_day
@day = @current_day.present? ? @current_day : @dates.first
return unless @current_day
# the schedule takes you to the current time if it is beetween the start and the end time.
@hour_column = @conference.hours_from_start_time(@conf_start, conf_end)
end
def events
@dates = @conference.start_date..@conference.end_date
@scheduled_events = @conference.program.events.scheduled
@unscheduled_events = @conference.program.events.unscheduled
day = @conference.current_conference_day
@tag = day.strftime('%Y-%m-%d') if day
end
private

View file

@ -335,4 +335,14 @@ module ApplicationHelper
# speaker picture padding: 4px 2px; and we want the picture to be a circle
speaker_height(rooms) - 4
end
def carousel_item_class(number, carousel_number, num_cols, col)
item_class = 'item'
item_class += ' first' if number == 0
item_class += ' last' if number == (carousel_number - 1)
if (col && ((col / num_cols) == number)) || (!col && number == 0)
item_class += ' active'
end
item_class
end
end

View file

@ -34,7 +34,7 @@ class Ability
conference.splashpage && conference.splashpage.public == true
end
# Can view the schedule
can [:schedule], Conference do |conference|
can [:schedule, :events], Conference do |conference|
conference.program.cfp && conference.program.schedule_public
end

View file

@ -609,6 +609,21 @@ class Conference < ActiveRecord::Base
next_color(start_index[collection])
end
# Returns the current day if it is a day of the schedule or nil otherwise
def current_conference_day
day = Time.find_zone(timezone).today
day if (start_date..end_date).cover? day
end
# Returns the number of hours since the conference start hour (9) to the
# current hour, in case that the current hour is beetween the start and the
# end hour (20). Otherwise, returns 0
def hours_from_start_time(start_hour, end_hour)
current_time = Time.find_zone(timezone).now
current_hour = current_time.strftime('%H').to_i
(start_hour..(end_hour-1)).cover?(current_hour) ? current_hour - start_hour : 0
end
private
# Returns a different html colour for every i and consecutive colors are

View file

@ -73,7 +73,7 @@ class Event < ActiveRecord::Base
# ====Returns
# * +true+ or +false+
def scheduled?
room && start_time ? true : false
room.present? && start_time.present?
end
def registration_possible?

View file

@ -27,7 +27,11 @@ class Program < ActiveRecord::Base
end
def scheduled
where.not(start_time: nil).where.not(room: nil)
where.not(start_time: nil).where.not(room: nil).order(start_time: :asc)
end
def unscheduled
confirmed.where('start_time IS NULL OR room_id IS NULL')
end
def highlights
@ -87,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
##

View file

@ -1,19 +0,0 @@
<h1 class="text-center">Program for <%= @conference.title %></h1>
<% @conference.program.events.confirmed.each do |event| %>
<div>
<h3>
<%= link_to event.title, conference_program_proposal_path(@conference.short_title, event.id) %>
<br>
<small>
<%= event.subtitle %>
</small>
</h3>
<h4>
presented by <%= event.speaker_names %>
</h4>
<p>
<%= truncate(event.abstract, :length => 400) -%>
<%= link_to 'more', conference_program_proposal_path(@conference.short_title, @conference.program.id, event.id) if event.abstract.length > 400 %>
</p>
</div>
<% end %>

View file

@ -1,63 +0,0 @@
<% intervals = number_columns * 60 / EventType::LENGTH_STEP + 1 %>
<% width = 85 / intervals %>
<% carousel_number = (@conf_period / number_columns.to_f).ceil %>
<div id="carousel-<%= date %>-<%= number_columns %>" class="carousel slide" data-ride="carousel" data-wrap='false' data-interval='false'>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<% start_time = DateTime.parse("#{date} #{@conf_start}:00") %>
<% (0..carousel_number-1).each do |number| %>
<div class="item <%= number == 0 ? 'active first' : ( number == carousel_number-1 ? 'last' : '') %>">
<table class="table table-bordered schedule-table" id="schedule">
<tr>
<th></th>
<% td_start_time = start_time %>
<% (1..intervals).each do |i| %>
<th class="date"><%= (td_start_time).strftime("%H:%M") %></th>
<% td_start_time += @step_minutes %>
<% end %>
</tr>
<% start_room_time = start_time %>
<% @rooms.each do |room| %>
<% start_room_time = start_time %>
<% span = 1 %>
<tr>
<td class="room" style="height: <%= td_height(@rooms) %>px;">
<div class="room elipsis break-words" style="-webkit-line-clamp: <%= room_lines(@rooms) %>; height: <%= room_height(@rooms) %>px;">
<%= room.name %>
</div>
</td>
<% events = room.events{ |e| e.start_time >= start_time and e.start_time < (start_time + number_columns.hour)} %>
<% (1..intervals).each do |i| %>
<% if span > 1 %>
<% span -= 1 %>
<% else %>
<% event = events.find{|e| e.start_time <= start_room_time and e.end_time > start_room_time} %>
<% if event %>
<!-- There is an event, calculate the span and show it -->
<% event_span = (event.end_time.to_i - start_room_time.to_i) / 60 / EventType::LENGTH_STEP %>
<% span = ((event_span + i - 1 ) > intervals ? intervals + 1 - i : event_span) %>
<%= render partial: 'schedule_item', locals: {event: event, span: span, width: width} %>
<% else %>
<!-- span equals 1 show an empty td -->
<td class="no-padding" width="<%= width %>%"></td>
<% end %>
<% end %>
<% start_room_time += @step_minutes %>
<% end %>
</tr>
<% end %>
<% start_time = start_room_time - @step_minutes %>
</table>
</div>
<% end %>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-<%= date %>-<%= number_columns %>" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-<%= date %>-<%= number_columns %>" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->

View file

@ -0,0 +1,55 @@
- intervals = number_columns * 60 / EventType::LENGTH_STEP + 1
- width = 85 / intervals
- carousel_number = (@conf_period / number_columns.to_f).ceil
.carousel.slide{ id: "carousel-#{ date }-#{ number_columns }", |
"data-ride" => "carousel", |
"data-wrap" => "false", |
"data-interval" => "false" }
/ Wrapper for slides
.carousel-inner
- start_time = DateTime.parse("#{date} #{@conf_start}:00")
- (0..carousel_number-1).each do |number|
%div{ class: "#{ carousel_item_class(number, carousel_number, number_columns, @hour_column)}" }
%table.table.table-bordered.schedule-table#schedule
%tr
%th
- td_start_time = start_time
- (1..intervals).each do |i|
%th.date
= (td_start_time).strftime("%H:%M")
- td_start_time += @step_minutes
- start_room_time = start_time
- @rooms.each do |room|
- start_room_time = start_time
- span = 1
%tr
%td.room{ style: "height: #{ td_height(@rooms) }px;" }
.room.elipsis.break-words{ style: "-webkit-line-clamp: #{ room_lines(@rooms) }; height: #{ room_height(@rooms) }px;" }
= room.name
- events = room.events{ |e| e.start_time >= start_time and e.start_time < (start_time + number_columns.hour)}
- (1..intervals).each do |i|
- if span > 1
- span -= 1
- else
- event = events.find{|e| e.start_time <= start_room_time and e.end_time > start_room_time}
- if event
/ There is an event, calculate the span and show it
- event_span = (event.end_time.to_i - start_room_time.to_i) / 60 / EventType::LENGTH_STEP
- span = ((event_span + i - 1 ) > intervals ? intervals + 1 - i : event_span)
= render partial: 'schedule_item', locals: {event: event, span: span, width: width}
- else
/ if span equals 1 show an empty td
%td.no-padding{ width: "#{ width }%"}
- start_room_time += @step_minutes
- start_time = start_room_time - @step_minutes
/ Controls
%a.left.carousel-control{ href: "#carousel-#{ date }-#{ number_columns }", |
role: "button", |
"data-slide" => "prev" }
%span.glyphicon.glyphicon-chevron-left
%a.right.carousel-control{ href: "#carousel-#{ date }-#{ number_columns }", |
role: "button", |
"data-slide" => "next" }
%span.glyphicon.glyphicon-chevron-right

View file

@ -0,0 +1,33 @@
%a.unstyled-link{href: url_for(conference_program_proposal_path(@conference.short_title, event.id))}
.panel.panel-default
.panel-body
- if speaker = event.speakers.first
= image_tag speaker.gravatar_url, :class => "img-circle pull-right all-speaker-pic", |
:alt => speaker.name, |
:title => speaker.name |
%span.h3
= event.title
%br
%small
= event.subtitle
%h4
presented by #{event.speaker_names}
%p
= truncate(event.abstract, :length => 400)
= link_to 'more', conference_program_proposal_path(@conference.short_title, event.id) if event.abstract.length > 400
- if event.scheduled?
%span.track
%span.fa.fa-clock-o
%span.label{ style: "background-color: grey" }
= event.start_time.strftime('%H:%M')
\-
= event.end_time.strftime('%H:%M')
%span.track
%span.fa.fa-map-marker
%span.label{ style: "background-color: grey" }
= event.room.name
- if event.track
%span.track
%span.fa.fa-road
%span.label{ style: "background-color: #{event.track.color}; color: #{ contrast_color(event.track.color) }" }
= event.track.name

View file

@ -1,82 +0,0 @@
<div id="schedule-content">
<h1 class="text-center"> Schedule for <%= @conference.title %></h1>
<div class="dropdown schedule-dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<%= @dates.first %>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<% @dates.each do |date| %>
<li class='li-dropdown-schedule'>
<%= link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab" %>
</li>
<% end %>
</ul>
</div>
<div class="tab-content">
<% @dates.each do |date| %>
<div class="tab-pane <%= 'active' if @dates.first == date %>" id ="<%= date %>" >
<div class="visible-xs-inline">
<% number_columns = 1 %>
<%= render 'carousel', date: date, number_columns: number_columns %>
</div>
<div class="visible-sm-inline">
<% number_columns = 2 %>
<%= render 'carousel', date: date, number_columns: number_columns %>
</div>
<div class="visible-md-inline visible-lg-inline">
<% number_columns = 3 %>
<%= render 'carousel', date: date, number_columns: number_columns %>
</div>
</div> <!-- Tab -->
<% end %>
</div>
</div>
<%= javascript_tag do %>
// change of active tab and the button title when a date clicked
$(function() {
$('.date-tab').on('click', function(e) {
$('.li-dropdown-schedule').removeClass('active');
$('.schedule-dropdown').find('button').text($(this).text());
});
});
// use the date tag in the url to select a tab and the title of the button
$(function() {
var hash = window.location.hash;
if(hash && !(hash === '#schedule')){
hash && $('ul a[href="' + hash + '"]').tab('show');
$('button.dropdown-toggle').text(hash.substr(1));
}
});
// hide the right and left controls when neccesary after moving the carousel
$('.carousel').on('slid.bs.carousel', '',
function(){
$(this).children('.left.carousel-control').show();
$(this).children('.right.carousel-control').show();
if($(this).find('.first').hasClass('active')) {
$(this).children('.left.carousel-control').hide();
} else if($(this).find('.last').hasClass('active')) {
$(this).children('.right.carousel-control').hide();
}
});
$(document).ready(function(){
// hide the left control when the page is ready
$('.carousel').children('.left.carousel-control').hide();
// carousel swipe
$(".carousel-inner").swiperight(function() {
$(this).parent().carousel('prev');
});
$(".carousel-inner").swipeleft(function() {
$(this).parent().carousel('next');
});
});
<% end %>

View file

@ -0,0 +1,68 @@
#schedule-content
%h1.text-center
Schedule for
= @conference.title
.dropdown.schedule-dropdown
%button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" }
= @dates.first
%span.caret
%ul.dropdown-menu
- @dates.each do |date|
%li.li-dropdown-schedule
= link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab"
.tab-content
- @dates.each do |date|
%div{ class: "tab-pane #{ 'active' if @dates.first == date }", id: "#{ date }" }
.visible-xs-inline
= render partial: 'carousel', locals: { date: date, number_columns: 1 }
.visible-sm-inline
= render partial: 'carousel', locals: { date: date, number_columns: 2 }
.visible-md-inline.visible-lg-inline
= render partial: 'carousel', locals: { date: date, number_columns: 3 }
:javascript
// change of active tab and the button title when a date clicked
$(function() {
$('.date-tab').on('click', function(e) {
$('.li-dropdown-schedule').removeClass('active');
$('.schedule-dropdown').find('button').text($(this).text());
});
});
// use the date tag in the url to select a tab and the title of the button
$(function() {
var hash = window.location.hash;
if(hash && !(hash === '#schedule')){
hash && $('ul a[href="' + hash + '"]').tab('show');
$('button.dropdown-toggle').text(hash.substr(1));
}
});
// hide the right and left controls when neccesary after moving the carousel
$('.carousel').on('slid.bs.carousel', '',
function(){
$(this).children('.left.carousel-control').show();
$(this).children('.right.carousel-control').show();
if($(this).find('.first').hasClass('active')) {
$(this).children('.left.carousel-control').hide();
} else if($(this).find('.last').hasClass('active')) {
$(this).children('.right.carousel-control').hide();
}
});
$(document).ready(function(){
// hide the left control when the page is ready
$('.carousel').children('.left.carousel-control').hide();
// carousel swipe
$(".carousel-inner").swiperight(function() {
$(this).parent().carousel('prev');
});
$(".carousel-inner").swipeleft(function() {
$(this).parent().carousel('next');
});
});

View file

@ -1,6 +1,6 @@
%td.event{ width: "#{ width * span }%" , |
colspan: span, |
role: "button" } |
role: "button" }
%a.unstyled-link{href: url_for(conference_program_proposal_path(@conference.short_title, event.id))}
%div{ class: "elipsis break-words event-title", |
style: "-webkit-line-clamp: #{ event_lines(@rooms) }; height: #{ event_height(@rooms) }px;"} |

View file

@ -0,0 +1,7 @@
%div{ role: "tabpanel" }
/ Nav tabs
%ul.nav.nav-tabs{ role: "tablist" }
%li{ class: "schedule #{ 'active' if active == 'schedule' }", role: "presentation" }
= link_to('Schedule', schedule_conference_path(@conference.short_title))
%li{ class: "program #{ 'active' if active == 'program' }", role: "presentation" }
= link_to('All events', events_conference_path(@conference.short_title))

View file

@ -0,0 +1,65 @@
.container#program
-if @scheduled_events.any?
= render partial: 'schedule_tabs', locals: { active: 'program' }
%h1.text-center
Program for
= @conference.title
.dropdown.program-dropdown
%button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" }
Dates
%span.caret
%ul.dropdown-menu
- @dates.each do |date|
%li.li-dropdown-program
= link_to date, "##{date}", class: "program-selector#{ ' no-events-day' unless @conference.program.any_event_for_this_date?(date) }"
- if @unscheduled_events.any?
%li.li-dropdown-program
= link_to('Unscheduled', "#unscheduled", class: 'program-selector')
.row
/ scheduled events
- date = nil
- time = nil
- @scheduled_events.each do |event|
- unless event.start_time.strftime('%Y-%m-%d').eql?(date)
.col-xs-12.col-md-12
.date-content
%span{ class: 'date-title', id: "#{ event.start_time.strftime('%Y-%m-%d') }" }
= date = event.start_time.strftime('%Y-%m-%d')
%a{ title: "Go up", class: "pull-right", href: "#program" }
%i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true }
- unless event.start_time.strftime('%H:%M').eql?(time)
.col-xs-12.col-md-1
.start-time
= time = event.start_time.strftime('%H:%M')
.col-xs-12.col-md-11
.new-time-event
= render partial: 'event', locals: {event: event}
- else
.col-xs-12.col-md-11.col-md-offset-1
= render partial: 'event', locals: {event: event}
/ confirmed events that are not scheduled
- if @unscheduled_events.any?
.col-xs-12.col-md-12
.date-content
%span.date-title#unscheduled
Unscheduled events
%a{ title: "Go up", class: "pull-right", href: "#program" }
%i{ class: "fa fa-angle-double-up fa-lg", 'aria-hidden' => true }
- @unscheduled_events.each do |event|
.col-xs-12.col-md-12
.unscheduled-event
= render partial: 'event', locals: {event: event}
:javascript
$('.program-selector').on('click', function(e) {
$('.li-dropdown-program').removeClass('active');
});
// Go to current date and time
$(document).ready(function(){
document.getElementById("#{ @tag }").scrollIntoView();
});

View file

@ -1,27 +0,0 @@
<div class="container">
<% if @rooms.length > 1 and @conference.program.events.scheduled.any? %>
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a title="Timetable of the events" href="#schedule" aria-controls="schedule" role="tab" data-toggle="tab">Schedule</a>
</li>
<li role="presentation">
<a title="All, including unscheduled Events" href="#program" aria-controls="program" role="tab" data-toggle="tab">All Events</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="schedule">
<%= render 'schedule' %>
</div>
<div role="tabpanel" class="tab-pane" id="program">
<%= render 'all_events' %>
</div>
</div>
</div>
<% else %>
<%= render 'all_events' %>
<% end %>
</div>

View file

@ -0,0 +1,81 @@
.container
= render partial: 'schedule_tabs', locals: { active: 'schedule' }
#schedule-content
%h1.text-center
Schedule for
= @conference.title
.dropdown.schedule-dropdown
%button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" }
= @day
%span.caret
%ul.dropdown-menu
- @dates.each do |date|
%li.li-dropdown-schedule{ class: "#{ 'active' if @day == date }" }
= link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab"
.tab-content
- @dates.each do |date|
%div{ class: "tab-pane #{ 'active' if @day == date }", id: "#{ date }" }
.visible-xs-inline
= render partial: 'carousel', locals: { date: date, number_columns: 1 }
.visible-sm-inline
= render partial: 'carousel', locals: { date: date, number_columns: 2 }
.visible-md-inline.visible-lg-inline
= render partial: 'carousel', locals: { date: date, number_columns: 3 }
:javascript
// change of active tab and the button title when a date is clicked
$(function() {
$('.date-tab').on('click', function(e) {
$('.li-dropdown-schedule').removeClass('active');
$('.schedule-dropdown').find('button').text($(this).text());
});
});
// hide the right and left controls when neccesary after moving the carousel
$('.carousel').on('slid.bs.carousel', '',
function(){
$(this).children('.left.carousel-control').show();
$(this).children('.right.carousel-control').show();
if($(this).find('.first').hasClass('active')) {
$(this).children('.left.carousel-control').hide();
}
if($(this).find('.last').hasClass('active')) {
$(this).children('.right.carousel-control').hide();
}
});
$(document).ready(function(){
// hide the left control when the page is ready
$('.carousel').each(function() {
if($(this).find('.first').hasClass('active')) {
$(this).children('.left.carousel-control').hide();
}
if($(this).find('.last').hasClass('active')) {
$(this).children('.right.carousel-control').hide();
}
});
// carousel swipe
$(".carousel-inner").swiperight(function() {
$(this).parent().carousel('prev');
});
$(".carousel-inner").swipeleft(function() {
$(this).parent().carousel('next');
});
var day = "#{@current_day}";
// we only go to the date tag in the url if the conference is not taking place now
if(day === ""){
// use the date tag in the url to select a tab and the title of the button
var hash = window.location.hash;
if(hash && !(hash === '#schedule')){
hash && $('ul a[href="' + hash + '"]').tab('show');
$('button.dropdown-toggle').text(hash.substr(1));
}
}
});

View file

@ -115,6 +115,7 @@ Osem::Application.routes.draw do
member do
get :schedule
get :events
end
end