Notification

- New apparence but not finish
Livechat
    - Fixed being able to execute code if it is in the pseudo with <script>

site/interface/site/liveChat/showPrivateChat.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   showPrivateChat.js                                 :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 19:17:54 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/04 23:00:10 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/05 16:51:04 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -120,7 +120,8 @@ async function	displayInputBar(divMessageListChatHome, user)
 	inputMessage.focus();
 }
 
-function	sendMessage(user) {
+function	sendMessage(user)
+{
 	const	inputMessage = document.getElementById("inputMessage");
 	let 	message;
 

site/interface/site/liveChat/showUserList.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   showUserList.js                                    :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 19:21:10 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/04 22:54:30 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/05 14:28:31 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -28,14 +28,17 @@ async function	showListUser() {
 	if (JSON.stringify(userList) !== "{}")
 	{
 		userList.forEach(element => {
-			divMessageListChatHome.innerHTML += `
+			let user = document.createElement("div");
-				<div class="user">
+			user.classList.add("user");
-					<div class="status ${element.status}">
+			user.innerHTML = `
-						<img src="${element.pfp}">
+				<div class="status ${element.status}">
-					</div>
+						<img>
-					<h3>${element.name}</h3>
 				</div>
-			`;		
+				<h3></h3>
+			`
+			user.querySelector("img").src = element.pfp;
+			user.querySelector("h3").innerText = element.name;
+			divMessageListChatHome.appendChild(user);
 		});
 	}
 	divMessageListChatHome.innerHTML += "<p style='text-align: center; margin-top: 20px;'>New conversation +</p>";

site/interface/site/main.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/04 23:47:45 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/05 18:10:32 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -20,10 +20,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
 
 document.addEventListener("keydown", (e) => {
-	if (e.key === "/")
+	if (e.key === "+")
-		createNotification.info("Hello");
+		createNotification.new("Server", "Server dsalj dhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkver dsalj dhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkver dsalj dhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkver dsalj dhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkver dsalj dhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkver dsalj dhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dkasjdl jsahkjd ashkjddhsakj hdsakjh dasjdl jsahkjd ashkjd shakjdh sakjhd askjhd aksjhd kjsahd jsk is slow");
-	if (e.key === "*")
-		createNotification.success("Hello");
-	if (e.key === "-")
-		createNotification.error("Hello");
 });

site/interface/site/notification/main.js

@@ -3,16 +3,17 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 23:32:52 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/05 00:24:52 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/05 18:29:04 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 /*
 	Todo (Eddy) : 
 		- Image but not necessary
+		- icon 
 		- Title
 		- Message
 		- Action button
@@ -21,55 +22,80 @@
 		- pause when hover
 */
 
-function	newNotification(type, timer)
+function	createHeader(title)
 {
-	const	divNotification = document.getElementById("divNotification");
+	const	divHeader	= document.createElement("div");
-	const	newNotification = document.createElement("div");
+	const	icon		= document.createElement("img");
+	const	h1Title		= document.createElement("h1");
+	const	cross		= document.createElement("p");
+
+	divHeader.classList.add("header");
+	icon.style.width = "20px";
+	icon.style.height = "20px";
+	icon.style.position = 'absolute';
+	icon.style.left = '10px';
+	icon.style.top = '15px';
+	h1Title.innerHTML = title;
+	h1Title.style.textAlign = "center";
+	h1Title.style.width = "100%";
+	h1Title.style.marginTop = "5px";
+	cross.innerHTML = "X";
+	cross.style.position = 'absolute';
+	cross.style.right = '10px';
+	cross.style.top = '20px';
+	cross.style.cursor = 'pointer';
+	cross.style.margin = '0';
+	divHeader.appendChild(icon);
+	divHeader.appendChild(h1Title);
+	divHeader.appendChild(cross);
+	return (divHeader);
+}
+
+function	createContent(message)
+{
+	const	divContent	= document.createElement("div");
+	const	pMessage	= document.createElement("p");
+	const	limit		= 100;
+
+	divContent.classList.add("content");
+	pMessage.style.textAlign = "center";
+	if (message.length > limit)
+		message = message.substring(0, limit) + "...";
+	pMessage.innerHTML = message;
+	divContent.appendChild(pMessage);
+	return (divContent);
+}
+
+function	newNotification(title, message, img, action, timer)
+{
+	const	divNotification	= document.getElementById("divNotification");
+	const	newNotification	= document.createElement("div");
+	const	header			= createHeader(title);
+	const	content			= createContent(message, img);
 
 	newNotification.classList.add("notification");
-
-	newNotification.innerHTML = "This is a " + type + " notification";
 	newNotification.style.width = "100%";
+	newNotification.appendChild(header);
 	divNotification.appendChild(newNotification);
-	setInterval(() => {
+	newNotification.appendChild(content);
-		newNotification.style.opacity = 1;
-	}, 100);
 	setTimeout(() => {
 		setTimeout(() => {
 			divNotification.removeChild(newNotification);
-		}, 99);
+		}, 199);
-		newNotification.style.animation = "slideOut 0.11s";
+		newNotification.style.animation = "slideOut 0.21s";
 	}, timer);
 }
 
 class notification
 {
-	timer = 2000;
+	timer = 5000;
 
 	constructor() {}
 
-	info(message, action=null)
+	new(title, message, img=null, action=null)
 	{
-		console.log("New info notification: " + message);
+		console.log("New notification: " + message);
-		newNotification("info", this.timer);
+		newNotification(title, message, img, action, this.timer);
-	}
-
-	success(message, action=null)
-	{
-		console.log("New success notification: " + message);
-		newNotification("success", this.timer);
-	}
-
-	warning(message, action=null)
-	{
-		console.log("New warning notification: " + message);
-		newNotification("warning", this.timer);
-	}
-
-	error(message, action=null)
-	{
-		console.log("New error notification: " + message);
-		newNotification("error", this.timer);
 	}
 }
 

site/interface/site/style/notification.css

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   notification.css                                   :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 23:44:17 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/05 00:15:17 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/05 18:17:02 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -36,10 +36,9 @@
 #divNotification {
 	position: fixed;
 	overflow: hidden;
-	top: 10px;
+	font-family: 'Poppins';
-	right: 0;
+	top: 0px;
-	width: 300px;
+	right: 10px;
-	height: 100%;
 	display: flex;
 	flex-direction: column;
 	z-index: 1000;
@@ -48,10 +47,41 @@
 #divNotification .notification {
 	background-color: #222222;
 	color: white;
-	padding: 10px;
+	margin-top: 10px;
-	margin: 10px;
-	border-radius: 5px;
-	height: 100px;
 	min-height: 100px;
+	min-width: 150px;
+	max-width: 400px;
 	animation: slideIn 0.1s;
 }
