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

Site/Django

Browse Source 
- can change pfp and banner
This commit is contained in:
Kum1ta
2024-09-24 17:44:20 +02:00
parent 5d46b06669
commit 47c8a64f5d
9 changed files with 176 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
docker-compose/requirements/nginx/static/javascript/profilPage/main.js
View File

@ -6,10 +6,11 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:08:31 by edbernar #+# #+# */
/* Updated: 2024/09/23 23:40:42 by edbernar ### ########.fr */
/* Updated: 2024/09/24 17:32:22 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { waitForchangePfp } from "/static/javascript/typeResponse/typeChangePfp.js";
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { waitForUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { showPrivateChat } from "/static/javascript/liveChat/showPrivateChat.js";
@ -29,6 +30,8 @@ class ProfilPage
const crossProfil = document.getElementById('cross-profil');
let editPenPfpBg = null;
let inputPfp = null;
let editPenBanner = null;
let inputBanner = null;
let interval = null;
LiveChat.create();
@ -73,38 +76,24 @@ class ProfilPage
if (userInfo.id == userMeInfo.id)
{
pfp.innerHTML = `<div id='editPenPfpBg'><input style='display: none' id='inputPfp' type="file"><img class='editPenPfp' src='/static/img/profilPage/editPen.png'/></div>`
banner.innerHTML = `<img class='editPen' src='/static/img/profilPage/editPen.png'/>`
banner.innerHTML = `<img class='editPen' src='/static/img/profilPage/editPen.png'/><input style='display: none' id='inputBanner' type="file">`
editPenPfpBg = document.getElementById('editPenPfpBg');
inputPfp = document.getElementById('inputPfp');
editPenPfpBg.addEventListener('click', () => {
inputPfp.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
inputPfp.click();
});
inputPfp.setAttribute('accept', '.png, .jpeg, .jpg');
inputPfp.addEventListener('change', (event) => {
const reader = new FileReader();
const validTypes = ['image/png', 'image/jpeg'];
const file = event.target.files[0];
inputPfp.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
inputPfp.addEventListener('change', () => inputChange(true));
function arrayBufferToBase64(buffer) {
let binary = '';
const bytes = new Uint8Array(buffer);
const len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
if (validTypes.includes(file.type))
{
reader.onload = (e) => {
const arrayBuffer = e.target.result;
console.log(arrayBuffer);
sendRequest('change_pfp', {img: arrayBufferToBase64(arrayBuffer), type: file.type})
}
reader.readAsArrayBuffer(file);
}
});
editPenBanner = document.getElementsByClassName('editPen')[0];
inputBanner = document.getElementById('inputBanner');
editPenBanner.addEventListener('click', () => {
inputBanner.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
inputBanner.click();
});
inputBanner.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
inputBanner.addEventListener('change', () => inputChange(false));
}
if (userInfo.id != userMeInfo.id)
{
@ -140,4 +129,40 @@ function externButtons(userInfo)
discordButton.remove();
}
export { ProfilPage };
function inputChange(isPfp)
{
const reader = new FileReader();
const validTypes = ['image/png', 'image/jpeg', 'image/webp']
const file = event.target.files[0];
function arrayBufferToBase64(buffer) {
let binary = '';
const bytes = new Uint8Array(buffer);
const len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
if (validTypes.includes(file.type))
{
reader.onload = (e) => {
const arrayBuffer = e.target.result;
if (isPfp)
sendRequest('change_pfp', {img: arrayBufferToBase64(arrayBuffer), type: file.type})
else
sendRequest('change_banner', {img: arrayBufferToBase64(arrayBuffer), type: file.type})
waitForchangePfp().then((content) => {
if (isPfp)
document.getElementsByClassName('profile-image')[0].style.backgroundImage = `url("${content.pfp}")`
else
document.getElementsByClassName('background-card')[0].style.backgroundImage = `url("${content.banner}")`
});
}
reader.readAsArrayBuffer(file);
}
}
export { ProfilPage };

42
docker-compose/requirements/nginx/static/javascript/typeResponse/typeChangePfp.js Normal file
View File

@ -0,0 +1,42 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* typeChangePfp.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/24 15:54:01 by edbernar #+# #+# */
/* Updated: 2024/09/24 17:36:57 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
let changePfp = [];
let changePfpAvailable = false;
let changePfpResolve = null;
function waitForchangePfp()
{
return new Promise((resolve) => {
if (changePfpAvailable)
{
changePfpAvailable = false;
resolve(changePfp);
}
else
changePfpResolve = resolve;
});
}
function typeChangePfp(list)
{
changePfp = list;
changePfpAvailable = true;
if (changePfpResolve)
{
changePfpResolve(changePfp);
changePfpResolve = null;
changePfpAvailable = false;
}
}
export { typeChangePfp, waitForchangePfp };

7
docker-compose/requirements/nginx/static/javascript/websocket.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/09/22 23:36:55 by edbernar ### ########.fr */
/* Updated: 2024/09/24 15:55:37 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -21,6 +21,7 @@ import { typeCreateAccount } from "/static/javascript/typeResponse/typeCreateAcc
import { typeAllListUser }from "/static/javascript/typeResponse/typeAllListUser.js";
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { typeSearchUser } from "/static/javascript/typeResponse/typeSearchUser.js";
import { typeChangePfp } from "/static/javascript/typeResponse/typeChangePfp.js";
import { typeUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
import { typeGame } from "/static/javascript/typeResponse/typeGame.js"
@ -35,8 +36,8 @@ function launchSocket()
socket = new WebSocket('/ws');
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user", "user_info"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser, typeUserInfo];
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user", "user_info", "change_pfp"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser, typeUserInfo, typeChangePfp];
const errorCode = [9007, 9010, 9011, 9013];
const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account, typeErrorConnectedElsewhere];