From 1beb77187feb4d9dbc6ead16cfd71957a74d3eb9 Mon Sep 17 00:00:00 2001 From: Sriram Hariharan Date: Sat, 11 Aug 2018 16:32:26 -0500 Subject: [PATCH] calendar --- calendar.html | 3 +- css/_materialFullCalendar.css | 126 +++++---- css/popup.css | 147 +++++----- css/styles.css | 257 ++++++++++-------- js/calendar.js | 154 +++++------ js/content.js | 489 +++++++++++++++++++--------------- popup.html | 25 +- 7 files changed, 654 insertions(+), 547 deletions(-) diff --git a/calendar.html b/calendar.html index 3f7ce75b..03a2736f 100644 --- a/calendar.html +++ b/calendar.html @@ -1,4 +1,5 @@ + @@ -8,7 +9,7 @@ -
+
\ No newline at end of file diff --git a/css/_materialFullCalendar.css b/css/_materialFullCalendar.css index 9a4d9136..8a91f6ef 100644 --- a/css/_materialFullCalendar.css +++ b/css/_materialFullCalendar.css @@ -36,62 +36,85 @@ Colors: Use the following - https://www.google.com/design/spec/style/color.html# }); */ + /* Remove that awful yellow color and border from today in Schedule */ + .fc-state-highlight { opacity: 0; border: none; - } - - /* Styling for each event from Schedule */ - .fc-time-grid-event.fc-v-event.fc-event { +} + +/* Styling for each event from Schedule */ + +.fc-time-grid-event.fc-v-event.fc-event { border-radius: 4px; border: none; padding: 5px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3); + transition: 0.3s; opacity: 1; - } - - /* Bolds the name of the event and inherits the font size */ - .fc-event { - font-size: inherit !important; +} + +.fc-time-grid-event.fc-v-event.fc-event:hover { + box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.3); +} + +/* Bolds the name of the event and inherits the font size */ + +.fc-event { + font-size: small !important; font-weight: bold !important; - } - - /* Remove the header border from Schedule */ - .fc td, .fc th { - border-style: none !important; +} + +/* Remove the header border from Schedule */ + +.fc td, +.fc th { + border-style: ridge !important; border-width: 1px !important; - padding: 0 !important; + padding: 2px !important; vertical-align: top !important; - } - - /* Inherits background for each event from Schedule. */ - .fc-event .fc-bg { +} + +.fc-widget-header { + background-color: #cc5500; + color: white; +} + +/* Inherits background for each event from Schedule. */ + +.fc-event .fc-bg { z-index: 1 !important; background: inherit !important; opacity: 0.25 !important; - } - - /* Normal font weight for the time in each event */ - .fc-time-grid-event .fc-time { +} + +/* Normal font weight for the time in each event */ + +.fc-time-grid-event .fc-time { font-weight: normal !important; - } - - /* Apply same opacity to all day events */ - .fc-ltr .fc-h-event.fc-not-end, .fc-rtl .fc-h-event.fc-not-start { +} + +/* Apply same opacity to all day events */ + +.fc-ltr .fc-h-event.fc-not-end, +.fc-rtl .fc-h-event.fc-not-start { opacity: 0.65 !important; margin-left: 12px !important; padding: 5px !important; - } - - /* Apply same opacity to all day events */ - .fc-day-grid-event.fc-h-event.fc-event.fc-not-start.fc-end { +} + +/* Apply same opacity to all day events */ + +.fc-day-grid-event.fc-h-event.fc-event.fc-not-start.fc-end { opacity: 0.65 !important; margin-left: 12px !important; padding: 5px !important; - } - - /* Material design button */ - .fc-button { +} + +/* Material design button */ + +.fc-button { display: inline-block; position: relative; cursor: pointer; @@ -127,22 +150,25 @@ Colors: Use the following - https://www.google.com/design/spec/style/color.html# overflow: hidden; -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); - } - - .fc-button:hover { +} + +.fc-button:hover { background-color: rgba(158, 158, 158, 0.2); - } - - .fc-button:focus, .fc-button:hover { +} + +.fc-button:focus, +.fc-button:hover { text-decoration: none; - } - - /* The active button box is ugly so the active button will have the same appearance of the hover */ - .fc-state-active { +} + +/* The active button box is ugly so the active button will have the same appearance of the hover */ + +.fc-state-active { background-color: rgba(158, 158, 158, 0.2); - } - - /* Not raised button */ - .fc-state-default { +} + +/* Not raised button */ + +.fc-state-default { box-shadow: None; - } \ No newline at end of file +} \ No newline at end of file diff --git a/css/popup.css b/css/popup.css index 9e157856..12a0f4ad 100644 --- a/css/popup.css +++ b/css/popup.css @@ -1,28 +1,31 @@ - .card { - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); +.card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; - margin:5px; - } + margin: 5px; +} - .card:hover { - box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); - } +.card:hover { + box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); +} - .container { +.container { padding: 2px 16px; - } - h2 { - padding: 10px 0px 0 10px; - } - li { - width: 350px; +} - } - body{ - min-width: 500px; +h2 { + padding: 10px 0px 0 10px; +} + +li { + width: 350px; +} + +body { + min-width: 370px; min-height: 400px; - } - .matbut { +} + +.matbut { border: none; outline: none; cursor: pointer; @@ -32,67 +35,69 @@ border-radius: 10px; font-size: medium; font-style: bold; - box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); - background: #FF9800; - } - - .matbut{ - position: relative; - overflow: hidden; - } - -.truncate { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 80%; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); + background: #ff9800; } - .matbut:after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 5px; - height: 5px; - background: rgba(255, 255, 255, .5); - opacity: 0; - border-radius: 100%; - transform: scale(1, 1) translate(-50%); - transform-origin: 50% 50%; - } - .card:after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 5px; - height: 5px; - background: rgba(255, 255, 255, .5); - opacity: 0; - border-radius: 100%; - transform: scale(1, 1) translate(-50%); - transform-origin: 50% 50%; - } +.matbut { + position: relative; + overflow: hidden; +} - @keyframes ripple { +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 80%; +} + +.matbut:after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 5px; + height: 5px; + background: rgba(255, 255, 255, 0.5); + opacity: 0; + border-radius: 100%; + transform: scale(1, 1) translate(-50%); + transform-origin: 50% 50%; +} + +.card:after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 5px; + height: 5px; + background: rgba(255, 255, 255, 0.5); + opacity: 0; + border-radius: 100%; + transform: scale(1, 1) translate(-50%); + transform-origin: 50% 50%; +} + +@keyframes ripple { 0% { - transform: scale(0, 0); - opacity: 1; + transform: scale(0, 0); + opacity: 1; } 20% { - transform: scale(25, 25); - opacity: 1; + transform: scale(25, 25); + opacity: 1; } 100% { - opacity: 0; - transform: scale(40, 40); + opacity: 0; + transform: scale(40, 40); } - } +} - .matbut:focus:not(:active)::after { +.matbut:focus:not(:active)::after { animation: ripple 1s ease-out; - } - .card:focus:not(:active)::after { +} + +.card:focus:not(:active)::after { animation: ripple 1s ease-out; - } \ No newline at end of file +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index a02d556f..7e79f05a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,191 +1,214 @@ .modal { - display: none; - position: fixed; - z-index: 1; - padding-top: 100px; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: rgb(0,0,0); - background-color: rgba(0,0,0,0.4); + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); } .modal-content { - background-color: #fefefe; - margin: auto; - max-height: 85%; - overflow-y: auto; - padding: 20px; - border: 1px solid #888; - width: 50%; + background-color: #fefefe; + margin: auto; + max-height: 85%; + overflow-y: auto; + padding: 20px; + border: 1px solid #888; + width: 50%; } - /* The Close Button */ .close { - color: #aaaaaa; - float: right; - padding: 5px; - font-size: 28px; - font-weight: bold; + color: #aaaaaa; + float: right; + padding: 5px; + font-size: 28px; + font-weight: bold; } .title { - font-size: x-large; - font-weight: bold ; - padding-top: 5px; - padding-left: 5px; - margin:5px 0px 5px 0px; - + font-size: x-large; + font-weight: bold; + padding-top: 5px; + padding-left: 5px; + margin: 5px 0px 5px 0px; } .description { - padding: 5px; - font-size: 15px; - font-weight: normal; - + padding: 5px; + font-size: 15px; + font-weight: normal; } .profname { - margin-left: 5px; - padding-bottom: 5px; - font-size: medium; - margin-top: 10px; + margin-left: 5px; + padding-bottom: 5px; + font-size: medium; + margin-top: 10px; } .dateTimePlace { - margin-left: 5px; - font-size: smaller; - font-weight: bold; + margin-left: 5px; + font-size: smaller; + font-weight: bold; } #chart { - min-width: auto; - max-width: 800px; - height: 250px; - margin: 0 auto - z-index:1; + min-width: auto; + max-width: 800px; + height: 250px; + margin: 0 auto; + z-index: 1; } .card { - transition: 0.3s; - margin-bottom: 10px; - box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) + transition: 0.3s; + margin-bottom: 10px; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), + 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .card:hover { - box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19) + box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), + 0 4px 20px 0 rgba(0, 0, 0, 0.19); } .cardcontainer { - padding: 2px 16px; - transition:width 300ms ease-in-out, height 300ms ease-in-out; + padding: 2px 16px; + transition: width 300ms ease-in-out, height 300ms ease-in-out; } .description { - padding: 10px; + padding: 10px; } .close:hover, .close:focus { - color: #000; - text-decoration: none; - cursor: pointer; + color: #000; + text-decoration: none; + cursor: pointer; } .topbuttons .matbut { - display:inline-block; + display: inline-block; } .matbut { - border: none; - outline: none; - cursor: pointer; - color: white; - margin: 10px 10px 10px 0px; - padding: 10px 10px; - border-radius: 10px; - font-size: medium; - font-style: bold; - box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); - background: #FF9800; + border: none; + outline: none; + cursor: pointer; + color: white; + margin: 10px 10px 10px 0px; + padding: 10px 10px; + border-radius: 10px; + font-size: medium; + font-style: bold; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); + background: #ff9800; } -.matbut{ - position: relative; - overflow: hidden; +.matbut { + position: relative; + overflow: hidden; } .matbut:after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 5px; - height: 5px; - background: rgba(255, 255, 255, .5); - opacity: 0; - border-radius: 100%; - transform: scale(1, 1) translate(-50%); - transform-origin: 50% 50%; + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 5px; + height: 5px; + background: rgba(255, 255, 255, 0.5); + opacity: 0; + border-radius: 100%; + transform: scale(1, 1) translate(-50%); + transform-origin: 50% 50%; } @keyframes ripple { - 0% { - transform: scale(0, 0); - opacity: 1; - } - 20% { - transform: scale(25, 25); - opacity: 1; - } - 100% { - opacity: 0; - transform: scale(40, 40); - } + 0% { + transform: scale(0, 0); + opacity: 1; + } + 20% { + transform: scale(25, 25); + opacity: 1; + } + 100% { + opacity: 0; + transform: scale(40, 40); + } } .matbut:focus:not(:active)::after { - animation: ripple 1s ease-out; + animation: ripple 1s ease-out; } #snackbar { - visibility: hidden; - min-width: 250px; - margin-left: -200px; - background-color: #333; - color: #fff; - border-radius: 2px; - padding: 16px; - position: fixed; - z-index: 1; - left: 50%; - bottom: 30px; + visibility: hidden; + min-width: 250px; + margin-left: -200px; + background-color: #333; + color: #fff; + border-radius: 2px; + padding: 16px; + position: fixed; + z-index: 1; + left: 50%; + bottom: 30px; } #snackbar.show { - visibility: visible; + visibility: visible; - -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; - animation: fadein 0.5s, fadeout 0.5s 2.5s; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; } @-webkit-keyframes fadein { - from {bottom: 0; opacity: 0;} - to {bottom: 30px; opacity: 1;} + from { + bottom: 0; + opacity: 0; + } + to { + bottom: 30px; + opacity: 1; + } } @keyframes fadein { - from {bottom: 0; opacity: 0;} - to {bottom: 30px; opacity: 1;} + from { + bottom: 0; + opacity: 0; + } + to { + bottom: 30px; + opacity: 1; + } } @-webkit-keyframes fadeout { - from {bottom: 30px; opacity: 1;} - to {bottom: 0; opacity: 0;} + from { + bottom: 30px; + opacity: 1; + } + to { + bottom: 0; + opacity: 0; + } } @keyframes fadeout { - from {bottom: 30px; opacity: 1;} - to {bottom: 0; opacity: 0;} -} \ No newline at end of file + from { + bottom: 30px; + opacity: 1; + } + to { + bottom: 0; + opacity: 0; + } +} diff --git a/js/calendar.js b/js/calendar.js index 314dbe4b..fe0b254d 100644 --- a/js/calendar.js +++ b/js/calendar.js @@ -1,102 +1,102 @@ -$(function() { - - const materialColors = - ['#FF1744', '#F50057', '#D500F9', '#651FFF', - '#3D5AFE', '#2979FF', '#00B0FF', '#00E5FF', - '#1DE9B6', '#00E676', '#76FF03', '#C6FF00', - '#FFEA00', '#FFC400', '#FF9100', 'FF3D00', - '#4E342E', '#424242', '#37474F']; +$(function () { + const materialColors = ['#4CAF50', '#CDDC39', + '#FFC107', '#2196F3', '#F57C00', '#9C27B0', '#FF5722', , '#673AB7', + '#FF5252', '#E91E63', '#009688', '#00BCD4', + '#4E342E', '#424242', '#9E9E9E' + ]; + const days = new Map([ + ["M", "Monday"], + ["T", "Tuesday"], + ["W", "Wednesday"], + ["TH", "Thursday"], + ["F", "Friday"] + ]); // 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 = []; - chrome.storage.sync.get('savedCourses', function (data) { + chrome.storage.sync.get("savedCourses", function (data) { var savedCourses = data.savedCourses; - // Iterate through each saved course and add to 'event' for (let i = 0; i < savedCourses.length; i++) { - var classInfo = savedCourses[i]; // Store all info for a single class - - var department = classInfo.coursename.substring(0,classInfo.coursename.search(/\d/)-2); - var course_nbr = classInfo.coursename.substring(classInfo.coursename.search(/\d/),classInfo.coursename.indexOf(" ",classInfo.coursename.search(/\d/))); + var classInfo = savedCourses[i]; + var department = classInfo.coursename.substring(0, classInfo.coursename.search(/\d/) - 2); + 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(); for (let j = 0; j < classInfo.datetimearr.length; j++) { let session = classInfo.datetimearr[j]; // One single session for a class - - if (session[0] == 'M') { - classSchedules.push({ - title: `${department}-${course_nbr}\n${uncapProf}`, - start: moment().format("YYYY-MM-") + moment().day('Monday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', - end: moment().format("YYYY-MM-") + moment().day('Monday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', - color: materialColors[colorCounter], - allday: false - }); - } - - if (session[0] == 'T') { - classSchedules.push({ - title: `${department}-${course_nbr}\n${uncapProf}`, - start: moment().format("YYYY-MM-") + moment().day('Tuesday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', - end: moment().format("YYYY-MM-") + moment().day('Tuesday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', - color: materialColors[colorCounter], - allday: false - }); - } - - if (session[0] == 'W') { - classSchedules.push({ - title: `${department}-${course_nbr}\n${uncapProf}`, - start: moment().format("YYYY-MM-") + moment().day('Wednesday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', - end: moment().format("YYYY-MM-") + moment().day('Wednesday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', - color: materialColors[colorCounter], - allday: false - }); - } - - if (session[0] == 'TH') { - classSchedules.push({ - title: `${department}-${course_nbr}\n${uncapProf}`, - start: moment().format("YYYY-MM-") + moment().day('Thursday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', - end: moment().format("YYYY-MM-") + moment().day('Thursday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', - color: materialColors[colorCounter], - allday: false - }); - } - - if (session[0] == 'F') { - classSchedules.push({ - title: `${department}-${course_nbr}\n${uncapProf}`, - start: moment().format("YYYY-MM-") + moment().day('Friday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', - end: moment().format("YYYY-MM-") + moment().day('Friday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', - color: materialColors[colorCounter], - allday: false - }); - } - colorCounter++; + setEventForSection(session, colorCounter, department, course_nbr, uncapProf); } + colorCounter++; } - - $('#calendar').fullCalendar({ + $("#calendar").fullCalendar({ editable: false, // Don't allow editing of events handleWindowResize: true, weekends: false, // will hide Saturdays and Sundays - slotDuration: '00:15:00', // 15 minute intervals on vertical column + slotDuration: "00:30:00", // 15 minute intervals on vertical column slotEventOverlap: false, // No overlapping between events - defaultView: 'agendaWeek', // Only show week view + defaultView: "agendaWeek", // Only show week view header: false, // Hide buttons/titles - minTime: '08:00:00', // Start time - maxTime: '21:00:00', // End time - columnHeaderFormat: 'ddd', // Only show day of the week names + minTime: "08:00:00", // Start time + maxTime: "21:00:00", // End time + columnHeaderFormat: "ddd", // Only show day of the week names displayEventTime: true, // Display event time allDaySlot: false, - events: classSchedules - }) + Duration: { + hours: 1 + }, + height: 'auto', + events: classSchedules, + slotLabelFormat: [ + 'h:mm A' // lower level of text + ], + eventRender: function (event, element, view) { + $(element).css("padding", "5px"); + $(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 + + } + }); }); - + + function setEventForSection(session, colorCounter, department, course_nbr, uncapProf) { + var fullday = days.get(session[0]); + classSchedules.push({ + title: `${department}-${course_nbr} with ${uncapProf}`, + start: moment().format("YYYY-MM-") + + moment() + .day(fullday) + ._d.toString() + .split(" ")[2] + + "T" + + session[1][0] + + ":00", + end: moment().format("YYYY-MM-") + + moment() + .day(fullday) + ._d.toString() + .split(" ")[2] + + "T" + + session[1][1] + + ":00", + color: materialColors[colorCounter], + allday: false + }); + } + chrome.runtime.onMessage.addListener( + function (request, sender, sendResponse) { + if (request.command == "updateCourseList") { + //update the calendar here + } + }); }); \ No newline at end of file diff --git a/js/content.js b/js/content.js index 3065f6b2..f32d8e55 100644 --- a/js/content.js +++ b/js/content.js @@ -13,130 +13,142 @@ var chart; var description; var status; -const days = new Map([["M" ,"Monday"], - ["T", "Tuesday"], ["W", "Wednesday"],["TH" ,"Thursday"], - ["F", "Friday"]]); +const days = new Map([ + ["M", "Monday"], + ["T", "Tuesday"], + ["W", "Wednesday"], + ["TH", "Thursday"], + ["F", "Friday"] +]); const fadetime = 150; const butdelay = 100; //This extension may be super lit, but you know what's even more lit? //Matthew Tran's twitter and insta: @MATTHEWTRANN and @matthew.trann -$(document).ready( function() { +$(function () { loadDataBase(); //make heading and modal $("table thead th:last-child").after('Plus'); - var modhtml ='