From 7f22b6004cb5eb98a92eca7fdde588b1535f7b77 Mon Sep 17 00:00:00 2001 From: Pierre Date: Sun, 25 Jun 2017 19:10:26 +0200 Subject: [PATCH] Can show first message --- .../css/components/conversations/windows.css | 7 ++ assets/js/common/utils.js | 15 ++- .../components/conversations/chatWindows.js | 99 ++++++++++++++++++- assets/js/components/conversations/service.js | 34 +++++-- 4 files changed, 144 insertions(+), 11 deletions(-) diff --git a/assets/css/components/conversations/windows.css b/assets/css/components/conversations/windows.css index 4c6c3218..3ab1307a 100644 --- a/assets/css/components/conversations/windows.css +++ b/assets/css/components/conversations/windows.css @@ -62,4 +62,11 @@ -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); +} + +/** + * Conversations messages + */ +#conversationsElem .conversation-msg-image { + height: 50px; } \ No newline at end of file diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index 636dba6a..ac04a29d 100644 --- a/assets/js/common/utils.js +++ b/assets/js/common/utils.js @@ -27,7 +27,8 @@ function createElem(nodeType, appendTo){ * @param {Object} infos Informations about the HTML node to create * @info {String} type The type of the new node * @info {HTMLElement} appendTo HTML Element that will receive the new node - * @info {String} insertBefore Insert before specified HTML element + * @info {HTMLElement} insertBefore Insert before specified HTML element + * @info {HTMLElement} insertAsFirstChild Insert the new HTML Element as the first child of the specified element * @info {String} class The class of the new element * @info {String} id The ID of the new element * @info {String} title The title of the new element @@ -50,6 +51,16 @@ function createElem2(infos){ if(infos.insertBefore) infos.insertBefore.parentNode.insertBefore(newElem, infos.insertBefore); + //Append as the first child of an element + if(infos.insertAsFirstChild){ + //Check if the element as already a child or not + if(infos.insertAsFirstChild.firstChild) + infos.insertAsFirstChild.insertBefore(newElem, infos.insertAsFirstChild.firstChild); + //Else we can just append the newly created element + else + infos.insertAsFirstChild.appendChild(newElem); + } + //Specify the class of the element if(infos.class) newElem.className = infos.class; @@ -221,7 +232,7 @@ function createFormGroup(infos){ } //In case of textarea - else if(infos.type = "textarea"){ + else if(infos.type == "textarea"){ //Fill label value if(infos.label) labelElem.innerHTML = infos.label; diff --git a/assets/js/components/conversations/chatWindows.js b/assets/js/components/conversations/chatWindows.js index a9de9f1d..0d8eab94 100644 --- a/assets/js/components/conversations/chatWindows.js +++ b/assets/js/components/conversations/chatWindows.js @@ -56,7 +56,7 @@ ComunicWeb.components.conversations.chatWindows = { infosBox.conversationID = infos.conversationID; //Change box root class name - infosBox.rootElem.className += " direct-chat"; + infosBox.rootElem.className += " direct-chat direct-chat-primary"; //Adapt close button behaviour infosBox.closeFunction = function(){ @@ -80,7 +80,7 @@ ComunicWeb.components.conversations.chatWindows = { appendTo: infosBox.boxBody, type: "div", class: "direct-chat-messages", - innerHTML: "

Loading, please wait...

", + innerHTML: "", }); //Add button to get conversation members @@ -317,7 +317,7 @@ ComunicWeb.components.conversations.chatWindows = { //Empty messages area emptyElem(conversationInfos.box.messagesArea); - conversationInfos.box.messagesArea.innerHTML = "

Reloading, please wait...

