show.html.erb 5.53 KB
Newer Older
Zac Wood's avatar
Zac Wood committed
1
<%= javascript_pack_tag 'schedules' %>
Zac Wood's avatar
Zac Wood committed
2
<%= stylesheet_link_tag 'schedules' %>
3

Zac Wood's avatar
Zac Wood committed
4
5
6
7
<%= javascript_include_tag 'moment.min' %>
<%= stylesheet_link_tag 'fullcalendar.min' %>

<button id="open-modal-btn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exportModal">
8
    Export Schedule
9
</button>
10
<button id="save-image" class="btn btn-secondary">Save Image</button>
11

Zac Wood's avatar
Zac Wood committed
12
<div id="calendar"></div>
13

Zac Wood's avatar
Zac Wood committed
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<h3>Quick add</h3>
<p>Populate your calendar quickly by entering a comma separated list of CRNs.</p>
<form action="/sessions/add_bulk" class="form">
    <div class="input-group">
	<input
	    id="crns"
		name="crns"
		type="text"
		class="form-control"
		placeholder="12345,54321,..."
		aria-describedby="basic-addon2"
		autocomplete="off"
	>
	<div class="input-group-append">
	    <button type="submit" class="btn btn-primary" type="button">
		Populate Calendar
	    </button>
	</div>
    </div>
</form>
Zac Wood's avatar
Zac Wood committed
34

Zac Wood's avatar
Zac Wood committed
35
36
<h3 id="share-header">Share</h3>
Want to share your schedule with your friends? Send them this link:<br/>
Gilberto's avatar
Gilberto committed
37
<a id="share-url"></a>
Zac Wood's avatar
Zac Wood committed
38

Zac Wood's avatar
Zac Wood committed
39
40
<template id="events" data-events="<%= @events.to_json %>"></template>

41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<hr />
<h2>Selected Courses</h2>
<%= render partial: 'shared/section', collection: @all %>


<!-- Export Modal -->
<div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
	<div class="modal-content">
	    <div class="modal-header">
		<h5 class="modal-title" id="exportModalLabel">Your calendar has been generated!</h5>
		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
		    <span aria-hidden="true">&times;</span>
		</button>
	    </div>
	    <div class="modal-body">
		<h5>Apple Calendar</h5>
		To add your schedule to Apple Calendar, click the "Add to calendar" button below. If you are on a device
		running macOS or iOS, this will open a dialogue which will walk you through adding the calendar.
		<hr />
		<h5>Google Calendar</h5>
		<strong>On desktop:</strong>
		<br />
64
65
		First, download the calendar file using the "Download calendar file" below. Open your <a href="https://calendar.google.com/" target="_blank">Google Calendar</a>. Click the "Settings" button in the top
		right, and then click the Settings tab. In the menu on the left, click "Import & export" and "Import". Now, upload the calendar file you downloaded and click "Import".
66
67
68
69
70
71
		<br />
		<strong>On mobile (Android only):</strong>
		<br />
		Click the "Download calendar file" button. This will download the calendar file which you may then open and
		add to your calendar.
		<hr />
72
73
74
75
76
77
78
79
80
81
82
83
84
85
		<h5>Outlook Calendar</h5>
		<strong>On desktop (Windows):</strong>
		<br>
		First, download the calendar file using the “Download calendar file” button below. In Outlook, choose File, then Open and Export, and then Import/Export. In the Import and Export Wizard Box, choose “Import and iCalendar (.ics) or vCalendar file (.vcs)” and the “next” button. Search for the button you downloaded in the beginning. Click “Okay” and then “Import.”
		<br>
		<strong>On desktop (Mac):</strong>
		First, download the calendar file using the “Download calendar file” button below. Open Outlook and make sure the calendar in which you want to import the file into has a checkmark next to it. Alternatively, you can add it into a new calendar by clicking the “Organize” tab and then the “New Calendar” button. Double click the new Calendar to rename it. Open the Finder application and search for the file you downloaded in the beginning. Then, drag and drop the file into the desired Calendar area.
		<br>
		<strong>Outlook Online (Classic Layout)</strong>
		To check if you are using the Classic Layout, look in the top right and see if “The new Outlook” bar is slid to the left. If it is not, you may consider reading “The New Outlook Layout” instructions or clicking the bar to slide it to the left. First, download the calendar file using the “Download calendar file” button below. Login onto your <a href=https://outlook.live.com/owa/ target="blank">Outlook</a> and click the calendar icon on the bottom left. On the menu bar, located above the Calendar, choose the “Add Calendar” menu. From the drop down menu, click import from file and browse for the calendar file you downloaded in the beginning. Click the save icon, then the calendar will be imported.
		<br>
		<strong>Outlook Online (New Outlook Layout)</strong>
		To check if you are using the New Outlook Layout, look in the top right and see if “The new Outlook” bar is slid to the right. If it is not, you may consider reading the “Classic Layout” instructions or clicking the bar to slide it to the right. First download the calendar file using the “Download calendar file” button below. Login onto your <a href=https://outlook.live.com/owa/ target="blank">Outlook</a> and click the calendar icon on the bottom left. On the left side bar, under “Calendars”, click the “Discover calendars” button. Choose on the “From File” menu under the “Import” Section. Then click the browse button and search for the file you downloaded in the beginning. Lastly, choose “Import” and your calendar will be displayed.

86
87
88
		<h5>.ics file</h5>
		To download a .ics file containing your schedule, click the "Download calendar file" button below.
	    </div>
89
	    <div class="modal-footer flex">
Zac Wood's avatar
Zac Wood committed
90
91
		<button id="download-ics" type="button" class="btn btn-secondary">Download calendar file</button>
		<button id="add-to-system" type="button" class="btn btn-primary">Add to system calendar</button>
92
93
94
95
	    </div>
	</div>
    </div>
</div>