From 4f9761c771fbfa8c0a6e2c87048090a86c9bbe71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laure=CE=B7t?= Date: Sun, 29 May 2022 13:45:46 +0200 Subject: [PATCH] JE COMMIt Co-authored-by: Damien --- src/main/webapp/css/pixels.css | 14 ++--- src/main/webapp/css/popups.css | 1 + src/main/webapp/css/style.css | 4 ++ src/main/webapp/index.html | 72 +++++++++++++++++++++-- src/main/webapp/js/loaded.js | 23 +++++--- src/main/webapp/js/pixels.js | 103 +++++++++++++++++++++++---------- src/main/webapp/js/user.js | 54 ++++++++++++----- 7 files changed, 207 insertions(+), 64 deletions(-) diff --git a/src/main/webapp/css/pixels.css b/src/main/webapp/css/pixels.css index 032e12c..1b3511d 100644 --- a/src/main/webapp/css/pixels.css +++ b/src/main/webapp/css/pixels.css @@ -1,6 +1,7 @@ #pixels { - --side: 80px; - --border-width: 3px; + --side: 5.5rem; + --border-width: 0.2rem; + --border-color: #333; border-spacing: 0; table-layout: fixed; width: calc(10 * var(--side)); @@ -20,8 +21,7 @@ } #pixels td:hover { - --border-color: #333; - box-shadow: 0px 0px 0px var(--border-width) var(--border-color); + box-shadow: 0 0 0 var(--border-width) var(--border-color); } .info-pixel { @@ -30,8 +30,8 @@ width: max-content; min-width: var(--side); top: var(--side); - box-shadow: 0px 0px 0px var(--border-width) var(--border-color); - background: #888; + box-shadow: 0 0 0 var(--border-width) var(--border-color); + background: #8888; } .pixel:hover .info-pixel { @@ -40,7 +40,7 @@ .patch-shadow { display: none; - width: 3px; + width: var(--border-width); position: relative; height: var(--side); left: var(--side); diff --git a/src/main/webapp/css/popups.css b/src/main/webapp/css/popups.css index ffd6703..b7ed9bd 100644 --- a/src/main/webapp/css/popups.css +++ b/src/main/webapp/css/popups.css @@ -1,6 +1,7 @@ .popup { display: none; background: #fff; + box-shadow: 0px 0px 1rem #3333; padding: 2rem; width: 40rem; diff --git a/src/main/webapp/css/style.css b/src/main/webapp/css/style.css index f5f5c44..6c33c27 100644 --- a/src/main/webapp/css/style.css +++ b/src/main/webapp/css/style.css @@ -17,3 +17,7 @@ nav { background: #3333; height: 5rem; } + +#username { + color: white; +} diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html index 8a88612..d7fec4b 100644 --- a/src/main/webapp/index.html +++ b/src/main/webapp/index.html @@ -71,6 +71,7 @@ + @@ -93,6 +94,11 @@ Pixel infos +
+ + +
+
@@ -109,7 +115,7 @@
- +
@@ -121,31 +127,85 @@
- +
- +
- +
- +
- +
+ + diff --git a/src/main/webapp/js/loaded.js b/src/main/webapp/js/loaded.js index 3f5ede8..758f95b 100644 --- a/src/main/webapp/js/loaded.js +++ b/src/main/webapp/js/loaded.js @@ -1,11 +1,20 @@ // fonction qui s'execute quand la page a finie de charger function pageLoaded() { - // permet d'intercepter la requête post du formulaire et de la changer un peu + let forms = document.forms; + for (form of forms) { + form.addEventListener("submit", (event) => { + event.preventDefault(); + fetch(event.target.action, { + method: event.target.method, + body: new URLSearchParams(new FormData(event.target)), + }); + }); + } + document.forms["login-form"].addEventListener("submit", (event) => { event.preventDefault(); - fetch(event.target.action, { - method: "POST", + method: event.target.method, body: new URLSearchParams(new FormData(event.target)), }).then(async (resp) => { if (resp.ok) { @@ -15,12 +24,10 @@ function pageLoaded() { }); }); - // permet d'intercepter la requête post du formulaire et de la changer un peu document.forms["signup-form"].addEventListener("submit", (event) => { event.preventDefault(); - fetch(event.target.action, { - method: "POST", + method: event.target.method, body: new URLSearchParams(new FormData(event.target)), }).then((resp) => { if (resp.ok) { @@ -33,7 +40,9 @@ function pageLoaded() { updatePixelGrid(); setInterval(updatePixelGrid, 10000); - if (localStorage.getItem("logged")) { + if (localStorage.getItem("logged") === "true") { userLogin(); + } else { + localStorage.setItem("logged", "false"); } } diff --git a/src/main/webapp/js/pixels.js b/src/main/webapp/js/pixels.js index 0506433..a07abc1 100644 --- a/src/main/webapp/js/pixels.js +++ b/src/main/webapp/js/pixels.js @@ -10,17 +10,17 @@ const updatePixelGrid = async () => { }; function setPixels(json) { - var table = document.getElementById("pixels"); - var num_rows = table.rows.length; + let table = document.getElementById("pixels"); + let num_rows = table.rows.length; for (let i = 0; i < num_rows; i++) { table.rows[i].innerHTML = ""; } for (i in json) { - var pixel = json[i]; - var row_id = Math.floor((pixel.id - 1) / num_rows); - var row = table.rows[row_id]; + let pixel = json[i]; + let row_id = Math.floor((pixel.id - 1) / num_rows); + let row = table.rows[row_id]; row.innerHTML += ' { + if (resp.ok) { + // on récupère ses infos + user = await resp.json(); - if (user.pixels.includes(pixel.id)) { - form = document.getElementById("modify-form"); - form.action = urlPixel + pixel.id + "/modify"; - - togglePopup("modify"); - } else { - owner = document.getElementById("info-owner"); - owner.innerHTML = pixel.owner_username; - - description = - document.getElementById("info-description"); - description.innerHTML = pixel.description; - - price = document.getElementById("info-price"); - price.innerHTML = pixel.price; - - form = document.getElementById("buy-form"); - form.action = urlPixel + pixel.id + "/buy"; - - togglePopup("buy"); + if (user.pixels.includes(pixel.id)) { + // si le pixel lui appartient + updateModifyForm(pixel); + togglePopup("modify", "unset"); + } else { + // sinon on affiche le form d'achat + updateBuyForm(pixel); + togglePopup("buy", "unset"); + } } - } - }); + }); + } else { + // si non connecté, on affiche les infos + updateBuyForm(pixel); + togglePopup("buy", "unset"); + } } }); } + +function updateModifyForm(pixel) { + let form = document.getElementById("modify-form"); + form.action = urlPixel + pixel.id + "/modify"; + + let price = document.getElementById("modify-price"); + price.value = pixel.price; + + let color = hexToRgb(pixel.color); + + let red = document.getElementById("modify-red"); + red.value = color.r; + + let green = document.getElementById("modify-green"); + green.value = color.g; + + let blue = document.getElementById("modify-blue"); + blue.value = color.b; + + let description = document.getElementById("modify-description"); + description.value = pixel.description; +} + +function updateBuyForm(pixel) { + owner = document.getElementById("info-owner"); + owner.innerHTML = pixel.owner_username; + + description = document.getElementById("info-description"); + description.innerHTML = pixel.description; + + price = document.getElementById("info-price"); + price.innerHTML = pixel.price; + + form = document.getElementById("buy-form"); + form.action = urlPixel + pixel.id + "/buy"; +} + +function hexToRgb(hex) { + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + } + : null; +} diff --git a/src/main/webapp/js/user.js b/src/main/webapp/js/user.js index c325086..a671519 100644 --- a/src/main/webapp/js/user.js +++ b/src/main/webapp/js/user.js @@ -1,20 +1,28 @@ let urlUser = "http://localhost:8080/api/user"; let urlLogout = "http://localhost:8080/api/user/logout"; -function togglePopup(id) { +function togglePopup(id, value = "toggle") { popups = document.getElementsByClassName("popup"); for (popup of popups) { - if (popup.id == id) { - if (popup.style.display != "unset") { - popup.style.display = "unset"; - } else { - popup.style.display = "none"; - } - } else { + if (popup.id != id) { popup.style.display = "none"; + continue; } + + if (value !== "toggle") { + popup.style.display = value; + continue; + } + + if (popup.style.display === "unset") { + popup.style.display = "none"; + continue; + } + + popup.style.display = "unset"; } } + async function userLogin() { fetch(urlUser).then(async (resp) => { if (resp.ok) { @@ -33,7 +41,9 @@ async function userLogin() { element.style.display = "flex"; } - localStorage.setItem("logged", true); + updateSolde(); + + localStorage.setItem("logged", "true"); console.log("logged in"); } }); @@ -44,18 +54,34 @@ function userLogout() { method: "POST", }).then((resp) => { if (resp.ok) { - let elements = document.getElementsByClassName("logged-out"); - for (element of elements) { + logouts = document.getElementsByClassName("logged-out"); + for (element of logouts) { element.style.display = "flex"; } - elements = document.getElementsByClassName("logged-in"); - for (element of elements) { + logins = document.getElementsByClassName("logged-in"); + for (element of logins) { element.style.display = "none"; } - localStorage.setItem("logged", false); + localStorage.setItem("logged", "false"); console.log("logged out"); } }); } + +async function updateSolde() { + fetch(urlUser).then(async (resp) => { + if (resp.ok) { + console.log("ici"); + user = await resp.json(); + console.log("là"); + + let soldes = document.getElementsByClassName("solde"); + for (element of soldes) { + element.innerHTML = user.balance + " €"; + } + console.log("ok"); + } + }); +}