Commit 9f37f2eb authored by Zac Wood's avatar Zac Wood
Browse files

Added basic search + nothing found error message

parent 851f672c
Pipeline #2942 passed with stage
in 2 minutes and 24 seconds
......@@ -4,7 +4,7 @@
class Schedule {
constructor() {
this.isOpen = false;
this._ids = Array.from(document.getElementById('cart-list').children).map(e => Number(e.id.split('-')[1]));
this._ids = Array.from(document.getElementById('schedule').children).map(e => Number(e.id.split('-')[1]));
}
get ids() {
......@@ -19,7 +19,7 @@ class Schedule {
}
toggle() {
const list = document.getElementById('schedule-list');
const list = document.getElementById('cart');
const icon = document.getElementById('schedule-icon');
if (this.isOpen) {
......@@ -38,18 +38,16 @@ class Schedule {
this.ids = [...this.ids, section.dataset.crn];
const courses = document.getElementById('cart-list');
// const newCourseCard = this._constructSectionCard(section);
// courses.appendChild(newCourseCard);
section.classList.remove('section-item');
section.classList.remove('selected');
section.classList.add('schedule-section-card');
section.onclick = () => removeFromSchedule(section);
courses.appendChild(section);
document.getElementById('schedule').appendChild(section);
}
removeFromSchedule(id) {
const cart = document.getElementById('cart-list');
const cart = document.getElementById('schedule');
const section = cart.querySelector(`#section-${id}`);
cart.removeChild(section);
......
......@@ -79,7 +79,7 @@ body {
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset, 0px 0px 0px rgba(0, 0, 255, 0.5);
}
#schedule-list {
#cart {
display: none;
}
......
class SearchController < ApplicationController
def index
@courses = Course.where(subject: 'GEOL').select do |course|
@courses = Course.where(subject: params[:q]).select do |course|
course.course_sections.count.positive?
end
......
......@@ -9,7 +9,7 @@
<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> -->
<!-- <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">
......@@ -23,14 +23,18 @@
</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>
<form action="/search" class="form-inline">
<div class="form-group">
<div class="input-group">
<input name="q" 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>
</form>
</div>
</div>
</div>
......@@ -3,18 +3,24 @@
<div class="container-fluid">
<!-- The main screen consists of a row with two columns: the search results, and the cart -->
<div class="row">
<!-- Search result, List of Courses -->
<div class="col-lg-7 col-md-10 mx-auto order-2 order-lg-0" id="search-list">
<%= render partial: 'course', collection: @courses %>
<% if @courses.any? %>
<%= render partial: 'course', collection: @courses %>
<% else %>
<h1>Sorry, we couldn't find anything matching your search.</h1>
<p>Please try again!</p>
<% end %>
</div>
<!-- List of sections in the cart -->
<div class="col order-1 order-lg-1" id="schedule-list">
<div class="col order-1 order-lg-1" id="cart">
<div class="card">
<div class="card-body">
<h3 class="card-title">Your Schedule</h3>
</div>
<ul class="list-group list-group-flush" id="cart-list">
<ul class="list-group list-group-flush" id="schedule">
<%= render partial: 'section', collection: @cart, locals: { in_cart: true } %>
</ul>
<div class="card-body">
......@@ -25,44 +31,43 @@
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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 />
Open your <a href="https://calendar.google.com/">Google Calendar</a>. Click the "Settings" button in the top
right, and then click the Settings tab. In the menu on the left, click "Add calendar" and "From URL". Now,
paste the following link inside the text box: <br />
<code id="calendar-link"></code>
<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 />
<h5>.ics file</h5>
To download a .ics file containing your schedule, click the "Download calendar file" button below.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="downloadIcs()">Download calendar file</button>
<button type="button" class="btn btn-primary" onclick="addToSystemCalendar()">Add to system calendar</button>
</div>
<!-- Export Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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 />
Open your <a href="https://calendar.google.com/">Google Calendar</a>. Click the "Settings" button in the top
right, and then click the Settings tab. In the menu on the left, click "Add calendar" and "From URL". Now,
paste the following link inside the text box: <br />
<code id="calendar-link"></code>
<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 />
<h5>.ics file</h5>
To download a .ics file containing your schedule, click the "Download calendar file" button below.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="downloadIcs()">Download calendar file</button>
<button type="button" class="btn btn-primary" onclick="addToSystemCalendar()">Add to system calendar</button>
</div>
</div>
</div>
</div>
Markdown is supported
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