From e4e3898a67550f527be01b6e3c6f102a8362bea4 Mon Sep 17 00:00:00 2001
From: Sriram Hariharan <sghsri@gmail.com>
Date: Tue, 13 Aug 2019 14:55:09 -0500
Subject: [PATCH] seperate template into classes

---
 js/Template.js      | 261 +++++++++++++++++++++++---------------------
 js/calendar.js      |   4 +-
 js/courseCatalog.js |   8 +-
 js/popup.js         |   6 +-
 js/utplanner.js     |   4 +-
 5 files changed, 145 insertions(+), 138 deletions(-)

diff --git a/js/Template.js b/js/Template.js
index 2f02da34..744a2998 100644
--- a/js/Template.js
+++ b/js/Template.js
@@ -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>`
+        }
     }
 
 }
\ No newline at end of file
diff --git a/js/calendar.js b/js/calendar.js
index 3a48a71a..a7e92358 100644
--- a/js/calendar.js
+++ b/js/calendar.js
@@ -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`);
 }
diff --git a/js/courseCatalog.js b/js/courseCatalog.js
index dffaca3f..7d23a51b 100644
--- a/js/courseCatalog.js
+++ b/js/courseCatalog.js
@@ -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));
 						});
diff --git a/js/popup.js b/js/popup.js
index 7be9fa52..f2622c92 100644
--- a/js/popup.js
+++ b/js/popup.js
@@ -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);
 		}
 	});
 }
diff --git a/js/utplanner.js b/js/utplanner.js
index baf8a081..e0772b13 100644
--- a/js/utplanner.js
+++ b/js/utplanner.js
@@ -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');