From e32a7c67e1a578eba61f220af563820ec2a5d6d6 Mon Sep 17 00:00:00 2001 From: Pierre Date: Sun, 13 May 2018 15:40:19 +0200 Subject: [PATCH] Can send messages from the conversation page --- .../css/pages/conversations/conversation.css | 9 + assets/css/pages/conversations/listPane.css | 9 + assets/js/common/functionsSchema.js | 7 + .../js/components/conversations/interface.js | 2 +- assets/js/pages/conversations/conversation.js | 259 ++++++++++++++++++ assets/js/pages/conversations/listPane.js | 24 +- assets/js/pages/conversations/main.js | 18 +- system/config/dev.config.php | 3 + 8 files changed, 323 insertions(+), 8 deletions(-) create mode 100644 assets/css/pages/conversations/conversation.css create mode 100644 assets/css/pages/conversations/listPane.css create mode 100644 assets/js/pages/conversations/conversation.js diff --git a/assets/css/pages/conversations/conversation.css b/assets/css/pages/conversations/conversation.css new file mode 100644 index 00000000..4df25b1c --- /dev/null +++ b/assets/css/pages/conversations/conversation.css @@ -0,0 +1,9 @@ +/** + * Conversation pane stylesheet + * + * @author Pierre HUBERT + */ + +.conversations-page-container .box-conversation .loading-msg { + +} \ No newline at end of file diff --git a/assets/css/pages/conversations/listPane.css b/assets/css/pages/conversations/listPane.css new file mode 100644 index 00000000..d2729962 --- /dev/null +++ b/assets/css/pages/conversations/listPane.css @@ -0,0 +1,9 @@ +/** + * Conversations list pane + * + * @author Pierre HUBERT + */ + +.conversations-page-container .conversations-list-box { + max-height: 100%; +} \ No newline at end of file diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index 580dd2f1..65fad7e1 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -1124,6 +1124,13 @@ var ComunicWeb = { */ listPane: { //TODO : implement + }, + + /** + * Conversation pane + */ + conversation: { + //TODO : implement } }, diff --git a/assets/js/components/conversations/interface.js b/assets/js/components/conversations/interface.js index be6917b2..1a186e7c 100644 --- a/assets/js/components/conversations/interface.js +++ b/assets/js/components/conversations/interface.js @@ -180,7 +180,7 @@ ComunicWeb.components.conversations.interface = { if(result.error){ //Log error - ComunicWeb.debug.logMessage("Couldn't get informations about the conversation number "+conversationID+" !") + ComunicWeb.debug.logMessage("Couldn't get informations about the conversation number "+conversationID+" !"); //Perform next action now nextStep(result); diff --git a/assets/js/pages/conversations/conversation.js b/assets/js/pages/conversations/conversation.js new file mode 100644 index 00000000..fca5f427 --- /dev/null +++ b/assets/js/pages/conversations/conversation.js @@ -0,0 +1,259 @@ +/** + * Conversation pane + * + * @author Pierre HUBERT + */ + +ComunicWeb.pages.conversations.conversation = { + + /** + * Conversation information + */ + _conv_info: {}, + + /** + * Open a conversation + * + * @param {Number} convID The ID of the conversation to open + * @param {HTMLElement} target The target where the conversation will be + * applied + */ + open: function(convID, target){ + + //Reset conversation information + this._conv_info = { + id: convID, + window: {}, + conversation: null + }; + + //Create conversation box + var box = createElem2({ + appendTo: target, + type: "div", + class: "box box-primary box-conversation" + }); + + //Box header + var boxHeader = createElem2({ + appendTo: box, + type: "div", + class: "box-header" + }); + + //Box title + var boxTitle = createElem2({ + appendTo: boxHeader, + type: "h3", + class: "box-title", + innerHTML: "Loading..." + }); + this._conv_info.window.title = boxTitle; + + //Box body + var boxBody = createElem2({ + appendTo: box, + type: "div", + class: "box-body" + }); + this._conv_info.window.body = boxBody; + + //Loading message + var loadingMsg = createElem2({ + appendTo: boxBody, + class: "loading-msg", + innerHTML: "Please wait, loading..." + }); + + //Get information about the conversation + ComunicWeb.components.conversations.interface.getInfosOne(convID, function(result){ + + //Check for errors + if(result.error) + return loadingMsg.innerHTML = "An error occurred !"; + + //Remove loading message + loadingMsg.remove(); + + //Perform next steps + ComunicWeb.pages.conversations.conversation.onGotInfo(result); + }); + }, + + /** + * Perform action when we got conversation information + * + * @param {Object} info Information about the conversation + */ + onGotInfo: function(info){ + + //Get and apply the name of the conversation + ComunicWeb.components.conversations.utils.getName(info, function(name){ + ComunicWeb.pages.conversations.conversation._conv_info.window.title.innerHTML = name; + }); + + //Add send message form + this.addSendMessageForm(); + }, + + + /** + * Create and append message form + */ + addSendMessageForm: function(){ + + //Check if there is already a form or not on the page + if(!this._conv_info.window.form){ + //Create form container + var formContainer = createElem2({ + appendTo: this._conv_info.window.body, + type: "form" + }); + + //Save form container + this._conv_info.window.form = formContainer; + } + else{ + + //Get the form + var formContainer = this._conv_info.window.form; + + //Empty it + emptyElem(formContainer); + } + + //Add message input + var inputGroup = createElem2({ + appendTo: formContainer, + type: "div", + class: "input-group" + }); + + //Create text input (for message) + var inputText = createElem2({ + appendTo: inputGroup, + type: "textarea", + class: "form-control", + placeholder: "New message...", + }); + inputText.maxLength = 200; + + + //Enable textarea 2.0 on the message + var textarea2 = new ComunicWeb.components.textarea(); + textarea2.init({ + element: inputText, + minHeight: "34px", + autosize: true, + }); + + //Create image input (for optionnal image) + var inputImage = createElem2({ + type: "input", + elemType: "file", + }); + + + //Create button group + var buttonGroup = createElem2({ + appendTo: inputGroup, + type: "span", + class: "input-group-btn", + }); + + //Add emojie button + var emojiButton = createElem2({ + appendTo: buttonGroup, + type: "button", + elemType: "button", + class: "btn btn-flat btn-add-emoji", + }); + + //Add image icon + createElem2({ + type: "i", + appendTo: emojiButton, + class: "fa fa-smile-o" + }); + + //Make emojie button lives + ComunicWeb.components.emoji.picker.addPicker(inputText, emojiButton); + + //Add image button + var imageButton = createElem2({ + appendTo: buttonGroup, + type: "button", + elemType: "button", + class: "btn btn-flat btn-add-image", + }); + imageButton.onclick = function(){ + //Call file selector + inputImage.click(); + }; + + //Add image icon + createElem2({ + type: "i", + appendTo: imageButton, + class: "fa fa-image" + }); + + //Add send button + var sendButton = createElem2({ + appendTo: buttonGroup, + type: "button", + class: "btn btn-primary btn-flat", + elemType: "submit", + }); + + //Add send icon + createElem2({ + appendTo: sendButton, + type: "i", + class: "fa fa-send-o", + }); + + //Prevent textarea from adding a new line when pressing enter + $(inputText).keypress(function(event){ + if(event.keyCode == 13){ + event.preventDefault(); + sendButton.click(); + } + }); + + //Make form lives + formContainer.onsubmit = function(){ + + //Check if message is empty + if(!checkString(inputText.value) && !inputImage.files[0]){ + ComunicWeb.common.notificationSystem.showNotification("Please type a valid message before trying to send it !", "danger", 2); + return false; + } + + //Lock send button + sendButton.disabled = true; + + //Send the message throught the interface + ComunicWeb.components.conversations.interface.sendMessage({ + conversationID: ComunicWeb.pages.conversations.conversation._conv_info.id, + message: inputText.value, + image: inputImage, + callback: function(result){ + + //Unlock send button + sendButton.disabled = false; + + //Check for errors + if(result.error) + return notify("An error occurred while trying to send your message!", "danger"); + + //Reset the form + ComunicWeb.pages.conversations.conversation.addSendMessageForm(); + } + }); + + return false; + } + } + +}; \ No newline at end of file diff --git a/assets/js/pages/conversations/listPane.js b/assets/js/pages/conversations/listPane.js index 84ef2d7f..5c74f69b 100644 --- a/assets/js/pages/conversations/listPane.js +++ b/assets/js/pages/conversations/listPane.js @@ -10,14 +10,15 @@ ComunicWeb.pages.conversations.listPane = { * Display the list of conversation * * @param {HTMLElement} target The target of the page + * @param {Object} args Additional arguments */ - display: function(target){ + display: function(target, args){ //Create the box var listBox = createElem2({ appendTo: target, type: "div", - class: "box box-solid" + class: "box box-solid conversations-list-box" }); //Box header @@ -61,9 +62,10 @@ ComunicWeb.pages.conversations.listPane = { //Remove loading message loadingMsg.remove(); + emptyElem(boxBody); //Remove any previously shown list //Display the list of conversations - ComunicWeb.pages.conversations.listPane._display_list(boxBody, result); + ComunicWeb.pages.conversations.listPane._display_list(boxBody, result, args); }); }, @@ -73,8 +75,9 @@ ComunicWeb.pages.conversations.listPane = { * * @param {HTMLElement} target The target for the list * @param {Object} list The list of conversations + * @param {Object} args Additional arguments */ - _display_list: function(target, list){ + _display_list: function(target, list, args){ //Create the conversations container var conversationsContainer = createElem2({ @@ -89,9 +92,14 @@ ComunicWeb.pages.conversations.listPane = { const conversation = list[num]; //Display conversation element - this._display_entry(conversationsContainer, conversation); + this._display_entry(conversationsContainer, conversation, args); } } + + //Enable slimscroll + $(conversationsContainer).slimScroll({ + height: '100%' + }); }, @@ -100,8 +108,9 @@ ComunicWeb.pages.conversations.listPane = { * * @param {HTMLElement} target The target for the conversation * @param {Object} info Information about the conversation to display + * @param {Object} args Additional arguments */ - _display_entry: function(target, info){ + _display_entry: function(target, info, args) { //Create conversation container element var convContainer = createElem2({ @@ -114,6 +123,9 @@ ComunicWeb.pages.conversations.listPane = { appendTo: convContainer, type: "a" }); + convLink.addEventListener("click", function(e){ + args.opener(info.ID); + }); //Add conversation last activity on the rigth var lastActivityContainer = createElem2({ diff --git a/assets/js/pages/conversations/main.js b/assets/js/pages/conversations/main.js index 790a8f0f..b9513098 100644 --- a/assets/js/pages/conversations/main.js +++ b/assets/js/pages/conversations/main.js @@ -38,7 +38,23 @@ ComunicWeb.pages.conversations.main = { class: "col-md-9" }); + /** + * Open a conversation + * + * @param {Number} id The ID of the conversation + */ + var conversationOpener = function(id){ + + //Empty the target + emptyElem(rightArea); + + //Open the conversation + ComunicWeb.pages.conversations.conversation.open(id, rightArea); + } + //Display the list of conversation - ComunicWeb.pages.conversations.listPane.display(leftArea); + ComunicWeb.pages.conversations.listPane.display(leftArea, { + opener: conversationOpener + }); } } \ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index 397a128b..c7c32ba4 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -197,6 +197,8 @@ class Dev { //Conversations page "css/pages/conversations/main.css", + "css/pages/conversations/listPane.css", + "css/pages/conversations/conversation.css", //Settings page //Sections sections @@ -371,6 +373,7 @@ class Dev { //Conversations page "js/pages/conversations/main.js", "js/pages/conversations/listPane.js", + "js/pages/conversations/conversation.js", //User settings page "js/pages/settings/main.js",