Commit 4c21a3ca authored by Zac Wood's avatar Zac Wood
Browse files

can now remove sections in the schedule from search

parent a2ab15d6
Pipeline #3048 passed with stage
class SectionCard {
constructor(section) {
this._html = `
<li id="section-${section.crn}" 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>
<span style="float:left"><i class="fas fa-chalkboard-teacher"></i> TODO </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>`;
}
}
...@@ -27,6 +27,7 @@ document.addEventListener('DOMContentLoaded', () => { ...@@ -27,6 +27,7 @@ document.addEventListener('DOMContentLoaded', () => {
this.schedule = new Schedule(); this.schedule = new Schedule();
}); });
/** Loads FontAwesome icons on load; fixes weird flickering */
document.addEventListener('turbolinks:load', () => { document.addEventListener('turbolinks:load', () => {
FontAwesome.dom.i2svg(); FontAwesome.dom.i2svg();
}); });
// Place all the behaviors and hooks related to the matching controller here. // Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js. // All this logic will automatically be available in application.js.
class Search { const sectionWithCrn = crn => document.getElementById('search-list').querySelector(`[data-crn="${crn}"]`);
sectionWithCrn(crn) {
return document.getElementById('search-list').querySelector(`[data-crn="${crn}"]`); /**
* Either adds or removes a section from the schedule depending on
* if it is currently in the schedule.
*/
const addOrRemoveFromSchedule = (event, section) => {
if (this.schedule.ids.includes(section.dataset.crn)) {
this.schedule.removeFromSchedule(section.dataset.crn);
section.classList.remove('selected');
} else {
this.schedule.addToSchedule(section.cloneNode(true));
section.classList.add('selected');
} }
}
const addToSchedule = (event, section) => {
section.classList.add('selected');
this.schedule.addToSchedule(section.cloneNode(true));
event.stopPropagation(); event.stopPropagation();
}; };
/**
* Removes a given section from the schedule
* @param {Node} DOM Node of the Section in the schedule
*/
const removeFromSchedule = section => { const removeFromSchedule = section => {
const sectionInSearch = this.search.sectionWithCrn(section.dataset.crn); const sectionInSearch = sectionWithCrn(section.dataset.crn);
if (sectionInSearch) { if (sectionInSearch) {
sectionInSearch.classList.remove('selected'); sectionInSearch.classList.remove('selected');
} }
this.schedule.removeFromSchedule(section.dataset.crn); this.schedule.removeFromSchedule(section.dataset.crn);
}; };
/**
* Toggles the display of the schedule
*/
const toggleSections = course => { const toggleSections = course => {
const sections = course.querySelector('#sections'); const sections = course.querySelector('#sections');
if (sections.style.display === 'block') { if (sections.style.display === 'block') {
...@@ -33,6 +43,10 @@ const toggleSections = course => { ...@@ -33,6 +43,10 @@ const toggleSections = course => {
} }
}; };
/**
* Generates a webcal:// URL for the current sections in the schedule
* and sets the link in the modal to it.
*/
const setUrlInModal = () => { const setUrlInModal = () => {
document.getElementById('calendar-link').innerText = `https://${window.location.hostname}/api/schedule?crns=${this.schedule.ids.join(',')}`; document.getElementById('calendar-link').innerText = `https://${window.location.hostname}/api/schedule?crns=${this.schedule.ids.join(',')}`;
}; };
...@@ -43,6 +43,11 @@ body { ...@@ -43,6 +43,11 @@ body {
background-color: lightgreen; background-color: lightgreen;
} }
.list-group-item.selected:hover {
transition: 0.15s;
background-color: red;
}
.schedule-section-card:hover { .schedule-section-card:hover {
transition: 0.15s; transition: 0.15s;
background-color: red; background-color: red;
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<%= render partial: 'shared/section', collection: @cart, locals: { in_cart: true } %> <%= render partial: 'shared/section', collection: @cart, locals: { in_cart: true } %>
</ul> </ul>
<div class="card-body"> <div class="card-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="setUrlInModal()"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exportModal" onclick="setUrlInModal()">
Export schedule Export schedule
</button> </button>
</div> </div>
...@@ -23,11 +23,11 @@ ...@@ -23,11 +23,11 @@
<!-- Export Modal --> <!-- Export Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <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-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Your calendar has been generated!</h5> <h5 class="modal-title" id="exportModalLabel">Your calendar has been generated!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<p class="description"><%= course.description %></p> <p class="description"><%= course.description %></p>
<% unless course.prereqs.empty? %> <% unless course.prereqs.nil? || course.prereqs.empty? %>
<% first, rest = course.prereqs.split(':') %> <% first, rest = course.prereqs.split(':') %>
<% prereqs, note = rest.split('.') %> <% prereqs, note = rest.split('.') %>
<p><strong><%= first %>:</strong> <%= prereqs %> <sub><%= note %></sub></p> <p><strong><%= first %>:</strong> <%= prereqs %> <sub><%= note %></sub></p>
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<li id="section-<%= section.crn %>" <li id="section-<%= section.crn %>"
class="list-group-item section-item <%= "selected" if @cart.include? section %>" class="list-group-item section-item <%= "selected" if @cart.include? section %>"
data-crn="<%= section.crn %>" data-crn="<%= section.crn %>"
onclick="addToSchedule(event, this)" onclick="addOrRemoveFromSchedule(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>
......
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