Display friends and groups

assets/css/components/sidebar.css

@@ -0,0 +1,11 @@
+/**
+ * Sidebar stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.sidebar-menu.memberships-list img {
+	width: 20px;
+	margin-right: 10px;
+	margin-left: -4px;
+}

assets/custom_ts/Utils.d.ts

@@ -14,6 +14,7 @@ declare interface CreateElem2Args {
 	title ?: string,
 	src ?: string,
 	href ?: string,
+	internalHref ?: string,
 	name ?: string,
 	elemType ?: string,
 	value ?: string,
@@ -22,6 +23,8 @@ declare interface CreateElem2Args {
 	innerLang ?: string,
 	innerHTMLprefix ?: string,
 	disabled ?: boolean,
+	children ?: HTMLElement[],
+	onclick ?: Function
 }
 
 declare function createElem(nodeType : string, appendTo : string) : HTMLElement;

assets/js/common/functionsSchema.js

@@ -1217,6 +1217,20 @@ var ComunicWeb = {
 			},
 		},
 
+		/**
+		 * Web application interface
+		 */
+		webApp: {
+
+			/**
+			 * Web app interface
+			 */
+			interface: {
+				//TODO : implement
+			},
+
+		},
+
 		/**
 		 * Easter egg : pacman
 		 */

assets/js/common/page.js

@@ -236,7 +236,7 @@ ComunicWeb.common.page = {
                 var pageTarget = createElem("div", mainContainerElem);
                 pageTarget.id = "pageTarget";
             }
-            else{
+            else {
                 //We can empty page target (much faster)
                 pageTarget.innerHTML = "";
             }

assets/js/common/utils.js

@@ -44,6 +44,7 @@ function createElem(nodeType, appendTo){
  * @info {String} innerHTMLprefix Specify prefix to add at the begining of the content of the element
  * @info {boolean} disabled Set whether the field should be disabled or not (input only)
  * @info {HTMLElement[]} children Children for the new object
+ * @info {Function} onclick
  * @return {HTMLElement} The newly created element
  */
 function createElem2(infos){
@@ -129,6 +130,9 @@ function createElem2(infos){
 		});
 	}
 
+	if(infos.onclick)
+		newElem.addEventListener("click", infos.onclick);
+
 	//Return newly created element
 	return newElem;
 }

assets/js/components/sidebar/main.js

