Site

- starting something for change pfp

docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html

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

docker-compose/requirements/djangoserver/file/server/server/typeRequests/changePfp.py

@@ -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"])

docker-compose/requirements/djangoserver/file/server/server/websocket.py

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

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

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