Notification

- New apparence but not finish
Livechat
    - Fixed being able to execute code if it is in the pseudo with <script>
This commit is contained in:
edbernar
2024-08-05 18:33:28 +02:00
parent c562e32af3
commit d3a2d85e02
15 changed files with 123 additions and 67 deletions

View File

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

View File

@ -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 += `
<div class="user">
let user = document.createElement("div");
user.classList.add("user");
user.innerHTML = `
<div class="status ${element.status}">
<img src="${element.pfp}">
<img>
</div>
<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>";

View File

@ -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 === "/")
createNotification.info("Hello");
if (e.key === "*")
createNotification.success("Hello");
if (e.key === "-")
createNotification.error("Hello");
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");
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -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 divHeader = 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.style.opacity = 1;
}, 100);
newNotification.appendChild(content);
setTimeout(() => {
setTimeout(() => {
divNotification.removeChild(newNotification);
}, 99);
newNotification.style.animation = "slideOut 0.11s";
}, 199);
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);
newNotification("info", 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);
console.log("New notification: " + message);
newNotification(title, message, img, action, this.timer);
}
}

View File

@ -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;
right: 0;
width: 300px;
height: 100%;
font-family: 'Poppins';
top: 0px;
right: 10px;
display: flex;
flex-direction: column;
z-index: 1000;
@ -48,10 +47,41 @@
#divNotification .notification {
background-color: #222222;
color: white;
padding: 10px;
margin: 10px;
border-radius: 5px;
height: 100px;
margin-top: 10px;
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;
}

View File

@ -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):