From 5f0fb88dfe5e452f85d34657846b3b9fb2dc666b Mon Sep 17 00:00:00 2001
From: Sriram Hariharan <sghsri@gmail.com>
Date: Sat, 10 Aug 2019 14:55:25 -0500
Subject: [PATCH] More refactoring

---
 css/styles.css      |  14 +++++
 js/courseCatalog.js | 142 ++++++++++++++++++++++++--------------------
 js/templates.js     |  11 ++++
 js/utplanner.js     |  39 +++---------
 manifest.json       |   4 +-
 5 files changed, 111 insertions(+), 99 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index fe83cfa0..56387e1b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -59,12 +59,26 @@
     margin: 5px 0px 5px 0px;
 }
 
+.distButton {
+    vertical-align: bottom;
+}
+
 .description {
     padding: 5px;
     font-size: 15px;
     font-weight: normal;
 }
 
+
+.chartloader {
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 50px;
+    left: 0;
+    right: 0;
+}
+
 .profname {
     margin-left: 5px;
     padding-bottom: 5px;
diff --git a/js/courseCatalog.js b/js/courseCatalog.js
index a829b628..44d27b15 100644
--- a/js/courseCatalog.js
+++ b/js/courseCatalog.js
@@ -1,6 +1,5 @@
 var next = $("#next_nav_link");
-var bottom;
-var semesterCode;
+var semesterCode = new URL(window.location.href).pathname.split('/')[4];
 var doneLoading = true;
 
 
@@ -12,9 +11,6 @@ var curr_course = {}
 
 console.log('UT Registration Plus is running on this page.');
 
-semesterCode = new URL(window.location.href).pathname.split('/')[4];
-
-
 $(window).scroll(function () {
 	if ($(document).height() <= $(window).scrollTop() + $(window).height() + 150) {
 		loadNextPages();
@@ -212,56 +208,6 @@ function getCourseInfo(row) {
 	return curr_course;
 }
 
-
-function toggleLoadingPage(loading) {
-	if (loading) {
-		$('#loader').css('display', 'inline-block');
-		$("#nextlabel").css('display', 'inline-block');
-	} else {
-		$('#loader').hide();
-		$("#nextlabel").hide();
-	}
-}
-
-function loadNextPages() {
-	chrome.storage.sync.get('loadAll', function (data) {
-		if (data.loadAll) {
-			let link = next.prop('href');
-			if (doneLoading && next && link) {
-				toggleLoadingPage(true);
-				doneLoading = false;
-				$.get(link, function (response) {
-					if (response) {
-						var nextpage = $('<div/>').html(response).contents();
-						var current = $('tbody');
-						var oldlength = $('tbody tr').length;
-						var last = current.find('.course_header>h2:last').text();
-						next = nextpage.find("#next_nav_link");
-						doneLoading = true;
-						$("#nextlabel").hide();
-						$('#loader').hide();
-						var newrows = [];
-						nextpage.find('tbody>tr').each(function () {
-							let hasCourseHead = $(this).find('td').hasClass("course_header");
-							if (!(hasCourseHead && $(this).has('th').length == 0))
-								$(this).append(`<td data-th="Plus"><input type="image" class="distButton" id="distButton" style="vertical-align: bottom;" width="20" height="20" src='${chrome.extension.getURL('images/disticon.png')}'/></td>`);
-							if (!(hasCourseHead && last == $(this).find('td').text()))
-								newrows.push($(this));
-						});
-						current.append(newrows);
-						update(oldlength + 1)
-					}
-				}).fail(function () {
-					doneLoading = true;
-					toggleLoadingPage(false);
-					$("#retrylabel").css('display', 'inline-block');
-					$('#retry').css('display', 'inline-block');
-				});
-			}
-		}
-	});
-}
-
 function saveCourse() {
 	let {
 		full_name,
@@ -376,7 +322,7 @@ function badData(course_data, res) {
 
 /*Query the grades database*/
 function getDistribution(course_data, sem) {
-	// showLoading(true);
+	toggleChartLoading(true);
 	let query = buildQuery(course_data, sem);
 	chrome.runtime.sendMessage({
 		command: "gradesQuery",
@@ -469,10 +415,9 @@ function openDialog(course_info, res) {
 
 }
 
-
-
 function setChart(data) {
 	// set up the chart
+	toggleChartLoading(false);
 	Highcharts.chart('chart', buildChartConfig(data), function (chart) { // on complete
 		if (data.length == 0) {
 			//if no data, then show the message and hide the series
@@ -491,6 +436,8 @@ function setChart(data) {
 	});
 }
 
+var error_message = "<p style='color:red;font-style:bold'>You have been logged out. Please refresh the page and log back in using your UT EID and password.</p>";
+
 function buildFormattedDescription(description_lines) {
 	let description = ""
 	for (let i in description_lines) {
@@ -506,13 +453,10 @@ function buildFormattedDescription(description_lines) {
 		description += sentence;
 	}
 	if (!description)
-		description = "<p style='color:red;font-style:bold'>There was an error. Please refresh the page and/or log back in using your UT EID and password.</p>"
+		description = error_message;
 	return description;
 }
 
-
-
-
 function extractFirstName(response_node) {
 	let full_name = response_node.find('td[data-th="Instructor"]').text().split(', ');
 	let first = full_name[full_name.length - 1];
@@ -521,6 +465,7 @@ function extractFirstName(response_node) {
 }
 
 function displayDescription(description) {
+	toggleDescriptionLoading(false);
 	$("#description").animate({
 		'opacity': 0
 	}, 200, function () {
@@ -532,7 +477,7 @@ function displayDescription(description) {
 
 /*Get the course description from the profurl and highlight the important elements, as well as set the eCIS, and rmp links.*/
 function getDescription(course_info) {
-	console.log('getting description for ')
+	toggleDescriptionLoading(true);
 	$.ajax({
 		url: course_info["individual"],
 		success: function (response) {
@@ -543,8 +488,74 @@ function getDescription(course_info) {
 				let first_name = extractFirstName(response_node);
 				updateLinks(course_info, first_name);
 			} else {
-				description = "<p style='color:red;font-style:bold'>You have been logged out. Please refresh the page and log back in using your UT EID and password.</p>"
-				displayDescription(description);
+				displayDescription(error_message);
+			}
+		}
+	});
+}
+
+function toggleLoadingPage(loading) {
+	if (loading) {
+		$('#loader').css('display', 'inline-block');
+		$("#nextlabel").css('display', 'inline-block');
+	} else {
+		$('#loader').hide();
+		$("#nextlabel").hide();
+	}
+}
+
+function toggleChartLoading(loading) {
+	if (loading) {
+		$('#chartload').css('display', 'inline-block');
+		$("#chart").hide();
+	} else {
+		$('#chartload').hide();
+		$("#chart").show();
+	}
+}
+
+function toggleDescriptionLoading(loading) {
+	if (loading) {
+		$('#descload').css('display', 'inline-block');
+	} else {
+		$('#descload').hide();
+	}
+}
+
+function loadNextPages() {
+	chrome.storage.sync.get('loadAll', function (data) {
+		if (data.loadAll) {
+			let link = next.prop('href');
+			if (doneLoading && next && link) {
+				toggleLoadingPage(true);
+				doneLoading = false;
+				$.get(link, function (response) {
+					if (response) {
+						var nextpage = $('<div/>').html(response).contents();
+						var current = $('tbody');
+						var oldlength = $('tbody tr').length;
+						var last = current.find('.course_header>h2:last').text();
+						next = nextpage.find("#next_nav_link");
+						doneLoading = true;
+						$("#nextlabel").hide();
+						$('#loader').hide();
+						var newrows = [];
+						nextpage.find('tbody>tr').each(function () {
+							let hasCourseHead = $(this).find('td').hasClass("course_header");
+							if (!(hasCourseHead && $(this).has('th').length == 0))
+								$(this).append(extensionButton());
+							if (!(hasCourseHead && last == $(this).find('td').text()))
+								newrows.push($(this));
+						});
+						current.append(newrows);
+						update(oldlength + 1)
+					}
+				}).fail(function () {
+					doneLoading = true;
+					toggleLoadingPage(false);
+					$("#retrylabel").css('display', 'inline-block');
+					$('#retry').css('display', 'inline-block');
+				});
 			}
 		}
 	});
@@ -559,7 +570,6 @@ function allowClosing() {
 			close();
 		}
 	});
-
 }
 
 function close() {
diff --git a/js/templates.js b/js/templates.js
index b2ed40b6..c8ba8b37 100644
--- a/js/templates.js
+++ b/js/templates.js
@@ -1,3 +1,8 @@
+function 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>`
+}
+
+
 function mainModal() {
     return `<div class=modal id=myModal>
         <div class=modal-content>
@@ -17,12 +22,18 @@ function mainModal() {
             </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>
diff --git a/js/utplanner.js b/js/utplanner.js
index 1c7b22fa..2592e3a7 100644
--- a/js/utplanner.js
+++ b/js/utplanner.js
@@ -2,36 +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(`<td data-th="Plus"><input type="image" class="distButton" id="distButton" style="vertical-align: bottom;" width="20" height="20" src='${chrome.extension.getURL('images/disticon.png')}'/></td>`);
+            $(this).append(extensionButton());
         })
     });
 }
-
 curr_course = {}
-var modhtml = `<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="Syllabi"> Past Syllabi </button>
-										</div>
-									</div>
-								</div>
-								<div class=card style='text-align:center'>
-                                    <select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'></select>
-                                    <div class="loader" id='loader' style="position:absolute;"></div>
-									<div id="chartcontainer" class=cardcontainer>
-										<div id=chart></div>
-									</div>
-								</div>
-							</div>
-						</div>`;
-$("body").prepend(modhtml);
+$("body").prepend(mainModal());
 
 $("body").on('click', '#distButton', function () {
     var row = $(this).closest('tr');
@@ -84,15 +60,14 @@ $("#semesters").on('change', function () {
 });
 
 
-function showLoading(loading) {
+function toggleChartLoading(loading) {
     if (loading) {
-        $('#loader').css('display', 'inline-block');
+        $('#chartload').css('display', 'inline-block');
         $("#chart").hide();
     } else {
-        $('#loader').hide();
+        $('#chartload').hide();
         $("#chart").show();
     }
-
 }
 
 
@@ -135,7 +110,7 @@ function buildSemestersDropdown(course_data, res) {
 
 /*Query the grades database*/
 function getDistribution(course_data, sem) {
-    showLoading(true);
+    toggleChartLoading(true);
     let query = buildQuery(course_data, sem);
     chrome.runtime.sendMessage({
         command: "gradesQuery",
@@ -203,7 +178,7 @@ function prettifyDaysText(arr) {
 
 function setChart(data) {
     //set up the chart
-    showLoading(false);
+    toggleChartLoading(false);
     chart = Highcharts.chart('chart', buildChartConfig(data), function (chart) { // on complete
         if (data.length == 0) {
             //if no data, then show the message and hide the series
diff --git a/manifest.json b/manifest.json
index 4b943338..1592909a 100644
--- a/manifest.json
+++ b/manifest.json
@@ -22,7 +22,9 @@
     "matches": ["https://utdirect.utexas.edu/apps/registrar/course_schedule/*"]
   }, {
     "css": ["css/styles.css"],
-    "js": ["js/lib/moment.min.js", "js/lib/highcharts.js", "js/lib/jquery-3.3.1.min.js", "js/lib/jquery.initialize.min.js", "js/config.js", "js/util.js", "js/utPlanner.js"],
+    "js": ["js/lib/moment.min.js", "js/lib/highcharts.js", "js/lib/jquery-3.3.1.min.js", "js/lib/jquery.initialize.min.js", "js/config.js", "js/util.js",
+      "js/templates.js", "js/utPlanner.js"
+    ],
     "matches": ["https://utexas.collegescheduler.com/*"]
   }, {
     "css": ["css/styles.css"],