218 lines
6.7 KiB
Plaintext
218 lines
6.7 KiB
Plaintext
<%@ include file="/WEB-INF/decorators/include.jsp"%>
|
|
|
|
<html>
|
|
<head>
|
|
<script type='text/javascript' src='./javascripts/prototype.js'></script>
|
|
<script type='text/javascript' src='./javascripts/scriptaculous.js'></script>
|
|
<script type='text/javascript' src='./dwr/engine.js'></script>
|
|
<script type='text/javascript' src='./dwr/util.js'></script>
|
|
<script type='text/javascript' src='./dwr/interface/DispatchArticlesJS.js'></script>
|
|
<script type="text/javascript">
|
|
// Mandatory for XHTML strict validation
|
|
//<![CDATA[
|
|
var selectedArticleId;
|
|
var articleId;
|
|
var pattern;
|
|
|
|
function showDetail(artId){
|
|
articleId = artId;
|
|
var divTitle = 'title'+artId;
|
|
var divArticle = 'article'+artId;
|
|
|
|
if (!$(divTitle).hasClassName('selected')){
|
|
if(selectedArticleId != null){
|
|
removeAll(selectedArticleId);
|
|
$('title'+selectedArticleId).removeClassName('selected');
|
|
new Effect.SlideUp('dispatcher'+selectedArticleId);
|
|
|
|
}
|
|
selectedArticleId = articleId;
|
|
$(divTitle).addClassName('selected');
|
|
initDispatcher(divArticle);
|
|
|
|
}else{
|
|
removeAll(articleId);
|
|
new Effect.SlideUp('dispatcher'+articleId);
|
|
$(divTitle).removeClassName('selected');
|
|
selectedArticleId = null;
|
|
}
|
|
}
|
|
|
|
function initDispatcher(elementId){
|
|
|
|
//listes
|
|
|
|
DispatchArticlesJS.getMembersWithoutTheArticle(articleId,fillListMembers);
|
|
DispatchArticlesJS.getMembersWithTheArticle(articleId,fillListArticleMembers);
|
|
|
|
new Effect.SlideDown('dispatcher'+articleId);
|
|
}
|
|
|
|
function fillListArticleMembers(data){
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
var member = data[i];
|
|
var pref;
|
|
if (member.preference=="LIKE"){
|
|
pref = "<span id='pref' style='color:green;font-weight:bold'>LIKE</span>";
|
|
}
|
|
if (member.preference=="DISLIKE"){
|
|
pref = "<span id='pref' style='color:red;font-weight:bold'>DISLIKE</span>";
|
|
}else {
|
|
pref = "<span id='pref' style='font-weight:bold'>INDIFFERENT</span>";
|
|
}
|
|
var value= member.firstName+" "+member.lastName +' nb articles:' + member.nbArticles
|
|
+ " pref: "+ pref;
|
|
var elem = new Element('div',
|
|
{'class':'dynamicListItem','id':member.login,
|
|
"style":"border:1px"}).update(value);
|
|
$('membersArticleList'+articleId).insert(elem);
|
|
elem.observe('click', function(event){
|
|
select(Event.element(event));
|
|
});
|
|
}
|
|
}
|
|
|
|
function fillListMembers(data){
|
|
for (var i = 0; i < data.length; i++) {
|
|
var member = data[i];
|
|
var pref;
|
|
if (member.preference=="LIKE"){
|
|
pref = "<span id='pref' style='color:green;font-weight:bold'>LIKE</span>";
|
|
}
|
|
if (member.preference=="DISLIKE"){
|
|
pref = "<span id='pref' style='color:red;font-weight:bold'>DISLIKE</span>";
|
|
}else {
|
|
pref = "<span id='pref' style='font-weight:bold'>INDIFFERENT</span>";
|
|
}
|
|
var value= member.firstName+" "+member.lastName +' nb articles:' + member.nbArticles
|
|
+ " pref: "+ pref;
|
|
var elem = new Element('div',
|
|
{'class':'dynamicListItem','id':member.login,
|
|
"style":"border:1px"}).update(value);
|
|
$('membersList'+articleId).insert(elem);
|
|
elem.observe('click', function(event){
|
|
select(Event.element(event));
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
function select(elem){
|
|
var item = elem;
|
|
if(item.id != 'pref'){
|
|
if(item.hasClassName('selected')){
|
|
item.removeClassName('selected');
|
|
} else {
|
|
item.addClassName('selected');
|
|
}
|
|
}
|
|
}
|
|
|
|
function removeRemote() {
|
|
var itemsToRemove = $('membersArticleList'+articleId).select('div.selected');
|
|
var membersId = itemsToRemove.pluck('id');
|
|
DispatchArticlesJS.removeMembers(membersId, articleId, remove);
|
|
}
|
|
|
|
function remove() {
|
|
var itemsToRemove = $('membersArticleList'+articleId).select('div.selected');
|
|
//suppression dans la première liste
|
|
itemsToRemove.invoke('remove');
|
|
|
|
//ajout dans la seconde liste
|
|
if (itemsToRemove.length != 0){
|
|
for (var i = 0; i < itemsToRemove.length; i++) {
|
|
item = itemsToRemove[i];
|
|
item.removeClassName('selected');
|
|
$('membersList'+articleId).insert(item);
|
|
}
|
|
}
|
|
}
|
|
|
|
function addRemote(){
|
|
var itemsToAdd = $('membersList'+articleId).select('div.selected');
|
|
var membersId = itemsToAdd.pluck('id');
|
|
DispatchArticlesJS.addMembers(membersId, articleId, add());
|
|
|
|
}
|
|
|
|
function add() {
|
|
var itemsToAdd = $('membersList'+articleId).select('div.selected');
|
|
//suppression dans la première liste
|
|
itemsToAdd.invoke('remove');
|
|
|
|
//ajout dans la seconde liste
|
|
if (itemsToAdd.length != 0){
|
|
for (var i = 0; i < itemsToAdd.length; i++) {
|
|
item = itemsToAdd[i];
|
|
item.removeClassName('selected');
|
|
$('membersArticleList'+articleId).insert(item);
|
|
}
|
|
}
|
|
}
|
|
|
|
function removeAll(artId){
|
|
var itemsToRemove = $('membersArticleList'+artId).select('div.dynamicListItem');
|
|
itemsToRemove.invoke('remove');
|
|
itemsToRemove = $('membersList'+artId).select('div.dynamicListItem');
|
|
itemsToRemove.invoke('remove');
|
|
}
|
|
//]]>
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h4 class="title"><fmt:message key="delegateArticles.choose" /></h4>
|
|
<p class="formHelp">
|
|
<fmt:message key="disptachArticle.help" />
|
|
</p>
|
|
<c:forEach var="article" items="${articles}">
|
|
<div style="border:1px solid orange;">
|
|
<div id="article${article.id}">
|
|
<div id="title${article.id}" onclick="showDetail(${article.id})">
|
|
<table style="width:100%;text-align:center;">
|
|
<tr>
|
|
<td><img src="./images/cc-wp-64x64.png"></td>
|
|
<td>title : ${article.title}
|
|
<br/>theme: ${article.topic}
|
|
<br/>main author: ${article.mainAuthor.firstName}${article.mainAuthor.lastName}
|
|
|
|
<c:if test="${!empty article.secondaryAuthors}">
|
|
<br/>secondaries authors:
|
|
<c:forEach var="author" items="${article.secondaryAuthors}">
|
|
<br/>${author}
|
|
</c:forEach>
|
|
</c:if>
|
|
</td>
|
|
<td><a href="<c:url value='detailArticle.htm?id=${article.id}'/>">article's detail</a></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id='dispatcher${article.id}' class="textBox" style="display:none;">
|
|
<table style="width:100%;">
|
|
<tr><td>
|
|
<h1><fmt:message key="members.list1"/></h1>
|
|
|
|
<div id="membersList${article.id}" style="border:1px solid black; max-height:150px;overflow:auto;">
|
|
</div>
|
|
|
|
</td><td>
|
|
<input type="button" name="addButton" value="add>>>" onclick="addRemote()"/><br/>
|
|
<input type="button" name="removeButton" value="<<<remove" onclick="removeRemote()"/>
|
|
</td><td>
|
|
<h1><fmt:message key="members.list2"/></h1>
|
|
<div id="membersArticleList${article.id}" style="border:1px solid black; max-height:150px;overflow:auto;">
|
|
</div>
|
|
</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:forEach>
|
|
|
|
</body>
|
|
|
|
</html>
|