Added a course info popup when you click on the course titles. Fixes #3 and Fixes #58.

Also did some minor code cleanup.

Author: bgrawi

api/entity.php

@@ -256,6 +256,10 @@
 		echo json_encode(array("sections" => $sections));
 		break;
 
+    case "courseForSection":
+        echo json_encode(getCourseBySectionId($_POST['id'], true));
+        break;
+
     default:
         die(json_encode(array("error" => "argument", "msg" => "You must provide a valid action.")));
 

assets/src/modules/sm/App/directives/courseDetailPopover.js

@@ -0,0 +1,76 @@
+angular.module('sm').directive('courseDetailPopover', function($http, $filter) {
+	var RMPUrl = $filter('RMPUrl'),
+		parseTimes = $filter('parseSectionTimes'),
+		formatTime = $filter('formatTime');
+
+	function getTimesHTML(times) {
+		if(!times) {
+			return '';
+		}
+		var parsedTimes = parseTimes(times, true);
+		var HTML = '<div style="font-size: small">';
+		for (var timeIndex = 0; timeIndex < parsedTimes.length; timeIndex++) {
+			var time = parsedTimes[timeIndex];
+			HTML += time.days + ' <span style="white-space: nowrap">' + formatTime(time.start) + '-' + formatTime(time.end) + '</span> <span style="font-style: italic; white-space: nowrap">Location: ' + time.location + '</span>';
+		}
+		HTML += '</div>';
+
+		return HTML;
+	}
+	return {
+		restrict: 'A',
+		scope: {
+			sectionId: '=courseDetailPopover'
+		},
+		link: function(scope, elm) {
+			if(scope.sectionId != '') {
+				var loaded = false,
+					opened = false,
+					$body = $("body");
+
+				function hidePopoverOnBodyClick() {
+					setTimeout(function() {
+
+						$body.off('click.hidepopovers');
+						$body.on('click.hidepopovers', function () {
+							elm.popover('hide');
+							$body.off('click.hidepopovers');
+							opened = false;
+						});
+					}, 100);
+				}
+
+				elm.on('click', function() {
+					if(!loaded) {
+						loaded = true;
+						$http.post('/entity/courseForSection',
+							$.param({
+								id: scope.sectionId
+							})
+						).success(function(data) {
+							elm.popover({
+								html:true,
+								trigger:'manual',
+								placement:'auto left',
+								title: data.courseNum,
+								content: '<div class="well-sm pull-right" style=" background-color: #ddd;" title="Other students enrolled as of 6AM today">' + data.curenroll + '/' + data.maxenroll + ' <i class="fa fa-user"></i></div><p>' + data.title + '<br><span class="label label-default popover-white">' + RMPUrl(data.instructor) + '</span></p><p>' + getTimesHTML(data.times) + '</p><p>' + data.description + '</p>',
+								container: '#container'
+							});
+							elm.popover('show');
+							opened = true;
+							hidePopoverOnBodyClick();
+						}).error(function() {
+								loaded = false;
+							});
+					} else {
+						elm.popover('toggle');
+						opened = !opened;
+						if(opened) {
+							hidePopoverOnBodyClick();
+						}
+					}
+				});
+			}
+		}
+	};
+});

assets/src/modules/sm/App/styles/global.css

