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