tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Notification

Browse Source 
- Added load bar
    - Added somethings
This commit is contained in:
edbernar
2024-08-06 16:27:07 +02:00
parent d3a2d85e02
commit 7399ec638f
3 changed files with 109 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
site/interface/site/main.js
View File

@ -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());
});

94
site/interface/site/notification/main.js
View File

@ -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";
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);
}
}

29
site/interface/site/style/notification.css
View File

@ -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;
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;
}