resource_calendar.erb 10.5 KB
Newer Older
Tyler Lemburg's avatar
Tyler Lemburg committed
1
2
<% reservation_groups = reservations.group_by do |reservation|
	reservation.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

Spencer McCoy's avatar
Spencer McCoy committed
10
11
12
13
14
15
16
<div id="pagetitle">
	<div id="kioskLogo"></div>
	<h1 class="wdn-brand clear-top wdn-pull-left">
		<%= resource.name %>
	</h1>
</div>

Tyler Lemburg's avatar
Tyler Lemburg committed
17
<% if kiosk_mode %>
Spencer McCoy's avatar
Spencer McCoy committed
18
<div class="kiosk-buttons">
Tyler Lemburg's avatar
Tyler Lemburg committed
19
	<% if @user %>
Spencer McCoy's avatar
Spencer McCoy committed
20
		<a class="wdn-sans-serif" href="/kiosk-logout/?url_redirect=<%= url_encode("/#{@space.url_name}/resources/#{resource.id}/calendar/?kiosk_mode=true") %>">Log Out</a>
Tyler Lemburg's avatar
Tyler Lemburg committed
21
	<% end %>
Spencer McCoy's avatar
Spencer McCoy committed
22
	<a class="wdn-button wdn-button-brand" href="/<%= @space.url_name %>/resources/<%= resource.id %>/reserve/?kiosk_mode=true">Reserve <%= resource.name %></a>
Tyler Lemburg's avatar
Tyler Lemburg committed
23
24
25
</div>
<% end %>

26
<% unless kiosk_mode %>
Spencer McCoy's avatar
Spencer McCoy committed
27
28
<div class="wdn-pull-right">
	<a class="wdn-button wdn-button-brand" href="/<%= @space.url_name %>/resources/<%= resource.id %>/reserve/">Reserve <%= resource.name %></a>
29
30
</div>
<% end %>
Spencer McCoy's avatar
Spencer McCoy committed
31
32
33
34
35
36
37
<div class="calendar">
	<div class="calendar-header">
		<a href="/<%= @space.url_name %>/resources/<%= resource.id %>/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 %>/resources/<%= resource.id %>/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
38
	</div>
Spencer McCoy's avatar
Spencer McCoy committed
39
40
41
42
43
44
45
46
47
48
49
	<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">
50
						<label><%= "#{(j / 2) % 12 + (j==24?12:0)} #{j >= 24 ? 'PM' : 'AM'}" if j % 2 == 0 %></label>
Spencer McCoy's avatar
Spencer McCoy committed
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
					</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
80
						end 
Spencer McCoy's avatar
Spencer McCoy committed
81
82
83
84
85
86
						closed_end = 1200
						closeds << [closed_start, closed_end]

						closeds.each do |closed|
							start_time = closed[0] %>
		            		<% end_time = closed[1] %>
87
88
89
		            		<%
		            		# if the end time is before 6 am, skip.
		            		if ((end_time - SIX_AM_MINUTES) / 30).floor < 0
Spencer McCoy's avatar
Spencer McCoy committed
90
91
								next
							end
92
93
94
95
							# 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
Spencer McCoy's avatar
Spencer McCoy committed
96
97
98
							if top < 0
								height += top
								top = 0
99
100
101
102
							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
Spencer McCoy's avatar
Spencer McCoy committed
103
104
105
106
107
108
							end
							%>
							<div class="status closed" title="Closed" style="top: <%= top %>px; height: <%= height %>px;">
								&nbsp;
							</div>
							<%
Tyler Lemburg's avatar
Tyler Lemburg committed
109
						end
Spencer McCoy's avatar
Spencer McCoy committed
110
111
112
113
114
					%>
					<% week_hours[i].hours.each do |record| %>
						<% if record[:status] != 'open' && record[:status] != 'closed' %>
							<% start_time = record[:start] %>
		            		<% end_time = record[:end] %>
115
		            		<% if ((end_time - SIX_AM_MINUTES) / 30).floor < 0
Spencer McCoy's avatar
Spencer McCoy committed
116
117
								next
							end
118
119
							top = ((start_time - SIX_AM_MINUTES) / 30) * HALF_HOUR_HEIGHT
							height = (end_time - start_time) * HALF_HOUR_HEIGHT / 30
Spencer McCoy's avatar
Spencer McCoy committed
120
121
122
123
							if top < 0
								height += top
								top = 0
							end 
