Skip to content
Snippets Groups Projects
Commit e76c3cad authored by Spencer McCoy's avatar Spencer McCoy
Browse files

applying styling edits to calendar view.

parent c4de2176
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 224 additions and 134 deletions
views/calendar.erb
+ 224
− 134
View file @ e76c3cad
......@@ -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">&lt; 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 &gt;</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;">
&nbsp;
</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;">
&nbsp;
</div>
<%
end
%>
<div title="<%= record[:status].split('_').join(' ').capitalize_all %>" class="status <%= record[:status].downcase.split('_').join('-') %>" style="top: <%= top %>px; height: <%= height %>px;">
&nbsp;
</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;">
&nbsp;
</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="#">&times;</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">
&nbsp;
<% end %>
<div>
<% (12..39).each do |j| %>
<div class="calendar-half-hour">
&nbsp;
</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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment