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 {
opacity: 0;
border: none;

97
css/popup.css
View File

@@ -30,6 +30,7 @@ body {
border: 0px;
border-radius: 50%;
transition: 0.3s;
opacity: 0.5;
}
@@ -39,6 +40,7 @@ body {
.settingsbut:hover {
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 {
@@ -60,7 +62,6 @@ body {
transition: .2s;
}
.copybut:focus {
outline: 0;
}
@@ -75,33 +76,26 @@ body {
padding: 3px;
}
ul {
margin-bottom: 30px;
}
i {
padding: 4px 0px;
}
#header {
border-radius: 7px;
}
.settings {
position: absolute;
bottom: 0;
right: 0;
position: relative;
float: right;
display: flex;
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);
transition: 0.3s;
padding: 7px 5px 5px 7px;
margin-right: 2px;
margin-bottom: 3px;
margin: 0px 10px 10px 0px;
border-radius: 7px;
}
/* .settings:hover {
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 {
width: 80px;
border-radius: 5px;
color: #FF0000;
color: rgba(0, 0, 45, 0.48)
}
input:focus {
@@ -239,32 +232,90 @@ input[type=number]::-webkit-outer-spin-button {
margin: 0;
}
::placeholder {
color: #ffbd9a;
;
#search-popup {
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 {
border: 1.5px solid #FF0000;
width: 60px;
margin-right: 5px;
border: 1px solid #979797;
margin: 10px 0px;
border-radius: 5px;
overflow: hidden;
display: none;
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 {
padding: 5px 8px;
width: 130%;
border: none;
color: #FF0000;
color: rgba(0, 0, 45, 0.48);
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
appearance: none;
width: 120px;
word-break: normal;
-ms-word-break: normal;
overflow: visible;
}
.select-style select:focus {
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() {
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.",
@@ -123,7 +121,6 @@ function updateConflicts() {
/* Handle the button clicks */
$(document).ready(function () {
$("#courseList").on('mouseover', '.copybut', function () {
$(this).addClass('shadow');
}).on('mouseleave', '.copybut', function () {
@@ -241,16 +238,18 @@ $(document).ready(function () {
$("#search").click(function () {
if ($("#search>i").text() == 'close') {
$("#search>i").text('search');
$("#class_id").hide();
$("#class_id_input").hide();
$("#semcon").hide();
$("#semesters").hide();
$("#search-popup").addClass('hide');
// $(this).removeClass('selected');
} else {
$("#search>i").text('close');
$("#class_id").show();
$("#class_id_input").show();
$("#semesters").show();
$("#semcon").show();
$('#class_id').focus();
$('#class_id_input').focus();
$("#search-popup").removeClass('hide');
// $(this).addClass('selected');
}
});
@@ -272,24 +271,26 @@ $(document).ready(function () {
}
});
});
$("#class_id").on("keyup", function (e) {
if (e.keyCode == 13) {
var unique = $(this).val();
if (!isNaN(unique)) {
if (unique.length == 5) {
getInfo($("#semesters").find(":selected").val(), unique);
$("#class_id").val('');
return;
}
$("#search-class").click(() => {
var uniqueId = $("#class_id_input").val();
if (!isNaN(uniqueId)) {
if (uniqueId.length == 5) {
let selectedSemester = $("#semesters").find(":selected").val();
openCoursePage(selectedSemester, uniqueId);
$("#class_id_input").val('');
return;
}
alert("Invalid Input");
}
})
alert("Oops, check your input. Class IDs should have 5 digits!");
});
$("#open").click(function () {
chrome.tabs.create({
'url': "options.html"
});
});
$("#calendar").click(function () {
chrome.tabs.create({
'url': "calendar.html"
@@ -297,7 +298,6 @@ $(document).ready(function () {
});
});
$("#importOrig").change(function (e) {
var files = e.target.files;
var reader = new FileReader();
@@ -384,7 +384,6 @@ function makeLine(index) {
return output;
}
//find the location of a class given its days and timearrs.
function findLoc(day, timearr, datetimearr) {
for (let i = 0; i < datetimearr.length; i++) {
@@ -410,7 +409,6 @@ function fixDtl1(dtl1) {
return output;
}
/*Clear the list and the storage of courses*/
function clear() {
chrome.storage.sync.set({
@@ -439,17 +437,24 @@ function getSemesters() {
object.find('.callout2>ul>li>a').each(function (index) {
if (index < 2) {
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>`);
$.get($(this).attr('href'), function (response) {
if (response) {
var object = $('<div/>').html(response).contents();
// Check title of page and see if it matches semester name
var name = object.find(".page-title").text();
name = name.substring(name.lastIndexOf('|') + 1).trim();
name = name.split(" ")[0].substring(0, 2) + " " + name.split(" ")[1];
console.log(name);
name = name.split(" ")[0] + " " + name.split(" ")[1];
console.log('name:::: ' + name);
object.find('.gobutton>a').each(function () {
var semnum = $(this).attr('href').substring($(this).attr('href').lastIndexOf('/') + 1);
console.log('semnum:::: ' + semnum);
$("option").each(function () {
console.log($(this).text());
if ($(this).text() == name) {
@@ -467,7 +472,6 @@ function getSemesters() {
});
}
/*Course object for passing to background*/
function Course(coursename, unique, profname, datetimearr, status, link, registerlink) {
this.coursename = coursename;
@@ -479,41 +483,11 @@ function Course(coursename, unique, profname, datetimearr, status, link, registe
this.registerlink = registerlink;
}
function getInfo(sem, unique) {
function openCoursePage(sem, unique) {
var link = `https://utdirect.utexas.edu/apps/registrar/course_schedule/${sem}/${unique}/`;
var xhr = new XMLHttpRequest();
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.")
}
}
}
window.open(link);
}
/*For a row, get all the course information and add the date-time-lines*/
function getCourseObject(object, link) {
let coursename = object.find("#details h2").text();

89
popup.html
View File

@@ -7,7 +7,8 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body style="position:relative;">
<body>
<div class="card" id="header">
<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>
@@ -15,6 +16,7 @@
<button id="calendar" class="matbut" style="font-size:15px; background: #FF0000; margin:7px;">My Schedule</button>
</div>
</div>
<div>
<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">
@@ -24,45 +26,60 @@
</div>
<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>
<input type="file" id="importOrig" accept=".json" style="display:none" />
<div class="settings">
<div id='semcon' class="select-style">
<select id="semesters" style="display: none;margin-right: 5px; border-color: #FF0000; margin-top: 3px;">
</select>
</div>
<div style=" margin-bottom: 0px; display:inline-block"></div>
<input type="file" id="importOrig" accept=".json" style="display:none" />
<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>
<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'>
<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>
<button id="search-class" class="matbut">Search</button>
</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>
@@ -71,4 +88,4 @@
<script src="js/popup.js"></script>
</body>
</html>
</html>