Commit 483bddcc authored by Zac Wood's avatar Zac Wood
Browse files

Changed cookie behavior, added selected colors

parent 737a7ffd
...@@ -15,6 +15,7 @@ class Schedule { ...@@ -15,6 +15,7 @@ class Schedule {
this._ids = ids; this._ids = ids;
document.getElementById('course-counter').innerText = ids.length; document.getElementById('course-counter').innerText = ids.length;
fetch('/search/update?ids=' + ids.join(','));
} }
toggle() { toggle() {
...@@ -37,8 +38,6 @@ class Schedule { ...@@ -37,8 +38,6 @@ class Schedule {
this.ids = [...this.ids, section.id]; this.ids = [...this.ids, section.id];
fetch('/search/add/' + section.id);
const courses = document.getElementById('cart-list'); const courses = document.getElementById('cart-list');
const newCourseCard = this._constructSectionCard(section); const newCourseCard = this._constructSectionCard(section);
courses.appendChild(newCourseCard); courses.appendChild(newCourseCard);
...@@ -51,13 +50,11 @@ class Schedule { ...@@ -51,13 +50,11 @@ class Schedule {
cart.removeChild(children[withId]); cart.removeChild(children[withId]);
this.ids = this.ids.filter(_id => _id != Number(id)); this.ids = this.ids.filter(_id => _id != Number(id));
fetch('/search/remove/' + id);
} }
_constructSectionCard(section) { _constructSectionCard(section) {
const str = ` const str = `
<li id="${section.id}" class="list-group-item" onclick="removeFromSchedule(this)"> <li id="${section.id}" class="list-group-item schedule-section-card" onclick="removeFromSchedule(this)">
<span style="float:left"><b class="subj">${section.name}</b>: ${section.title}</span> <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> <span style="float:right"><i class="fas fa-map-marker-alt"></i> ${section.location} </span>
<div style="clear: both"></div> <div style="clear: both"></div>
...@@ -71,27 +68,23 @@ class Schedule { ...@@ -71,27 +68,23 @@ class Schedule {
} }
class Search { class Search {
constructor() { sectionWithId(sectionId) {
const searchItems = Array.from(document.getElementById('search-list').children); return document.getElementById('search-list').querySelector(`#section-${Number(sectionId)}`);
this.courses = searchItems.map(s => JSON.parse(s.dataset.course));
console.log(this.courses);
}
courseWithId(id) {
return this.courses.filter(c => c.id == id)[0];
} }
} }
const toggleSchedule = () => this.schedule.toggle(); const toggleSchedule = () => this.schedule.toggle();
const addToSchedule = (event, section) => { const addToSchedule = (event, section) => {
console.log(section.dataset.section); section.classList.add('selected');
this.schedule.addToSchedule(JSON.parse(section.dataset.section)); this.schedule.addToSchedule(JSON.parse(section.dataset.section));
event.stopPropagation(); event.stopPropagation();
}; };
const removeFromSchedule = section => { const removeFromSchedule = section => {
this.search.sectionWithId(section.id).classList.remove('selected');
this.schedule.removeFromSchedule(section.id); this.schedule.removeFromSchedule(section.id);
}; };
......
...@@ -27,6 +27,20 @@ body { ...@@ -27,6 +27,20 @@ body {
box-shadow: 0 0 20px rgba(0,0,0,0.4); box-shadow: 0 0 20px rgba(0,0,0,0.4);
} }
.list-group-item:hover {
transition: 0.15s;
background-color: lightgray;
}
.list-group-item.selected {
background-color: lightgreen;
}
.schedule-section-card:hover {
transition: 0.15s;
background-color: red;
}
.align-vertical { .align-vertical {
display: flex; display: flex;
align-items: center; align-items: center;
......
class SearchController < ApplicationController class SearchController < ApplicationController
def index def index
@courses = Course.where(subject: 'HNRS') @courses = Course.where(subject: 'GEOL').select do |course|
course.course_sections.count > 0
end
@cart = cookies[:ids].split(',').map do |id| @cart = cookies[:ids].split(',').map do |id|
CourseSection.find_by_id id CourseSection.find_by_id id
end end
end end
def add def update
ids = cookies[:ids].split(',').to_set puts params[:ids]
ids.add(params[:id]) cookies[:ids] = params[:ids]
cookies[:ids] = ids.to_a.join(',')
end end
# def add
# ids = cookies[:ids].split(',').to_set
# ids.add(params[:id])
# cookies[:ids] = ids.to_a.join(',')
# end
def remove # def remove
ids = cookies[:ids].split(',').to_set # ids = cookies[:ids].split(',').to_set
ids.delete(params[:id]) # ids.delete(params[:id])
puts ids # puts ids
cookies[:ids] = ids.to_a.join(',') # cookies[:ids] = ids.to_a.join(',')
end # end
end end
<div class="container-fluid"> <div class="container-fluid">
<div class="row align-left align-sm-center align-md-right" id="navbar"> <div class="row align-left align-sm-center align-md-right" id="navbar">
<div class="col-8 col-sm align-center"> <div class="col-8 col-sm align-center">
<a href="" id="logo"> <a href="/search" id="logo">
<i class="fas fa-calendar-alt"></i> <i class="fas fa-calendar-alt"></i>
Schedules Schedules
</a> </a>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<!-- List of Courses --> <!-- List of Courses -->
<div class="col-lg-7 col-md-10 mx-auto order-2 order-lg-0" id="search-list"> <div class="col-lg-7 col-md-10 mx-auto order-2 order-lg-0" id="search-list">
<% @courses.each do |course| %> <% @courses.each do |course| %>
<div class="card" id="<%= course.id %>" onclick="toggleSections(this)" data-course="<%= course.to_json %>"> <div class="card" id="course-<%= course.id %>" onclick="toggleSections(this)" data-course="<%= course.to_json %>">
<div class="card-body"> <div class="card-body">
<div> <div>
<h3 style="float: left"><%= "#{course.subject} #{course.course_number}" %></h3> <h3 style="float: left"><%= "#{course.subject} #{course.course_number}" %></h3>
...@@ -58,7 +58,11 @@ ...@@ -58,7 +58,11 @@
<!-- List of Course Sections --> <!-- List of Course Sections -->
<ul class="list-group list-group-flush" id="sections" style="display:none"> <ul class="list-group list-group-flush" id="sections" style="display:none">
<% course.course_sections.each do |section| %> <% course.course_sections.each do |section| %>
<li id="<%= section.id %>" class="list-group-item section-item" data-section="<%= section.to_json %>" onclick="addToSchedule(event, this)"> <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)"
>
<span style="float:left"><b class="subj"><%= "#{section.name}" %></b>: <%= section.title %></span> <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> <span style="float:right"><i class="fas fa-map-marker-alt"></i> <%= section.location %></span>
<div style="clear: both"></div> <div style="clear: both"></div>
...@@ -80,7 +84,7 @@ ...@@ -80,7 +84,7 @@
</div> </div>
<ul class="list-group list-group-flush" id="cart-list"> <ul class="list-group list-group-flush" id="cart-list">
<% @cart.each do |section| %> <% @cart.each do |section| %>
<li id="<%= section.id %>" class="list-group-item" data-section="<%= section.to_json %>" onclick="removeFromSchedule(this)"> <li id="<%= section.id %>" class="list-group-item schedule-section-card" data-section="<%= section.to_json %>" onclick="removeFromSchedule(this)">
<span style="float:left"><b class="subj"><%= "#{section.name}" %></b>: <%= section.title %></span> <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> <span style="float:right"><i class="fas fa-map-marker-alt"></i> <%= section.location %></span>
<div style="clear: both"></div> <div style="clear: both"></div>
......
# Registers all routes for the app. # Registers all routes for the app.
Rails.application.routes.draw do Rails.application.routes.draw do
get 'search', to: 'search#index' get 'search', to: 'search#index'
get 'search/add/:id', to: 'search#add' get 'search/update', to: 'search#update'
get 'search/remove/:id', to: 'search#remove'
scope :api do # Register /api routes scope :api do # Register /api routes
resources :courses, only: [:index, :show] resources :courses, only: [:index, :show]
......
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