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 %> ...@@ -9,163 +9,253 @@ end %>
</h3> </h3>
</div> </div>
<div style="margin-bottom: 16px;"> <!-- <div style="margin-bottom: 16px;">
<h4 style="text-align: center; margin: 0;"> <h4 style="text-align: center; margin: 0;">
<%= month = sunday.strftime('%B %Y') %><%= (month2 = (sunday+6.days).strftime('%B %Y')) == month ? '' : " - #{month2}" %> <%= month = sunday.strftime('%B %Y') %><%= (month2 = (sunday+6.days).strftime('%B %Y')) == month ? '' : " - #{month2}" %>
</h4> </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" 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> <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="calendar">
<div class="time-labels"> <div class="calendar-header">
<div class="time-chart"> <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>
<% (12..47).each do |j| %> <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>
<div class="calendar-half-hour"> <h4 class="wdn-sans-serif">
<label><%= "#{(j / 2) % 12 + (j==24?12:0)} #{j>=24?'PM':'AM'}" if j % 2 == 0 %></label> <%= month = sunday.strftime('%B %Y') %><%= (month2 = (sunday+6.days).strftime('%B %Y')) == month ? '' : " - #{month2}" %>
</div> </h4>
<% end %>
</div>
</div> </div>
<% (0..6).each do |i| %> <div class="day-label-container">
<% day = (sunday + i.days + 1.hour).midnight %> <% (1..5).each do |i| %>
<% slots = [0] * 36 %> <% day = (sunday + i.days + 1.hour).midnight %>
<div class="calendar-day" data-day="<%= day.strftime("%Y/%m/%d") %>"> <label class="day-header"><%= day.strftime("%^a %-m/%d") %></label>
<label class="day-header"><%= day.strftime("%^a %-m/%d") %></label> <% end %>
<div class="day-chart" title="Open"> </div>
<% if week_hours.has_key?(i) %> <div class="calendar-container">
<% # figure out where the closed divs need to be <div class="time-labels">
# we can assume that all records in this space_hour are non-intertwined <div class="time-chart">
closed_start = 0 <% (12..39).each do |j| %>
closed_end = 0 <div class="calendar-half-hour">
starts = week_hours[i].hours.map{|record| record[:start]} <label><%= "#{(j / 2) % 12 + (j==24?12:0)} #{j>=24?'PM':'AM'}" if j % 2 == 0 %></label>
ends = week_hours[i].hours.map{|record| record[:end]} </div>
%> <% <% end %>
closeds = [] </div>
(360..1439).each do |j| </div>
if starts.include?(j) <% (1..5).each do |i| %>
closed_end = j <% day = (sunday + i.days + 1.hour).midnight %>
closeds << [closed_start, closed_end] <% slots = [0] * 36 %>
closed_start = 0 <div class="calendar-day" data-day="<%= day.strftime("%Y/%m/%d") %>">
closed_end = 0 <!-- <label class="day-header"><%= day.strftime("%^a %-m/%d") %></label> -->
end <div class="day-chart" title="Open">
if ends.include?(j) <% if week_hours.has_key?(i) %>
closed_start = j <% # figure out where the closed divs need to be
end # we can assume that all records in this space_hour are non-intertwined
end closed_start = 0
closed_end = 1440 closed_end = 0
closeds << [closed_start, closed_end] starts = week_hours[i].hours.map{|record| record[:start]}
ends = week_hours[i].hours.map{|record| record[:end]}
closeds.each do |closed| %> <%
start_time = closed[0] %> closeds = []
<% end_time = closed[1] %> (360..1199).each do |j|
<% if starts.include?(j)
if [((end_time - 360) / 30).floor, 35].min < 0 closed_end = j
next closeds << [closed_start, closed_end]
end closed_start = 0
top = ((start_time - 360) / 30) * 20 closed_end = 0
height = (end_time - start_time) * 20 / 30 end
if top < 0 if ends.include?(j)
height += top closed_start = j
top = 0 end
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
end end
if top + height > 720 closed_end = 1200
height = 720 - top 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 end
%> %>
<div title="<%= record[:status].split('_').join(' ').capitalize_all %>" class="status <%= record[:status].downcase.split('_').join('-') %>" style="top: <%= top %>px; height: <%= height %>px;"> <% week_hours[i].hours.each do |record| %>
&nbsp; <% if record[:status] != 'open' && record[:status] != 'closed' %>
</div> <% 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 %> <% end %>
<% end %>
<% day_events = events_groups[day.strftime("%Y/%m/%d")] %> <% day_events = events_groups[day.strftime("%Y/%m/%d")] %>
<% unless day_events.nil? %> <% unless day_events.nil? %>
<% day_events.sort{|a, b| a.start_time <=> b.start_time}.each do |event| %> <% day_events.sort{|a, b| a.start_time <=> b.start_time}.each do |res| %>
<% start_slot = [(((event.start_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 0].max <% start_slot = [(((res.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 end_slot = [(((res.end_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 35].min
if end_slot < 0 if end_slot < 0
next next
end end
over = 0 over = 0
(start_slot..end_slot).each do |k| (start_slot..end_slot).each do |k|
over = slots[k] if slots[k] > over over = slots[k] if slots[k] > over
end end
over = [over,3].min over = [over,3].min
top = (((event.start_time.in_time_zone - day.midnight) / 60 - 360) / 30) * 20 top = (((res.start_time.in_time_zone - day.midnight) / 60 - 360) / 30) * 28
height = event.length * 20 / 30 height = res.length * 28 / 30
top_overflow = false top_overflow = false
bottom_overflow = false bottom_overflow = false
if top < 0 if top < 0
height += top height += top
top = 0 top = 0
top_overflow = true top_overflow = true
end end
if top + height > 720 if top + height > 720
height = 720 - top height = 720 - top
bottom_overflow = true bottom_overflow = true
events_groups[(day + 1.day).strftime("%Y/%m/%d")] ||= [] events_groups[(day + 1.day).strftime("%Y/%m/%d")] ||= []
events_groups[(day + 1.day).strftime("%Y/%m/%d")] << event events_groups[(day + 1.day).strftime("%Y/%m/%d")] << res
end end
%> %>
<div class="event <%= event.type.description.downcase.split(' ').join('-') %> <%= 'top-overflow' if top_overflow %> <%= 'bottom-overflow' if bottom_overflow %>" <div class="event-container" style="top: <%= top %>px;">
style="top: <%= top %>px; height: <%= height %>px; left: <%=over*8%>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;">
<% if event.info_link %> <p><strong><%= res.title ? (res.title.empty? ? 'Reserved' : res.title) : 'Reserved' %></strong></p>
<a href="<%= event.info_link %>"><%= event.title %></a> <% if height >= 42 %>
<% else %> <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>
<%= event.title %> <% 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 %> <% end %>
</div>
<% (start_slot..end_slot).each do |k| %>
<% slots[k] = slots[k] + 1 %>
<% end %> <% end %>
<% end %> <% end %>
<% end %>
<div>
<div> <% (12..39).each do |j| %>
<% (12..47).each do |j| %> <div class="calendar-half-hour">
<div class="calendar-half-hour"> &nbsp;
&nbsp; </div>
<% end %>
</div> </div>
<% end %>
</div> </div>
</div> </div>
<% end %>
</div> </div>
<% end %>
</div> </div>
<script type="text/javascript"> <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 () { $(document).ready(function () {
$('.event').click(function (click) { $('.event').click(function (e) {
$(this).css('z-index', max_z); e.stopPropagation();
max_z += 1; 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> </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