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

seperate template into classes

Browse Source
This commit is contained in:
Sriram Hariharan
2019-08-13 14:55:09 -05:00
parent c72931d0ed
commit e4e3898a67
5 changed files with 145 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
js/Template.js
View File

@@ -1,140 +1,147 @@
class Template {
static mainModal() {
return `<div class=modal id=myModal>
<div class=modal-content>
<span class=close>×</span>
<div class=card>
<div class=cardcontainer>
<h2 class=title id="title">Computer Fluency (C S 302)</h2>
<h2 class=profname id="profname">with Bruce Porter</h2>
<div id="topbuttons" 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="textbook" style="background: #FFC107;"> Textbook </button>
<button class=matbut id="Syllabi"> Past Syllabi </button>
<button class=matbut id="saveCourse" style="background: #F44336;"> Save Course +</button>
</div>
</div>
</div>
static Main = class Main {
static modal() {
return `<div class=modal id=myModal>
<div class=modal-content>
<span class=close>×</span>
<div class=card>
<div class=cardcontainer style="">
<div class="chartloader">
<div class="loader" id='descload'></div>
<div class=cardcontainer>
<h2 class=title id="title">Computer Fluency (C S 302)</h2>
<h2 class=profname id="profname">with Bruce Porter</h2>
<div id="topbuttons" 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="textbook" style="background: #FFC107;"> Textbook </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="">
<div class="chartloader">
<div class="loader" id='descload'></div>
</div>
<ul class=description id="description" style="list-style-type:disc"></ul>
</div>
</div>
<div class=card style='text-align:center'>
<select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
</select>
<div class="chartloader">
<div class="loader" id='chartload'></div>
</div>
<div id="chartcontainer" class=cardcontainer>
<div id=chart></div>
</div>
<ul class=description id="description" style="list-style-type:disc"></ul>
</div>
</div>
<div class=card style='text-align:center'>
<select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
</select>
<div class="chartloader">
<div class="loader" id='chartload'></div>
</div>
<div id="chartcontainer" class=cardcontainer>
<div id=chart></div>
</div>
</div>
</div>
</div>`
}
static catalogLoading() {
return `<div style="text-align:center">
<div class="loader" id='loader'></div>
<br>
<h1 id="nextlabel"style="color: #FF9800;display:none;">Loading Courses</h1>
<h1 id="retrylabel"style="color: #F44336;display:none;">Failed to Load Courses</h1>
<br>
<button class=matbut id="retry" style="background: #F44336;display:none;">Retry</button>
</div>`
}
static extensionButton() {
return `<td data-th="Plus"><input type="image" class="distButton" id="distButton" width="20" height="20" src='${chrome.extension.getURL('images/disticon.png')}'/></td>`
</div>`
}
static extension_button() {
return `<td data-th="Plus"><input type="image" class="distButton" id="distButton" width="20" height="20" src='${chrome.extension.getURL('images/disticon.png')}'/></td>`
}
}
static calendarLine(line) {
let {
days,
start_time,
end_time,
location_link,
location_full
} = line;
return `<p class='time' style='font-size:large;'>
<span style='display:inline-block;'>${days}:</span>
<span style='margin-left:10px;display:inline-block;text-align:center;'>${start_time} to ${end_time}</span>
static Catalog = class Catalog {
static loading() {
return `<div style="text-align:center">
<div class="loader" id='loader'></div>
<br>
<h1 id="nextlabel"style="color: #FF9800;display:none;">Loading Courses</h1>
<h1 id="retrylabel"style="color: #F44336;display:none;">Failed to Load Courses</h1>
<br>
<button class=matbut id="retry" style="background: #F44336;display:none;">Retry</button>
</div>`
}
}
static Calendar = class Calendar {
static line(line) {
let {
days,
start_time,
end_time,
location_link,
location_full
} = line;
return `<p class='time' style='font-size:large;'>
<span style='display:inline-block;'>${days}:</span>
<span style='margin-left:10px;display:inline-block;text-align:center;'>${start_time} to ${end_time}</span>
<span style='float:right;display:inline-block;text-align:right;width: 25%;'>
<a target='_blank' style='color:#3c87a3;text-decoration:none;'href='${location_link}'>${location_full}</a>
</span>
</p>`
}
static modal() {
return `<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="card">
<div id="colorStrip" style="height:10px;"></div>
<div class="cardcontainer">
<div id='header'>
<div style="display:flex;">
<h2 id="classname">Classname</h2>
</div>
<p id="prof">Prof</p>
</div>
<button id="info" class="matbut" style="font-size:medium; margin-right: auto; margin-left:auto; background: #2196F3;">More Info</button>
<button id="register" class="matbut" style="font-size:medium; margin-right: auto; margin-left:10px; background: #4CAF50;">Register</button>
<button id="remove" class="matbut" style="font-size:medium;margin:10px;background: #FF0000;">Remove</button>
</div>
</div>
</div>`
}
}
static Popup = class Popup {
static list_item(i, list_tile_color, unique, department, number, profname, list_sub_color, line) {
return `<li id='${i}'style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'>
<div class='card'>
<div class='container' style='background:${list_tile_color}'>
<button class='copybut' title='Copy Unique #' id='copybut' value='${unique}'>
<i style='color:white;float:left;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);font-size:x-large;' id='copyicon' class="material-icons copy">content_copy
</i>
</button>
<h4 class='truncate' style='color:white;margin:5px; display:inline-block;font-size:large;align-items:center;'>
<b>${department} ${number} <span style='font-size:medium'> with <span style='font-size:medium'>${profname} (${unique})</span></b>
</h4>
<p id='arrow' style='float:right;font-size:small;display:inline-block;margin-top:10px;color:white;font-family: sans-serif'>&#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:${list_sub_color};'>${line}</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>`;
}
static conflict_message(conflict_message) {
return `<p id='conflict' style='font-size:small; font-weight:bold; color:red; margin:5px 5px 5px 10px'>${conflict_message}</>`
}
static line(line) {
let {
days,
start_time,
end_time,
location_link,
location_full
} = line;
return `<span style='display:inline-block;width: 20%;'>${days}:</span>
<span style='margin-left:10px;display:inline-block;width: 50%;text-align:center;'>${start_time} to ${end_time}</span>
<span style='float:right;display:inline-block;text-align:right;width: 25%;'>
<a target='_blank' style='color:#3c87a3;text-decoration:none;'href='${location_link}'>${location_full}</a>
</span>
</p>`
}
static popupListItem(i, list_tile_color, unique, department, number, profname, list_sub_color, line) {
return `<li id='${i}'style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'>
<div class='card'>
<div class='container' style='background:${list_tile_color}'>
<button class='copybut' title='Copy Unique #' id='copybut' value='${unique}'>
<i style='color:white;float:left;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);font-size:x-large;' id='copyicon' class="material-icons copy">content_copy
</i>
</button>
<h4 class='truncate' style='color:white;margin:5px; display:inline-block;font-size:large;align-items:center;'>
<b>${department} ${number} <span style='font-size:medium'> with <span style='font-size:medium'>${profname} (${unique})</span></b>
</h4>
<p id='arrow' style='float:right;font-size:small;display:inline-block;margin-top:10px;color:white;font-family: sans-serif'>&#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:${list_sub_color};'>${line}</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>`;
}
static popupLine(line) {
let {
days,
start_time,
end_time,
location_link,
location_full
} = line;
return `<span style='display:inline-block;width: 20%;'>${days}:</span>
<span style='margin-left:10px;display:inline-block;width: 50%;text-align:center;'>${start_time} to ${end_time}</span>
<span style='float:right;display:inline-block;text-align:right;width: 25%;'>
<a target='_blank' style='color:#3c87a3;text-decoration:none;'href='${location_link}'>${location_full}</a>
</span>
<br>`
}
static calendarModal() {
return `<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="card">
<div id="colorStrip" style="height:10px;"></div>
<div class="cardcontainer">
<div id='header'>
<div style="display:flex;">
<h2 id="classname">Classname</h2>
</div>
<p id="prof">Prof</p>
</div>
<button id="info" class="matbut" style="font-size:medium; margin-right: auto; margin-left:auto; background: #2196F3;">More Info</button>
<button id="register" class="matbut" style="font-size:medium; margin-right: auto; margin-left:10px; background: #4CAF50;">Register</button>
<button id="remove" class="matbut" style="font-size:medium;margin:10px;background: #FF0000;">Remove</button>
</div>
</div>
</div>`
}
static popupConflictMessage(conflict_message) {
return `<p id='conflict' style='font-size:small; font-weight:bold; color:red; margin:5px 5px 5px 10px'>${conflict_message}</>`
<br>`
}
}
}

4
js/calendar.js
View File

@@ -9,7 +9,7 @@ var {
var saved_courses = [];
var curr_course = {}
$("#calendar").after(Template.calendarModal());
$("#calendar").after(Template.Calendar.modal());
chrome.storage.sync.get("savedCourses", function (data) {
// Iterate through each saved course and add to 'event'
@@ -86,7 +86,7 @@ function buildTimeTitle(datetimearr) {
var output = "";
for (let i = 0; i < arr.length; i++) {
let line = arr[i];
output += Template.calendarLine(line);
output += Template.Calendar.line(line);
}
$("#header").after(`<div id='timelines'>${output}</div`);
}

8
js/courseCatalog.js
View File

@@ -40,15 +40,15 @@ if (document.querySelector('#fos_fl')) {
//make heading and modal
if (!$("#kw_results_table").length) {
$("table").after(Template.catalogLoading());
$("#container").prepend(Template.mainModal());
$("table").after(Template.Catalog.loading());
$("#container").prepend(Template.Main.modal());
$("#myModal").prepend("<div id='snackbar'>save course popup...</div>");
// now add to the table
$("table thead th:last-child").after('<th scope=col>Plus</th>');
$('table').find('tr').each(function () {
if (!($(this).find('td').hasClass("course_header")) && $(this).has('th').length == 0) {
$(this).append(Template.extensionButton());
$(this).append(Template.Main.extension_button());
}
});
}
@@ -442,7 +442,7 @@ function loadNextPages() {
next_page.find('tbody>tr').each(function () {
let has_course_header = $(this).find('td').hasClass("course_header");
if (!(has_course_header && $(this).has('th').length == 0))
$(this).append(Template.extensionButton());
$(this).append(Template.Main.extension_button());
if (!(has_course_header && last == $(this).find('td').text()))
new_rows.push($(this));
});

6
js/popup.js
View File

@@ -29,7 +29,7 @@ function setCourseList() {
number
} = seperateCourseNameParts(coursename)
let list_html = Template.popupListItem(i, list_tile_color, unique, department, number, profname, list_sub_color, line);
let list_html = Template.Popup.list_item(i, list_tile_color, unique, department, number, profname, list_sub_color, line);
$("#courseList").append(list_html);
}
});
@@ -44,7 +44,7 @@ function buildTimeLines(datetimearr) {
} else {
for (let i = 0; i < lines.length; i++) {
let line = lines[i];
output += Template.popupLine(line)
output += Template.Popup.line(line)
}
}
return output;
@@ -65,7 +65,7 @@ function updateConflicts() {
if (i != between.length - 1)
conflict_message += "<br>";
}
$(Template.popupConflictMessage(conflict_message)).prependTo("#courseList").hide().fadeIn(200);
$(Template.Popup.conflict_message(conflict_message)).prependTo("#courseList").hide().fadeIn(200);
}
});
}

4
js/utplanner.js
View File

@@ -2,12 +2,12 @@ if ($('html').hasClass('gr__utexas_collegescheduler_com')) {
$.initialize("table.section-detail-grid", function () {
$(this).find('thead>tr').append('<th> Plus</th')
$(this).find('tbody>tr').each(function () {
$(this).append(Template.extensionButton());
$(this).append(Template.Main.extension_button());
})
});
}
curr_course = {}
$("body").prepend(Template.mainModal());
$("body").prepend(Template.Main.modal());
$("body").on('click', '#distButton', function () {
var row = $(this).closest('tr');