Index: lams_monitoring/web/emailnotifications/lessonNotifications.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_monitoring/web/emailnotifications/lessonNotifications.jsp,v
diff -u -r1.1.2.1 -r1.1.2.2
--- lams_monitoring/web/emailnotifications/lessonNotifications.jsp	31 Aug 2011 20:36:35 -0000	1.1.2.1
+++ lams_monitoring/web/emailnotifications/lessonNotifications.jsp	3 Sep 2011 23:01:16 -0000	1.1.2.2
@@ -14,78 +14,94 @@
 	<title><fmt:message key="${title}"/></title>
 	
 	<lams:css style="learner"/>
+	<link type="text/css" href="<lams:LAMSURL/>css/jquery-ui-1.8.11.redmont-theme.css" rel="stylesheet">
+	<link rel="stylesheet" type="text/css" href="<lams:LAMSURL/>/css/ui.jqgrid-4.1.2.css" />
+	
 	<style media="screen,projection" type="text/css">
-		table.tablesorter-admin td {
-		    padding: 5px 5px 5px 5px !important;
-		}
+		div#content {min-height: 250px; }
+		#emailTextareaDiv {float: right;}
+		#emailButton {text-align: right; float: right;}
+		#additionalParameters {min-height: 50px;}
+		#activityDiv, #daysToDeadlineDiv {display: none;}
 	</style>	
 	
-	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery-1.1.4.pack.js"></script>
-	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.tablesorter.pack.js"></script>
-	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.tablesorter.pager.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-1.5.1.min.js"></script>
+	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/grid.locale-en.js"></script>
+	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.jqGrid.min.js"></script>
 	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.jstepper.min.js"></script>
 	<script language="JavaScript" type="text/javascript">
