From 949e9accdd59532a50ab176883ce43c07295c731 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Thu, 16 May 2019 15:48:50 +0200 Subject: [PATCH] Display friends and groups --- assets/css/components/sidebar.css | 11 ++ assets/custom_ts/Utils.d.ts | 3 + assets/js/common/functionsSchema.js | 14 +++ assets/js/common/page.js | 2 +- assets/js/common/utils.js | 4 + assets/js/components/sidebar/main.js | 130 ++++++++++++++++++++++- assets/js/components/webApp/interface.js | 56 ++++++++++ system/config/dev.config.php | 6 ++ 8 files changed, 221 insertions(+), 5 deletions(-) create mode 100644 assets/css/components/sidebar.css create mode 100644 assets/js/components/webApp/interface.js diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css new file mode 100644 index 00000000..f241898e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/custom_ts/Utils.d.ts b/assets/custom_ts/Utils.d.ts index 3fd12b36..75a862e2 100644 --- a/assets/custom_ts/Utils.d.ts +++ b/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; diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index e9b90190..c39a89e6 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -1217,6 +1217,20 @@ var ComunicWeb = { }, }, + /** + * Web application interface + */ + webApp: { + + /** + * Web app interface + */ + interface: { + //TODO : implement + }, + + }, + /** * Easter egg : pacman */ diff --git a/assets/js/common/page.js b/assets/js/common/page.js index 7c18f2e0..fcce0dfc 100644 --- a/assets/js/common/page.js +++ b/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 = ""; } diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index 4c0008cd..13134332 100644 --- a/assets/js/common/utils.js +++ b/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; } diff --git a/assets/js/components/sidebar/main.js b/assets/js/components/sidebar/main.js index 0e697bd3..d6981c9c 100644 --- a/assets/js/components/sidebar/main.js +++ b/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 + }); + + }, } \ No newline at end of file diff --git a/assets/js/components/webApp/interface.js b/assets/js/components/webApp/interface.js new file mode 100644 index 00000000..1ac40114 --- /dev/null +++ b/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); + }); + }); + + } + ); + + } + +} \ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index 8a891083..a6701a57 100644 --- a/system/config/dev.config.php +++ b/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",