diff --git a/views/calendar.erb b/views/calendar.erb
index b574847097d9f788326d2c6a3432cdc3e999c8ec..75cb722709005b07b8f3e77aaac31fd166b018c0 100644
--- a/views/calendar.erb
+++ b/views/calendar.erb
@@ -9,163 +9,253 @@ end %>
</h3>
</div>
-<div style="margin-bottom: 16px;">
+<!-- <div style="margin-bottom: 16px;">
<h4 style="text-align: center; margin: 0;">
<%= month = sunday.strftime('%B %Y') %><%= (month2 = (sunday+6.days).strftime('%B %Y')) == month ? '' : " - #{month2}" %>
</h4>
<a href="/<%= @space.url_name %>/calendar/?date=<%= (date-7.days).strftime('%Y-%m-%d') %>" class="wdn-button wdn-button-triad" id="prev-week">< PREV</a>
<a href="/<%= @space.url_name %>/calendar/?date=<%= (date+7.days).strftime('%Y-%m-%d') %>" class="wdn-button wdn-button-triad" style="float: right;" id="next-week">NEXT ></a>
-</div>
+</div> -->
-<div class="calendar-container">
- <div class="time-labels">
- <div class="time-chart">
- <% (12..47).each do |j| %>
- <div class="calendar-half-hour">
- <label><%= "#{(j / 2) % 12 + (j==24?12:0)} #{j>=24?'PM':'AM'}" if j % 2 == 0 %></label>
- </div>
- <% end %>
- </div>
+<div class="calendar">
+ <div class="calendar-header">
+ <a href="/<%= @space.url_name %>/calendar/?date=<%= (date-7.days).strftime('%Y-%m-%d') %><%= defined?(kiosk_mode) && kiosk_mode == 'true' ? '&kiosk_mode=true' : ''%>" id="prev-week" class="schedulericon-angle-circled-left"><span class="wdn-text-hidden">Previous Week</span></a>
+ <a href="/<%= @space.url_name %>/calendar/?date=<%= (date+7.days).strftime('%Y-%m-%d') %><%= defined?(kiosk_mode) && kiosk_mode == 'true' ? '&kiosk_mode=true' : ''%>" id="next-week" class="schedulericon-angle-circled-right"><span class="wdn-text-hidden">next week</span></a>
+ <h4 class="wdn-sans-serif">
+ <%= month = sunday.strftime('%B %Y') %><%= (month2 = (sunday+6.days).strftime('%B %Y')) == month ? '' : " - #{month2}" %>
+ </h4>
</div>
- <% (0..6).each do |i| %>
- <% day = (sunday + i.days + 1.hour).midnight %>
- <% slots = [0] * 36 %>
- <div class="calendar-day" data-day="<%= day.strftime("%Y/%m/%d") %>">
- <label class="day-header"><%= day.strftime("%^a %-m/%d") %></label>
- <div class="day-chart" title="Open">
- <% if week_hours.has_key?(i) %>
- <% # figure out where the closed divs need to be
- # we can assume that all records in this space_hour are non-intertwined
- closed_start = 0
- closed_end = 0
- starts = week_hours[i].hours.map{|record| record[:start]}
- ends = week_hours[i].hours.map{|record| record[:end]}
- %> <%
- closeds = []
- (360..1439).each do |j|
- if starts.include?(j)
- closed_end = j
- closeds << [closed_start, closed_end]
- closed_start = 0
- closed_end = 0
- end
- if ends.include?(j)
- closed_start = j
- end
- end
- closed_end = 1440
- closeds << [closed_start, closed_end]
-
- closeds.each do |closed|
- start_time = closed[0] %>
- <% end_time = closed[1] %>
- <%
- if [((end_time - 360) / 30).floor, 35].min < 0
- next
- end
- top = ((start_time - 360) / 30) * 20
- height = (end_time - start_time) * 20 / 30
- if top < 0
- height += top
- top = 0
- end
- if top + height > 720
- height = 720 - top
- end
- %>
- <div class="status closed" title="Closed" style="top: <%= top %>px; height: <%= height %>px;">
-
- </div>
- <%
- end
- %>
- <% week_hours[i].hours.each do |record| %>
- <% if record[:status] != 'open' && record[:status] != 'closed' %>
- <% start_time = record[:start] %>
- <% end_time = record[:end] %>
- <% if [((end_time - 360) / 30).floor, 35].min < 0
- next
- end
- top = ((start_time - 360) / 30) * 20
- height = (end_time - start_time) * 20 / 30
- if top < 0
- height += top
- top = 0
+ <div class="day-label-container">
+ <% (1..5).each do |i| %>
+ <% day = (sunday + i.days + 1.hour).midnight %>
+ <label class="day-header"><%= day.strftime("%^a %-m/%d") %></label>
+ <% end %>
+ </div>
+ <div class="calendar-container">
+ <div class="time-labels">
+ <div class="time-chart">
+ <% (12..39).each do |j| %>
+ <div class="calendar-half-hour">
+ <label><%= "#{(j / 2) % 12 + (j==24?12:0)} #{j>=24?'PM':'AM'}" if j % 2 == 0 %></label>
+ </div>
+ <% end %>
+ </div>
+ </div>
+ <% (1..5).each do |i| %>
+ <% day = (sunday + i.days + 1.hour).midnight %>
+ <% slots = [0] * 36 %>
+ <div class="calendar-day" data-day="<%= day.strftime("%Y/%m/%d") %>">
+ <!-- <label class="day-header"><%= day.strftime("%^a %-m/%d") %></label> -->
+ <div class="day-chart" title="Open">
+ <% if week_hours.has_key?(i) %>
+ <% # figure out where the closed divs need to be
+ # we can assume that all records in this space_hour are non-intertwined
+ closed_start = 0
+ closed_end = 0
+ starts = week_hours[i].hours.map{|record| record[:start]}
+ ends = week_hours[i].hours.map{|record| record[:end]}
+ %> <%
+ closeds = []
+ (360..1199).each do |j|
+ if starts.include?(j)
+ closed_end = j
+ closeds << [closed_start, closed_end]
+ closed_start = 0
+ closed_end = 0
+ end
+ if ends.include?(j)
+ closed_start = j
+ end
end
- if top + height > 720
- height = 720 - top
+ closed_end = 1200
+ closeds << [closed_start, closed_end]
+
+ closeds.each do |closed|
+ start_time = closed[0] %>
+ <% end_time = closed[1] %>
+ <%
+ if [((end_time - 360) / 30).floor, 35].min < 0
+ next
+ end
+ top = ((start_time - 360) / 30) * 20
+ height = (end_time - start_time) * 20 / 30
+ if top < 0
+ height += top
+ top = 0
+ end
+ if top + height > 720
+ height = 720 - top
+ end
+ %>
+ <div class="status closed" title="Closed" style="top: <%= top %>px; height: <%= height %>px;">
+
+ </div>
+ <%
end
- %>
- <div title="<%= record[:status].split('_').join(' ').capitalize_all %>" class="status <%= record[:status].downcase.split('_').join('-') %>" style="top: <%= top %>px; height: <%= height %>px;">
-
- </div>
+ %>
+ <% week_hours[i].hours.each do |record| %>
+ <% if record[:status] != 'open' && record[:status] != 'closed' %>
+ <% start_time = record[:start] %>
+ <% end_time = record[:end] %>
+ <% if [((end_time - 360) / 30).floor, 35].min < 0
+ next
+ end
+ top = ((start_time - 360) / 30) * 20
+ height = (end_time - start_time) * 20 / 30
+ if top < 0
+ height += top
+ top = 0
+ end
+ if top + height > 720
+ height = 720 - top
+ end
+ %>
+ <div title="<%= record[:status].split('_').join(' ').capitalize_all %>" class="status <%= record[:status].downcase.split('_').join('-') %>" style="top: <%= top %>px; height: <%= height %>px;">
+
+ </div>
+ <% end %>
<% end %>
<% end %>
- <% end %>
- <% day_events = events_groups[day.strftime("%Y/%m/%d")] %>
- <% unless day_events.nil? %>
- <% day_events.sort{|a, b| a.start_time <=> b.start_time}.each do |event| %>
- <% start_slot = [(((event.start_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 0].max
- end_slot = [(((event.end_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 35].min
- if end_slot < 0
- next
- end
- over = 0
- (start_slot..end_slot).each do |k|
- over = slots[k] if slots[k] > over
- end
- over = [over,3].min
- top = (((event.start_time.in_time_zone - day.midnight) / 60 - 360) / 30) * 20
- height = event.length * 20 / 30
- top_overflow = false
- bottom_overflow = false
- if top < 0
- height += top
- top = 0
- top_overflow = true
- end
- if top + height > 720
- height = 720 - top
- bottom_overflow = true
- events_groups[(day + 1.day).strftime("%Y/%m/%d")] ||= []
- events_groups[(day + 1.day).strftime("%Y/%m/%d")] << event
- end
- %>
- <div class="event <%= event.type.description.downcase.split(' ').join('-') %> <%= 'top-overflow' if top_overflow %> <%= 'bottom-overflow' if bottom_overflow %>"
- style="top: <%= top %>px; height: <%= height %>px; left: <%=over*8%>px">
- <% if event.info_link %>
- <a href="<%= event.info_link %>"><%= event.title %></a>
- <% else %>
- <%= event.title %>
+ <% day_events = events_groups[day.strftime("%Y/%m/%d")] %>
+ <% unless day_events.nil? %>
+ <% day_events.sort{|a, b| a.start_time <=> b.start_time}.each do |res| %>
+ <% start_slot = [(((res.start_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 0].max
+ end_slot = [(((res.end_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 35].min
+ if end_slot < 0
+ next
+ end
+ over = 0
+ (start_slot..end_slot).each do |k|
+ over = slots[k] if slots[k] > over
+ end
+ over = [over,3].min
+ top = (((res.start_time.in_time_zone - day.midnight) / 60 - 360) / 30) * 28
+ height = res.length * 28 / 30
+ top_overflow = false
+ bottom_overflow = false
+ if top < 0
+ height += top
+ top = 0
+ top_overflow = true
+ end
+ if top + height > 720
+ height = 720 - top
+ bottom_overflow = true
+ events_groups[(day + 1.day).strftime("%Y/%m/%d")] ||= []
+ events_groups[(day + 1.day).strftime("%Y/%m/%d")] << res
+ end
+ %>
+ <div class="event-container" style="top: <%= top %>px;">
+ <div id="event<%=res.id %>" data-start="<%= res.start_time.in_time_zone %>" data-end="<%= res.start_time.in_time_zone + (res.length * 60) %>" class="event <%= 'top-overflow' if top_overflow %> <%= 'bottom-overflow' if bottom_overflow %>" style="height: <%= height %>px;">
+ <p><strong><%= res.title ? (res.title.empty? ? 'Reserved' : res.title) : 'Reserved' %></strong></p>
+ <% if height >= 42 %>
+ <p class="eventicon-clock"><%= res.start_time.in_time_zone.strftime('%I:%M %p') %> - <%= res.end_time.in_time_zone.strftime('%I:%M %p') %></p>
+ <% end %>
+ </div>
+ <div class="tooltip <%= top >= 50 ? "hang-above" : "hang-below" %> <%= day.strftime("%^a") == "FRI" ? "hang-left" : "hang-right" %>">
+ <div>
+ <h6 style="margin-top: 0px; margin-bottom: .25em;"><%= res.title ? (res.title.empty? ? 'Reserved' : res.title) : 'Reserved' %></h6>
+ <p class="eventicon-clock"><%= res.start_time.in_time_zone.strftime('%I:%M %p') %> - <%= res.end_time.in_time_zone.strftime('%I:%M %p') %></p>
+ <p>Reserved by: <span class="italic"><%= res.user.full_name rescue nil %></span></p>
+ <div class="close"><a href="#">×</a></div>
+ </div>
+ </div>
+ </div>
+
+ <% (start_slot..end_slot).each do |k| %>
+ <% slots[k] = slots[k] + 1 %>
<% end %>
- </div>
- <% (start_slot..end_slot).each do |k| %>
- <% slots[k] = slots[k] + 1 %>
<% end %>
- <% end %>
- <% end %>
-
- <div>
- <% (12..47).each do |j| %>
- <div class="calendar-half-hour">
-
+ <% end %>
+
+ <div>
+ <% (12..39).each do |j| %>
+ <div class="calendar-half-hour">
+
+ </div>
+ <% end %>
</div>
- <% end %>
</div>
</div>
+ <% end %>
</div>
- <% end %>
</div>
<script type="text/javascript">
-require(['jquery'], function ($) {
- var max_z = 5;
+
+require(['jquery', '/js/functions.js', '/js/jquery.mousewheel.min.js', '/js/jquery.mCustomScrollbar.js'], function ($, functions) {
+ var openZ = 5;
+ var closedZ = 3;
$(document).ready(function () {
- $('.event').click(function (click) {
- $(this).css('z-index', max_z);
- max_z += 1;
+ $('.event').click(function (e) {
+ e.stopPropagation();
+ var $eventContainer = $(this).parent();
+ $eventContainer.css('z-index', openZ);
+
+ var $tooltip = $(this).next(".tooltip");
+ $tooltip.show();
+ if($tooltip.hasClass("hang-below")){
+ $tooltip.css("margin-bottom", ($tooltip.find("div").height()+35)*-1);
+ }
+
+ $(document).one("click",function(){
+ $tooltip.show().hide();
+ $eventContainer.css('z-index', closedZ);
+ })
+ });
+
+ $('.tooltip div.close a').click(function (click) {
+ click.preventDefault();
+ $(this).closest('.tooltip').hide();
});
+
+ $(window).on("load",function(){
+ $(".calendar-container").mCustomScrollbar(
+ {
+ mouseWheel:{ enable: true },
+ theme:"rounded-dots-dark",
+ callbacks:{
+ },
+ setTop: "95px"
+ }
+ );
+ });
+
+ function tick(){
+ var dateTime = functions.getDateTime();
+ $(".calendar-day").each(function(){
+ if(dateTime.date == $(this).data("day")){
+
+ var top = (dateTime.hour-6) * 2 * 28;
+ top += dateTime.minute / 60 * 2 * 28;
+
+ if($(this).children(".day-chart").children("#nowArrow").length){
+ $(this).children(".day-chart").children("#nowArrow").css({top:top})
+ $(this).children(".day-chart").children("#nowLine").css({top:top})
+ }else{
+ $("#nowArrow").remove();
+ $("#nowLine").remove();
+ $(this).children(".day-chart").append($("<div id='nowArrow'>"));
+ $(this).children(".day-chart").children("#nowArrow").css({top:top})
+ $(this).children(".day-chart").append($("<div id='nowLine'>"));
+ $(this).children(".day-chart").children("#nowLine").css({top:top})
+ }
+
+ }
+ });
+ $(".event").each(function(){
+ var eventEnd = new Date($(this).data("end").replace(" -0500", "")).getTime();
+ var now = new Date();
+ now = now.getTime();
+ if (eventEnd < now) {
+ $(this).addClass("past");
+ }
+ });
+ };
+
+ tick();
+ setInterval(tick, 60000);
});
});
</script>
\ No newline at end of file