seperate template into classes

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

View File

@@ -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">&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 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">&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}</>`
} }
} }

View File

@@ -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`);
} }

View File

@@ -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));
}); });

View File

@@ -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);
} }
}); });
} }

View File

@@ -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');