Added about user box

assets/js/pages/userPage/profileInfos.js

@@ -20,6 +20,9 @@ ComunicWeb.pages.userPage.profileInfos = {
 		//Create the main box
 		this.createMainBox(infos, target);
 
+		//About user box
+		this.createAboutUserBox(infos, target);
+
 	},
 
 	/**
@@ -60,33 +63,6 @@ ComunicWeb.pages.userPage.profileInfos = {
 			innerHTML: infos.firstName + " " + infos.lastName
 		});
 
-		//Create button area
-		var buttonsArea = createElem2({
-			appendTo: boxBody,
-			type: "div",
-		});
-		buttonsArea.style.textAlign = "center";
-		buttonsArea.style.marginTop = "2px";
-		buttonsArea.style.marginBottom = "2px";
-
-		if(signed_in()) {
-
-			if(userID() != infos.userID){
-
-				//Add a button to help user create a conversation with the user
-				var conversationButton = createElem2({
-					appendTo: buttonsArea,
-					type: "button",
-					class: "btn btn-default",
-					innerHTML: "<i class='fa fa-comments'></i>"
-				});
-				
-				conversationButton.onclick = function(){
-					ComunicWeb.components.conversations.manager.openPrivate(infos.userID);
-				}
-			}
-		}
-
 		//Add list of informations about user
 		var listInfos = createElem2({
 			appendTo: boxBody,
@@ -112,27 +88,11 @@ ComunicWeb.pages.userPage.profileInfos = {
 			innerHTML: infos.number_friends
 		});
 
-		//Add user account creation time
-		var accountCreationLi = createElem2({
-			appendTo: listInfos,
-			type: "li",
-			class: "list-group-item"
-		});
-		createElem2({
-			appendTo: accountCreationLi,
-			type: "b",
-			innerHTML: "Member for"
-		});
-		createElem2({
-			appendTo: accountCreationLi,
-			type: "a",
-			class: "pull-right",
-			innerHTML: ComunicWeb.common.date.timeDiffToStr(infos.account_creation_time),
-		});
-
 		//Add user status informations (if required)
 		if(signed_in()){
 			if(userID() != infos.userID){
+
+				// Get user status
 				var userStatus = createElem2({
 					appendTo: boxBody,
 					type: "div",
@@ -140,8 +100,120 @@ ComunicWeb.pages.userPage.profileInfos = {
 				});
 				userStatus.style.textAlign = "center";
 				ComunicWeb.pages.userPage.friendshipStatus.display(infos.userID, userStatus);
+
+				//Add separator
+				userStatus.style.marginBottom = "5px";
+
+				//Create conversation button
+				var conversationButton = createElem2({
+					appendTo: boxBody,
+					type: "button",
+					class: "btn btn-default btn-block",
+					innerHTML: "<i class='fa fa-comments'></i> Conversation"
+				});
+
+				conversationButton.onclick = function(){
+					ComunicWeb.components.conversations.manager.openPrivate(infos.userID);
+				}
 			}
 		}
 		
-	}
+	},
+
+	/**
+	 * Create the about the user box
+	 * 
+	 * @param {Object} infos Informations about the user
+	 * @param {HTMLElement} target The target for the box
+	 */
+	createAboutUserBox: function(infos, target){
+
+		//Create box root
+		var boxRoot = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "box box-primary"
+		});
+
+		//Add box header
+		var boxHeader = createElem2({
+			appendTo: boxRoot,
+			type: "div",
+			class: "box-header with-border"
+		});
+
+		//Add box title
+		createElem2({
+			appendTo: boxHeader,
+			type: "h3",
+			class: "box-title",
+			innerHTML: "About " + infos.firstName
+		});
+
+		//Create box body
+		var boxBody = createElem2({
+			appendTo: boxRoot,
+			type: "div",
+			class: "box-body"
+		});
+
+		
+		//Add user website (if any)
+		if(infos.personnalWebsite){
+			var userWebsite = createElem2({
+				appendTo: boxBody,
+				type: "strong"
+			});
+			createElem2({
+				appendTo: userWebsite,
+				type: "i",
+				class: "fa fa-link margin-r-5"
+			});
+			createElem2({
+				appendTo: userWebsite,
+				type: "span",
+				innerHTML: "Website"
+			});
+			var websiteLinkContainer = createElem2({
+				appendTo: boxBody,
+				type: "p",
+				class: "text-muted",
+			});
+			createElem2({
+				appendTo: websiteLinkContainer,
+				type: "a",
+				href: infos.personnalWebsite,
+				innerHTML: infos.personnalWebsite
+			}).target="_blank";
+
+			//Add separator
+			createElem2({
+				appendTo: boxBody,
+				type: "hr",
+			});
+		}
+
+		//Add informations about membership
+		var membershipInfos = createElem2({
+			appendTo: boxBody,
+			type: "strong"
+		});
+		createElem2({
+			appendTo: membershipInfos,
+			type: "i",
+			class: "fa fa-clock-o margin-r-5"
+		});
+		createElem2({
+			appendTo: membershipInfos,
+			type: "span",
+			innerHTML: "Membership"
+		});
+		createElem2({
+			appendTo: boxBody,
+			type: "p",
+			class: "text-muted",
+			innerHTML: "Member for " + ComunicWeb.common.date.timeDiffToStr(infos.account_creation_time)
+		});
+		
+	},
 };