diff --git a/content.js b/content.js
index 00ed9cf8..5da529ef 100644
--- a/content.js
+++ b/content.js
@@ -6,11 +6,10 @@ var department;
var course_nbr;
$(document).ready( function() {
loadDataBase();
-
//make heading
$("table thead th:nth-child(5)").after('
×Computer Fluency (C S 302)
First part of a two-part sequence in programming. Fundamental concepts of structured programming; procedures and data structures with a focus on problem solving strategies and implementation; introduction to concepts of informal specification, informal reasoning about program behavior, debugging, and ad hoc testing.Only one of the following courses may be counted: Computer Science 303E,305J, 312, 312H. Credit for Computer Science 312 may not be earned aftera student has received credit for Computer Science 314 or 314H.Prerequisite: Credit with a grade of at least C- or registration for Mathematics 408C, 408K, or 408N.
'
$("#container").prepend(modhtml);
//console.log(grades);
@@ -50,20 +49,20 @@ function getCourseInfo(row){
coursename = $(this).find('td').text() + "";
}
if($(this).is(row)){
- profname = $(this).find('td').eq(4).text().split(',')[0];
+ profname = $(this).find('td').eq(4).text().split(',')[0];
return false;
}
});
department = coursename.substring(0,coursename.search(/\d/)-2);
// console.log(department);
- course_nbr = coursename.substring(coursename.search(/\d/),coursename.indexOf(" ",coursename.search(/\d/)));
+course_nbr = coursename.substring(coursename.search(/\d/),coursename.indexOf(" ",coursename.search(/\d/)));
}
function getDistribution(){
var query = "select * from agg";
- query += " where dept like '%"+department+"%'";
- query += " and prof like '%"+profname+"%'";
- query += " and course_nbr like '%"+course_nbr+"%'";
+ query += " where dept like '%"+department+"%'";
+ query += " and prof like '%"+profname+"%'";
+ query += " and course_nbr like '%"+course_nbr+"%'";
var res = grades.exec(query)[0];
console.log(res);
var output = "";
@@ -82,91 +81,106 @@ function getDistribution(){
// output+="D: " + res.values[0][15] + " ";
// output+="D-: " + res.values[0][16] + "\n";
// output+="F: " + res.values[0][17] + "\n";
- openDialog();
+ openDialog(department,coursename,"aggregate",profname,res.values[0]);
}
//alert(output);
}
-function openDialog(){
+function openDialog(dep,cls,sem,professor,data){
+ getDescription();
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
- modal.style.display = "block";
- $(".title").text(coursename);
- console.log(coursename);
+ modal.style.display = "block";
+ $(".title").text(coursename);
+ console.log(coursename);
span.onclick = function() {
- modal.style.display = "none";
+ modal.style.display = "none";
}
- Highcharts.chart('chart', {
+ Highcharts.chart('chart', {
+ chart: {
+ type: 'bar',
+ spacingLeft: 10
+ },
+ title: {
+ text: null
+ },
+ subtitle: {
+ text: null
+ },
+ legend: {
+ enabled: false
+ },
+ xAxis: {
+ title: {
+ text: 'Grades'
+ },
+ categories: [
+ 'A',
+ 'A-',
+ 'B+',
+ 'B',
+ 'B-',
+ 'C+',
+ 'C',
+ 'C-',
+ 'D+',
+ 'D',
+ 'D-',
+ 'F'
+ ],
+ crosshair: true
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'Students'
+ }
+ },
+ credits: {
+ enabled: false
+ },
+ tooltip: {
+ headerFormat: '
{point.key}',
+ pointFormat: '| {series.name}: | ' +
+ '{point.y:.1f} Students |
',
+ footerFormat: '
',
+ shared: true,
+ useHTML: true
+ },
+ plotOptions: {
+ bar: {
+ pointPadding: 0.2,
+ borderWidth: 0
+ }
+ },
+ series: [{
+ name: 'Grades',
+ data: [{y: data[6], color: '#4CAF50'}, {y: data[7], color: '#8BC34A'}, {y: data[8], color: '#FFEB3B'}, {y: data[9], color: '#FFC107'}, {y: data[10], color: '#FF9800'}, {y: data[11], color: '#FF5722'}, {y: data[12], color: '#ff704d'}, {y: data[13], color: '#F44336'}, {y: data[14], color: '#ff704d'}, {y: data[15], color: '#ff704d'}, {y: data[16], color: '#ff704d'}, {y: data[17], color: '#ff704d'}]
- title: {
- text: 'Solar Employment Growth by Sector, 2010-2016'
- },
+ }]
+ });
+ // When the user clicks anywhere outside of the modal, close it
+ window.onclick = function(event) {
+ if (event.target == modal) {
+ modal.style.display = "none";
+ }
- subtitle: {
- text: 'Source: thesolarfoundation.com'
- },
-
- yAxis: {
- title: {
- text: 'Number of Employees'
- }
- },
- legend: {
- layout: 'vertical',
- align: 'right',
- verticalAlign: 'middle'
- },
-
- plotOptions: {
- series: {
- label: {
- connectorAllowed: false
- },
- pointStart: 2010
- }
- },
-
- series: [{
- name: 'Installation',
- data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
- }, {
- name: 'Manufacturing',
- data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
- }, {
- name: 'Sales & Distribution',
- data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
- }, {
- name: 'Project Development',
- data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
- }, {
- name: 'Other',
- data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
- }],
-
- responsive: {
- rules: [{
- condition: {
- maxWidth: 500
- },
- chartOptions: {
- legend: {
- layout: 'horizontal',
- align: 'center',
- verticalAlign: 'bottom'
- }
- }
- }]
- }
-
-});
-// When the user clicks anywhere outside of the modal, close it
-window.onclick = function(event) {
- if (event.target == modal) {
- modal.style.display = "none";
- }
+ }
}
+function getDescription(){
+ chrome.runtime.sendMessage({
+ method: "GET",
+ action: "xhttp",
+ url: "https://utdirect.utexas.edu/apps/registrar/course_schedule/20189/51315/",
+ data: ""
+}, function(response) {
+ if(response){
+ console.log(response);
+ }
+});
+
}
function loadDataBase(){
diff --git a/manifest.json b/manifest.json
index 74a25382..761469c6 100644
--- a/manifest.json
+++ b/manifest.json
@@ -5,8 +5,9 @@
"version": "0.1.0",
"description": "Chrome Extension to show more information on the UT Course catalog",
"permissions": [
- "https://utdirect.utexas.edu/apps/registrar/course_schedule/*",
- "*://*.ratemyprofessors.com/*"
+ "*://*.utdirect.utexas.edu/apps/registrar/course_schedule/*",
+ "*://*.ratemyprofessors.com/*",
+ "*://*.catalog.utexas.edu/ribbit/"
],
"content_scripts": [{
"css": ["styles.css"],
diff --git a/styles.css b/styles.css
index b40a1c7e..0788e1bf 100644
--- a/styles.css
+++ b/styles.css
@@ -6,13 +6,12 @@
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
- width: 100%; /* Full width */
+ width: 100%;
height: 100%; /* Full height */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
-/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
@@ -25,19 +24,20 @@
.close {
color: #aaaaaa;
float: right;
+ padding: 5px;
font-size: 28px;
font-weight: bold;
}
.title {
-font-size: !important large;
- font-weight: bold !important;
- margin:0px 0px 0px 0px !important;
+ font-size: large;
+ font-weight: bold ;
+ margin:0px 0px 0px 0px;
}
.subtitle {
-font-size: small !important;
- font-weight: normal !important;
+ font-size: small;
+ font-weight: normal;
}
@@ -48,6 +48,24 @@ font-size: small !important;
margin: 0 auto
}
+.card {
+ /* Add shadows to create the "card" effect */
+ box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
+ transition: 0.3s;
+ margin-bottom: 10px;
+}
+
+/* On mouse-over, add a deeper shadow */
+.card:hover {
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+/* Add some padding inside the card container */
+.cardcontainer {
+ padding: 2px 16px;
+}
+
+
.close:hover,
.close:focus {
color: #000;