Display notifications

assets/css/components/notifications/ui.css

@@ -0,0 +1,13 @@
+/**
+ * Notifications UI
+ *
+ * @author Pierre HUBERT
+ */
+
+.notification-contener p {
+	white-space: normal;
+}
+
+.notification-contener .notification-creation-time {
+	color: #888888;
+}

assets/js/components/notifications/dropdown.js

@@ -17,7 +17,7 @@ ComunicWeb.components.notifications.dropdown = {
 		var dropdown = createElem2({
 			appendTo: target,
 			type: "li",
-			class: "dropdown notifications-menu"
+			class: "dropdown messages-menu"
 		});
 
 		//Add dropdown toggle
@@ -54,8 +54,12 @@ ComunicWeb.components.notifications.dropdown = {
 		});
 
 		//Add notifications list
-		var notificationsList = createElem2({
+		var notificationsListContener = createElem2({
 			appendTo: dropdownMenu,
+			type: "li"
+		});
+		var notificationsList = createElem2({
+			appendTo: notificationsListContener,
 			type: "ul",
 			class: "menu"
 		});
@@ -93,7 +97,35 @@ ComunicWeb.components.notifications.dropdown = {
 				return;
 			}
 
+			//Get the list of required users informations
+			var users_id = ComunicWeb.components.notifications.utils.get_users_id(result);
+			
+			//Get informations about the users
+			ComunicWeb.user.userInfos.getMultipleUsersInfos(users_id, function(users){
+
+				//Check for errors
+				if(users.error){
+					ComunicWeb.common.notificationSystem.showNotification("An error occured while trying to retrieve users informations for the notifications !", "danger");
+					return;
+				}
+
+
+				//Empty the target list
+				list.innerHTML = "";
+
+				//Process the list of notifications
+				for (let i = 0; i < result.length; i++) {
+					const notification = result[i];
+					
+					//Display the notification
+					ComunicWeb.components.notifications.ui.display_notification(notification, list, users);
+				}
+
+			}, false);
+			
+
 		});
 
 	},
+
 }

assets/js/components/notifications/ui.js

@@ -0,0 +1,99 @@
+/**
+ * Notifications UI script
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.notifications.ui = {
+
+	/**
+	 * Display a single notification
+	 * 
+	 * @param {Object} data Informations about the notification
+	 * @param {HTMLElement} target The target of the notification
+	 * @param {Object} users Informations about users that might be required
+	 * to display the notification
+	 */
+	display_notification: function(data, target, users){
+
+		//Generate the informations about the notifications
+		var from_user = users["user-"+data.from_user_id];
+
+		//Generate the appropriate string
+
+		//Notification author
+		var message = userFullName(from_user) + " ";
+
+		//Notification action
+		if(data.type == "comment_created")
+			message += "posted a comment";
+		
+		if(data.type == "elem_created"){
+
+			if(data.on_elem_type == "post")
+				message += "created a new post";
+
+		}
+		message += " ";
+
+		//Notification target
+		if(data.from_container_type == "user_page"){
+
+			if(data.from_container_type == "user_page"){
+
+				if(data.from_user_id == data.from_container_id)
+					message += "on his / her page";
+				else
+					message += "on "+userFullName(users["user-"+data.from_container_id])+"'s page";
+
+			}
+
+		}
+
+		//Create the notification object
+		var notificationContener = createElem2({
+			appendTo: target,
+			type: "li",
+			class: "notification-contener"
+		});
+
+		//Create notification link
+		var notificationLink = createElem2({
+			appendTo: notificationContener,
+			type: "a"
+		});
+
+		//Add notification left content
+		var notificationLeftContent = createElem2({
+			appendTo: notificationLink,
+			type: "div",
+			class: "pull-left"
+		});
+
+		//Add user image
+		var userImage = createElem2({
+			appendTo: notificationLeftContent,
+			type: "img",
+			src: from_user.accountImage,
+			class: "img-circle"
+		});
+
+
+		//Add the notification message
+		var notificationMessage = createElem2({
+			appendTo: notificationLink,
+			type: "p",
+			innerHTML: message
+		});
+
+		//Add notification date
+		var notificationCreationTime = createElem2({
+			appendTo: notificationLink,
+			type: "small",
+			class: "notification-creation-time",
+			innerHTML: '<i class="fa fa-clock-o"></i> ' + ComunicWeb.common.date.timeDiffToStr(data.time_create) + " ago"
+		});
+	},
+
+
+}