DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated UI for search and cleaned up stuff

Browse Source
This commit is contained in:
Kevin Dao
2019-08-03 18:19:08 -05:00
parent becb70be12
commit e916b6faab
4 changed files with 157 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/_materialFullCalendar.css
View File

@@ -37,8 +37,6 @@ 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 { .fc-state-highlight {
opacity: 0; opacity: 0;
border: none; border: none;

97
css/popup.css
View File

@@ -30,6 +30,7 @@ body {
border: 0px; border: 0px;
border-radius: 50%; border-radius: 50%;
transition: 0.3s; transition: 0.3s;
opacity: 0.5;
} }
@@ -39,6 +40,7 @@ body {
.settingsbut:hover { .settingsbut:hover {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 15px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 15px 0 rgba(0, 0, 0, 0.12);
opacity: 1;
} }
.selected { .selected {
@@ -60,7 +62,6 @@ body {
transition: .2s; transition: .2s;
} }
.copybut:focus { .copybut:focus {
outline: 0; outline: 0;
} }
@@ -75,33 +76,26 @@ body {
padding: 3px; padding: 3px;
} }
ul {
margin-bottom: 30px;
}
i { i {
padding: 4px 0px; padding: 4px 0px;
} }
#header { #header {
border-radius: 7px; border-radius: 7px;
} }
.settings { .settings {
position: absolute; position: relative;
bottom: 0;
right: 0;
float: right; float: right;
display: flex; display: flex;
vertical-align: middle; vertical-align: middle;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 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; transition: 0.3s;
padding: 7px 5px 5px 7px; padding: 7px 5px 5px 7px;
margin-right: 2px; margin: 0px 10px 10px 0px;
margin-bottom: 3px;
border-radius: 7px; border-radius: 7px;
} }
/* .settings:hover { /* .settings: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);
} */ } */
@@ -222,9 +216,8 @@ i {
input { input {
width: 80px;
border-radius: 5px; border-radius: 5px;
color: #FF0000; color: rgba(0, 0, 45, 0.48)
} }
input:focus { input:focus {
@@ -239,32 +232,90 @@ input[type=number]::-webkit-outer-spin-button {
margin: 0; margin: 0;
} }
::placeholder { #search-popup {
color: #ffbd9a; background: white;
; color: #747474;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
position: absolute;
margin: auto;
bottom: 42px;
right: 20px;
padding: 10px;
border-radius: inherit;
width: 120px;
}
.flex-container {
display: flex;
flex-direction: column;
}
.item {
flex: 1 1 auto;
} }
.select-style { .select-style {
border: 1.5px solid #FF0000; border: 1px solid #979797;
width: 60px; margin: 10px 0px;
margin-right: 5px;
border-radius: 5px; border-radius: 5px;
overflow: hidden;
display: none; display: none;
background: transparent no-repeat 90% 50%; background: transparent no-repeat 90% 50%;
position: relative;
}
.select-style:after {
content: '\e5c5';
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
color: rgba(0, 0, 45, 0.48);
position: absolute;
pointer-events: none;
bottom: 0px;
right: 0px;
} }
.select-style select { .select-style select {
padding: 5px 8px; padding: 5px 8px;
width: 130%;
border: none; border: none;
color: #FF0000; color: rgba(0, 0, 45, 0.48);
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
background-image: none; background-image: none;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none;
width: 120px;
word-break: normal;
-ms-word-break: normal;
overflow: visible;
} }
.select-style select:focus { .select-style select:focus {
outline: none; outline: none;
} }
#class_id_input {
display: none;
border: 1px solid #979797;
border-radius: 5px;
margin: 10px 0px;
padding: 5px 8px;
}
#class_id_input::placeholder {
color: rgba(0, 0, 45, 0.48);
}
#search-class {
float: right;
font-size: inherit;
padding: 7px 11px;
margin: 8px 0px;
}
.hide {
display: none !important;
}

86
js/popup.js
View File

