index.html.erb 4.12 KB
Newer Older
Zac Wood's avatar
Zac Wood committed
1
2
3
<div class="container-fluid">
    <div class="row align-left align-sm-center align-md-right" id="navbar">
	<div class="col-8 col-sm align-center">
4
	    <a href="/search" id="logo">
Zac Wood's avatar
Zac Wood committed
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
		<i class="fas fa-calendar-alt"></i>
		Schedules
	    </a>
	</div>

	<div class="col-4 col-sm align-center order-0 order-sm-1" onclick="toggleSchedule()">
	    <h1 style="margin-top:24px">
	    <!-- <h2><i class="fas fa-shopping-cart" id="schedule-icon"></i></h2> -->
		<span class="fa-layers fa-fw" id="schedule-icon">
		    <i class="fas fa-shopping-cart"></i>
		    <span class="fa-layers fa-fw">
			<i class="fas fa-circle" data-fa-transform="shrink-3 up-12 right-12" style="color:gray"></i>
			<span id="course-counter" class="fa-layers-text fa-inverse" data-fa-transform="shrink-10 up-12 right-12" style="font-weight:600">
			    <%= @cart.length %>
			</span>
		    </span>
		</span>
	    </h1>
	</div>
	
	<div class="col-12 col-sm align-center order-1 order-sm-0">
	    <div class="input-group">
		<input type="text" class="form-control" placeholder="Search by CRN, course, professor..." aria-describedby="basic-addon2">
		<div class="input-group-append">
		    <button class="btn btn-secondary" type="button">
			<i class="fas fa-search"></i>
		    </button>
		</div>
	    </div>
	</div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
	<!-- List of Courses -->
	<div class="col-lg-7 col-md-10 mx-auto order-2 order-lg-0" id="search-list">
	    <% @courses.each do |course| %>
43
		<div class="card" id="course-<%= course.id %>" onclick="toggleSections(this)" data-course="<%= course.to_json %>">
Zac Wood's avatar
Zac Wood committed
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
		    <div class="card-body">
			<div>
			    <h3 style="float: left"><%= "#{course.subject} #{course.course_number}" %></h3>
			    <h5 style="float: right"><em><%= course.title %></em>. <%= course.credits %> credits.</h5>
			</div>

			<div style="clear: both"> </div>

			<p class="description"><%= course.description %></p>

			<div class="d-block" style="text-align: center">
			    <i class="fas fa-chevron-down"></i>
			</div>

			<!-- List of Course Sections -->
			<ul class="list-group list-group-flush" id="sections" style="display:none">
			    <% course.course_sections.each do |section| %>
61
62
63
64
65
				<li id="section-<%= section.id %>"
				    class="list-group-item section-item <%= "selected" if @cart.include? section %>"
				    data-section="<%= section.to_json %>"
				    onclick="addToSchedule(event, this)"
				>
Zac Wood's avatar
Zac Wood committed
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
				    <span style="float:left"><b class="subj"><%= "#{section.name}" %></b>:  <%= section.title %></span>
				    <span style="float:right"><i class="fas fa-map-marker-alt"></i> <%= section.location %></span>
				    <div style="clear: both"></div>
				    <span style="float:left"><i class="fas fa-chalkboard-teacher"></i> <%= section.instructor.name %></span>
				    <span style="float:right"><i class="fas fa-clock"></i> <%= "#{section.days}, #{section.start_time}-#{section.end_time}" %></span>
				    <div style="clear: both"></div>
				</li>
			    <% end %>
			</ul>
		    </div>
		</div>
	    <% end %>
	</div>
	<div class="col order-1 order-lg-1" id="schedule-list">
	    <div class="card">
		<div class="card-body">
		    <h3 class="card-title">Your Schedule</h3>
		    <div style="clear: both"> </div>
		</div>
		<ul class="list-group list-group-flush" id="cart-list">
		    <% @cart.each do |section| %>
87
			<li id="<%= section.id %>" class="list-group-item schedule-section-card" data-section="<%= section.to_json %>" onclick="removeFromSchedule(this)">
Zac Wood's avatar
Zac Wood committed
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
			    <span style="float:left"><b class="subj"><%= "#{section.name}" %></b>:  <%= section.title %></span>
			    <span style="float:right"><i class="fas fa-map-marker-alt"></i> <%= section.location %></span>
			    <div style="clear: both"></div>
			    <span style="float:left"><i class="fas fa-chalkboard-teacher"></i> <%= section.instructor.name %></span>
			    <span style="float:right"><i class="fas fa-clock"></i> <%= "#{section.days}, #{section.start_time}-#{section.end_time}" %></span>
			    <div style="clear: both"></div>
			</li>
		    <% end %>		
		</ul>
		<div class="card-body">
		    <button class="btn btn-primary">Export Schedule</button>
		</div>
	    </div>
	</div>
    </div>

</div>