diff --git a/assets/zip/personnal-data-export-navigator/Export.html b/assets/zip/personnal-data-export-navigator/Export.html index 8e1b7c1c..159e881b 100644 --- a/assets/zip/personnal-data-export-navigator/Export.html +++ b/assets/zip/personnal-data-export-navigator/Export.html @@ -81,8 +81,11 @@ +
- Loading posts +
+ +
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 de98fb0f..6d5e316e 100644 --- a/assets/zip/personnal-data-export-navigator/assets/css/main.css +++ b/assets/zip/personnal-data-export-navigator/assets/css/main.css @@ -42,4 +42,41 @@ h1 { .background-image { max-width: 100px; +} + + +/** + * Posts rules + */ +.post .post-metadata { + font-style: italic; + display: block; + margin-top: 10px !important; + margin-bottom: 10px !important; +} + +.post .post-comments { + margin-top: 40px; +} + +.post .post-comments .comment { + display: flex; + align-items: center; +} + +.post .post-comments .comment div { + margin: 2px; +} + +.post .post-comments .comment-author { + font-weight: bold; +} + +.post .post-comments .comment-metadata { + font-size: 80%; + font-style: italic; +} + +.post .post-comments .comment .comment-image { + max-width: 100px; } \ 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 ad72dba1..4ccac477 100644 --- a/assets/zip/personnal-data-export-navigator/assets/js/main.js +++ b/assets/zip/personnal-data-export-navigator/assets/js/main.js @@ -109,6 +109,192 @@ function ApplyFriendsList(){ }); } +/** + * Apply the list of posts + */ +function ApplyPosts(){ + + let target = byId("posts-target"); + + data.posts.forEach(post => { + + let userInfo = getUserInfo(post.userID); + + let card = createElem2({ + appendTo: target, + type: "div", + class: "post card blue-grey darken-1" + }); + + let cardContent = createElem2({ + appendTo: card, + type: "div", + class: "card-content white-text" + }); + + let userInfoEl = createElem2({ + appendTo: cardContent, + type: "div", + class: "user-info-container" + }); + + let userImage = createElem2({ + appendTo: userInfoEl, + type: "img" + }); + applyUserAccountImage(userImage, userInfo); + + userInfoEl.innerHTML += userInfo.full_name; + + + //Check if the post was target another page than the user page + if(post.user_page_id != 0 && post.user_page_id != post.userID){ + + userInfoEl.innerHTML += " > "; + let targetUserInfo = getUserInfo(post.user_page_id); + + let targetUserImage = createElem2({ + appendTo: userInfoEl, + type: "img" + }); + + applyUserAccountImage(targetUserImage, targetUserInfo); + + userInfoEl.innerHTML += targetUserInfo.full_name; + } + + //Check if the post was targeting a group + if(post.group_id > 0){ + userInfoEl.innerHTML += " > "; + + userInfoEl.innerHTML += "Group " + post.group_id; + } + + //Post metadata + let postMetadata = createElem2({ + appendTo: cardContent, + type: "div", + class: "post-metadata" + }); + + let addMetadata = function(content){ + createElem2({ + appendTo: postMetadata, + type: "p", + class: "post-date", + innerHTML: content + }); + } + + //Post time + addMetadata(timeToStr(post.post_time)); + + //Post visibility + addMetadata("Visibility: " + post.visibility_level); + + //Post type + addMetadata("Kind of post: " + post.kind); + + //Likes + addMetadata("Number of likes: " + post.likes); + addMetadata("Does user like this post: " + (post.userlike ? "Yes" : "No")); + + //Files info + if(post.file_size != null) addMetadata("File size: " + post.file_size); + if(post.file_type != null) addMetadata("File type: " + post.file_type); + if(post.file_path != null) addMetadata("File path: " + post.file_path); + if(post.file_path_url != null) addMetadata("File path as URL: " + post.file_path_url); + + + //Post content + createElem2({ + appendTo: cardContent, + type: "div", + class: "post-content", + innerHTML: post.content + }); + + + //Process different kind of posts + if(post.kind == "image") { + + var image = createElem2({ + appendTo: cardContent, + type: "img" + }); + + applyURLToImage(image, post.file_path_url); + + } + + + //Display the list of comments + let postComments = createElem2({ + appendTo: cardContent, + type: "div", + class: "post-comments", + innerHTML: "Comments" + }); + post.comments.forEach(comment => { + + //Create comment container + let commentContainer = createElem2({ + appendTo: postComments, + type: "div", + class: "comment" + }); + + let commentCreator = createElem2({ + appendTo: commentContainer, + type: "div", + class: "comment-author" + }); + + fillElWithUserInfo(commentCreator, comment.userID); + + let commentContent = createElem2({ + appendTo: commentContainer, + type: "div", + innerHTML: comment.content + }); + + + //Add comment image (if any) + if(comment.img_url != null){ + + let img = createElem2({ + appendTo: commentContainer, + type: "img", + class: "comment-image" + }); + + applyURLToImage(img, comment.img_url); + + } + + + let commentMetadata = createElem2({ + appendTo: commentContainer, + type: "div", + class: "comment-metadata" + }); + + let addCommentMetadata = function(content){ + createElem2({ + appendTo: commentMetadata, + type: "div", + innerHTML: content + }); + }; + + addCommentMetadata(timeToStr(comment.time_sent)); + addCommentMetadata("Likes: " + comment.likes); + addCommentMetadata("User like: " + (comment.userlike ? "Yes" : "No")); + }) + }); + +} + /** * Automatically switch the tab when it @@ -142,6 +328,7 @@ xhr.onload = function(){ //Now we can apply specific process for each data block ApplyUserInfo(); ApplyFriendsList(); + ApplyPosts(); } 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 2d816590..284bcc81 100644 --- a/assets/zip/personnal-data-export-navigator/assets/js/utils.js +++ b/assets/zip/personnal-data-export-navigator/assets/js/utils.js @@ -174,7 +174,7 @@ function timeToStr(time){ */ function applyURLToImage(el, url){ el.src = getImagePath(url); - el.className + " responsive-img"; + el.className += " responsive-img"; } /** @@ -202,4 +202,23 @@ function getUserInfo(id){ user_info.full_name = user_info.firstName + " " + user_info.lastName; return user_info; +} + +/** + * Fill an HTML Element with user information + * + * @param {HMTLElement} el Target element + * @param {Number} id The ID of the user + */ +function fillElWithUserInfo(el, id){ + + let userInfo = getUserInfo(id); + + let userImage = createElem2({ + appendTo: el, + type: "img" + }); + applyUserAccountImage(userImage, userInfo); + + el.innerHTML += " " + userInfo.full_name; } \ No newline at end of file