From 14cf302833d3d660ae4dad8c415c10f244493a25 Mon Sep 17 00:00:00 2001 From: edbernar Date: Tue, 6 Aug 2024 16:27:07 +0200 Subject: [PATCH] Notification - Added load bar - Added somethings --- site/interface/site/main.js | 19 ++++- site/interface/site/notification/main.js | 94 +++++++++++++++++----- site/interface/site/style/notification.css | 29 ++++--- 3 files changed, 109 insertions(+), 33 deletions(-) diff --git a/site/interface/site/main.js b/site/interface/site/main.js index 71f2e6b..0e399f6 100644 --- a/site/interface/site/main.js +++ b/site/interface/site/main.js @@ -6,7 +6,7 @@ /* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* 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()); }); \ No newline at end of file diff --git a/site/interface/site/notification/main.js b/site/interface/site/notification/main.js index 6b59f74..102f517 100644 --- a/site/interface/site/notification/main.js +++ b/site/interface/site/notification/main.js @@ -6,23 +6,17 @@ /* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* 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"; - icon.style.height = "20px"; - icon.style.position = 'absolute'; - icon.style.left = '10px'; - icon.style.top = '15px'; + if (img) + { + icon.style.width = "20px"; + icon.style.height = "20px"; + 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 content = createContent(message, img); + const header = createHeader(title, 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); } } diff --git a/site/interface/site/style/notification.css b/site/interface/site/style/notification.css index e4b94c0..e4cabf4 100644 --- a/site/interface/site/style/notification.css +++ b/site/interface/site/style/notification.css @@ -6,7 +6,7 @@ /* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* 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; - max-width: 400px; + min-width: 350px; + 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-top: 4px; + margin-left: 9px; + margin-top: 9px; + object-fit: cover; + object-position: 50% 0; + } #divNotification .content { margin: 0; width: 95%; padding: 2.5%; -} - -#divNotification .content img { - object-fit: cover; object-position: 100% 0; + padding-bottom: 0; } #divNotification .content p { word-wrap: break-word; +} + +#divNotification .footer { + text-align: center; + background-color: #333333; + margin: 10px; +} + +.progress { + transition: width 0.1s; } \ No newline at end of file