more popup styling and work

background.js

@@ -81,7 +81,7 @@ function add(request, sender, sendResponse) {
 		courses.push(request.course)
 		console.log(courses);
 		chrome.storage.sync.set({savedCourses: courses});
-		sendResponse({done:"Added: "+request.course.unique+request.course.coursename,label:"Remove Course -"});
+		sendResponse({done:"Added: ("+request.course.unique+") "+request.course.coursename,label:"Remove Course -"});
 	});
 }
 function remove(request, sender, sendResponse) {
@@ -94,7 +94,7 @@ function remove(request, sender, sendResponse) {
 		courses.splice(index,1);
 		console.log(courses);
 		chrome.storage.sync.set({savedCourses: courses});
-		sendResponse({done:"removed: "+request.course.unique+request.course.coursename,label:"Add Course +"});
+		sendResponse({done:"Removed: ("+request.course.unique+") "+request.course.coursename,label:"Add Course +"});
 	});
 }
 

content.js

@@ -9,7 +9,7 @@ var profurl;
 var department;
 var course_nbr;
 var datetimearr = [];
-
+var chart;
 var description;
 var status;
 const days = new Map([["M" ,"Monday"], 
@@ -24,6 +24,7 @@ $(document).ready( function() {
 	$("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 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);
+	$("#myModal").prepend("<div id='snackbar'>defaultmessage..</div>");
 	$('table').find('tr').each(function(){
 	    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"
@@ -47,7 +48,9 @@ $(document).ready( function() {
 		var c = new Course(coursename,uniquenum, profname, datetimearr, status, profurl);
 		chrome.runtime.sendMessage({command: "courseStorage",course: c, action:$("#saveCourse").text().substring(0,$("#saveCourse").text().indexOf(" ")).toLowerCase()}, function(response) {
 			$("#saveCourse").text(response.label);
-			alert(response.done);
+			$("#snackbar").text(response.done);
+			$("#snackbar").attr("class","show");
+			 setTimeout(function(){$("#snackbar").attr("class","");}, 1000);
 		});
 	});
 
@@ -69,7 +72,8 @@ $(document).ready( function() {
 	$(document).keydown(function(e) { 
     	if (e.keyCode == 27) { 
         	$(".modal").fadeOut(fadetime);
-    	} 
+    	}
+    	$("#snackbar").attr("class",""); 
 	});
 });
 
@@ -233,6 +237,8 @@ function openDialog(dep,cls,sem,professor,res){
 //console.log(coursename);
 span.onclick = function() {
 	$(".modal").fadeOut(200);
+	$("#snackbar").attr("class",""); 
+
 }
 chart = Highcharts.chart('chart', {
 	chart: {
@@ -322,6 +328,8 @@ chart = Highcharts.chart('chart', {
 window.onclick = function(event) {
 	if (event.target == modal) {
 		$(".modal").fadeOut(fadetime);
+		$("#snackbar").attr("class",""); 
+
 	}
 }	
 }

popup.css

@@ -55,6 +55,19 @@
     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%;
+  }
 
   @keyframes ripple {
     0% {
@@ -73,4 +86,7 @@
 
   .matbut:focus:not(:active)::after {
     animation: ripple 1s ease-out;
+  }
+  .card:focus:not(:active)::after {
+    animation: ripple 1s ease-out;
   }

popup.html

@@ -6,14 +6,17 @@
 </head>
 <body>
   <div class="card" id="header">
-  <h2 id='headertext'>Saved Courses</h2>
+    <h2 id='headertext'>Saved Courses</h2>
-  <div id="buttons" style="padding: 10px 0px 5px 10px;">
+    <div id="buttons" style="padding: 10px 0px 5px 10px;">
-    <button id="clear" class="matbut" style="background:#4CAF50">click me</button>
+      <button id="clear" class="matbut" style="background:#4CAF50">Clear</button>
-    <button id="clear" class="matbut" style="background:#FFC107">click me</button>
+      <button id="open" class="matbut" style="background:#FFC107">Options</button>
-  </div>
+    </div>
   </div>
   <ul id= "courseList" style="list-style-type: none;padding: 5px;"></ul>
-  <script src="jquery-3.3.1.min.js"></script>
+  <h2 id="empty" style="font-weight: normal;font-size: large;margin: 60px 30px 40px 30px ;">Doesn't Look Like Anything To Me.<br>
-  <script src="popup.js"></script>
+  <span style="font-size: small;display:table;margin:0 auto;font-weight: bold">(No Courses)</span><h2>
-</body>
+    <script src="jquery-3.3.1.min.js"></script>
-</html> 
+    <script src="moment.min.js"></script>
+    <script src="popup.js"></script>
+  </body>
+  </html> 

popup.js

@@ -1,10 +1,14 @@
+var courses;
 chrome.storage.sync.get('savedCourses', function(data) {
 	chrome.runtime.sendMessage({command: "checkConflicts"}, function(response) {
+		var isConflicted = [];
 			if(response.isConflict){
 					var between = response.between;
 					var text = "";
 					for(var i = 0; i<between.length;i++){
-						text+="Conflict between: "+between[i][0].coursename + " and "+between[i][1].coursename+"\n";
+						text+="Conflict between: "+ getSimpleName(between[i][0].coursename,between[i][0].unique) + " and "+getSimpleName(between[i][1].coursename,between[i][1].unique);
+						isConflicted.push(between[i][0].unique);
+						isConflicted.push(between[i][1].unique);
 						if(i != between.length-1){
 							text+= "<br>";
 						}
@@ -12,7 +16,10 @@ chrome.storage.sync.get('savedCourses', function(data) {
 					$("#courseList").prepend("<p style='font-size:small; font-weight:bold; color:red; margin:5px;'>"+text+"</>");
 				} 
 			});
-		var courses = data.savedCourses;
+		courses = data.savedCourses;
+		if(courses.length != 0){
+			$("#empty").hide();
+		}
 		console.log(courses);
 		for(var i = 0; i<courses.length;i++){
 			var color;
@@ -29,21 +36,72 @@ chrome.storage.sync.get('savedCourses', function(data) {
 			var department = courses[i].coursename.substring(0,courses[i].coursename.search(/\d/)-2);
 			var course_nbr = courses[i].coursename.substring(courses[i].coursename.search(/\d/),courses[i].coursename.indexOf(" ",courses[i].coursename.search(/\d/)));
 			var profname = courses[i].profname.substring(0,1)+courses[i].profname.substring(1).toLowerCase();
-			var listhtml = "<li style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'><div class='card'><div class='container' style='background:"+color+"''><h4 style='color:white; margin:5px; font-size:large;'><b>"+department + " "+course_nbr+"<span style='font-size:medium'>"+" with </span><span style='font-size:medium'>"+profname+"</span></b></h4></div></div></li>";
+			var listhtml = "<li id='"+i+"'style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'><div class='card'><div class='container' style='background:"+color+"''><h4 style='color:white; margin:5px; font-size:large;'><b>"+department + " "+course_nbr+"<span style='font-size:medium'>"+" with </span><span style='font-size:medium'>"+profname+" ("+courses[i].unique+")"+"</span></b></h4></div></div><p style='display: none;font-weight:bold;padding:10px;font-size:small;color:white;background-color:#FF5252;'>"+makeLine(i)+"</p></li>";
 			$("#courseList").append(listhtml);
 		}
 });
 
+function getSimpleName(coursename, unique){
+	var department = coursename.substring(0,coursename.search(/\d/)-2);
+	var course_nbr = coursename.substring(coursename.search(/\d/),coursename.indexOf(" ",coursename.search(/\d/)));
+	return department+" "+course_nbr+" ("+unique+")";
+}
+
 $(document).ready(function() {
     $("#clear").click(function(){
     	clear();
 	});
+	$("#courseList li").click(function(){
+		//makeLine($(this).attr("id"));
+		if($(this).find("p").not(':visible')){
+			$(this).find("p").fadeIn(500);
+		}
+		else{
+			$(this).find("p").hide();
+		}
+	//	window.open(courses[$(this).attr("id")].link);
+	});
 });
 
+function makeLine(index){
+	var datetimearr = courses[index].datetimearr;
+	//converted times back
+	var dtmap = new Map([]);
+	for(var i = 0; i<datetimearr.length;i++){
+		datetimearr[i][1][0] = moment(datetimearr[i][1][0], ["HH:mm"]).format("h:mm A");
+		datetimearr[i][1][1] = moment(datetimearr[i][1][1], ["HH:mm"]).format("h:mm A");
+	}
+	//console.log(datetimearr[0][0]);
+	for(var i = 0; i<datetimearr.length;i++){
+		//console.log(datetimearr[i][0]);
+		if(dtmap.has(String(datetimearr[i][1]))){
+			console.log(datetimearr[i][0]);
+			dtmap.set(String(datetimearr[i][1]),dtmap.get(String(datetimearr[i][1]))+datetimearr[i][0]);
+		}
+		else{
+			console.log(datetimearr[i][0]);
+			dtmap.set(String(datetimearr[i][1]),datetimearr[i][0]);
+		}
+	}
+	var output="";
+	var timearr = Array.from(dtmap.keys());
+	var dayarr =  Array.from(dtmap.values());
+	console.log(timearr);
+	console.log(dayarr);
+	for(var i = 0; i<dayarr.length;i++){
+		output += "<span style='font-size:medium'>"+dayarr[i]+"</span>: <span style='float:right'>"+timearr[i].split(",")[0]+" to "+timearr[i].split(",")[1]+"</span><br>";
+	}
+	return output;
+}
+
+
 function clear(){
 	chrome.storage.sync.set({savedCourses: []});
 	console.log("cleared");
-	$("#courseList").fadeOut(300);	
+	$("#courseList").fadeOut(300,function(){
+			$("#empty").show();
+
+	});	
 }
 function update(){
 

styles.css

@@ -152,4 +152,46 @@
 
 .matbut:focus:not(:active)::after {
   animation: ripple 1s ease-out;
+}
+
+#snackbar {
+    visibility: hidden;
+    min-width: 250px; 
+    margin-left: -125px; 
+    background-color: #333;
+    color: #fff; 
+    text-align: center; 
+    border-radius: 2px; 
+    padding: 16px; 
+    position: fixed; 
+    z-index: 1; 
+    left: 50%; 
+    bottom: 30px;
+}
+
+#snackbar.show {
+    visibility: visible; 
+
+    -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;}
+}
+
+@keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
 }

todo

@@ -9,6 +9,9 @@ TODO as of 7/10/18:
 - underline Courses maybe? click to go to using the planner link thing
 - schedule generator
 - show schedule conflicts on the course page
+-highlight in red on save course screen
+- sync saved
+-use maps for schedule conflict
 -added/removing/action toasts
 
 CLEAN UP:
@@ -41,3 +44,4 @@ FIXED/DONE as of 7/10/18:
 - popup.html
 - Schedule Conflicts
 - when almost everything is blank: M 379H as example
+