124
125
							if top + height > (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT
								height = (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT - top
Spencer McCoy's avatar
Spencer McCoy committed
126
127
128
129
130
131
132
133
134
135
136
137
							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 %>

				<% day_events = reservation_groups[day.strftime("%Y/%m/%d")] %>
				<% unless day_events.nil? %>
				<% day_events.sort{|a, b| a.start_time <=> b.start_time}.each do |res| %>
138
139
					<% 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 
Spencer McCoy's avatar
Spencer McCoy committed
140
141
					if end_slot < 0
						next
Tyler Lemburg's avatar
Tyler Lemburg committed
142
					end
Spencer McCoy's avatar
Spencer McCoy committed
143
144
145
146
147
					over = 0 
					(start_slot..end_slot).each do |k|
						over = slots[k] if slots[k] > over
					end
					over = [over,3].min
148
149
					top = (((res.start_time.in_time_zone - day.midnight) / 60 - SIX_AM_MINUTES) / 30) * HALF_HOUR_HEIGHT
					height = res.length * HALF_HOUR_HEIGHT / 30
Spencer McCoy's avatar
Spencer McCoy committed
150
151
152
153
154
155
156
					top_overflow = false
					bottom_overflow = false
					if top < 0
						height += top
						top = 0
						top_overflow = true
					end 
157
158
					if top + height > (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT
						height = (EIGHT_PM_MINUTES / 30) * HALF_HOUR_HEIGHT - top
Spencer McCoy's avatar
Spencer McCoy committed
159
						bottom_overflow = true
160
161
						events_groups[(day + 1.day).strftime("%Y/%m/%d")] ||= []
						events_groups[(day + 1.day).strftime("%Y/%m/%d")] << res
Spencer McCoy's avatar
Spencer McCoy committed
162
163
164
165
166
167
168
169
					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 %>
Tyler Lemburg's avatar
Tyler Lemburg committed
170
						</div>
Spencer McCoy's avatar
Spencer McCoy committed
171
172
173
						<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>
174
175
176
			                    <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') %><br>
			                   	Reserved by: <span class="italic"><%= res.user.full_name rescue nil %></span></p>
			                   	<p style="margin-bottom: 10px;"><a href="<%= res.download_link %>" class="download-ics wdn-button wdn-button-triad wdn-button-small">Download</a></p>
Spencer McCoy's avatar
Spencer McCoy committed
177
178
179
180
181
182
183
			                   	<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
184
185
186
					<% end %>
				<% end %>
				<% end %>
Spencer McCoy's avatar
Spencer McCoy committed
187
188
189
190
191
192
193
				
				<div>
				<% (12..39).each do |j| %>
					<div class="calendar-half-hour">
						&nbsp;
					</div>
				<% end %>
Tyler Lemburg's avatar
Tyler Lemburg committed
194
195
196
				</div>
			</div>
		</div>
Spencer McCoy's avatar
Spencer McCoy committed
197
		<% end %>
Tyler Lemburg's avatar
Tyler Lemburg committed
198
199
200
201
	</div>
</div>

<script type="text/javascript">
202

Spencer McCoy's avatar
Spencer McCoy committed
203
204
205
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
206
	$(document).ready(function () {
Spencer McCoy's avatar
Spencer McCoy committed
207
208
209
210
		$('.event').click(function (e) {
			e.stopPropagation();
			var $eventContainer = $(this).parent();
			$eventContainer.css('z-index', openZ);
211

Spencer McCoy's avatar
Spencer McCoy committed
212
213
			var $tooltip = $(this).next(".tooltip");
			$tooltip.show();
214
			if ($tooltip.hasClass("hang-below")){
Spencer McCoy's avatar
Spencer McCoy committed
215
216
217
				$tooltip.css("margin-bottom", ($tooltip.find("div").height()+35)*-1);
			}
			
218
219
220
221
222
		});

		$('.tooltip div.close a').click(function (click) {
			click.preventDefault();
			$(this).closest('.tooltip').hide();
Tyler Lemburg's avatar
Tyler Lemburg committed
223
		});
Spencer McCoy's avatar
Spencer McCoy committed
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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270

		$(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);
Tyler Lemburg's avatar
Tyler Lemburg committed
271
272
	});
});
273
274
275
276
277
278
279
280
281
</script>

<% if @user && kiosk_mode # auto logout after 10 minutes! %>
<script type="text/javascript">
	window.setTimeout(function() {
		window.location = '/kiosk-logout/?url_redirect=' + encodeURIComponent(window.location);
	}, 10*60*1000);
</script>
<% end %>