calendar.erb 9.54 KB
Newer Older
Tyler Lemburg's avatar
Tyler Lemburg committed
1
2
<% events_groups = events.group_by do |event|
	event.start_time.in_time_zone.strftime("%Y/%m/%d")
3
4
5
6
7
8
end 

HALF_HOUR_HEIGHT = 28 # pixel height of half-hour sections in calendar. DO NOT CHANGE RESPONSIVELY
SIX_AM_MINUTES = 360 # start time of calendar 
EIGHT_PM_MINUTES = 1200 # end time of calendar
%>
Tyler Lemburg's avatar
Tyler Lemburg committed
9
10
11
12
13
14
15
16

<div id="pagetitle">
	<h3>
		<%= @space.name %> Calendar
		<span class="wdn-subhead">See all our upcoming events!</span>
	</h3>
</div>

17
18
19
20
21
22
23
<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>
Tyler Lemburg's avatar
Tyler Lemburg committed
24
	</div>
25
26
27
28
29
30
31
32
33
34
35
	<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">
36
						<label><%= "#{(j / 2) % 12 + (j==24 ? 12 : 0)} #{j>=24 ? 'PM': 'AM'}" if j % 2 == 0 %></label>
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
					</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
Tyler Lemburg's avatar
Tyler Lemburg committed
66
						end 
67
68
69
70
71
72
						closed_end = 1200
						closeds << [closed_start, closed_end]

						closeds.each do |closed|
							start_time = closed[0] %>
		            		<% end_time = closed[1] %>
73
74
75
		            		<%
		            		# if the end time is before 6 am, skip.
		            		if ((end_time - SIX_AM_MINUTES) / 30).floor < 0
76
77
								next
							end
78
79
80
81
							# calculate top based off of 6 am start
							top = ((start_time - SIX_AM_MINUTES) / 30) * HALF_HOUR_HEIGHT
							height = (end_time - start_time) * HALF_HOUR_HEIGHT / 30
							# normalize top to 0, reduce height to accomodate
82
83
84
							if top < 0
								height += top
								top = 0
85
86
87
88
							end
							# normalize the bottom to the bottom of the calendar at 8pm. 
							if top + height > (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT
								height = (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT - top
89
90
91
92
93
94
							end
							%>
							<div class="status closed" title="Closed" style="top: <%= top %>px; height: <%= height %>px;">
								&nbsp;
							</div>
							<%
Tyler Lemburg's avatar
Tyler Lemburg committed
95
						end
96
97
98
99
100
					%>
					<% week_hours[i].hours.each do |record| %>
						<% if record[:status] != 'open' && record[:status] != 'closed' %>
							<% start_time = record[:start] %>
		            		<% end_time = record[:end] %>
101
		            		<% if ((end_time - SIX_AM_MINUTES) / 30).floor < 0
102
103
								next
							end
104
105
							top = ((start_time - SIX_AM_MINUTES) / 30) * HALF_HOUR_HEIGHT
							height = (end_time - start_time) * HALF_HOUR_HEIGHT / 30
106
107
108
109
							if top < 0
								height += top
								top = 0
							end 
110
111
							if top + height > (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT
								height = (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT - top
112
113
114
115
116
117
							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 %>
Tyler Lemburg's avatar
Tyler Lemburg committed
118
119
120
					<% end %>
				<% end %>

121
122
123
				<% 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| %>
124
125
					<% start_slot = [(((res.start_time.in_time_zone - day.midnight) / 60 - SIX_AM_MINUTES) / 30).floor, 0].max 
					end_slot = [(((res.end_time.in_time_zone - day.midnight) / 60 - SIX_AM_MINUTES) / 30).floor, 35].min 
126
127
128
129
130
131
132
133
					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
134
135
					top = (((res.start_time.in_time_zone - day.midnight) / 60 - SIX_AM_MINUTES) / 30) * HALF_HOUR_HEIGHT
					height = res.length * HALF_HOUR_HEIGHT / 30
136
137
138
139
140
141
142
					top_overflow = false
					bottom_overflow = false
					if top < 0
						height += top
						top = 0
						top_overflow = true
					end 
143
144
					if top + height > (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT
						height = (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT - top
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
						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>
160
161
			                    <p style="margin-bottom: 10px;" 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 style="margin-bottom: 10px;"><a href="<%= res.info_link %>"" class="wdn-button wdn-button-brand wdn-button-small">View</a> <a href="<%= res.download_link %>" class="download-ics wdn-button wdn-button-triad wdn-button-small">Download</a></p>
162
163
164
165
166
167
168
			                   	<div class="close"><a href="#">&times;</a></div>
			                </div>
			            </div>
					</div>
 					
					<% (start_slot..end_slot).each do |k| %>
						<% slots[k] = slots[k] + 1 %>
Tyler Lemburg's avatar
Tyler Lemburg committed
169
170
					<% end %>
				<% end %>
171
172
173
174
175
176
177
178
				<% end %>
				
				<div>
				<% (12..39).each do |j| %>
					<div class="calendar-half-hour">
						&nbsp;
					</div>
				<% end %>
Tyler Lemburg's avatar
Tyler Lemburg committed
179
180
181
				</div>
			</div>
		</div>
182
		<% end %>
Tyler Lemburg's avatar
Tyler Lemburg committed
183
184
185
186
	</div>
</div>

<script type="text/javascript">
187
188
189
190

require(['jquery', '/js/functions.js', '/js/jquery.mousewheel.min.js', '/js/jquery.mCustomScrollbar.js'], function ($, functions) {
	var openZ = 5;
	var closedZ = 3;
Tyler Lemburg's avatar
Tyler Lemburg committed
191
	$(document).ready(function () {
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
		$('.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);
			}
		});

		$('.tooltip div.close a').click(function (click) {
			click.preventDefault();
			$(this).closest('.tooltip').hide();
Tyler Lemburg's avatar
Tyler Lemburg committed
207
		});
208
209
210
211
212
213
214
215
216
217

		$(window).on("load",function(){
            $(".calendar-container").mCustomScrollbar(
            	{
            		mouseWheel:{ enable: true },
            		theme:"rounded-dots-dark",
            		callbacks:{
					},
					setTop: "95px"
            	}
218
            );
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
        });

		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);
Tyler Lemburg's avatar
Tyler Lemburg committed
255
256
257
	});
});
</script>