From 349b66939c9cf06b869d33278987778908f9e1a4 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Mon, 8 Mar 2021 17:08:00 +0100 Subject: [PATCH] Update conversations tab --- .../assets/css/main.css | 4 + .../assets/js/categories/conversations.js | 101 +++++++++++++----- .../assets/js/utils.js | 10 ++ 3 files changed, 90 insertions(+), 25 deletions(-) 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 f70ee1ef..f0643a4a 100644 --- a/assets/zip/personnal-data-export-navigator/assets/css/main.css +++ b/assets/zip/personnal-data-export-navigator/assets/css/main.css @@ -119,6 +119,10 @@ h1 { margin-top: 10px; } +#conversations-target .conversation .conversation-logo { + max-height: 200px; +} + #conversations-target .conversation .conversation-metadata { font-size: 90%; font-style: italic; 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 index 4e0032ce..39c657bb 100644 --- a/assets/zip/personnal-data-export-navigator/assets/js/categories/conversations.js +++ b/assets/zip/personnal-data-export-navigator/assets/js/categories/conversations.js @@ -15,15 +15,15 @@ function GetConversationTitle(conversation){ let count = 0; let name = ""; - conversation.members.forEach(member_id => { + conversation.members.forEach(member => { //We only needs information about three members if(count > 3) return; //We skip current user ID - if(member_id == userID()) return; + if(member.user_id == userID()) return; - let memberInfo = getUserInfo(member_id); + let memberInfo = getUserInfo(member.user_id); if(name.length > 0) name += ", "; @@ -65,6 +65,17 @@ function ApplyConversations(){ innerHTML: conversationInfo.name ? conversationInfo.name : GetConversationTitle(conversationInfo) }); + // Conversation logo + if (conversationInfo.logo) + { + let logo = createElem2({ + appendTo: conversationCardContent, + class: "conversation-logo", + type: "img", + }); + applyURLToImage(logo, conversationInfo.logo); + } + //Conversation metadata let metadataContainer = createElem2({ appendTo: conversationCardContent, @@ -73,18 +84,17 @@ function ApplyConversations(){ }); function addMetadata(data){ - createElem2({ + return 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")); + addMetadata("ID: " + conversationInfo.id); + if (conversationInfo.color) + addMetadata("Color: #" + conversationInfo.color).style.color = "#" + conversationInfo.color; + addMetadata("Last activity: " + timeToStr(conversationInfo.last_activity)); //Process members list let conversationMembers = createElem2({ @@ -100,8 +110,16 @@ function ApplyConversations(){ type: "div" }); - fillElWithUserInfo(memberContainer, member); + fillElWithUserInfo(memberContainer, member.user_id); + const addInfo = (str) => createElem2({ + appendTo: memberContainer, + type: "span", + innerHTML: " " + str + " " + }) + + addInfo(member.is_admin ? "Admin" : ""); + addInfo(member.following ? "Following" : ""); }); //Process conversation messages @@ -111,7 +129,7 @@ function ApplyConversations(){ class: "conversation-messages" }); - data.conversations_messages[conversationInfo.ID].forEach(message => { + data.conversations_messages[conversationInfo.id].forEach(message => { let messageContainer = createElem2({ appendTo: conversationMessage, @@ -119,13 +137,19 @@ function ApplyConversations(){ class: "message" }); + // Handle server messages + if(!message.user_id) { + messageContainer.innerHTML = "Server message:" + JSON.stringify(message.server_message) + ""; + return; + } + //Message author let messageAuthor = createElem2({ appendTo: messageContainer, type: "div", class: "user-info" }); - fillElWithUserInfo(messageAuthor, message.ID_user); + fillElWithUserInfo(messageAuthor, message.user_id); //Message content createElem2({ @@ -135,19 +159,46 @@ function ApplyConversations(){ innerHTML: message.message }); - //Message image - if(message.image_path != null){ - let messageImageContainer = createElem2({ - appendTo: messageContainer, - type: "div", - }); + //Message file + if(message.file != null){ + if (message.file.type.startsWith("image/")) + { + let messageImageContainer = createElem2({ + appendTo: messageContainer, + type: "a", + href: getFilePathFromURL(message.file.url), + }); + messageImageContainer.target = "_blank" + + let messageImage = createElem2({ + appendTo: messageImageContainer, + type: "img", + class: "message-image" + }); + applyURLToImage(messageImage, message.file.url); + } - let messageImage = createElem2({ - appendTo: messageImageContainer, - type: "img", - class: "message-image" - }); - applyURLToImage(messageImage, message.image_path); + else { + let messageFileContainer = createElem2({ + appendTo: messageContainer, + type: "div", + class: "message-file" + }); + + messageFileContainer.innerHTML = + "Size: "+ fileSizeToHuman(message.file.size) + "
" + + "Type: " + message.file.type + "
" + + "URL: "+message.file.url+"
"; + + if (message.file.thumbnail) { + let thumb = createElem2({ + appendTo: messageFileContainer, + type: "img", + class: "message-file-thumb" + }); + applyURLToImage(thumb, message.file.thumbnail) + } + } } //Message date @@ -155,7 +206,7 @@ function ApplyConversations(){ appendTo: messageContainer, type: "div", class: "message-date", - innerHTML: timeToStr(message.time_insert) + innerHTML: timeToStr(message.time_sent) }) }); 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 b2b9f3c2..3c9e3ba1 100644 --- a/assets/zip/personnal-data-export-navigator/assets/js/utils.js +++ b/assets/zip/personnal-data-export-navigator/assets/js/utils.js @@ -231,3 +231,13 @@ function fillElWithUserInfo(el, id){ function userID() { return data.advanced_info.userID; } + + +/** + * Format file size to human readable format + * + * @param {number} size The size to format + */ +function fileSizeToHuman(size) { + return Math.round(size/(1000*1000)*1000)/1000 + "MB"; +} \ No newline at end of file