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

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', () => {
this.schedule = new Schedule();
});
/** Loads FontAwesome icons on load; fixes weird flickering */
document.addEventListener('turbolinks:load', () => {
FontAwesome.dom.i2svg();
});
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
class Search {
sectionWithCrn(crn) {
return document.getElementById('search-list').querySelector(`[data-crn="${crn}"]`);
const sectionWithCrn = crn => 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();
};
/**
* Removes a given section from the schedule
* @param {Node} DOM Node of the Section in the schedule
*/
const removeFromSchedule = section => {
const sectionInSearch = this.search.sectionWithCrn(section.dataset.crn);
const sectionInSearch = sectionWithCrn(section.dataset.crn);
if (sectionInSearch) {
sectionInSearch.classList.remove('selected');
}
this.schedule.removeFromSchedule(section.dataset.crn);
};
/**
* Toggles the display of the schedule
*/
const toggleSections = course => {
const sections = course.querySelector('#sections');
if (sections.style.display === 'block') {
......@@ -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 = () => {
document.getElementById('calendar-link').innerText = `https://${window.location.hostname}/api/schedule?crns=${this.schedule.ids.join(',')}`;
};
......@@ -43,6 +43,11 @@ body {
background-color: lightgreen;
}
.list-group-item.selected:hover {
transition: 0.15s;
background-color: red;
}
.schedule-section-card:hover {
transition: 0.15s;
background-color: red;
......
......@@ -10,7 +10,7 @@
<%= render partial: 'shared/section', collection: @cart, locals: { in_cart: true } %>
</ul>
<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
</button>
</div>
......@@ -23,11 +23,11 @@
<!-- 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-content">
<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">
<span aria-hidden="true">&times;</span>
</button>
......
......@@ -11,7 +11,7 @@
<p class="description"><%= course.description %></p>
<% unless course.prereqs.empty? %>
<% unless course.prereqs.nil? || course.prereqs.empty? %>
<% first, rest = course.prereqs.split(':') %>
<% prereqs, note = rest.split('.') %>
<p><strong><%= first %>:</strong> <%= prereqs %> <sub><%= note %></sub></p>
......
......@@ -16,7 +16,7 @@
<li id="section-<%= section.crn %>"
class="list-group-item section-item <%= "selected" if @cart.include? section %>"
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: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