can import and export courses w/ json file

This commit is contained in:
sghsri
2018-12-11 17:36:17 -06:00
parent b4f19a0c61
commit 0eb7c9b949
3 changed files with 176 additions and 46 deletions

View File

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

View File

@@ -1,50 +1,45 @@
var courses; var courses;
// get the courses from storage // get the courses from storage
chrome.storage.sync.get('savedCourses', function (data) {
//find, build, and show the messages for the conflicts in the saved courses setCourseList();
chrome.runtime.sendMessage({
command: "checkConflicts" // 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>';
}, function (response) { // $("#html").prepend(modhtml);
var isConflicted = [];
if (response.isConflict) { function setCourseList(){
var between = response.between; $("#courseList").empty()
var text = ""; chrome.storage.sync.get('savedCourses', function (data) {
for (var i = 0; i < between.length; i++) { updateConflicts();
text += "CONFLICT: " + getSimpleName(between[i][0].coursename, between[i][0].unique) + " and " + getSimpleName(between[i][1].coursename, between[i][1].unique); courses = data.savedCourses
isConflicted.push(between[i][0].unique); if (courses.length != 0) {
isConflicted.push(between[i][1].unique); $("#empty").hide();
if (i != between.length - 1) { $("#courseList").show();
text += "<br>";
} } else{
$("#empty").show();
}
// build and append the course list element
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 = "#FF5722";
} }
$("#courseList").prepend("<p style='font-size:small; font-weight:bold; color:red; margin:5px 5px 5px 10px'>" + text + "</>"); 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 = prettifyName(courses[i].profname);
if (profname == "") {
profname = "Undecided Professor";
}
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 class='truncate' style='color:white;margin:5px; display:inline-block;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><p id='arrow' style='float:right;font-size:small;display:inline-block;margin-top:10px;color:white;'>&#9658;</p></div></div><div id='moreInfo' style='display: none;'><p style='font-weight:bold;padding:10px;margin:0px 5px 0px 15px;font-size:small;background-color:#FFCDD2;'>" + makeLine(i) + "</p><div id='infoButtons' style='border-radius:0px;'><button class='matbut' id='listRemove'style='float:right;background:#F44336; margin:5px;'>Remove</button><button class='matbut' id='register' style='float:right;background:#4CAF50; margin:5px;'>Register</button><button class='matbut' id='listMoreInfo' style='float:right;background:#2196F3; margin:5px;'>More Info</button></div></div></li>";
$("#courseList").append(listhtml);
} }
}); });
courses = data.savedCourses; }
if (courses.length != 0) {
$("#empty").hide();
}
// build and append the course list element
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 = "#FF5722";
}
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 = prettifyName(courses[i].profname);
if (profname == "") {
profname = "Undecided Professor";
}
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 class='truncate' style='color:white;margin:5px; display:inline-block;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><p id='arrow' style='float:right;font-size:small;display:inline-block;margin-top:10px;color:white;'>&#9658;</p></div></div><div id='moreInfo' style='display: none;'><p style='font-weight:bold;padding:10px;margin:0px 5px 0px 15px;font-size:small;background-color:#FFCDD2;'>" + makeLine(i) + "</p><div id='infoButtons' style='border-radius:0px;'><button class='matbut' id='listRemove'style='float:right;background:#F44336; margin:5px;'>Remove</button><button class='matbut' id='register' style='float:right;background:#4CAF50; margin:5px;'>Register</button><button class='matbut' id='listMoreInfo' style='float:right;background:#2196F3; margin:5px;'>More Info</button></div></div></li>";
$("#courseList").append(listhtml);
}
});
/* prettify the name for the conflict messages*/ /* prettify the name for the conflict messages*/
function getSimpleName(coursename, unique) { function getSimpleName(coursename, unique) {
@@ -84,7 +79,7 @@ function updateConflicts() {
/* Handle the button clicks */ /* Handle the button clicks */
$(document).ready(function () { $(document).ready(function () {
$("#courseList li").click(function () { $("#courseList").on('click', 'li', function () {
$(this).find("#listMoreInfo").click(function () { $(this).find("#listMoreInfo").click(function () {
window.open(courses[$(this).closest("li").attr("id")].link); window.open(courses[$(this).closest("li").attr("id")].link);
}); });
@@ -153,6 +148,41 @@ $(document).ready(function () {
'url': 'https://registrar.utexas.edu/schedules' '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 () { $("#open").click(function () {
chrome.tabs.create({ chrome.tabs.create({
'url': "options.html" '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*/ /* convert from the dtarr and maek the time lines*/
function makeLine(index) { function makeLine(index) {
var datetimearr = courses[index].datetimearr; var datetimearr = courses[index].datetimearr;
@@ -239,6 +309,7 @@ function clear() {
}); });
} }
}); });
$("#courseList").empty()
console.log("cleared"); console.log("cleared");
$("#courseList").fadeOut(300, function () { $("#courseList").fadeOut(300, function () {
$("#empty").fadeIn(200); $("#empty").fadeIn(200);

View File

@@ -24,10 +24,32 @@
<span style="font-size: small;display:table;margin:0 auto;font-weight: bold">(No Courses Saved)</span> <span style="font-size: small;display:table;margin:0 auto;font-weight: bold">(No Courses Saved)</span>
</h2> </h2>
<div style=" margin-bottom: 0px; display:inline-block"></div> <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"> <i style='color:#FF9800' class="material-icons">
settings settings
</i></button> </i></button>
</div>
</div> </div>
<script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script>