Websocket (client)
- 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
@ -6,12 +6,15 @@
|
||||
<title>Chat</title>
|
||||
<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/notification.css'>
|
||||
<script type="module" src='main.js'></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<div id="divNotification">
|
||||
</div>
|
||||
<div id="chatButton">
|
||||
<p>CHAT</p>
|
||||
</div>
|
||||
|
||||
@ -6,12 +6,24 @@
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* 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 { createNotification } from "./notification/main.js";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
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
78
site/interface/site/notification/main.js
Normal 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
57
site/interface/site/style/notification.css
Normal 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;
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* 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)
|
||||
var(--sb-track-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* 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
|
||||
*/
|
||||
|
||||
const socket = new WebSocket('ws://localhost:8000/');
|
||||
const token = "IDSNCSDAd465sd13215421";
|
||||
const socket = new WebSocket('ws://localhost:8000/');
|
||||
const token = "IDSNCSDAd465sd13215421";
|
||||
|
||||
const typeResponse = ["login", "private_list_user", "private_list_message", "new_private_message"];
|
||||
const functionResponse = [typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage];
|
||||
const typeResponse = ["login", "private_list_user", "private_list_message", "new_private_message"];
|
||||
const functionResponse = [typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage];
|
||||
|
||||
let status = 0;
|
||||
|
||||
socket.onopen = () => {
|
||||
status = 1;
|
||||
console.log('Connected');
|
||||
if (token)
|
||||
sendRequest("login", {"type": "byToken", "token": token});
|
||||
|
||||
};
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
@ -57,12 +59,15 @@ socket.onmessage = (event) => {
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
status = 0;
|
||||
console.log('Disconnected');
|
||||
};
|
||||
|
||||
function sendRequest(type, content) {
|
||||
let coc = null;
|
||||
|
||||
if (status === 0)
|
||||
return ;
|
||||
if (content instanceof Object)
|
||||
coc = JSON.stringify(content);
|
||||
else
|
||||
|
||||
Reference in New Issue
Block a user