Changed cookie behavior, added selected colors

schedules_api/app/assets/javascripts/search.js

@@ -15,6 +15,7 @@ class Schedule {
         this._ids = ids;
 
         document.getElementById('course-counter').innerText = ids.length;
+        fetch('/search/update?ids=' + ids.join(','));
     }
 
     toggle() {
@@ -37,8 +38,6 @@ class Schedule {
 
         this.ids = [...this.ids, section.id];
 
-        fetch('/search/add/' + section.id);
-
         const courses = document.getElementById('cart-list');
         const newCourseCard = this._constructSectionCard(section);
         courses.appendChild(newCourseCard);
@@ -51,13 +50,11 @@ class Schedule {
         cart.removeChild(children[withId]);
 
         this.ids = this.ids.filter(_id => _id != Number(id));
-
-        fetch('/search/remove/' + id);
     }
 
     _constructSectionCard(section) {
         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:right"><i class="fas fa-map-marker-alt"></i> ${section.location} </span>
 	        <div style="clear: both"></div>
@@ -71,27 +68,23 @@ class Schedule {
 }
 
 class Search {
-    constructor() {
-        const searchItems = Array.from(document.getElementById('search-list').children);
-        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];
+    sectionWithId(sectionId) {
+        return document.getElementById('search-list').querySelector(`#section-${Number(sectionId)}`);
     }
 }
 
 const toggleSchedule = () => this.schedule.toggle();
 
 const addToSchedule = (event, section) => {
-    console.log(section.dataset.section);
+    section.classList.add('selected');
+
     this.schedule.addToSchedule(JSON.parse(section.dataset.section));
 
     event.stopPropagation();
 };
 
 const removeFromSchedule = section => {
+    this.search.sectionWithId(section.id).classList.remove('selected');
     this.schedule.removeFromSchedule(section.id);
 };
 

schedules_api/app/assets/stylesheets/search.scss

@@ -27,6 +27,20 @@ body {
     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 {
     display: flex;
     align-items: center;

schedules_api/app/controllers/search_controller.rb

 class SearchController < ApplicationController
   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|
       CourseSection.find_by_id id
     end
   end
 
-  def add
-    ids = cookies[:ids].split(',').to_set
-    ids.add(params[:id])
-    
-    cookies[:ids] = ids.to_a.join(',')
+  def update
+    puts params[:ids]
+    cookies[:ids] = params[:ids]
   end
+  
+  # def add
+  #   ids = cookies[:ids].split(',').to_set
+  #   ids.add(params[:id])
+    
+  #   cookies[:ids] = ids.to_a.join(',')
+  # end
 
-  def remove
-    ids = cookies[:ids].split(',').to_set
-    ids.delete(params[:id])
+  # def remove
+  #   ids = cookies[:ids].split(',').to_set
+  #   ids.delete(params[:id])
 
-    puts ids
+  #   puts ids
     
-    cookies[:ids] = ids.to_a.join(',')
-  end
+  #   cookies[:ids] = ids.to_a.join(',')
+  # end
 end

schedules_api/app/views/search/index.html.erb

 <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">
-	    <a href="" id="logo">
+	    <a href="/search" id="logo">
 		<i class="fas fa-calendar-alt"></i>
 		Schedules
 	    </a>
@@ -40,7 +40,7 @@
 	<!-- 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| %>
-		<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>
 			    <h3 style="float: left"><%= "#{course.subject} #{course.course_number}" %></h3>
@@ -58,7 +58,11 @@
 			<!-- List of Course Sections -->
 			<ul class="list-group list-group-flush" id="sections" style="display:none">
 			    <% 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:right"><i class="fas fa-map-marker-alt"></i> <%= section.location %></span>
 				    <div style="clear: both"></div>
@@ -80,7 +84,7 @@
 		</div>
 		<ul class="list-group list-group-flush" id="cart-list">
 		    <% @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:right"><i class="fas fa-map-marker-alt"></i> <%= section.location %></span>
 			    <div style="clear: both"></div>

schedules_api/config/routes.rb

 # Registers all routes for the app.
 Rails.application.routes.draw do
   get 'search', to: 'search#index'
-  get 'search/add/:id', to: 'search#add'
-  get 'search/remove/:id', to: 'search#remove'
+  get 'search/update', to: 'search#update'
 
   scope :api do # Register /api routes
     resources :courses, only: [:index, :show]