seperate template into classes
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
class Template {
|
class Template {
|
||||||
static mainModal() {
|
static Main = class Main {
|
||||||
|
static modal() {
|
||||||
return `<div class=modal id=myModal>
|
return `<div class=modal id=myModal>
|
||||||
<div class=modal-content>
|
<div class=modal-content>
|
||||||
<span class=close>×</span>
|
<span class=close>×</span>
|
||||||
@@ -37,7 +38,13 @@ class Template {
|
|||||||
</div>
|
</div>
|
||||||
</div>`
|
</div>`
|
||||||
}
|
}
|
||||||
static catalogLoading() {
|
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 Catalog = class Catalog {
|
||||||
|
static loading() {
|
||||||
return `<div style="text-align:center">
|
return `<div style="text-align:center">
|
||||||
<div class="loader" id='loader'></div>
|
<div class="loader" id='loader'></div>
|
||||||
<br>
|
<br>
|
||||||
@@ -47,11 +54,11 @@ class Template {
|
|||||||
<button class=matbut id="retry" style="background: #F44336;display:none;">Retry</button>
|
<button class=matbut id="retry" style="background: #F44336;display:none;">Retry</button>
|
||||||
</div>`
|
</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>`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static calendarLine(line) {
|
|
||||||
|
static Calendar = class Calendar {
|
||||||
|
static line(line) {
|
||||||
let {
|
let {
|
||||||
days,
|
days,
|
||||||
start_time,
|
start_time,
|
||||||
@@ -67,8 +74,30 @@ class Template {
|
|||||||
</span>
|
</span>
|
||||||
</p>`
|
</p>`
|
||||||
}
|
}
|
||||||
|
static modal() {
|
||||||
|
return `<div id="myModal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="close">×</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 popupListItem(i, list_tile_color, unique, department, number, profname, list_sub_color, line) {
|
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;'>
|
return `<li id='${i}'style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'>
|
||||||
<div class='card'>
|
<div class='card'>
|
||||||
<div class='container' style='background:${list_tile_color}'>
|
<div class='container' style='background:${list_tile_color}'>
|
||||||
@@ -93,7 +122,11 @@ class Template {
|
|||||||
</li>`;
|
</li>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
static popupLine(line) {
|
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 {
|
let {
|
||||||
days,
|
days,
|
||||||
start_time,
|
start_time,
|
||||||
@@ -109,32 +142,6 @@ class Template {
|
|||||||
</span>
|
</span>
|
||||||
<br>`
|
<br>`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
static calendarModal() {
|
|
||||||
return `<div id="myModal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<span class="close">×</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}</>`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -9,7 +9,7 @@ var {
|
|||||||
var saved_courses = [];
|
var saved_courses = [];
|
||||||
var curr_course = {}
|
var curr_course = {}
|
||||||
|
|
||||||
$("#calendar").after(Template.calendarModal());
|
$("#calendar").after(Template.Calendar.modal());
|
||||||
|
|
||||||
chrome.storage.sync.get("savedCourses", function (data) {
|
chrome.storage.sync.get("savedCourses", function (data) {
|
||||||
// Iterate through each saved course and add to 'event'
|
// Iterate through each saved course and add to 'event'
|
||||||
@@ -86,7 +86,7 @@ function buildTimeTitle(datetimearr) {
|
|||||||
var output = "";
|
var output = "";
|
||||||
for (let i = 0; i < arr.length; i++) {
|
for (let i = 0; i < arr.length; i++) {
|
||||||
let line = arr[i];
|
let line = arr[i];
|
||||||
output += Template.calendarLine(line);
|
output += Template.Calendar.line(line);
|
||||||
}
|
}
|
||||||
$("#header").after(`<div id='timelines'>${output}</div`);
|
$("#header").after(`<div id='timelines'>${output}</div`);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -40,15 +40,15 @@ if (document.querySelector('#fos_fl')) {
|
|||||||
|
|
||||||
//make heading and modal
|
//make heading and modal
|
||||||
if (!$("#kw_results_table").length) {
|
if (!$("#kw_results_table").length) {
|
||||||
$("table").after(Template.catalogLoading());
|
$("table").after(Template.Catalog.loading());
|
||||||
$("#container").prepend(Template.mainModal());
|
$("#container").prepend(Template.Main.modal());
|
||||||
$("#myModal").prepend("<div id='snackbar'>save course popup...</div>");
|
$("#myModal").prepend("<div id='snackbar'>save course popup...</div>");
|
||||||
|
|
||||||
// now add to the table
|
// now add to the table
|
||||||
$("table thead th:last-child").after('<th scope=col>Plus</th>');
|
$("table thead th:last-child").after('<th scope=col>Plus</th>');
|
||||||
$('table').find('tr').each(function () {
|
$('table').find('tr').each(function () {
|
||||||
if (!($(this).find('td').hasClass("course_header")) && $(this).has('th').length == 0) {
|
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 () {
|
next_page.find('tbody>tr').each(function () {
|
||||||
let has_course_header = $(this).find('td').hasClass("course_header");
|
let has_course_header = $(this).find('td').hasClass("course_header");
|
||||||
if (!(has_course_header && $(this).has('th').length == 0))
|
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()))
|
if (!(has_course_header && last == $(this).find('td').text()))
|
||||||
new_rows.push($(this));
|
new_rows.push($(this));
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ function setCourseList() {
|
|||||||
number
|
number
|
||||||
} = seperateCourseNameParts(coursename)
|
} = 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);
|
$("#courseList").append(list_html);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -44,7 +44,7 @@ function buildTimeLines(datetimearr) {
|
|||||||
} else {
|
} else {
|
||||||
for (let i = 0; i < lines.length; i++) {
|
for (let i = 0; i < lines.length; i++) {
|
||||||
let line = lines[i];
|
let line = lines[i];
|
||||||
output += Template.popupLine(line)
|
output += Template.Popup.line(line)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return output;
|
return output;
|
||||||
@@ -65,7 +65,7 @@ function updateConflicts() {
|
|||||||
if (i != between.length - 1)
|
if (i != between.length - 1)
|
||||||
conflict_message += "<br>";
|
conflict_message += "<br>";
|
||||||
}
|
}
|
||||||
$(Template.popupConflictMessage(conflict_message)).prependTo("#courseList").hide().fadeIn(200);
|
$(Template.Popup.conflict_message(conflict_message)).prependTo("#courseList").hide().fadeIn(200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,12 +2,12 @@ if ($('html').hasClass('gr__utexas_collegescheduler_com')) {
|
|||||||
$.initialize("table.section-detail-grid", function () {
|
$.initialize("table.section-detail-grid", function () {
|
||||||
$(this).find('thead>tr').append('<th> Plus</th')
|
$(this).find('thead>tr').append('<th> Plus</th')
|
||||||
$(this).find('tbody>tr').each(function () {
|
$(this).find('tbody>tr').each(function () {
|
||||||
$(this).append(Template.extensionButton());
|
$(this).append(Template.Main.extension_button());
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
curr_course = {}
|
curr_course = {}
|
||||||
$("body").prepend(Template.mainModal());
|
$("body").prepend(Template.Main.modal());
|
||||||
|
|
||||||
$("body").on('click', '#distButton', function () {
|
$("body").on('click', '#distButton', function () {
|
||||||
var row = $(this).closest('tr');
|
var row = $(this).closest('tr');
|
||||||
|
|||||||
Reference in New Issue
Block a user