Begin to display posts

assets/zip/personnal-data-export-navigator/Export.html

@@ -81,8 +81,11 @@
 			</table>
 		</div>
 
+		<!-- Posts list -->
 		<div id="posts" class="category container">
-			Loading posts
+			<div id="posts-target">
+				<!-- Posts will go here -->
+			</div>
 		</div>
 
 		<div id="comments" class="category container">

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;
 }

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);

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;
 }