can import and export courses w/ json file

css/popup.css

@@ -26,14 +26,17 @@ body {
 }
 
 .settingsbut {
+    margin-right: 0px;
+    border: 0px
+}
+
+.settings {
     position: absolute;
     bottom: 0;
     right: 0;
     float: right;
     margin-right: 5px;
-    border: 0px
 }
-
 .matbut {
     border: none;
     outline: none;
@@ -88,6 +91,40 @@ body {
     transform-origin: 50% 50%;
 }
 
+.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);
+}
+
+.modal-content {
+    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;
+}
+
+
 @keyframes ripple {
     0% {
         transform: scale(0, 0);

js/popup.js

@@ -1,28 +1,22 @@
 var courses;
 // get the courses from storage
+
+setCourseList();
+
+	// var modhtml = '<div class=modal id=myModal><div class=modal-content><span class=close>×</span><div class=card><div class=cardcontainer></div></div></div></div>';
+	// $("#html").prepend(modhtml);
+
+function setCourseList(){
+	$("#courseList").empty()
 	chrome.storage.sync.get('savedCourses', function (data) {
-	//find, build, and show the messages for the conflicts in the saved courses
+		updateConflicts();
-	chrome.runtime.sendMessage({
+		courses = data.savedCourses
-		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: " + 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>";
-				}
-			}
-			$("#courseList").prepend("<p style='font-size:small; font-weight:bold; color:red; margin:5px 5px 5px 10px'>" + text + "</>");
-		}
-	});
-	courses = data.savedCourses;
 		if (courses.length != 0) {
 			$("#empty").hide();
+			$("#courseList").show();
+
+		} else{
+			$("#empty").show();
 		}
 		// build and append the course list element
 		for (var i = 0; i < courses.length; i++) {
@@ -45,6 +39,7 @@ chrome.storage.sync.get('savedCourses', function (data) {
 			$("#courseList").append(listhtml);
 		}
 	});
+}
 
 /* prettify the name for the conflict messages*/
 function getSimpleName(coursename, unique) {
@@ -84,7 +79,7 @@ function updateConflicts() {
 
 /* Handle the button clicks */
 $(document).ready(function () {
-	$("#courseList li").click(function () {
+	$("#courseList").on('click', 'li', function () {
 		$(this).find("#listMoreInfo").click(function () {
 			window.open(courses[$(this).closest("li").attr("id")].link);
 		});
@@ -153,6 +148,41 @@ $(document).ready(function () {
 			'url': 'https://registrar.utexas.edu/schedules'
 		});
 	});
+
+	$("#impexp").click(function(){
+		if($("#impexp>i").text() == 'close'){
+			$(".settings").find('#import').remove();
+			$(".settings").find('#export').remove();
+			$("#impexp>i").text('import_export');
+		} else{
+			$("#impexp>i").text('close');
+			$(".settings").prepend(`
+		    </button><button title='Import' style="background-color:white;" class="settingsbut" id='import'>
+		      <i style='color:#FF9800' class="material-icons">
+		        arrow_upward
+		      </i>
+		    </button>
+		    <button title='Export' style="background-color:white;" class="settingsbut" id='export'>
+		      <i style='color:#FF9800' class="material-icons">
+		        arrow_downward
+		      </i>
+		    </button>
+		    `);
+		}
+	})
+	$(".settings").on('click', '#import', function () {
+		$("#importOrig").click();
+	});
+	$(".settings").on('click', '#export',function () {
+		chrome.storage.sync.get('savedCourses', function (data) {
+			var exportArray = JSON.stringify(data.savedCourses, null, 4);
+			var exportlink = document.createElement('a');
+			var url = window.URL.createObjectURL(new Blob([exportArray], {type: "octet/stream"}));
+			exportlink.setAttribute('href', url);
+			exportlink.setAttribute('download', 'my_courses.json' );
+			exportlink.click();			
+		});
+	});
 	$("#open").click(function () {
 		chrome.tabs.create({
 			'url': "options.html"
@@ -165,6 +195,46 @@ $(document).ready(function () {
 	});
 });
 
+$("#importOrig").change(function(e){
+	var files = e.target.files;
+	var reader = new FileReader();
+  	reader.onload = function(){
+  		try{
+			var impCourses = JSON.parse(this.result);
+			console.log(impCourses);
+			if(impCourses && impCourses.length && (impCourses.length == 0 || validateObject(impCourses))){
+				chrome.storage.sync.set({
+					savedCourses: impCourses
+				});
+				chrome.tabs.query({}, function (tabs) {
+					for (var i = 0; i < tabs.length; i++) {
+						chrome.tabs.sendMessage(tabs[i].id, {
+							command: "updateCourseList"
+						});
+					}
+				});
+				setCourseList(impCourses);
+			}
+		} catch(err){
+
+		}
+		importOrig.value = ''; //make sure to clear input value after every import
+  	}
+  	reader.readAsText(files[0]);
+}); 
+
+function validateObject(impCourses){
+	for(var i = 0; i<impCourses.length; i++){
+		var course = impCourses[i];
+		var isValid = course["coursename"] && course["datetimearr"] && course["link"] && course["profname"] && course["status"] && course["unique"];
+		console.log(isValid);
+		if(!isValid){
+			return false;
+		}
+	}
+	return true;
+}
+
 /* convert from the dtarr and maek the time lines*/
 function makeLine(index) {
 	var datetimearr = courses[index].datetimearr;
@@ -239,6 +309,7 @@ function clear() {
 			});
 		}
 	});
+	$("#courseList").empty()
 	console.log("cleared");
 	$("#courseList").fadeOut(300, function () {
 		$("#empty").fadeIn(200);

popup.html

@@ -24,10 +24,32 @@
       <span style="font-size: small;display:table;margin:0 auto;font-weight: bold">(No Courses Saved)</span>
     </h2>
     <div style=" margin-bottom: 0px; display:inline-block"></div>
-    <button title='Options' style="background-color:white;" class="settingsbut" id='open'>
+    <input type="file" id="importOrig" accept=".json" style="display:none"/>
+
+    <div class="settings">
+<!--        <button title='Import' style="background-color:white;" class="settingsbut" id='import'>
+      <i style='color:#FF9800' class="material-icons">
+        arrow_upward
+      </i></button>
+      <button title='Export' style="background-color:white;" class="settingsbut" id='export'>
+      <i style='color:#FF9800' class="material-icons">
+        arrow_downward
+      </i>
+    </button> -->
+          <button title='Import/Export' style="background-color:white;" class="settingsbut" id='impexp'>
+      <i style='color:#FF9800' class="material-icons">
+        import_export
+      </i>
+    </button> 
+
+    <button title='Options' style="background-color:white; margin-right: 0px;" class="settingsbut" id='open'>
       <i style='color:#FF9800' class="material-icons">
         settings
       </i></button>
+
+    </div>
+
+
   </div>
 
   <script src="js/jquery-3.3.1.min.js"></script>