-		<!--
+	<!--
 		jQuery(document).ready(function() {
-		
-			$("table.tablesorter-admin").tablesorter({headers:{0:{sorter:false}}})
-				.tablesorterPager({container: jQuery("#pager")});
 			
-			$("#checkboxAll").click(function() {
-				
-				var isChecked = this.checked;
-				$("input[name=userId]").each(function() {
-					
-					this.checked = isChecked;
-				});
+
+			jQuery("#list3").jqGrid({
+			   	url: getUrl(),
+				datatype: "json",
+			   	colNames:['<fmt:message key="email.notifications.user.name"/>'],
+			   	colModel:[
+			   		{name:'name',index:'name', width:260, firstsortorder:'desc', sorttype: 'text'}
+			   	],
+			   	rowNum:50,
+			   	rowList:[50,75,100,150,200],
+			   	pager: '#pager3',
+			   	sortname: 'name',
+			   	multiselect: true,
+			    sortorder: "asc",
+			    loadonce: true,
+			    height:'auto',
+			    pagerpos:'left'
 			});
-			$("input[name=userId]").click(function() {
-				if ($("input[name=userId]:checked").length == 0) {
-					$("#checkboxAll").attr('checked', false);
-				} else if ($("input[name=userId]:checked").length == $("input[name=userId]").length) {
-					$("#checkboxAll").attr('checked', true);
-				}
-			});
+			jQuery("#list3").jqGrid('navGrid','#pager3',{add:false,del:false,edit:false,refresh:false,position:'left'});
+			$("#list3").parents('div.ui-jqgrid-bdiv').css("max-height","1000px");
+			//$("#list3").setGridParam({page:1}).trigger('reloadGrid');	
+			//$("#pager_left table.ui-pg-table").insertAfter($("#pager #pager_right")[0]);
+			//$("#pager3_left").css('float', 'right');
+			//$("#pager3_center").css('te', left);
+			//$("#list3").jqGrid('setGridParam',{ page: 1 }).trigger("reloadGrid");
+			
 			$("#daysToDeadline").jStepper({minValue:0, maxValue:999, defaultValue:3, allowDecimals:false});
 			
-//			$('#startLessonWithClassButton').click(function() {
-//				document.location.href = baseUrl + "startLesson.do?dispatch=startLessonWithClass&sessionMapID=" + sessionMapID + "&" + $("#emailNotificationsForm").serialize(true);
-//			});
+    		$('#emailButton').click(function() {
+    			
+    			var ids = jQuery("#list3").getGridParam('selarrrow');
+    			var params;
+    			if(ids.length) {
+    			    for (var i=0;i<ids.length;i++) {
+    			    	params += "&userId=" + ids[i];
+    			    }
+    			} else {
+    				return;
+    			}
+    			
+    			var emailBody = escape(document.getElementById("emailBody").value);
+    	        $.ajax({
+    	        	async: false,
+    	            url: '<c:url value="/emailNotifications.do"/>',
+    	            data: 'method=emailUsers&' + params+ "&emailBody=" + emailBody,
+    	            dataType: 'json',
+    	            type: 'post',
+    	            success: function (json) {
+    		            if (json.isSuccessfullySent) {
+    		            	alert('<fmt:message key="email.notifications.emails.successfully.sent" />');
+    					} else {
+    						alert('<fmt:message key="email.notifications.problems.sending.emails" />');
+    					}
+    	            }
+    	       	});
+    		});
 
 		});
 		
-		function resizeIframe() {
-			if (document.getElementById('TB_iframeContent') != null) {
-			    var height = top.window.innerHeight;
-			    if ( height == undefined || height == 0 ) {
-			    	// IE doesn't use window.innerHeight.
-			    	height = document.documentElement.clientHeight;
-			    	// alert("using clientHeight");
-			    }
-				// alert("doc height "+height);
-			    height -= document.getElementById('TB_iframeContent').offsetTop + 60;
-			    document.getElementById('TB_iframeContent').style.height = height +"px";
-		
-				TB_HEIGHT = height + 28;
-				tb_position();
+		function getUsers(){
+			var url = getUrl();
+			if (url.length) {
+				$("#list3").setGridParam({datatype:'json', page:1, url: url}).trigger('reloadGrid');	
 			}
-		};
-		window.onresize = resizeIframe;
+			return false;
+		}
 		
-		function refreshThickbox(){   
-			tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
-			imgLoader = new Image();// preload image
-			imgLoader.src = tb_pathToImage;
-		};
-
-		function createNewQuestionInitHref() {
-			var questionTypeDropdown = document.getElementById("questionType");
-			var questionType = questionTypeDropdown.selectedIndex + 1;
-			var newQuestionInitHref = "${newQuestionInitUrl}&questionType=" + questionType + "&KeepThis=true&TB_iframe=true&height=540&width=850&modal=true";
-			$("#newQuestionInitHref").attr("href", newQuestionInitHref)
-		};
-		
-		function getUsers(){
+		function getUrl() {
+			
 			var searchType = document.getElementById("searchType").value;
 			
 			//process in case of "Haven't reached particular activity"
@@ -105,60 +121,34 @@
 				if (daysToDeadline == "") {
 					return;
 				}
-				
-				
 			} else {
 				$("#daysToDeadlineDiv").hide();
 			}
 			
-			switch(searchType) {
-			case 0:
-				
-			 	break;
-			case 1:
-
-			 	
-			   	break;
-			default:
-				//$("#additionalParameters").html("");
-			}
-			
-			var url= "<c:url value='/emailNotifications.do'/>";
-			$("#userListArea").load(
-				url,
-				{
-					method: "getUsers",					
-					searchType: searchType,
-					lessonId: "${lesson.lessonId}",
-					activityId: activityId,
-					daysToDeadline: daysToDeadline
-				}
-			);
+			var url = "<c:url value='/emailNotifications.do'/>?method=getUsers&lessonId=${lesson.lessonId}&searchType=" + searchType + "&activityId=" + activityId + "&daysToDeadline=" + daysToDeadline;
+			return url;
 		}
-		//-->
 	</script>
 	
 </lams:head>
     
 <body class="stripes">
 <div id="page">
-	<div id="content" style=" min-height: 250px;">
+	<div id="content">
 
 		<h2><fmt:message key="email.notifications.notify.sudents.that"/></h2>
 		
 		<form action="<c:url value="/emailNotifications.do"/>?method=emailUsers" method="post" id="emailNotificationsForm" >	
 		
-		<div style="float: right; padding-right: -100px;">
+		<div id="emailTextareaDiv">
 			<c:set var="emailBody"><fmt:message key="email.notifications.lesson.email.body" >
 					<fmt:param>${lesson.lessonName}</fmt:param>
 					<fmt:param><lams:LAMSURL/>home.do?method=learner&lessonID=${lesson.lessonId}</fmt:param>
 				</fmt:message>
 			</c:set>
-			<c:set var="emailBody2">
-			</c:set>
-			<textarea rows="10" name="emailBody" cols="45" >${fn:replace(emailBody, '<br/>', newLineChar)}</textarea>
+			<textarea rows="8" name="emailBody" id="emailBody" cols="45" >${fn:replace(emailBody, '<br/>', newLineChar)}</textarea>
 			<br/><br/>
-			<input class="button" type="button" style="text-align: right; float: right;" value="<fmt:message key="email.notifications.send"/>" onclick=javascript:document.location='user.do?method=edit' />
+			<input class="button" type="button" id="emailButton" value="<fmt:message key="email.notifications.send"/>" />
 		</div>
 		
 		<!-- Dropdown menu for choosing a user search type -->
@@ -174,8 +164,8 @@
 			</select>
 		</div>
 		
-		<div id="additionalParameters" style="min-height: 50px;">
-			<div id="activityDiv" style="display: none;">
+		<div id="additionalParameters">
+			<div id="activityDiv">
 				<h3>
 					<fmt:message key="email.notifications.activity" />
 				</h3>
@@ -186,7 +176,7 @@
 				</select>				
 			</div>
 			
-			<div id="daysToDeadlineDiv" style="display: none;">
+			<div id="daysToDeadlineDiv">
 				<h3>
 					<fmt:message key="email.notifications.days.to.deadline" />
 				</h3>
@@ -196,34 +186,11 @@
 			</div>
 		</div>
 		
-		<%@ include file="userList.jsp"%>
-		
+		<table id="list3"></table>
+		<div id="pager3"></div>
 
 		</form>
-		<br/>
-		
-		<div id="pager" class="pager1">
-			<form onsubmit="return false;">
-				<img src="<lams:LAMSURL/>/images/first.png" class="first"/>
-				<img src="<lams:LAMSURL/>/images/prev.png" class="prev">
-				<input type="text" class="pagedisplay"/>
-				<img src="<lams:LAMSURL/>/images/next.png" class="next">
-				<img src="<lams:LAMSURL/>/images/last.png" class="last">
-				<select class="pagesize">
-					<option selected="selected"  value="50">50&nbsp;&nbsp;</option>
-					<option value="75">75</option>
-					<option value="100">100</option>
-					<option value="150">150</option>
-					<option value="200">200</option>
-				</select>
-			</form>
-		</div>
-		
 
-
-
-
-
 	</div>
 </div>
 </body>