1. Ahmed Soliman
  2. nozom_members_system

Commits

tabdulradi  committed 28268c8

Implementing Admin Mailer Task:
- Wrote javascript in the view to select/unselect member and submit the form
- Wrote a dummy controller to receive the mail data (subject, content, emails), but it doesn't send mails yet
- Edited routes, messages, and main.css

  • Participants
  • Parent commits 8406a37
  • Branches default

Comments (0)

Files changed (7)

File app/controllers/Admin.java

View file
  • Ignore whitespace
 		renderTemplate("Admin/membersList.html");
 	}
 
-	public static void sendMail() {
+	public static void mailForm() {
 		render();
 	}
+	
+	public static void sendMail(String subject, String content, String emails) {
+		// TODO
+		renderText("Subject:" + subject + "\nTo:" + emails + "\nContent:" + content);
+	}
 }

File app/views/Admin/mailForm.html

View file
  • Ignore whitespace
+#{extends 'main.html' /}
+#{set title:messages.get('website.title') /}
+<script src="@{'/public/javascripts/jquery-1.4.3.min.js'}" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript">
+	emailsToSend = [] ;
+	var p = 0 ;  // page -- TODO: think how to get this value ??
+	
+	$(document).ready(function () {
+		$('#mailsToggler').click(function () {
+			$('#mailsArea').animate({ opacity: 'toggle', height: 'toggle' });
+			drawEmailsInMailsArea();
+			return false;
+		});
+		
+		$('#adminMailForm').submit(function() {
+		  	$('#emails').attr("value",emailsToSend)
+		  	return true;
+		});
+	});
+
+	function quickSearch(query,p) { 
+		$("#mailsArea").show()
+		var listAction = #{jsAction @membersList(':q', ':page') /} ;
+		$('#memTable').empty().load(listAction({q: query, page: p}), function() {
+	   		drawEmailsInMailsArea()
+			filterEmailsInMemsTable()
+			$("input:checkbox").each(function(){
+				$(this).click(function(){
+					if ($(this).is(":checked")) {
+						email = $("#email"+$(this).val()).html();
+						emailsToSend.push($.trim(email));
+						drawEmailsInMailsArea()
+					}
+					else {
+						removeEmail($("#email"+$(this).val()).html())
+					}
+				})
+			});
+		})
+	}
+	
+	function removeEmail(email) {
+		emailsToSend.splice(emailsToSend.indexOf(email),1)
+		drawEmailsInMailsArea()
+		filterEmailsInMemsTable()
+	}
+	
+	function drawEmailsInMailsArea() {
+		$("#mailsCount").text(emailsToSend.length)
+		if ($('#mailsArea').is(":visible")) {
+			$("#mailsArea").empty()
+			for (i in emailsToSend) {
+				emailSpan = $("<span>").append(emailsToSend[i]).addClass("emailTo")
+				deleteButton = $("<a href=\"javascript:removeEmail('" + emailsToSend[i] + "')\">X</span><br>").addClass("deleteButton")
+				$("<span>").append(emailSpan).append(deleteButton).appendTo("#mailsArea")
+			}
+		}
+	}
+	
+	function filterEmailsInMemsTable() {
+		for ( i in tableEmails ) {
+			if ( emailsToSend.indexOf(tableEmails[i]) >= 0 ) {
+				$("#check"+i).attr('checked', true);
+			}
+			else {
+				$("#check"+i).attr('checked', false);
+			}
+		}
+	}
+</script>
+<style>
+	div.form, .usersList { display: inline-block; width:39%; float:left; text-align:left}
+	div.memList { display: inline-block ; width:55% ; padding:10px ; float:right;}
+	div.mailsTo {display: inline-block ;}
+	span.emailTo {background: grey ; color:white ;  border:1px solid black}
+	span.deleteButton {background: grey ; color: red}
+</style>
+<h1>&{'admin.mailer.head'}</h1>
+<div class="wrapper">
+	<div class="form">
+		#{form @sendMail(), id:'adminMailForm', method:"POST", enctype:'multipart/form-data'}
+			<label for="subject">&{'admin.mail.subject'}</label>
+			<input type="text" name="subject" value="" />
+			<br>
+			<a id="mailsToggler">
+				&{'admin.mail.to'}
+				<span id="mailsCount">0</span>
+				&{'admin.mail.to.emailCount'}
+			</a>
+			<div class="mailsTo" id="mailsArea"></div>
+			<input type="hidden" value="" name="emails" id="emails" />
+			<br>
+			<label for="content">&{'admin.mail.content'}</label><br>
+			<textarea style="width:90%" name="content"></textarea><br>
+			
+			<input type="submit" value="&{'admin.mail.send'}"/>
+		#{/form}
+	</div>
+	<div class="memList">
+		<!-- Users Searching and Filtering Panel -->
+		<div class="memSearch">
+			Search <input id="q" type="text" onkeyup="quickSearch(this.value)"/> 
+			<a href="#advanced">(Advanced Search)</a>
+			<!--input value="Filter" type="button" onClick="$('#result').load(listAction({page: '0', query: document.getElementById('filterBy'), value: document.getElementById('value')})" /-->
+		</div>
+		
+		<!-- Users Advanced Searching and Filtering Panel -->
+		<div class="memAdvancedSearch">
+			<span>Advanced Search</span><br>
+			First Name <input type="text"/><br>
+			Last Name <input type="text"/><br>
+			Email <input type="text"/><br>
+			<input value="Filter" type="button" onClick="$('#result').load(listAction({page: '0', query: document.getElementById('filterBy'), value: document.getElementById('value')})" />
+		</div>
+		
+		<!-- Showing results (members table) -->
+		<div id="memTable"></div>
+		
+		<!-- results paging -->
+		<div id="memPageing"></div>
+	</div>
+</div>

