From c89edd3cd6c84bb4dbad7bfb5013c9ab3b3b844f Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Tue, 15 Jan 2019 08:25:59 +0100 Subject: [PATCH] Display conversation messages. --- .../Export.html | 10 +- .../assets/css/main.css | 57 ++++++ .../assets/js/categories/conversations.js | 164 ++++++++++++++++++ .../assets/js/main.js | 1 + .../assets/js/utils.js | 11 +- 5 files changed, 241 insertions(+), 2 deletions(-) create mode 100644 assets/zip/personnal-data-export-navigator/assets/js/categories/conversations.js diff --git a/assets/zip/personnal-data-export-navigator/Export.html b/assets/zip/personnal-data-export-navigator/Export.html index 173eefaa..798880fc 100644 --- a/assets/zip/personnal-data-export-navigator/Export.html +++ b/assets/zip/personnal-data-export-navigator/Export.html @@ -220,8 +220,15 @@ +
- Loading conversations + +

Your conversations

+ +
+ +
+
@@ -238,6 +245,7 @@ + \ No newline at end of file diff --git a/assets/zip/personnal-data-export-navigator/assets/css/main.css b/assets/zip/personnal-data-export-navigator/assets/css/main.css index 934ae657..f70ee1ef 100644 --- a/assets/zip/personnal-data-export-navigator/assets/css/main.css +++ b/assets/zip/personnal-data-export-navigator/assets/css/main.css @@ -108,4 +108,61 @@ h1 { #all-conversation-messages-table .conversation-img { width: 100%; max-width: 300px; +} + + +/** + * Conversations rules + */ +#conversations-target .conversation h2 { + font-size: 150%; + margin-top: 10px; +} + +#conversations-target .conversation .conversation-metadata { + font-size: 90%; + font-style: italic; + margin-bottom: 15px; +} + +#conversations-target .conversation .conversation-members { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; +} + +#conversations-target .conversation .conversation-members > * { + margin-left: 10px; +} + +#conversations-target .conversation .conversation-messages { + margin-top: 50px; +} + +#conversations-target .conversation .conversation-messages .message { + display: flex; + align-items: center; + margin-bottom: 10px; + font-size: 90%; +} + +#conversations-target .conversation .conversation-messages .message .user-info { + font-weight: bold; +} + +#conversations-target .conversation .conversation-messages .message .message-content { + flex: 1; + margin-left: 10px; + margin-right: 10px; +} + +#conversations-target .conversation .conversation-messages .message .message-image { + width: 100%; + max-width: 150px; +} + +#conversations-target .conversation .conversation-messages .message .message-date { + font-size: 70%; + font-style: italic; } \ No newline at end of file diff --git a/assets/zip/personnal-data-export-navigator/assets/js/categories/conversations.js b/assets/zip/personnal-data-export-navigator/assets/js/categories/conversations.js new file mode 100644 index 00000000..4e0032ce --- /dev/null +++ b/assets/zip/personnal-data-export-navigator/assets/js/categories/conversations.js @@ -0,0 +1,164 @@ +/** + * Conversations category + * + * @author Pierre HUBERT + */ + +/** + * Get and return the title of a conversation + * + * @param {Object} conversation Information about the target conversation + * @return {String} The name of the conversation + */ +function GetConversationTitle(conversation){ + + let count = 0; + let name = ""; + + conversation.members.forEach(member_id => { + + //We only needs information about three members + if(count > 3) return; + + //We skip current user ID + if(member_id == userID()) return; + + let memberInfo = getUserInfo(member_id); + + if(name.length > 0) + name += ", "; + + name += memberInfo.full_name; + + }); + + return name; + +} + +/** + * Apply the list of conversations + */ +function ApplyConversations(){ + + let target = byId("conversations-target"); + + data.conversations_list.forEach(conversationInfo => { + + let conversationCard = createElem2({ + appendTo: target, + type: "div", + class: "conversation card blue-grey darken-1" + }); + + let conversationCardContent = createElem2({ + appendTo: conversationCard, + type: "div", + class: "card-content" + }); + + + //Conversation title + createElem2({ + appendTo: conversationCardContent, + type: "h2", + innerHTML: conversationInfo.name ? conversationInfo.name : GetConversationTitle(conversationInfo) + }); + + //Conversation metadata + let metadataContainer = createElem2({ + appendTo: conversationCardContent, + type: "div", + class: "conversation-metadata" + }); + + function addMetadata(data){ + createElem2({ + appendTo: metadataContainer, + type: "div", + innerHTML: data + }) + } + + addMetadata("ID: " + conversationInfo.ID); + addMetadata("Owner: " + getUserInfo(conversationInfo.ID_owner).full_name); + addMetadata("Last activity: " + timeToStr(conversationInfo.last_active)); + addMetadata("Following: " + (conversationInfo.following == 1? "Yes" : "No")); + addMetadata("Saw last message: " + (conversationInfo.saw_last_message == 1? "Yes" : "No")); + + //Process members list + let conversationMembers = createElem2({ + appendTo: conversationCardContent, + type: "div", + class: "conversation-members" + }); + + conversationInfo.members.forEach(member => { + + let memberContainer = createElem2({ + appendTo: conversationMembers, + type: "div" + }); + + fillElWithUserInfo(memberContainer, member); + + }); + + //Process conversation messages + let conversationMessage = createElem2({ + appendTo: conversationCardContent, + type: "div", + class: "conversation-messages" + }); + + data.conversations_messages[conversationInfo.ID].forEach(message => { + + let messageContainer = createElem2({ + appendTo: conversationMessage, + type: "div", + class: "message" + }); + + //Message author + let messageAuthor = createElem2({ + appendTo: messageContainer, + type: "div", + class: "user-info" + }); + fillElWithUserInfo(messageAuthor, message.ID_user); + + //Message content + createElem2({ + appendTo: messageContainer, + type: "div", + class: "message-content", + innerHTML: message.message + }); + + //Message image + if(message.image_path != null){ + let messageImageContainer = createElem2({ + appendTo: messageContainer, + type: "div", + }); + + let messageImage = createElem2({ + appendTo: messageImageContainer, + type: "img", + class: "message-image" + }); + applyURLToImage(messageImage, message.image_path); + } + + //Message date + createElem2({ + appendTo: messageContainer, + type: "div", + class: "message-date", + innerHTML: timeToStr(message.time_insert) + }) + + }); + + }); +} \ No newline at end of file diff --git a/assets/zip/personnal-data-export-navigator/assets/js/main.js b/assets/zip/personnal-data-export-navigator/assets/js/main.js index fe9fa3e9..f51a3302 100644 --- a/assets/zip/personnal-data-export-navigator/assets/js/main.js +++ b/assets/zip/personnal-data-export-navigator/assets/js/main.js @@ -81,6 +81,7 @@ xhr.onload = function(){ ApplySurveyResponses(); ApplyMovies(); ApplyAllConversationMessages(); + ApplyConversations(); } xhr.send(null); \ No newline at end of file diff --git a/assets/zip/personnal-data-export-navigator/assets/js/utils.js b/assets/zip/personnal-data-export-navigator/assets/js/utils.js index 2910c682..b2b9f3c2 100644 --- a/assets/zip/personnal-data-export-navigator/assets/js/utils.js +++ b/assets/zip/personnal-data-export-navigator/assets/js/utils.js @@ -221,4 +221,13 @@ function fillElWithUserInfo(el, id){ applyUserAccountImage(userImage, userInfo); el.innerHTML += " " + userInfo.full_name; -} \ No newline at end of file +} + +/** + * Get and return the ID of the current user + * + * @return {Number} The ID of the current user + */ +function userID() { + return data.advanced_info.userID; +}