calendar styling and functionality

This commit is contained in:
Sriram Hariharan
2018-08-12 17:09:26 -05:00
parent b92a42ed41
commit 40c37160ab
3 changed files with 151 additions and 10 deletions

View File

@@ -11,12 +11,16 @@ $(function () {
["TH", "Thursday"],
["F", "Friday"]
]);
const fadetime = 150;
const butdelay = 75;
$("#calendar").prepend('<div id="myModal" class="modal"><div class="modal-content"><span class="close">&times;</span><div class="card"><div class="cardcontainer"><h2 id="unique">Some text in the Modal..</h2> <button id="info" class="matbut" style="font-size:medium; margin-left: 15px; margin-top: auto; margin-bottom: auto;background: #FF9800;">More Info</button></div></div></div></div>');
// Counter to iterate through material colors to avoid duplicates
var colorCounter = 0;
// Each schedule needs to store 'TITLE - START TIME - END TIME - COLOR'
var classSchedules = [];
var savedCourses = [];
var currLink = "";
var currunique = "";
chrome.storage.sync.get("savedCourses", function (data) {
// Iterate through each saved course and add to 'event'
savedCourses = data.savedCourses;
@@ -48,16 +52,43 @@ $(function () {
$(element).css("margin-bottom", "5px");
},
eventClick: function (calEvent, jsEvent, view) {
console.log(calEvent);
// $(this).css('background-color', 'green');
alert('Event: ' + savedCourses[0].coursename);
// change the border color just for fun
eventClick: function (data, event, view) {
$("#myModal").fadeIn(fadetime);
currunique = data.unique;
currLink = data.courseLink;
$("#unique").text(`Unique : ${data.unique}`);
// When the user clicks on <span> (x), close the modal
}
});
});
$(".close").click(() => {
$("#myModal").fadeOut(fadetime);
});
$("#info").click(() => {
setTimeout(() => {
window.open(currLink);
}, butdelay);
});
/*Close Modal when hit escape*/
$(document).keydown((e) => {
if (e.keyCode == 27) {
$("#myModal").fadeOut(fadetime);
}
$("#snackbar").attr("class", "");
});
// When the user clicks anywhere outside of the modal, close it
window.onclick = (event) => {
var modal = document.getElementById("myModal");
if (event.target == modal) {
$("#myModal").fadeOut(fadetime);
}
}
// Iterate through each saved course and add to 'event'
function setAllEvents(savedCourses) {
colorCounter = 0;
@@ -68,17 +99,18 @@ $(function () {
var course_nbr = classInfo.coursename.substring(classInfo.coursename.search(/\d/), classInfo.coursename.indexOf(" ", classInfo.coursename.search(/\d/)));
var uncapProf = classInfo.profname;
uncapProf = uncapProf.charAt(0) + uncapProf.substring(1).toLowerCase();
var uniquenum = classInfo.unique;
var link = classInfo.link;
for (let j = 0; j < classInfo.datetimearr.length; j++) {
let session = classInfo.datetimearr[j]; // One single session for a class
setEventForSection(session, colorCounter, department, course_nbr, uncapProf);
setEventForSection(session, colorCounter, department, course_nbr, uncapProf, uniquenum, link);
}
colorCounter++;
}
}
//create the event object for every section
function setEventForSection(session, colorCounter, department, course_nbr, uncapProf) {
function setEventForSection(session, colorCounter, department, course_nbr, uncapProf, uniquenum, link) {
var fullday = days.get(session[0]);
classSchedules.push({
title: `${department}-${course_nbr} with ${uncapProf}`,
@@ -99,6 +131,8 @@ $(function () {
session[1][1] +
":00",
color: materialColors[colorCounter],
unique: uniquenum,
courseLink: link,
allday: false
});
}