mirror of
https://github.com/openSUSE/osem.git
synced 2026-08-13 19:54:02 +00:00
new schedule
This commit is contained in:
parent
0018284c66
commit
d8f9de9363
9 changed files with 182 additions and 81 deletions
|
|
@ -46,14 +46,8 @@
|
|||
.event img, .img-circle {
|
||||
display: none;
|
||||
}
|
||||
h5 {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
margin: 0px;
|
||||
}
|
||||
.table th, .table td {
|
||||
line-height: 12px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.schedule-speaker {
|
||||
|
|
|
|||
|
|
@ -75,3 +75,50 @@ a.unstyled-link {
|
|||
background-image: linear-gradient(to top, #f7faf2 24%, #53ab4a 97%,
|
||||
#53ab4a 100%);
|
||||
}
|
||||
|
||||
.schedule-dropdown{
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.schedule-dropdown > button{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.schedule-dropdown > .dropdown-menu{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.event-elipsis{
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3; /* number of lines to show */
|
||||
}
|
||||
|
||||
.room-elipsis{
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4; /* number of lines to show */
|
||||
}
|
||||
|
||||
.break-words{
|
||||
/* These are technically the same, but use both */
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-all;
|
||||
|
||||
/* Non standard for webkit */
|
||||
word-break: break-word;
|
||||
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,14 @@ class ConferenceController < ApplicationController
|
|||
@events_xml = @events.scheduled.order(start_time: :asc).group_by{ |event| event.start_time.to_date }
|
||||
@dates = @conference.start_date..@conference.end_date
|
||||
|
||||
@number_columns = 1
|
||||
@conf_start = 9
|
||||
conf_end = 20
|
||||
@intervals = @number_columns * 60 / EventType::LENGTH_STEP + 1
|
||||
@width = 85 / @intervals
|
||||
@step_minutes = EventType::LENGTH_STEP.minutes
|
||||
@carousel_number = ((conf_end - @conf_start) / @number_columns.to_f).ceil
|
||||
|
||||
if @dates == Date.current
|
||||
@today = Date.current.strftime('%Y-%m-%d')
|
||||
else
|
||||
|
|
|
|||
|
|
@ -81,6 +81,16 @@ class Conference < ActiveRecord::Base
|
|||
result
|
||||
end
|
||||
|
||||
##
|
||||
# Check if there is any event in the program scheduled.
|
||||
#
|
||||
# ====Returns
|
||||
# * +false+ -> If there aren't schedules events
|
||||
# * +true+ -> If there are schedules events
|
||||
def scheduled?
|
||||
self.program.events.where.not(start_time: nil).any?
|
||||
end
|
||||
|
||||
##
|
||||
# Checks if the user is registered to the conference
|
||||
#
|
||||
|
|
|
|||
|
|
@ -223,6 +223,20 @@ class Event < ActiveRecord::Base
|
|||
(100 * result.values.count(true) / result.values.compact.count).to_s
|
||||
end
|
||||
|
||||
##
|
||||
# Returns the number of columns this event should span in the schedule
|
||||
#
|
||||
def span
|
||||
self.event_type.length / EventType::LENGTH_STEP
|
||||
end
|
||||
|
||||
##
|
||||
# Returns end of the event
|
||||
#
|
||||
def end_time
|
||||
self.start_time + self.event_type.length.minutes
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
##
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ class EventType < ActiveRecord::Base
|
|||
|
||||
alias_attribute :name, :title
|
||||
|
||||
# If LENGTH_STEP > 60 the public schedule must be changed
|
||||
LENGTH_STEP = 15
|
||||
|
||||
private
|
||||
|
|
|
|||
|
|
@ -1,72 +1,93 @@
|
|||
<div id="schedule-content">
|
||||
<h1 class="text-center"> Schedule for <%= @conference.title %></h1>
|
||||
<ul class="nav nav-tabs">
|
||||
<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=active" if @dates.first == date %>>
|
||||
<li class='li-dropdown-schedule'>
|
||||
<%= link_to date, "#" + "#{date}", "data-toggle" => "tab" %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<% @dates.each do |date| %>
|
||||
<div class="tab-pane <%= 'active' if @dates.first == date %>" id ="<%= date %>" >
|
||||
<table class="table table-bordered" id="schedule" width="100%">
|
||||
|
||||
<div id="carousel-<%= date %>" 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" id="schedule" width="100%" style="margin:0px; padding:0px;">
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<% @rooms.each do |room| %>
|
||||
<th><%= room.name %></th>
|
||||
<th></th>
|
||||
<% td_start_time = start_time %>
|
||||
<% (1..@intervals).each do |i| %>
|
||||
<th style="font-size:12px; padding: 8px 0px 8px 4px;"><%= (td_start_time).strftime("%H:%M") %></th>
|
||||
<% td_start_time += @step_minutes %>
|
||||
<% end %>
|
||||
</tr>
|
||||
|
||||
<% span = {} %>
|
||||
<% @rooms.each do |room| %>
|
||||
<% span[room.id] = 1 %>
|
||||
<% end %>
|
||||
|
||||
<% conf_start = DateTime.parse("#{date} 09:00") %>
|
||||
<% conf_end = DateTime.parse("#{date} 19:00") %>
|
||||
|
||||
<% while conf_start < conf_end %>
|
||||
<%-
|
||||
start_hour = conf_start.hour
|
||||
start_min = conf_start.min %>
|
||||
|
||||
<% start_room_time = start_time %>
|
||||
<% span = 1 %>
|
||||
<tr>
|
||||
<td style="width:5%">
|
||||
<%= conf_start.strftime("%H:%M") %>
|
||||
<td width="15%" height= "70px"; style="padding: 5px;max-width:15%;">
|
||||
<div class="room-elipsis break-words", style= "font-size: 11px; height:60px; line-height: 15px; overflow: hidden;">
|
||||
<%= room.name %>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<% @rooms.each do |room| %>
|
||||
<% events_for_date = @events.find_all {|e| e.room_id == room.id && e.start_time && e.start_time.to_date == date } %>
|
||||
<% event = events_for_date.find_all{|e| e.start_time.hour == start_hour && e.start_time.min == start_min } %>
|
||||
<% if !event.empty? %>
|
||||
<% 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 -->
|
||||
<% span[room.id] = event[0].event_type.length / 15 %>
|
||||
<%= render partial: 'schedule_item', locals: {event: event, room: room, span: span} %>
|
||||
<% span[room.id] = span[room.id] + 1 %>
|
||||
<% elsif span[room.id] > 1 %>
|
||||
<!-- span is <%= span[room.id] %> and bigger than 1, substract 1 from span -->
|
||||
<% span[room.id] = ( span[room.id] - 1 ) if span[room.id] > 1 %>
|
||||
<% end %>
|
||||
<% if span[room.id] == 1 %>
|
||||
<% 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 style="width: <%= 95 / @rooms.length %>%">
|
||||
</td>
|
||||
<td width="<%= @width %>%"; height='75px'; style="padding:0px;"></td>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% start_room_time += @step_minutes %>
|
||||
<% end %>
|
||||
</tr>
|
||||
<% conf_start += 15.minutes %>
|
||||
<% end %>
|
||||
<% start_time += @number_columns.hour %>
|
||||
</table>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<a class="left carousel-control" href="#carousel-<%= date %>" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-<%= date %>" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
</a>
|
||||
</div> <!-- Carousel -->
|
||||
|
||||
</div> <!-- Tab -->
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<%= javascript_tag do %>
|
||||
$(function() {
|
||||
// add a hash to the URL when the user clicks on a tab
|
||||
$('a[data-toggle="tab"]').on('click', function(e) {
|
||||
$('.li-dropdown-schedule').removeClass('active');
|
||||
$('.schedule-dropdown').find('button').text($(this).text());
|
||||
history.pushState(null, null, $(this).attr('href'));
|
||||
});
|
||||
// navigate to a tab when the history changes
|
||||
|
|
@ -85,4 +106,21 @@ $(function() {
|
|||
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
|
||||
});
|
||||
|
||||
$('.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(){
|
||||
$('.carousel').children('.left.carousel-control').hide();
|
||||
});
|
||||
|
||||
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,13 @@
|
|||
%td.event{ style: "width: #{95 / @rooms.length}%; cursor:pointer", |
|
||||
rowspan: span[room.id], |
|
||||
%td.event{ width: "#{ width * span }%" , |
|
||||
height: "75px" , |
|
||||
colspan: span, |
|
||||
style: "cursor:pointer; padding:0px;" , |
|
||||
role: "button" } |
|
||||
%a.unstyled-link{href: url_for(conference_program_proposal_path(@conference.short_title, event[0].id))}
|
||||
- if speaker = event[0].speakers.first
|
||||
%a.unstyled-link{href: url_for(conference_program_proposal_path(@conference.short_title, event.id))}
|
||||
%div{ class:"event-elipsis break-words", style: "font-size: 11px; height:45px; line-height: 15px; overflow: hidden;"}
|
||||
= event.title
|
||||
- if speaker = event.speakers.first
|
||||
= image_tag speaker.gravatar_url, :class => "img-circle pull-right", |
|
||||
:alt => speaker.name, |
|
||||
:title => speaker.name, |
|
||||
:style => "padding:8px;" |
|
||||
%h5
|
||||
%span.fa.fa-comment
|
||||
= event[0].title
|
||||
- unless event[0].subtitle.blank?
|
||||
%span.schedule-subtitle
|
||||
= event[0].subtitle
|
||||
%span.schedule-speaker
|
||||
%span.fa.fa-user
|
||||
= speaker.name
|
||||
- if event[0].track
|
||||
%span.schedule-track
|
||||
%span.fa.fa-road
|
||||
%span.label{ style: "background-color: #{event[0].track.color}" }
|
||||
= event[0].track.name
|
||||
|
||||
:style => "padding:5px 2px; width:25px" |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="container">
|
||||
<% if @conference.program.events.scheduled.any? %>
|
||||
<% if @conference.scheduled? %>
|
||||
<div role="tabpanel">
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue