Merge pull request #1249 from commandprompt/configurable_schedules

implements configurable schedule granularity

INSTALL.md

@@ -43,6 +43,7 @@ There are a couple of environment variables you can set to configure OSEM.
 | OSEM_FACEBOOK_SECRET | *string*		| OMNIAUTH Developer Secret for Facebook
 | OSEM_GITHUB_KEY | *string*			| OMNIAUTH Developer Key for GitHub
 | OSEM_GITHUB_SECRET | *string*			| OMNIAUTH Developer Secret for GitHub
+| OSEM_SCHEDULE_CELL_SIZE | *integer*		| Schedule timeslot size to use (in minutes), should be greater than zero, should be divisor of 60
 | OSEM_SMTP_ADDRESS		| smtp.opensuse.org		| The smtp server to use
 | OSEM_SMTP_PORT		| *int*				| The port on the smtp server
 | OSEM_SMTP_USERNAME		| *string*			| The user for the smtp server

app.json

@@ -54,6 +54,10 @@
       "description": "The user for the smtp server",
       "required": false
     },
+    "OSEM_SCHEDULE_CELL_SIZE": {
+      "description": "Schedule timeslot size in minutes",
+      "required": false
+    },
     "RACK_ENV": {
       "required": false
     },

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

@@ -16,7 +16,7 @@
 }
 
 .schedule-room-slot{
-  padding: 2px 5px;
+  padding: 2px 3px;
   border: 1px solid #848484;
   height: 58px;
   line-height: 20px;
@@ -31,6 +31,12 @@
   cursor:move;
 }
 
+.schedule-room-slot .schedule-event.compact {
+  margin-top: -23px;
+  margin-left: 20%;
+  width: 80%;
+}
+
 .schedule-event-text{
   display: -webkit-box;
   text-overflow: ellipsis;
@@ -167,7 +173,7 @@ td.room{
 
 th.date{
   font-size: 12px;
-  padding: 8px 0px 8px 1% !important;
+  padding: 4px 0px 4px 2px !important;
 }
 
 .speaker-pic{

app/models/event_type.rb

@@ -16,7 +16,8 @@ class EventType < ActiveRecord::Base
   alias_attribute :name, :title
 
   # If LENGTH_STEP must be divisor of 60, otherwise the schedule wont be displayed properly
-  LENGTH_STEP = 15
+
+  LENGTH_STEP = defined?(SCHEDULE_CELL_SIZE) ? SCHEDULE_CELL_SIZE : 15
 
   private
 

app/views/admin/schedules/_day_tab.html.haml

@@ -1,3 +1,7 @@
+- compact_grid = EventType::LENGTH_STEP < 15
+- cells_per_hour = 60 / EventType::LENGTH_STEP
+/ use smaller cell heights for more compact grids
+- cell_height = compact_grid ? 32 : 58
 - date_event_schedules = @event_schedules.select{ |e| e.start_time.to_date.eql? date }
 .row
   - @rooms.each do |room|
@@ -5,14 +9,15 @@
       .room-name
         - room_date_event_schedules = date_event_schedules.select{ |e| e.room == room }
         = room.name
-      - (9*4..18*4).each do |slot|
-        - hour = slot / 4
-        - minutes = (15 * (slot % 4) == 0) ? '00' : 15 * (slot % 4)
+      - (9*cells_per_hour..18*cells_per_hour).each do |slot|
+        - hour = slot / cells_per_hour
+        - minutes = (EventType::LENGTH_STEP * (slot % cells_per_hour)).to_s.rjust(2, '0')
         - time = "#{hour}:#{minutes}"
         .schedule-room-slot{ id: "schedule-room-#{room.guid}-#{hour}-#{minutes}", |
                              room_id: room.id, |
                              hour: time, |
-                             date: date}
+                             date: date, |
+                             style: "height: #{cell_height}px"}
           .div
             = time
           - event_schedules = room_date_event_schedules.select{ |e| (e.start_time.hour.to_s + e.start_time.strftime(':%M')).eql? time }

app/views/admin/schedules/_event.html.haml

@@ -1,6 +1,9 @@
 - cells_length = event.event_type.length / EventType::LENGTH_STEP
 / this height fits the room cells
-- height = (cells_length * 58) - 23
+- compact_grid = EventType::LENGTH_STEP < 15
+- single_cell_height =  compact_grid ? 32 : 58
+- height = (cells_length * single_cell_height)
+- height -= 23 unless compact_grid
 / subtracting the padding before calculate the number of lines
 - lines = (height - 7) / 23
 - color = event.track.try(:color).present? ? event.track.try(:color) : 'FFFFFF'
@@ -8,7 +11,8 @@
                  id: "event-#{event.id}", |
                  event_id: event.id, |
                  length: cells_length, |
-                 event_schedule_id: event_schedule_id }
+                 event_schedule_id: event_schedule_id, |
+                 class: ('compact' if compact_grid) }
   .schedule-event-text{ style: "-webkit-line-clamp: #{lines}; height: #{lines * 23}px;"}
     %span.schedule-event-delete-button{ onclick: "Schedule.remove(\'event-#{event.id}\');" } X
     = event.title

app/views/schedules/_carousel.html.haml

@@ -1,7 +1,7 @@
-- intervals = number_columns * 60 / EventType::LENGTH_STEP + 1
+- intervals = hrs_per_slide * 60 / EventType::LENGTH_STEP + 1
 - width = 85 / intervals
-- carousel_number = (@conf_period / number_columns.to_f).ceil
-.carousel.slide{ id: "carousel-#{ date }-#{ number_columns }", |
+- carousel_number = (@conf_period / hrs_per_slide.to_f).ceil
+.carousel.slide{ id: "carousel-#{ date }-#{ hrs_per_slide }", |
                      "data-ride" => "carousel", |
                      "data-wrap" => "false", |
                      "data-interval" => "false" }
@@ -9,16 +9,18 @@
   .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)}" }
+      %div{ class: "#{ carousel_item_class(number, carousel_number, hrs_per_slide, @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")
+                %span
+                  = (td_start_time).strftime("%H:")
+                %span
+                  = (td_start_time).strftime("%M")
               - td_start_time += @step_minutes
-
           - start_room_time = start_time
           - @rooms.each do |room|
             - start_room_time = start_time
@@ -27,7 +29,7 @@
               %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
-                - event_schedules = room.event_schedules.select{ |e| (e.schedule_id == @conference.program.selected_schedule.id) && (e.end_time > start_time) && (e.start_time <= (start_time + number_columns.hour)) }
+                - event_schedules = room.event_schedules.select{ |e| (e.schedule_id == @conference.program.selected_schedule.id) && (e.end_time > start_time) && (e.start_time <= (start_time + hrs_per_slide.hour)) }
                 - (1..intervals).each do |i|
                   - if span > 1
                     - span -= 1
@@ -49,11 +51,11 @@
           - start_time = start_room_time - @step_minutes
 
   / Controls
-  %a.left.carousel-control{ href: "#carousel-#{ date }-#{ number_columns }", |
+  %a.left.carousel-control{ href: "#carousel-#{ date }-#{ hrs_per_slide }", |
                             role: "button", |
                             "data-slide" => "prev" }
     %span.glyphicon.glyphicon-chevron-left
-  %a.right.carousel-control{ href: "#carousel-#{ date }-#{ number_columns }", |
+  %a.right.carousel-control{ href: "#carousel-#{ date }-#{ hrs_per_slide }", |
                              role: "button", |
                              "data-slide" => "next" }
     %span.glyphicon.glyphicon-chevron-right

app/views/schedules/_schedule.html.haml

@@ -16,13 +16,13 @@
       %div{ class: "tab-pane #{ 'active' if @dates.first == date }", id: "#{ date }" }
 
         .visible-xs-inline
-          = render partial: 'carousel', locals: { date: date, number_columns: 1 }
+          = render partial: 'carousel', locals: { date: date, hrs_per_slide: 1 }
 
         .visible-sm-inline
-          = render partial: 'carousel', locals: { date: date, number_columns: 2 }
+          = render partial: 'carousel', locals: { date: date, hrs_per_slide: 2 }
 
         .visible-md-inline.visible-lg-inline
-          = render partial: 'carousel', locals: { date: date, number_columns: 3 }
+          = render partial: 'carousel', locals: { date: date, hrs_per_slide: 3 }
 
 :javascript
   // change of active tab and the button title when a date clicked

app/views/schedules/show.html.haml

@@ -19,13 +19,13 @@
         %div{ class: "tab-pane #{ 'active' if @day == date }", id: "#{ date }" }
 
           .visible-xs-inline
-            = render partial: 'carousel', locals: { date: date, number_columns: 1 }
+            = render partial: 'carousel', locals: { date: date, hrs_per_slide: 1 }
 
           .visible-sm-inline
-            = render partial: 'carousel', locals: { date: date, number_columns: 2 }
+            = render partial: 'carousel', locals: { date: date, hrs_per_slide: 2 }
 
           .visible-md-inline.visible-lg-inline
-            = render partial: 'carousel', locals: { date: date, number_columns: 3 }
+            = render partial: 'carousel', locals: { date: date, hrs_per_slide: 3 }
 
 :javascript
   // change of active tab and the button title when a date is clicked

config/initializers/schedule_parameters.rb

@@ -0,0 +1,6 @@
+#sanitize the OSEM_SCHEUDLE_CELL_SIZE to be used for EventType::LENGTH_STEP
+sched_cell_size = ENV['OSEM_SCHEDULE_CELL_SIZE'].to_i
+
+if (sched_cell_size > 0 and 60 % sched_cell_size == 0)
+  SCHEDULE_CELL_SIZE = sched_cell_size
+end

dotenv.example

@@ -57,3 +57,6 @@ OSEM_SMTP_DOMAIN=""
 
 # Enable the usage of the devise ichain plugin
 OSEM_ICHAIN_ENABLED=false
+
+# Schedule grid parameters, cell size in minutes
+OSEM_SCHEDULE_CELL_SIZE=15