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

Websocket (client)

Browse Source 
- add variable for know if websocket is connected and used it for don t send something if not connected
Notification system (client)
	- created new class notification who can use with exported variable "createNotification"
	- available methods :  info, success, warning, error
	- add "todo" in main file
Site
	- add new stylesheet "notification.css"
This commit is contained in:
Kum1ta
2024-08-05 00:26:27 +02:00
parent 28340c159a
commit c562e32af3
6 changed files with 165 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
site/interface/site/index.html
View File

@ -6,12 +6,15 @@
<title>Chat</title> <title>Chat</title>
<meta name='viewport' content='width=device-width, initial-scale=1'> <meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' href='style/style.css'> <link rel='stylesheet' type='text/css' href='style/style.css'>
<link rel='stylesheet' type='text/css' href='style/notification.css'>
<script type="module" src='main.js'></script> <script type="module" src='main.js'></script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="divNotification">
</div>
<div id="chatButton"> <div id="chatButton">
<p>CHAT</p> <p>CHAT</p>
</div> </div>

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

@ -6,12 +6,24 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */ /* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/04 19:20:02 by edbernar ### ########.fr */ /* Updated: 2024/08/04 23:47:45 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { liveChat } from "./liveChat/main.js"; import { liveChat } from "./liveChat/main.js";
import { createNotification } from "./notification/main.js";
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
liveChat(); liveChat();
}); });
document.addEventListener("keydown", (e) => {
if (e.key === "/")
createNotification.info("Hello");
if (e.key === "*")
createNotification.success("Hello");
if (e.key === "-")
createNotification.error("Hello");
});

78
site/interface/site/notification/main.js Normal file
View File

@ -0,0 +1,78 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 23:32:52 by edbernar #+# #+# */
/* Updated: 2024/08/05 00:24:52 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
/*
Todo (Eddy) :
- Image but not necessary
- Title
- Message
- Action button
- Timerbar
- Close button
- pause when hover
*/
function newNotification(type, timer)
{
const divNotification = document.getElementById("divNotification");
const newNotification = document.createElement("div");
newNotification.classList.add("notification");
newNotification.innerHTML = "This is a " + type + " notification";
newNotification.style.width = "100%";
divNotification.appendChild(newNotification);
setInterval(() => {
newNotification.style.opacity = 1;
}, 100);
setTimeout(() => {
setTimeout(() => {
divNotification.removeChild(newNotification);
}, 99);
newNotification.style.animation = "slideOut 0.11s";
}, timer);
}
class notification
{
timer = 2000;
constructor() {}
info(message, 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);
}
}
const createNotification = new notification();
export { createNotification };

57
site/interface/site/style/notification.css Normal file
View File

@ -0,0 +1,57 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* notification.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 23:44:17 by edbernar #+# #+# */
/* Updated: 2024/08/05 00:15:17 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@keyframes slideIn {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
#divNotification {
position: fixed;
overflow: hidden;
top: 10px;
right: 0;
width: 300px;
height: 100%;
display: flex;
flex-direction: column;
z-index: 1000;
}
#divNotification .notification {
background-color: #222222;
color: white;
padding: 10px;
margin: 10px;
border-radius: 5px;
height: 100px;
min-height: 100px;
animation: slideIn 0.1s;
}

5
site/interface/site/style/style.css
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */ /* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */
/* Updated: 2024/08/01 23:25:38 by edbernar ### ########.fr */ /* Updated: 2024/08/04 23:44:06 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -240,4 +240,5 @@ body {
scrollbar-color: var(--sb-thumb-color) scrollbar-color: var(--sb-thumb-color)
var(--sb-track-color); var(--sb-track-color);
} }
} }

17
site/interface/site/websocket.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */ /* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/08/04 19:51:29 by edbernar ### ########.fr */ /* Updated: 2024/08/04 23:29:58 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -22,17 +22,19 @@ import { typeNewPrivateMessage } from "./typeResponse/typeNewPrivateMessage.js";
- Information: the 'token' variable is only used until the connection is fully implemented - Information: the 'token' variable is only used until the connection is fully implemented
*/ */
const socket = new WebSocket('ws://localhost:8000/'); const socket = new WebSocket('ws://localhost:8000/');
const token = "IDSNCSDAd465sd13215421"; const token = "IDSNCSDAd465sd13215421";
const typeResponse = ["login", "private_list_user", "private_list_message", "new_private_message"]; const typeResponse = ["login", "private_list_user", "private_list_message", "new_private_message"];
const functionResponse = [typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage]; const functionResponse = [typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage];
let status = 0;
socket.onopen = () => { socket.onopen = () => {
status = 1;
console.log('Connected'); console.log('Connected');
if (token) if (token)
sendRequest("login", {"type": "byToken", "token": token}); sendRequest("login", {"type": "byToken", "token": token});
}; };
socket.onmessage = (event) => { socket.onmessage = (event) => {
@ -57,12 +59,15 @@ socket.onmessage = (event) => {
}; };
socket.onclose = () => { socket.onclose = () => {
status = 0;
console.log('Disconnected'); console.log('Disconnected');
}; };
function sendRequest(type, content) { function sendRequest(type, content) {
let coc = null; let coc = null;
if (status === 0)
return ;
if (content instanceof Object) if (content instanceof Object)
coc = JSON.stringify(content); coc = JSON.stringify(content);
else else