"; + conversationInfos.box.messagesArea.innerHTML = ""; //Un-register conversation ComunicWeb.components.conversations.service.unregisterConversation(conversationID); @@ -682,6 +682,99 @@ ComunicWeb.components.conversations.chatWindows = { //Success return true; }, + + /** + * Add a message to a conversation window + * + * @param {Integer} conversationID The ID of the conversation to update + * @param {Object} messageInfos Informations about the message to add + * @return {Boolean} True for a success + */ + addMessage: function(conversationID, messageInfos){ + + console.log(messageInfos); + + //First, check if the conversation informations can be found + if(!this.__conversationsCache["conversation-"+conversationID]){ + ComunicWeb.debug.logMessage("Conversation Chat Windows : Error ! Couldn't add a message to the conversation because the conversation was not found !"); + return false; + } + + //Else extract conversation informations + var convInfos = this.__conversationsCache["conversation-"+conversationID]; + + //Check if it is the current user who sent the message + var userIsPoster = messageInfos.ID_user == userID(); + + //Create message element + var messageElem = createElem2({ + insertAsFirstChild: convInfos.box.messagesArea, + type: "div", + class: "direct-chat-msg " + (userIsPoster ? "right" : "") + }); + + //Display message header + var messageHeader = createElem2({ + appendTo: messageElem, + type: "div", + class: "direct-chat-info clearfix" + }); + + //Add user name + var usernameElem = createElem2({ + appendTo: messageHeader, + type: "span", + class: "direct-chat-name pull-" + (userIsPoster ? "right" : "left"), + innerHTML: "Loading", + }); + + //Add user account image + var userAccountImage = createElem2({ + appendTo: messageElem, + type: "img", + class: "direct-chat-img", + src: ComunicWeb.__config.assetsURL + "img/defaultAvatar.png", + alt: "User account image", + }); + + //Add message + var messageTargetElem = createElem2({ + appendTo: messageElem, + type: "div", + class: "direct-chat-text", + }); + + //Add text message + createElem2({ + appendTo: messageTargetElem, + type: "span", + innerHTML: messageInfos.message, + }); + + //Check if an image has to be added + if(messageInfos.image_path != null){ + createElem2({ + appendTo: messageTargetElem, + type: "img", + src: messageInfos.image_path, + class: "conversation-msg-image" + }); + } + + //Load user informations + if(convInfos.membersInfos["user-" + messageInfos.ID_user]){ + + //Get informations + var userInfos = convInfos.membersInfos["user-" + messageInfos.ID_user]; + + //Replace poster name + usernameElem.innerHTML = userInfos.firstName + " " + userInfos.lastName; + userAccountImage.src = userInfos.accountImage; + } + + //Success + return true; + }, } //Register conversations cache cleaning function diff --git a/assets/js/components/conversations/service.js b/assets/js/components/conversations/service.js index e2e9849b..d5ebc210 100644 --- a/assets/js/components/conversations/service.js +++ b/assets/js/components/conversations/service.js @@ -94,8 +94,7 @@ ComunicWeb.components.conversations.service = { */ performTask: function(){ - console.log(this.__serviceCache); - //Prepare API request + //Prepare interface request var newConversations = []; var conversationsToRefresh = {} @@ -107,13 +106,13 @@ ComunicWeb.components.conversations.service = { var processConversation = this.__serviceCache[i].conversationID; //Check if it is new conversation - if(this.__serviceCache[i].last_update === 0) + if(this.__serviceCache[i].last_message_id === 0) newConversations.push(processConversation); //Else perform a simple update of the conversation else { conversationsToRefresh["conversation-"+processConversation] = { - last_update: this.__serviceCache[i].last_update, + last_message_id: this.__serviceCache[i].last_message_id, }; } } @@ -139,7 +138,7 @@ ComunicWeb.components.conversations.service = { * @return {Boolean} True for a success */ callback: function(result){ - + console.log(result); //Check for errors if(result.error){ ComunicWeb.debug.logMessage("Conversations Service : Couldn't update conversations !"); @@ -149,6 +148,29 @@ ComunicWeb.components.conversations.service = { } else { //We can continue with the result + //Process each conversation + var i; + for(i in result){ + + //Check if new entries are available + if(result[i].length === 0) + continue; //Nothing to be done + + //Extract conversation ID + var conversationID = this.__serviceCache[i].conversationID; + + //Extract conversation ID + var messages = result[i]; + + //We update last message ID with the last message ID + this.__serviceCache[i].last_message_id = messages[messages.length-1].ID; + + //We process each message by calling chat windows script to ask it to add messages + var j; + for(j in messages) + ComunicWeb.components.conversations.chatWindows.addMessage(conversationID, messages[j]); + + } } //Unlock service @@ -173,7 +195,7 @@ ComunicWeb.components.conversations.service = { //Register conversation this.__serviceCache['conversation-' + conversationID] = { conversationID: conversationID, - last_update: 0, + last_message_id: 0, }; //Success