Site

- starting something for change pfp

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