+
+#divNotification .header {
+	display: flex;
+	flex-direction: row;
+}
+
+#divNotification .header h1 {
+	font-size: 1.2em;
+	margin: 0;
+}
+
+#divNotification .header img {
+	background-color: #222222;
+	color: white;
+	border: none;
+	margin-right: 6px;
+	margin-top: 4px;
+}
+
+#divNotification .content {
+	margin: 0;
+	width: 95%;
+	padding: 2.5%;
+}
+
+#divNotification .content img {
+	object-fit: cover; object-position: 100% 0;
+}
+
+#divNotification .content p {
+	word-wrap: break-word;
+}

websocket-server/typeRequets/getPrivateListUser.py

@@ -3,10 +3,10 @@
 #                                                         :::      ::::::::    #
 #    getPrivateListUser.py                              :+:      :+:    :+:    #
 #                                                     +:+ +:+         +:+      #
-#    By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+         #
+#    By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+         #
 #                                                 +#+#+#+#+#+   +#+            #
 #    Created: 2024/08/03 15:10:23 by edbernar          #+#    #+#              #
-#    Updated: 2024/08/04 14:00:44 by edbernar         ###   ########.fr        #
+#    Updated: 2024/08/05 16:36:53 by edbernar         ###   ########.fr        #
 #                                                                              #
 # **************************************************************************** #
 
@@ -50,7 +50,7 @@ data = [
 			"status": "offline",
 			"pfp": "https://pbs.twimg.com/media/EscE6ckU0AA-Uhe.png",
 			"id": 654123
-		},
+		}
 ]
 
 async def getPrivateListUser(userClass, content=None):