@@ -11,7 +11,8 @@ ComunicWeb.components.sideBar.main = {
 		var sideBar = createElem2({
 			appendTo: byId("wrapper"),
 			type: "aside",
-			class: "main-sidebar"
+			class: "main-sidebar",
+			id: "main-sidebar",
 		});
 
 		var section = createElem2({
@@ -36,7 +37,7 @@ ComunicWeb.components.sideBar.main = {
 				appendTo: userPanel,
 				type: "div",
 				class: "pull-left image cursor-pointer",
-				internalHref: userIDorPath(info),
+				onclick: () => openUserPage(info),
 				children: [
 					createElem2({
 						type: "img",
@@ -56,7 +57,7 @@ ComunicWeb.components.sideBar.main = {
 						type: "p",
 						class: "cursor-pointer",
 						innerHTML: userFullName(info),
-						internalHref: userIDorPath(info),
+						onclick: () => userIDorPath(info),
 					}),
 
 					createElem2({
@@ -102,5 +103,126 @@ ComunicWeb.components.sideBar.main = {
 
 			openPage("search?q=" + searchForm.getElementsByTagName("input")[0].value);
 		});
-	}
+
+
+		// User memberships
+		let userMemberships = createElem2({
+			appendTo: section,
+			type: "ul",
+			class: "sidebar-menu memberships-list" 
+		});
+
+		this.refreshMemberships(userMemberships);
+	},
+
+	/**
+	 * Refresh user memberships
+	 * 
+	 * @param {HTMLElement} target 
+	 */
+	refreshMemberships: function(target){
+		ComunicWeb.components.webApp.interface.getMemberships(
+			() => notify("Could not refresh your memberships!", "error"), 
+			(m, u, g) => this.applyMemberships(target, m, u, g)
+		);
+
+
+	},
+
+	/**
+	 * Apply memberships
+	 * 
+	 * @param {HTMLElement} target
+	 * @param {*} memberships 
+	 * @param {*} users 
+	 * @param {*} groups 
+	 */
+	applyMemberships: function(target, memberships, users, groups) {
+
+		// Empty liste
+		target.innerHTML = "";
+
+		memberships.forEach(e => {
+
+			if(e.type == "friend")
+				this.applyFriend(target, e.friend, users["user-"+e.friend.ID_friend]);
+			
+			if(e.type == "group")
+				this.applyGroup(target, groups[e.id], e.last_activity);
+		});
+	},
+
+
+	/**
+	 * Apply a friend object
+	 * 
+	 * @param {HTMLElement} target 
+	 * @param {*} friend 
+	 * @param {*} user 
+	 */
+	applyFriend: function(target, friend, user) {
+
+		let li = createElem2({
+			appendTo: target,
+			type: "li"
+		});
+
+		let a = createElem2({
+			appendTo: li,
+			onclick: () => openUserPage(user),
+			type: "a"
+		});
+
+		// User icon
+		createElem2({
+			appendTo: a,
+			type: "img",
+			class: "img-circle",
+			src: user.accountImage
+		});
+
+		// User name
+		createElem2({
+			appendTo: a,
+			type: "span",
+			innerHTML: userFullName(user)
+		});
+
+	},
+
+	/**
+	 * Apply group information
+	 * 
+	 * @param {HTMLElement} target 
+	 * @param {*} group 
+	 * @param {*} lastactive 
+	 */
+	applyGroup: function(target, group, lastactive) {
+		
+		let li = createElem2({
+			appendTo: target,
+			type: "li"
+		});
+
+		let a = createElem2({
+			appendTo: li,
+			type: "a",
+			onclick: () => openGroupPage(group)
+		});
+
+		// Group icon
+		createElem2({
+			appendTo: a,
+			type: "img",
+			src: group.icon_url
+		});
+
+		// Group name
+		createElem2({
+			appendTo: a,
+			type: "span",
+			innerHTML: group.name
+		});
+
+	},
 }

assets/js/components/webApp/interface.js

@@ -0,0 +1,56 @@
+/**
+ * Web application interface
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.webApp.interface = {
+
+	/**
+	 * Get all the membership of the user
+	 * 
+	 * @param {Function} err Function called in case of errors
+	 * @param {Function(memberships, usersInfo, groupsInfo) : void} success Function called in case of success
+	 */
+	getMemberships: function(err, success) {
+
+		// Peform the request on the server
+		ComunicWeb.common.api.makeAPIrequest(
+			"webApp/getMemberships", 
+			{}, 
+			true,
+			memberships => {
+				
+				// Check for error
+				if(memberships.error)
+					return err(memberships.error);
+				
+				// Get users & groups ID in case of success
+				let usersID = [];
+				let groupsID = [];
+
+				memberships.forEach(el => {
+					if(el.type == "friend")
+						usersID.push(el.friend.ID_friend);
+					else
+						groupsID.push(el.id);
+				});
+
+				getMultipleUsersInfo(usersID, users => {
+					if(users.error)
+						return err(memberships.error);
+					
+					getInfoMultipleGroups(groupsID, groupsInfo => {
+						if(groupsInfo.error)
+							return err(groupsInfo.error);
+						
+						success(memberships, users, groupsInfo);
+					});
+				});
+
+			}
+		);
+
+	}
+
+}

system/config/dev.config.php

@@ -226,6 +226,9 @@ class Dev {
 			"css/components/calls/callWindow.css",
 			"css/components/calls/ringScreen.css",
 
+			//Sidebar component
+			"css/components/sidebar.css",
+
 			//Pacman (easter egg) stylesheet
 			"css/components/pacman.css",
 
@@ -458,6 +461,9 @@ class Dev {
 			"js/components/calls/ringScreen.js",
 			"js/components/calls/utils.js",
 
+			// Web app component
+			"js/components/webApp/interface.js",
+
 			//Pacman component (easter egg)
 			"js/components/pacman.js",