Notification

- Added load bar
    - Added somethings

site/interface/site/main.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/05 18:10:32 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/06 15:43:35 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -18,8 +18,23 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
+function	createRamdomString()
+{
+	const	charset	= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+	let		result	= "";
+	let		length	= Math.floor(Math.random() * 120);
+
+	for (let i = 0; i < length; i++)
+		result += charset.charAt(Math.floor(Math.random() * charset.length));
+	return (result);
+}
 
 document.addEventListener("keydown", (e) => {
 	if (e.key === "+")
-		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");
+		createNotification.new("Server", createRamdomString(), createNotification.defaultIcon.info, () => {
+			console.log("Action button");	
+		}, "Send");
+
+	if (e.key === "-")
+		createNotification.new("Server", createRamdomString());
 });

site/interface/site/notification/main.js

@@ -6,23 +6,17 @@
 /*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 23:32:52 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/05 18:29:04 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/06 16:25:21 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 /*
 	Todo (Eddy) : 
-		- Image but not necessary
-		- icon 
-		- Title
-		- Message
-		- Action button
-		- Timerbar
 		- Close button
 		- pause when hover
 */
 
-function	createHeader(title)
+function	createHeader(title, img)
 {
 	const	divHeader	= document.createElement("div");
 	const	icon		= document.createElement("img");
@@ -30,22 +24,27 @@ function	createHeader(title)
 	const	cross		= document.createElement("p");
 
 	divHeader.classList.add("header");
-	icon.style.width = "20px";
+	if (img)
-	icon.style.height = "20px";
+	{
-	icon.style.position = 'absolute';
+		icon.style.width = "20px";
-	icon.style.left = '10px';
+		icon.style.height = "20px";
-	icon.style.top = '15px';
+		icon.style.position = 'absolute';
+		icon.src = img;
+	}
 	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);
+	cross.style.right = '10px';
+	cross.style.marginTop = '5px';
+	cross.style.fontSize = '20px';
+	cross.style.fontWeight = 'bold';
+	if (img)
+		divHeader.appendChild(icon);
 	divHeader.appendChild(h1Title);
 	divHeader.appendChild(cross);
 	return (divHeader);
@@ -66,18 +65,65 @@ function	createContent(message)
 	return (divContent);
 }
 
-function	newNotification(title, message, img, action, timer)
+function	createLoadBar(timer)
+{
+	const	divLoadBar		= document.createElement("div");
+	const	progress		= document.createElement("div");
+	let		interval		= null;
+	const	intervalTimer	= timer / 100;
+	let		i				= 1;
+
+	progress.classList.add("progress");
+	divLoadBar.classList.add("loadBar");
+	divLoadBar.appendChild(progress);
+	progress.style.height = '5px';
+	progress.style.width = '0px';
+	progress.style.backgroundColor = 'black';
+	interval = setInterval(() => {
+		progress.style.width = (intervalTimer * i) * 100 / timer + "%";
+		i++;
+	}, intervalTimer);
+	setTimeout(() => {
+		clearInterval(interval);
+	}, timer);
+	return (divLoadBar);
+}
+
+function	createFooter(action, actionText)
+{
+	const	newButton	= document.createElement("div");
+
+	if (action == null)
+		return (null);
+	newButton.style.cursor = "pointer";
+	if (actionText.length > 20)
+		actionText = actionText.substring(0, 20) + "...";
+	newButton.innerHTML = actionText;
+	newButton.setAttribute("onclick", action);
+	newButton.classList.add("footer");
+	if (typeof(action) !== "function")
+		throw new Error("Action must be a function");
+	newButton.addEventListener("click", action);
+	return (newButton);
+}
+
+function	newNotification(title, message, img, action, timer, actionText)
 {
 	const	divNotification	= document.getElementById("divNotification");
 	const	newNotification	= document.createElement("div");
-	const	header			= createHeader(title);
+	const	header			= createHeader(title, img);
-	const	content			= createContent(message, img);
+	const	content			= createContent(message);
+	const	footer			= createFooter(action, actionText);
+	const	loadBar			= createLoadBar(timer);
 
 	newNotification.classList.add("notification");
 	newNotification.style.width = "100%";
 	newNotification.appendChild(header);
 	divNotification.appendChild(newNotification);
 	newNotification.appendChild(content);
+	if (footer)
+		newNotification.appendChild(footer);
+	newNotification.appendChild(loadBar);
 	setTimeout(() => {
 		setTimeout(() => {
 			divNotification.removeChild(newNotification);
@@ -89,13 +135,19 @@ function	newNotification(title, message, img, action, timer)
 class notification
 {
 	timer = 5000;
+	defaultIcon = {
+		"warning": "/site/notification/ico/warning.png",
+		"error": "/site/notification/ico/error.png",
+		"success": "/site/notification/ico/success.png",
+		"info": "/site/notification/ico/info.png"
+	};
 
 	constructor() {}
 
-	new(title, message, img=null, action=null)
+	new(title, message, img=null, action=null, actionText="Confirm")
 	{
 		console.log("New notification: " + message);
-		newNotification(title, message, img, action, this.timer);
+		newNotification(title, message, img, action, this.timer, actionText);
 	}
 }
 

site/interface/site/style/notification.css

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 23:44:17 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/05 18:17:02 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/06 15:40:38 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -49,8 +49,8 @@
 	color: white;
 	margin-top: 10px;
 	min-height: 100px;
-	min-width: 150px;
+	min-width: 350px;
-	max-width: 400px;
+	max-width: 350px;
 	animation: slideIn 0.1s;
 }
 
@@ -65,23 +65,32 @@
 }
 
 #divNotification .header img {
-	background-color: #222222;
 	color: white;
 	border: none;
-	margin-right: 6px;
+	margin-left: 9px;
-	margin-top: 4px;
+	margin-top: 9px;
+	object-fit: cover;
+	object-position: 50% 0;
+
 }
 
 #divNotification .content {
 	margin: 0;
 	width: 95%;
 	padding: 2.5%;
-}
+	padding-bottom: 0;
-
-#divNotification .content img {
-	object-fit: cover; object-position: 100% 0;
 }
 
 #divNotification .content p {
 	word-wrap: break-word;
+}
+
+#divNotification .footer {
+	text-align: center;
+	background-color: #333333;
+	margin: 10px;
+}
+
+.progress {
+	transition: width 0.1s;
 }