- starting something for change pfp
This commit is contained in:
Kum1ta
2024-09-24 00:06:31 +02:00
parent 2311103d07
commit c9593f75a2
5 changed files with 71 additions and 8 deletions

View File

@ -3,10 +3,10 @@
# ::: :::::::: #
# Makefile :+: :+: :+: #
# +:+ +:+ +:+ #
# By: tomoron <tomoron@student.42.fr> +#+ +:+ +#+ #
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/07/13 16:18:56 by tomoron #+# #+# #
# Updated: 2024/09/14 00:33:28 by tomoron ### ########.fr #
# Updated: 2024/09/24 00:03:51 by edbernar ### ########.fr #
# #
# **************************************************************************** #
@ -17,6 +17,7 @@ COMPOSE = docker compose -f $(FILE)
all: up
build:
# mkdir -p ~/METH_data
$(COMPOSE) build
up: build

View File

@ -1,7 +1,7 @@
<div id="topBarLobby">
<h1 id="homeButton">METH</h1>
<div class="search-container">
<input type="text" placeholder="Search..." class="search-input" id="searchInputUser">
<input type="text" placeholder="Search..." class="search-input" id="searchInputUser" autocomplete="off">
</div>
<div id="searchResult">
</div>

View File

@ -0,0 +1,21 @@
# **************************************************************************** #
# #
# ::: :::::::: #
# changePfp.py :+: :+: :+: #
# +:+ +:+ +:+ #
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/23 23:35:41 by edbernar #+# #+# #
# Updated: 2024/09/23 23:48:45 by edbernar ### ########.fr #
# #
# **************************************************************************** #
from asgiref.sync import sync_to_async
from ..models import User
import base64
import json
@sync_to_async
def changePfp(socket, content):
with open("./a.jpg", "w") as image_file:
image_file.write(content["img"])

View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/09 14:31:30 by tomoron #+# #+# #
# Updated: 2024/09/20 00:16:31 by edbernar ### ########.fr #
# Updated: 2024/09/23 23:36:04 by edbernar ### ########.fr #
# #
# **************************************************************************** #
@ -28,14 +28,15 @@ from .typeRequests.login import login
from .typeRequests.getAllListUser import getAllListUser
from .typeRequests.gameRequest import gameRequest
from .typeRequests.getUserInfo import getUserInfo
from .typeRequests.changePfp import changePfp
typeRequest = ["login", "get_private_list_user", "get_private_list_message",
"send_private_message", "create_account", "get_all_list_user", "game",
"search_user", "get_user_info"
"search_user", "get_user_info", "change_pfp"
]
functionRequest = [login, getPrivateListUser, getPrivateListMessage,
sendPrivateMessage, createAccount, getAllListUser, gameRequest,
searchUser, getUserInfo
searchUser, getUserInfo, changePfp
]
from random import randint

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:08:31 by edbernar #+# #+# */
/* Updated: 2024/09/23 15:18:00 by edbernar ### ########.fr */
/* Updated: 2024/09/23 23:40:42 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -26,6 +26,9 @@ class ProfilPage
const pfp = document.getElementsByClassName('profile-image')[0];
const banner = document.getElementsByClassName('background-card')[0];
const convButton = document.getElementById('newConv');
const crossProfil = document.getElementById('cross-profil');
let editPenPfpBg = null;
let inputPfp = null;
let interval = null;
LiveChat.create();
@ -42,6 +45,12 @@ class ProfilPage
}
else
sendRequest("get_user_info", {id: user});
crossProfil.addEventListener('click', () => {
if (typeof(user) == 'string')
pageRenderer.changePage('homePage');
else
pageRenderer.changePage('lobbyPage');
});
waitForUserInfo().then((userInfo) => {
console.log(userInfo);
if (userInfo == null)
@ -63,8 +72,39 @@ class ProfilPage
externButtons(userInfo)
if (userInfo.id == userMeInfo.id)
{
pfp.innerHTML = `<div id='editPenPfpBg'><img class='editPenPfp' src='/static/img/profilPage/editPen.png'/></div>`
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'/>`
editPenPfpBg = document.getElementById('editPenPfpBg');
inputPfp = document.getElementById('inputPfp');
editPenPfpBg.addEventListener('click', () => {
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];
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);
}
});
}
if (userInfo.id != userMeInfo.id)
{