File app/views/Admin/membersList.html

View file
  • Ignore whitespace
 #{set title:messages.get('website.title') /}
-<script type="text/javascript" version="1.0">
-	*{ Data about the result, for javascript manipulation }*
-	var membersCount = ${count};
+%{reqFields = ['firstName','lastName','email'] }%
+<script>
+	tableEmails = [ #{list items: members, as: 'member'}'${member.email}', #{/list}'heso' ]
+	membersCount = ${count}
 </script>
-%{reqFields = ['firstName','lastName','email'] }%
 <table id="members_table" border="3" class="left text_align">
 	<thead>
 		<th></th>
 	#{list items: members, as: 'member'}
 	<tr class="${member_parity}" id="memberRow${i}">
 		<td>
-			<input type="checkbox" value="${i}">
+			<input id="check${i}" type="checkbox" value="${i}">
 		</td>
 		#{list items: reqFields, as: 'field'}
 			<td id="${field+i}">
 	</tr>
 	%{ i++ ;}%
 	#{/list}
-</table>
-<form>
-	%{ i = 0 ;}%
-	#{list items: members, as: 'member'}
-	<input type="hidden" id="idValue${i}" value="${member.id}" />
-	<input type="hidden" id="emailValue${i}" value="${member.email}" />
-	%{ i++ ;}%
-	#{/list}
-</form>
+</table>

File app/views/Admin/sendMail.html

  • Ignore whitespace
-#{extends 'main.html' /}
-#{set title:messages.get('website.title') /}
-<script src="@{'/public/javascripts/jquery-1.4.3.min.js'}" type="text/javascript" charset="utf-8"></script>
-<script type="text/javascript">
-	var emails = new Array() ;
-	var p = 0 ;  // page -- TODO: think how to get this value ??
-	
-	function quickSearch(query,p) { 
-	   var listAction = #{jsAction @membersList(':q', ':page') /} ;
-	   $('#memTable').empty().load(listAction({q: query, page: 0}), function() {
-	   		// Add Select/UnSelect behaviour 
-			$("input:checkbox").each(function(){
-				$(this).click(function(){
-					alert(this.value)
-				})
-			});
-	   })
-	}
-</script>
-
-<style>
-	div.form, .usersList { display: inline-block ;  border:1px solid black ; width:39%}
-	div.memList { display: inline-block ;  border:1px solid black ; width:55% ; padding:10px}
-</style>
-<h1>&{'admin.mailer.head'}</h1>
-<div class="wrapper">
-	<div class="form">
-		#{form @sendMail(), id:'adminMailForm', method:"POST", enctype:'multipart/form-data'}
-			<label for="subject">&{'admin.mail.subject'}</label>
-			<input type="text" name="subject" value="" />
-			<br>
-			
-			<label for="to">&{'admin.mail.to'}</label>
-			<input type="hidden" name="subject" value="" />
-			<label id="mailsCount">&{'admin.mail.to.user'}</label>
-			<br>
-			
-			<label for="content">&{'admin.mail.content'}</label><br>
-			<textarea style="width:90%"></textarea><br>
-			
-			<input type="submit" value="&{'admin.mail.send'}"/>
-		#{/form}
-	</div>
-	<div class="memList">
-		<!-- Users Advanced Searching and Filtering Panel -->
-		<div class="memAdvancedSearch">
-			<span>Advanced Search</span><br>
-			First Name <input type="text"/><br>
-			Last Name <input type="text"/><br>
-			Email <input type="text"/><br>
-			<input value="Filter" type="button" onClick="$('#result').load(listAction({page: '0', query: document.getElementById('filterBy'), value: document.getElementById('value')})" />
-		</div>
-		
-		<!-- Users Searching and Filtering Panel -->
-		<div class="memSearch">
-			Search <input id="q" type="text" onkeyup="quickSearch(this.value)"/> 
-			<a href="#advanced">(Advanced Search)</a>
-			<!--input value="Filter" type="button" onClick="$('#result').load(listAction({page: '0', query: document.getElementById('filterBy'), value: document.getElementById('value')})" /-->
-		</div>
-		
-		<!-- Showing results (members table) -->
-		<div id="memTable"></div>
-		
-		<!-- results paging -->
-		<div id="memPageing"></div>
-	</div>
-</div>

File conf/messages.ar

View file
  • Ignore whitespace
 mail.verification.accountVerified = تم تفعيل حسابك
 mail.verification.wrongToken =  عفواً ! خطأ في التفعيل
 
-# Admininstration
+# Administration
 admin.mail.Previous = السابق
 admin.mail.Next = التالي
+admin.mail.subject = الموضوع
+admin.mail.to = إلي 
+admin.mail.content = نص الرساله 
+admin.mail.to.emailCount = بريد أليكتروني 
  
 
 # General

File conf/routes

View file
  • Ignore whitespace
 GET		/admin									Admin.index
 GET		/admin/									Admin.index
 GET		/admin/members/list						Admin.list
-GET		/admin/members/mail						Admin.sendMail
+GET		/admin/members/mail						Admin.mailForm
+POST	/admin/members/mail						Admin.sendMail
 GET		/admin/members/mail/list/{q}			Admin.membersList
 GET		/admin/members/mail/search				Admin.membersSearch
 

File public/stylesheets/main.css

View file
  • Ignore whitespace
     padding: 10px 0;
 	background: #e6e6e6 url("/public/images/nozom-white.png") no-repeat scroll 20px 150px; 
     width: 696px;
+	height:auto;
+	display:table;
+	min-height:400px;
 }
 
 .footer {