saving courses UI/popup

This commit is contained in:
Sriram Hariharan
2018-07-10 02:06:11 -05:00
parent df4b1f12a8
commit 0014f7aed7
6 changed files with 88 additions and 29 deletions

View File

@@ -7,12 +7,15 @@ chrome.runtime.onMessage.addListener(function(request, sender, response) {
remove(request,sender,response); remove(request,sender,response);
} }
} }
if(request.command == "checkConflicts"){ else if(request.command == "checkConflicts"){
//Check conflicts //Check conflicts
} }
else if(request.command == "alreadyContains"){ else if(request.command == "alreadyContains"){
alreadyContains(request.unique,response); alreadyContains(request.unique,response);
} }
else if(request.command == "getCourses"){
getCourses(response);
}
else{ else{
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
const method = request.method ? request.method.toUpperCase() : "GET"; const method = request.method ? request.method.toUpperCase() : "GET";
@@ -34,6 +37,13 @@ chrome.runtime.onMessage.addListener(function(request, sender, response) {
}); });
}); });
function getCourses(sendResponse){
chrome.storage.sync.get('savedCourses', function(data) {
sendResponse({done:data.savedCourses});
});
}
function add(request, sender, sendResponse) { function add(request, sender, sendResponse) {
var courses; var courses;
var response; var response;

View File

@@ -23,9 +23,8 @@ $(document).ready( function() {
loadDataBase(); loadDataBase();
//make heading and modal //make heading and modal
$("table thead th:last-child").after('<th scope=col>Plus</th>'); $("table thead th:last-child").after('<th scope=col>Plus</th>');
var modhtml = '<div class=modal id=myModal><div class=modal-content><span class=close>×</span><div class=card><div class=cardcontainer><h2 class=title>Computer Fluency (C S 302)</h2><h2 class=profname>with Bruce Porter</h2><div class=topbuttons><button class=matbut id="rateMyProf" style="background: #4CAF50;"> RMP </button><button class=matbut id="eCIS" style="background: #CDDC39;"> eCIS </button><button class=matbut id="Syllabi"> Past Syllabi </button><button class=matbut id="saveCourse" style="background: #F44336;"> Save Course +</button></div></div></div><div class=card><div class=cardcontainer><ul class=description style="list-style-type:disc"></ul></div></div><div class=card><div class=cardcontainer><div id=chart></div></div></div></div>' var modhtml = '<div class=modal id=myModal><div class=modal-content><span class=close>×</span><div class=card><div class=cardcontainer><h2 class=title>Computer Fluency (C S 302)</h2><h2 class=profname>with Bruce Porter</h2><div class=topbuttons><button class=matbut id="rateMyProf" style="background: #4CAF50;"> RMP </button><button class=matbut id="eCIS" style="background: #CDDC39;"> eCIS </button><button class=matbut id="Syllabi"> Past Syllabi </button><button class=matbut id="saveCourse" style="background: #F44336;"> Save Course +</button></div></div></div><div class=card><div class=cardcontainer style=""><ul class=description style="list-style-type:disc"></ul></div></div><div class=card><div class=cardcontainer><div id=chart></div></div></div></div>'
$("#container").prepend(modhtml); $("#container").prepend(modhtml);
$('table').find('tr').each(function(){ $('table').find('tr').each(function(){
if(!($(this).find('td').hasClass("course_header")) && $(this).has('th').length == 0){ if(!($(this).find('td').hasClass("course_header")) && $(this).has('th').length == 0){
//if a course row, then add the extension button and do something if that course has been "saved" //if a course row, then add the extension button and do something if that course has been "saved"

View File

@@ -1,16 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <meta name="viewport" content="width=device-width, initial-scale=1">
button { <style>
height: 30px; .card {
width: 30px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
outline: none; transition: 0.3s;
} margin:5px;
</style> }
</head>
<body> .card:hover {
<button id="changeColor"></button> box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
<script src="popup.js"></script> }
</body>
</html> .container {
padding: 2px 16px;
}
h2 {
padding-left: 5px;
}
li {
width: 350px;
}
body{
min-width: 350px;
}
</style>
</head>
<body>
<script src="jquery-3.3.1.min.js"></script>
<script src="popup.js"></script>
<h2>Saved Courses</h2>
<ul id= "courseList" style="list-style-type: none;padding: 5px;"></ul>
</body>
</html>

View File

@@ -1,6 +1,34 @@
let changeColor = document.getElementById('changeColor'); chrome.storage.sync.get('savedCourses', function(data) {
var courses = data.savedCourses;
console.log(courses);
for(var i = 0; i<courses.length;i++){
var color;
status = courses[i].status;
if(status.includes("open")){
color = "#4CAF50";
}
else if(status.includes("waitlisted")){
color = "#FF9800"
}
else if(status.includes("closed") || status.includes("cancelled")){
color = "#F44336";
}
var listhtml = "<li style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'> <div style='display:-webkit-inline-box;'><h2 style='padding:5px; font-size:medium;'>"+courses[i].unique+"</h2><div class='card'><div class='container' style='background:"+color+"''><h4 style='color:white'><b>"+courses[i].coursename+"</b></h4> </div></div><div> </li>";
$("#courseList").append(listhtml);
chrome.storage.sync.get('color', function(data) { }
changeColor.style.backgroundColor = data.color; });
changeColor.setAttribute('value', data.color);
}); $(document).keydown(function(e) {
if (e.keyCode == 67) {
clear();
}
});
function clear(){
chrome.storage.sync.set({savedCourses: []});
console.log("cleared");
$("#courseList").fadeOut(300);
}
function update(){
}

View File

@@ -49,7 +49,7 @@
.profname { .profname {
margin-left: 5px; margin-left: 5px;
padding-bottom: 0px; padding-bottom: 5px;
font-size: medium; font-size: medium;
margin-top: 10px; margin-top: 10px;
} }
@@ -69,14 +69,14 @@
.card { .card {
/* Add shadows to create the "card" effect */ /* Add shadows to create the "card" effect */
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s; transition: 0.3s;
margin-bottom: 10px; 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)
} }
/* On mouse-over, add a deeper shadow */ /* On mouse-over, add a deeper shadow */
.card:hover { .card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
} }
/* Add some padding inside the card container */ /* Add some padding inside the card container */

5
todo
View File

@@ -1,14 +1,14 @@
TODO: TODO:
- undefined prof, show all possible profs from past? - undefined prof, show all possible profs from past?
DIFFERENT IF NO PROF DIFFERENT IF NO PROF
- popup.html
- Online classes/no location - Online classes/no location
- Schedule Conflicts - Schedule Conflicts
- fix close button
- save image of modal? - save image of modal?
- Degree plan? - Degree plan?
- underline Courses maybe? click to go to using the planner link thing - underline Courses maybe? click to go to using the planner link thing
- when almost everything is blank: M 379H as example - when almost everything is blank: M 379H as example
- schedule generator
- FIX POP UP CARD NOT FILLING FULL LENGTH
CLEAN UP: CLEAN UP:
Everything lmao Everything lmao
@@ -35,3 +35,4 @@ FIXED/DONE since 7/7/18:
- maybe modal animations? - maybe modal animations?
- Saving courses - Saving courses
- waitlist/closed/open colors - waitlist/closed/open colors
- popup.html