Display conversation messages.

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

@@ -220,8 +220,15 @@
 
 		</div>
 
+		<!-- All user conversations -->
 		<div id="conversations" class="category container">
-			Loading conversations
+			
+			<h1>Your conversations</h1>
+
+			<div id="conversations-target">
+				<!-- Conversations will go here -->
+			</div>
+
 		</div>
 
 	</main>
@@ -238,6 +245,7 @@
 	<script	src="assets/js/categories/survey.js"></script>
 	<script src="assets/js/categories/movies.js"></script>
 	<script src="assets/js/categories/allConversationMessages.js"></script>
+	<script src="assets/js/categories/conversations.js"></script>
 	<script src="assets/js/main.js"></script>
 </body>
 </html>

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

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

assets/zip/personnal-data-export-navigator/assets/js/main.js

@@ -81,6 +81,7 @@ xhr.onload = function(){
 	ApplySurveyResponses();
 	ApplyMovies();
 	ApplyAllConversationMessages();
+	ApplyConversations();
 }
 
 xhr.send(null);

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;
-}
+}
+
+/**
+ * Get and return the ID of the current user
+ * 
+ * @return {Number} The ID of the current user
+ */
+function userID() {
+	return data.advanced_info.userID;
+}