@@ -31,6 +31,13 @@ body.print {
 a[ui-sref] {
 	cursor: pointer; 
 }
+[course-detail-popover] {
+	cursor: pointer;
+}
+
+[course-detail-popover]:hover {
+	text-decoration: underline;
+}
 
 table {
 	overflow:auto;
@@ -473,6 +480,9 @@ select.ng-invalid {
 .popover a {
 	color: #000 !important;
 }
+.popover .popover-white a {
+	color: #fff !important;
+}
 .popover-title {
 	display:block;
 }

assets/src/modules/sm/App/templates/cart.html

@@ -36,7 +36,7 @@ <h4 class="list-group-item-heading" title="{{course.title?course.title:course.se
 							<button type="button" class="btn pull-right btn-danger visible-md visible-lg" ng-click="section.selected = !section.selected">
 								<i class="fa fa-minus"></i> <i class="fa fa-shopping-cart"></i>
 							</button>
-							<h4 class="list-group-item-heading" title="{{section.title}}">{{section.courseNum?section.courseNum:(course | courseNum)+'-'+section.section}}</h4>
+							<h4 class="list-group-item-heading" title="{{section.title}}"><span course-detail-popover="section.id">{{section.courseNum?section.courseNum:(course | courseNum)+'-'+section.section}}</span></h4>
 							<p class="list-group-item-text" ng-bind-html="section.instructor | RMPUrl"></p>
 							<button type="button" class="btn btn-danger btn-block visible-xs visible-sm" ng-click="section.selected = !section.selected">
 								<i class="fa fa-minus"></i> <i class="fa fa-shopping-cart"></i>

assets/src/modules/sm/Generate/templates/courseselect.html

@@ -31,7 +31,7 @@
 				<li class="list-group-item course-info">
 					<div class="row">
 						<div class="col-sm-8">
-							<h4 class="list-group-item-heading">{{$index + 1}}. {{section.courseNum}}</h4>
+							<h4 class="list-group-item-heading"><span course-detail-popover="section.id">{{$index + 1}}. {{section.courseNum}}</span></h4>
 							<small>{{section.title}}</small>
 							<p class="list-group-item-text label-line ">
 								<span class="label label-default" ng-bind-html="section.instructor | RMPUrl"></span>

assets/src/modules/sm/Schedule/directives/scheduleDirective.js

@@ -186,16 +186,16 @@ angular.module('sm').directive('schedule', function($timeout, $filter) {
 			pre: function(scope, elm, attrs) {
 				scope.scheduleController = new Schedule(scope);
 				scope.itemEnter = function($event) {
-					$target = $($event.target);
-					$scope = $target.scope();
+					var $target = $($event.target),
+						$scope = $target.scope();
 					if($scope.item.boundry.height < 70) {
 						$scope.item.boundry.orig_height = $scope.item.boundry.height;
 						$scope.item.boundry.height = 70;
 					}
 				};
 				scope.itemLeave = function($event) {
-					$target = $($event.target);
-					$scope = $target.scope();
+					var $target = $($event.target),
+						$scope = $target.scope();
 					if($scope.item.boundry.orig_height) {
 						$scope.item.boundry.height = $scope.item.boundry.orig_height;
 					}
@@ -221,25 +221,22 @@ angular.module('sm').directive('schedule', function($timeout, $filter) {
 						// Only redraw if valid options
 						scope.scheduleController.draw();
 
-							// Fix pixel alignment issues
-							$timeout(function() {
-								var offset = elm.find("svg").offset(),
-								vert = 1 - parseFloat('0.'+('' + offset.top).split('.')[1]);
-								horz = 1 - parseFloat('0.'+('' + offset.left).split('.')[1]);
-								scope.grid.opts.pixelAlignment ='translate('+horz+','+vert+')';
-								
-								// Everything is dumb
-								//if(window.chrome) {
-									var svg = $(elm).find('svg');
-										svg.hide();
-										setTimeout(function() {
-										svg.show();
-									},0);
-								//}
-							},10,true);
-						
+						// Fix pixel alignment issues
+						$timeout(function() {
+							var offset = elm.find("svg").offset(),
+							vert = 1 - parseFloat('0.'+('' + offset.top).split('.')[1]);
+							horz = 1 - parseFloat('0.'+('' + offset.left).split('.')[1]);
+							scope.grid.opts.pixelAlignment ='translate('+horz+','+vert+')';
+
+							// Toggle showing and hiding svgs, which forces a redraw
+							var svg = $(elm).find('svg');
+								svg.hide();
+								setTimeout(function() {
+								svg.show();
+							}, 0);
+						},10,true);
 					}
-				} 
+				};
 
 				if(!scope.overrideDrawOptions) {
 					scope.$watchCollection('state.drawOptions', update);

inc/databaseConn.php

@@ -47,6 +47,10 @@ function getMeetingInfo($sectionData) {
         "online"     => $sectionData['type'] == "O"
         );
 
+	if(isset($sectionData['description'])) {
+		$course['description'] = $sectionData['description'];
+	}
+
     // If the course is online, then don't even bother looking for it's times
     if($course['online']) { return $course; }
 
@@ -74,20 +78,25 @@ function getMeetingInfo($sectionData) {
 
 /**
  * Retrieves a course based on the id of a section
- * @param	$id		int		The if of the section
- * @return 	array	The information about the section
+ * @param    $id              int	The if of the section
+ * @param    $withDescription bool	If to include the description
+ * @throws Exception
+ * @return    array    The information about the section
  */
-function getCourseBySectionId($id) {
+function getCourseBySectionId($id, $withDescription = false) {
     // Sanity check for the section id
     if($id == "" || !is_numeric($id)) {
         trigger_error("A valid section id was not provided");
     }
 
+	// Setup the SQL if we want descriptions
+	$descriptionSQL = ($withDescription)? ', c.description': '';
+
 	// Build the query to get section info
 	$query = "SELECT s.id,
                 (CASE WHEN (s.title != '') THEN s.title ELSE c.title END) AS title,
                 c.id AS courseId,
-                s.instructor, s.curenroll, s.maxenroll, s.type, c.quarter, c.course, s.section, d.number, d.code
+                s.instructor, s.curenroll, s.maxenroll, s.type, c.quarter, c.course{$descriptionSQL}, s.section, d.number, d.code
                 FROM sections AS s
                   JOIN courses AS c ON s.course = c.id
                   JOIN departments AS d ON d.id = c.department

package.json

@@ -1,6 +1,6 @@
 {
   "name": "schedulemaker",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "private": true,
   "description": "A course database lookup tool and schedule building web application for use at Rochester Institute of Technology.",
   "main": "index.php",