Commit 47420959 authored by Zac Wood's avatar Zac Wood
Browse files

Merge branch 'v2-ui' into 'dev-v2'

V2 ui

See merge request !25
parents 894575fb 9a163119
Pipeline #2947 passed with stage
in 2 minutes and 14 seconds
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
class Schedule {
constructor() {
this.isOpen = false;
this._ids = Array.from(document.getElementById('schedule').children).map(e => Number(e.id.split('-')[1]));
}
get ids() {
return this._ids;
}
set ids(ids) {
this._ids = ids;
document.getElementById('course-counter').innerText = ids.length;
fetch('/search/update?ids=' + ids.join(','), { cache: 'no-store' });
}
toggle() {
const list = document.getElementById('cart');
const icon = document.getElementById('schedule-icon');
if (this.isOpen) {
list.style.display = 'none';
icon.style.color = 'black';
} else {
list.style.display = 'block';
icon.style.color = 'green';
}
this.isOpen = !this.isOpen;
}
addToSchedule(section) {
if (this.ids.includes(section.dataset.crn)) return;
this.ids = [...this.ids, section.dataset.crn];
section.classList.remove('section-item');
section.classList.remove('selected');
section.classList.add('schedule-section-card');
section.onclick = () => removeFromSchedule(section);
document.getElementById('schedule').appendChild(section);
}
removeFromSchedule(id) {
const cart = document.getElementById('schedule');
const section = cart.querySelector(`#section-${id}`);
cart.removeChild(section);
this.ids = this.ids.filter(_id => _id != Number(id));
}
_constructSectionCard(section) {
const str = `
<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>`;
return elementFromString(str);
}
}
class Search {
sectionWithId(sectionId) {
return document.getElementById('search-list').querySelector(`#${sectionId}`);
}
}
const toggleSchedule = () => this.schedule.toggle();
const addToSchedule = (event, section) => {
section.classList.add('selected');
// this.schedule.addToSchedule(JSON.parse(section.dataset.section));
this.schedule.addToSchedule(section.cloneNode(true));
event.stopPropagation();
};
const removeFromSchedule = section => {
this.search.sectionWithId(section.id).classList.remove('selected');
this.schedule.removeFromSchedule(section.id.split('-')[1]);
};
const toggleSections = course => {
const sections = course.querySelector('#sections');
if (sections.style.display === 'block') {
course.querySelector('#sections').style.display = 'none';
} else {
course.querySelector('#sections').style.display = 'block';
}
};
const setUrlInModal = () => {
document.getElementById('calendar-link').innerText = `https://${window.location.hostname}/api/schedule?crns=${this.schedule.ids.join(',')}`;
};
const downloadIcs = async () => {
const cal = await fetch(`/api/schedules?crns=${this.schedule.ids.join(',')}`);
const text = await cal.text();
var blob = new Blob([text], { type: 'text/calendar;charset=utf-8' });
saveAs(blob, 'test.ics');
};
const addToSystemCalendar = async () => {
const url = `webcal://${window.location.hostname}/api/schedule?crns=${this.schedule.ids.join(',')}`;
window.open(url, '_self');
};
document.addEventListener('DOMContentLoaded', () => {
this.schedule = new Schedule();
this.search = new Search();
});
......@@ -13,3 +13,8 @@
*= require_tree .
*= require_self
*/
// @import "bootstrap";
// @import "font-awesome-sprockets";
// @import "font-awesome";
// Place all the styles related to the Home controller here.
// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// Place all the styles related to the search controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
body {
background-color: #E4E4E4;
}
// .container {
// margin: auto;
// width: 100%;
// }
.card {
margin-bottom: 12px;
background-color: white;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
transition: 0.3s;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
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;
}
.align-left {
display: flex;
justify-content: flex-start;
align-items: center;
}
.align-center {
display: flex;
justify-content: center;
align-items: center;
}
.align-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
#navbar {
margin-top: 8px;
margin-bottom: 48px;
}
#logo {
font-size: 24pt;
color: black;
}
.form-control:focus {
border-color: transparent;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset, 0px 0px 0px rgba(0, 0, 255, 0.5);
}
#cart {
display: none;
}
.card .small {
margin-bottom: 16px;
padding: 12px;
}
# Configures the application.
class ApplicationController < ActionController::Base
protect_from_forgery with: :null_session
before_action :set_cookies, :set_cart
def set_cart
@cart = cookies[:ids].split(',').map do |crn|
CourseSection.find_by_crn crn
end
end
def set_cookies
cookies[:ids] = "" if cookies[:ids].nil?
end
end
class HomeController < ApplicationController
def index; end
end
class SearchController < ApplicationController
def index
@courses = Course.where(subject: params[:q]).select do |course|
course.course_sections.count.positive?
end
end
def update
puts params[:ids]
cookies[:ids] = params[:ids]
end
end
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