Show conversation members

assets/js/common/utils.js

@@ -32,6 +32,7 @@ function createElem(nodeType, appendTo){
  * @info {HTMLElement} id The ID of the new element
  * @info {HTMLElement} title The title of the new element
  * @info {HTMLElement} src The src attribute of the new element
+ * @info {HTMLElement} innerHTML Specify the html content of the newly created element
  * @return {HTMLElement} The newly created element
  */
 function createElem2(infos){
@@ -62,6 +63,10 @@ function createElem2(infos){
 	if(infos.src)
 		newElem.src = infos.src;
 
+	//Specify node content
+	if(infos.innerHTML)
+		newElem.innerHTML = infos.innerHTML;
+
 	//Return newly created element
 	return newElem;
 }

assets/js/components/conversations/chatWindows.js

@@ -21,8 +21,12 @@ ComunicWeb.components.conversations.chatWindows = {
 		//First, create the generic conversation window
 		var infosBox = ComunicWeb.components.conversations.windows.create(infos.target.children[0]);
 
+		//Save conversation ID
 		infosBox.conversationID = infos.conversationID;
 
+		//Change box root class name
+		infosBox.rootElem.className += " direct-chat";
+
 		//Adapt close button behaviour
 		infosBox.closeFunction = function(){
 			
@@ -35,6 +39,31 @@ ComunicWeb.components.conversations.chatWindows = {
 
 		infosBox.closeButton.onclick = infosBox.closeFunction;
 
+
+		//Debug
+		infosBox.boxBody.innerHTML = "<div class='direct-chat-messages'>Hello world</p>";
+
+		//Add button to get conversation members
+		infosBox.membersButton = createElem("button");
+		infosBox.closeButton.parentNode.insertBefore(infosBox.membersButton, infosBox.closeButton);
+		infosBox.membersButton.type = "button";
+		infosBox.membersButton.className = "btn btn-box-tool";
+		infosBox.membersButton.setAttribute("data-toggle", "tooltip");
+		infosBox.membersButton.setAttribute("data-widget", "chat-pane-toggle");
+		infosBox.membersButton.title = "Conversation members";
+
+			//Add button icon
+			var buttonIcon = createElem("i", infosBox.membersButton);
+			buttonIcon.className = "fa fa-users";
+
+		//Add conversation members pane
+		var membersPane = createElem("div", infosBox.boxBody);
+		membersPane.className = "direct-chat-contacts";
+		
+		//Add conversation members list
+		infosBox.membersList = createElem("ul", membersPane);
+		infosBox.membersList.className = "contacts-list";
+		
 		//Return informations about the chat window
 		return infosBox;
 
@@ -62,5 +91,70 @@ ComunicWeb.components.conversations.chatWindows = {
 
 		//Success
 		return true;
+	},
+
+	/**
+	 * Update conversation members list
+	 * 
+	 * @param {Object} conversation Informations about the conversation
+	 * @return {Boolean} True for a success
+	 */
+	updateMembersList: function(conversation){
+		
+		//First, make sure conversation members pane is empty
+		emptyElem(conversation.box.membersList);
+
+		//Then process each user
+		var i = 0;
+		for(i in conversation.infos.members){
+			if(conversation.membersInfos['user-'+conversation.infos.members[i]]){
+				var memberInfos = conversation.membersInfos['user-'+conversation.infos.members[i]];
+
+				//Display user informations
+				var userLi = createElem("li", conversation.box.membersList);
+				var userLink = createElem("a", userLi);
+				
+				//Add user account image
+				var userImage = createElem("img", userLink);
+				userImage.className = "contacts-list-img";
+				userImage.src = memberInfos.accountImage;
+				
+				//Add member informations
+				var memberInfosList = createElem2({
+					type: "div", 
+					appendTo: userLink,
+					class: "contacts-list-info",
+				});
+
+				//Add user name
+				var memberName = createElem2({
+					type: "span",
+					appendTo: memberInfosList,
+					class: "contacts-list-name",
+					innerHTML: memberInfos.firstName + " " + memberInfos.lastName,
+				});
+
+				//Check if members is a moderator or not of the conversation
+				var memberStatus = conversation.infos.ID_owner == memberInfos.userID ? "Moderator" : "Member";
+
+				//Add member status
+				var memberStatus = createElem2({
+					type: "span",
+					appendTo: memberInfosList,
+					class: "contats-list-msg",
+					innerHTML: memberStatus
+				});
 			}
+		}
+
+		//Enable slimscrooll
+		$(conversation.box.membersList).slimscroll({
+			height: "100%",
+			color: "#FFFFFF"
+		});
+
+		//Success
+		return true;
+	}
+
 }

assets/js/components/conversations/manager.js

@@ -152,6 +152,7 @@ ComunicWeb.components.conversations.manager = {
 
 		//Peform a request to informations about the conversation
 		ComunicWeb.components.conversations.interface.getInfosOne(conversationID, function(informations){
+
 			//In case of error
 			if(informations.error){
 				//Display error notification
@@ -159,11 +160,31 @@ ComunicWeb.components.conversations.manager = {
 				return false;
 			}
 
+			//Get informations about the members of the conversation
+			ComunicWeb.user.userInfos.getMultipleUsersInfos(informations.members, function(membersInfos){
+
+				//Quit in case of error
+				if(informations.error){
+					//Display error notification
+					ComunicWeb.common.notificationSystem.showNotification("Couldn't get informations about the conversation members !", "danger");
+					return false;
+				}
+				
+				//Create conversation informations root object
+				var conversationInfos = {
+					box: conversationWindow,
+					membersInfos: membersInfos,
+					infos: informations
+				};
+
 				//Change the name of the conversation
 				ComunicWeb.components.conversations.utils.getName(informations, function(conversationName){
 					ComunicWeb.components.conversations.chatWindows.changeName(conversationName, conversationWindow);
 				});
 
+				//Update conversation members informations
+				ComunicWeb.components.conversations.chatWindows.updateMembersList(conversationInfos);
+			});
 		});
 
 		//Success