@@ -68,8 +68,6 @@ function setCourseList() {
}); });
} }
function showEmpty() { function showEmpty() {
var emptyText = ["Doesn't Look Like Anything To Me.", "You Can't Fail Classes You're Not In.", "Pro-Tip: Don't Take O-Chem.", var emptyText = ["Doesn't Look Like Anything To Me.", "You Can't Fail Classes You're Not In.", "Pro-Tip: Don't Take O-Chem.",
"No Work Happens On PCL 5th Floor.", "Sophomore But Freshman By Credit.", "Pain is temporary, GPA is forever.", "No Work Happens On PCL 5th Floor.", "Sophomore But Freshman By Credit.", "Pain is temporary, GPA is forever.",
@@ -123,7 +121,6 @@ function updateConflicts() {
/* Handle the button clicks */ /* Handle the button clicks */
$(document).ready(function () { $(document).ready(function () {
$("#courseList").on('mouseover', '.copybut', function () { $("#courseList").on('mouseover', '.copybut', function () {
$(this).addClass('shadow'); $(this).addClass('shadow');
}).on('mouseleave', '.copybut', function () { }).on('mouseleave', '.copybut', function () {
@@ -241,16 +238,18 @@ $(document).ready(function () {
$("#search").click(function () { $("#search").click(function () {
if ($("#search>i").text() == 'close') { if ($("#search>i").text() == 'close') {
$("#search>i").text('search'); $("#search>i").text('search');
$("#class_id").hide(); $("#class_id_input").hide();
$("#semcon").hide(); $("#semcon").hide();
$("#semesters").hide(); $("#semesters").hide();
$("#search-popup").addClass('hide');
// $(this).removeClass('selected'); // $(this).removeClass('selected');
} else { } else {
$("#search>i").text('close'); $("#search>i").text('close');
$("#class_id").show(); $("#class_id_input").show();
$("#semesters").show(); $("#semesters").show();
$("#semcon").show(); $("#semcon").show();
$('#class_id').focus(); $('#class_id_input').focus();
$("#search-popup").removeClass('hide');
// $(this).addClass('selected'); // $(this).addClass('selected');
} }
}); });
@@ -272,24 +271,26 @@ $(document).ready(function () {
} }
}); });
}); });
$("#class_id").on("keyup", function (e) {
if (e.keyCode == 13) { $("#search-class").click(() => {
var unique = $(this).val(); var uniqueId = $("#class_id_input").val();
if (!isNaN(unique)) { if (!isNaN(uniqueId)) {
if (unique.length == 5) { if (uniqueId.length == 5) {
getInfo($("#semesters").find(":selected").val(), unique); let selectedSemester = $("#semesters").find(":selected").val();
$("#class_id").val(''); openCoursePage(selectedSemester, uniqueId);
return; $("#class_id_input").val('');
} return;
} }
alert("Invalid Input");
} }
}) alert("Oops, check your input. Class IDs should have 5 digits!");
});
$("#open").click(function () { $("#open").click(function () {
chrome.tabs.create({ chrome.tabs.create({
'url': "options.html" 'url': "options.html"
}); });
}); });
$("#calendar").click(function () { $("#calendar").click(function () {
chrome.tabs.create({ chrome.tabs.create({
'url': "calendar.html" 'url': "calendar.html"
@@ -297,7 +298,6 @@ $(document).ready(function () {
}); });
}); });
$("#importOrig").change(function (e) { $("#importOrig").change(function (e) {
var files = e.target.files; var files = e.target.files;
var reader = new FileReader(); var reader = new FileReader();
@@ -384,7 +384,6 @@ function makeLine(index) {
return output; return output;
} }
//find the location of a class given its days and timearrs. //find the location of a class given its days and timearrs.
function findLoc(day, timearr, datetimearr) { function findLoc(day, timearr, datetimearr) {
for (let i = 0; i < datetimearr.length; i++) { for (let i = 0; i < datetimearr.length; i++) {
@@ -410,7 +409,6 @@ function fixDtl1(dtl1) {
return output; return output;
} }
/*Clear the list and the storage of courses*/ /*Clear the list and the storage of courses*/
function clear() { function clear() {
chrome.storage.sync.set({ chrome.storage.sync.set({
@@ -439,17 +437,24 @@ function getSemesters() {
object.find('.callout2>ul>li>a').each(function (index) { object.find('.callout2>ul>li>a').each(function (index) {
if (index < 2) { if (index < 2) {
if ($(this).text() != "Course Schedule Archive") { if ($(this).text() != "Course Schedule Archive") {
var semname = $(this).text().split(" ")[0].substring(0, 2) + " " + $(this).text().split(" ")[1]; const semester = $(this).text().split(" ")[0];
const year = $(this).text().split(" ")[1]
let semname = semester + " " + year;
console.log('semname:::: ' + semname);
$("#semesters").append(`<option>${semname}</option>`); $("#semesters").append(`<option>${semname}</option>`);
$.get($(this).attr('href'), function (response) { $.get($(this).attr('href'), function (response) {
if (response) { if (response) {
var object = $('<div/>').html(response).contents(); var object = $('<div/>').html(response).contents();
// Check title of page and see if it matches semester name
var name = object.find(".page-title").text(); var name = object.find(".page-title").text();
name = name.substring(name.lastIndexOf('|') + 1).trim(); name = name.substring(name.lastIndexOf('|') + 1).trim();
name = name.split(" ")[0].substring(0, 2) + " " + name.split(" ")[1]; name = name.split(" ")[0] + " " + name.split(" ")[1];
console.log(name);
console.log('name:::: ' + name);
object.find('.gobutton>a').each(function () { object.find('.gobutton>a').each(function () {
var semnum = $(this).attr('href').substring($(this).attr('href').lastIndexOf('/') + 1); var semnum = $(this).attr('href').substring($(this).attr('href').lastIndexOf('/') + 1);
console.log('semnum:::: ' + semnum);
$("option").each(function () { $("option").each(function () {
console.log($(this).text()); console.log($(this).text());
if ($(this).text() == name) { if ($(this).text() == name) {
@@ -467,7 +472,6 @@ function getSemesters() {
}); });
} }
/*Course object for passing to background*/ /*Course object for passing to background*/
function Course(coursename, unique, profname, datetimearr, status, link, registerlink) { function Course(coursename, unique, profname, datetimearr, status, link, registerlink) {
this.coursename = coursename; this.coursename = coursename;
@@ -479,41 +483,11 @@ function Course(coursename, unique, profname, datetimearr, status, link, registe
this.registerlink = registerlink; this.registerlink = registerlink;
} }
function openCoursePage(sem, unique) {
function getInfo(sem, unique) {
var link = `https://utdirect.utexas.edu/apps/registrar/course_schedule/${sem}/${unique}/`; var link = `https://utdirect.utexas.edu/apps/registrar/course_schedule/${sem}/${unique}/`;
var xhr = new XMLHttpRequest(); window.open(link);
xhr.open("GET", link, false);
xhr.send();
var response = xhr.responseText;
if (response) {
var output = "";
var object = $('<div/>').html(response).contents();
console.log(object.find('.error').text());
if (object.find('.error').text().trim() == 'No class was found for your input.') {
window.confirm(`Could not find a course with unique number: ${unique}`);
} else {
var c = getCourseObject(object, link);
console.log(c);
if (c.coursename) {
chrome.runtime.sendMessage({
command: "courseStorage",
course: c,
action: "add"
}, function () {
chrome.runtime.sendMessage({
command: "updateCourseList"
});
setCourseList();
});
} else {
window.confirm("There Was An Error. Please check if you are logged into Utexas.")
}
}
}
} }
/*For a row, get all the course information and add the date-time-lines*/ /*For a row, get all the course information and add the date-time-lines*/
function getCourseObject(object, link) { function getCourseObject(object, link) {
let coursename = object.find("#details h2").text(); let coursename = object.find("#details h2").text();

87
popup.html
View File

@@ -7,7 +7,8 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body style="position:relative;"> <body>
<div class="card" id="header"> <div class="card" id="header">
<div id="buttons" style="padding: 5px 10px 5px 10px;display: flex;justify-content: space-between;"> <div id="buttons" style="padding: 5px 10px 5px 10px;display: flex;justify-content: space-between;">
<button id="clear" class="matbut" style="font-size:15px; background:#4CAF50;margin: 7px;">Clear All</button> <button id="clear" class="matbut" style="font-size:15px; background:#4CAF50;margin: 7px;">Clear All</button>
@@ -15,6 +16,7 @@
<button id="calendar" class="matbut" style="font-size:15px; background: #FF0000; margin:7px;">My Schedule</button> <button id="calendar" class="matbut" style="font-size:15px; background: #FF0000; margin:7px;">My Schedule</button>
</div> </div>
</div> </div>
<div> <div>
<ul id="courseList" style="list-style-type: none;padding: 5px;"></ul> <ul id="courseList" style="list-style-type: none;padding: 5px;"></ul>
<h2 id="empty" style="font-weight: normal;font-size: large;margin: 60px 30px 40px 30px ;text-align: center"> <h2 id="empty" style="font-weight: normal;font-size: large;margin: 60px 30px 40px 30px ;text-align: center">
@@ -24,45 +26,60 @@
</div> </div>
<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>
<input type="file" id="importOrig" accept=".json" style="display:none" />
<div class="settings"> <div style=" margin-bottom: 0px; display:inline-block"></div>
<div id='semcon' class="select-style"> <input type="file" id="importOrig" accept=".json" style="display:none" />
<select id="semesters" style="display: none;margin-right: 5px; border-color: #FF0000; margin-top: 3px;">
</select> <div class="settings">
<button title='Search' style="background-color:white;margin-left: 5px;margin-right: 3px;" class="settingsbut"
id='search'>
<i style='color:#FF9800' class="material-icons">
search
</i>
</button>
<div id="search-popup" class="hide">
<div class="flex-container">
<div id='semcon' class="select-style item">
<label>
<select id="semesters"></select>
</label>
</div>
<input type="text" id="class_id_input" class="item" name="class_id" maxlength="5"
placeholder="Course ID #"></input>
</div> </div>
<input type="text" id="class_id" name="class_id" maxlength="5" style="display:none;text-indent: 10px;border-style: solid; border-color:#FF0000;"
placeholder="Unique #?"></input>
<button title='Search' style="background-color:white;margin-left: 5px;margin-right: 3px;" class="settingsbut" id='search'> <button id="search-class" class="matbut">Search</button>
<i style='color:#FF9800' class="material-icons">
search
</i>
</button>
<button title='Export' style="background-color:white; display:none;" class="settingsbut" id='export'>
<i style='color:#FF0000' class="material-icons">
arrow_downward
</i>
</button>
<button title='Import' style="background-color:white; display:none;" class="settingsbut" id='import'>
<i style='color:#FF0000' ; class="material-icons">
arrow_upward
</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>
<button title='Export' style="background-color:white; display:none;" class="settingsbut" id='export'>
<i style='color:#FF0000' class="material-icons">
arrow_downward
</i>
</button>
<button title='Import' style="background-color:white; display:none;" class="settingsbut" id='import'>
<i style='color:#FF0000' ; class="material-icons">
arrow_upward
</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>