diff --git a/assets/css/components/notifications/ui.css b/assets/css/components/notifications/ui.css new file mode 100644 index 00000000..c9c127e9 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/js/components/notifications/dropdown.js b/assets/js/components/notifications/dropdown.js index 667632f2..4f48896b 100644 --- a/assets/js/components/notifications/dropdown.js +++ b/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); + + }); }, + } \ No newline at end of file diff --git a/assets/js/components/notifications/ui.js b/assets/js/components/notifications/ui.js new file mode 100644 index 00000000..18baa93b --- /dev/null +++ b/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: ' ' + ComunicWeb.common.date.timeDiffToStr(data.time_create) + " ago" + }); + }, + + +} \ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index 5fc7609c..9aa0daa6 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -146,6 +146,9 @@ class Dev { "css/components/comments/ui.css", "css/components/comments/form.css", + //Notifications component + "css/components/notifications/ui.css", + //Pages stylesheets //User Page "css/pages/userPage/main.css",