ENSEEIHT/projet-application-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

JE COMMIt

Browse source 
Co-authored-by: Damien <damguillotin@gmail.com>
This commit is contained in:
Laureηt 2022-05-29 13:45:46 +02:00
parent a88525519e
commit 4f9761c771
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
7 changed files with 207 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/main/webapp/css/pixels.css
View file

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

1
src/main/webapp/css/popups.css
View file

@ -1,6 +1,7 @@
.popup {
display: none;
background: #fff;
box-shadow: 0px 0px 1rem #3333;
padding: 2rem;
width: 40rem;

4
src/main/webapp/css/style.css
View file

@ -17,3 +17,7 @@ nav {
background: #3333;
height: 5rem;
}
#username {
color: white;
}

72
src/main/webapp/index.html
View file

@ -71,6 +71,7 @@
<span class="logged-in">
<span id="username"></span>
<button onclick="togglePopup('wallet');">Wallet</button>
<button onclick="userLogout()">Logout</button>
</span>
</nav>
@ -93,6 +94,11 @@
Pixel infos
<div>
<label>Solde</label>
<span class="solde"></span>
</div>
<div>
<label>Owner</label>
<span id="info-owner"></span>
@ -109,7 +115,7 @@
</div>
<form id="buy-form" class="logged-in" method="post">
<button type="submit">Buy</button>
<button type="submit" onclick="updateSolde();">Buy</button>
</form>
</div>
@ -121,31 +127,85 @@
<form id="modify-form" method="post">
<div class="data">
<label>Price</label>
<input type="number" name="price" id="price" required />
<input
type="number"
name="price"
id="modify-price"
required
/>
</div>
<div>
<label>Red</label>
<input type="range" name="red" required />
<input
type="range"
min="0"
max="255"
step="1"
name="red"
id="modify-red"
required
/>
</div>
<div>
<label>Green</label>
<input type="range" name="green" required />
<input
type="range"
min="0"
max="255"
step="1"
name="green"
id="modify-green"
required
/>
</div>
<div>
<label>Blue</label>
<input type="range" name="blue" required />
<input
type="range"
min="0"
max="255"
step="1"
name="blue"
id="modify-blue"
required
/>
</div>
<div>
<label>Description</label>
<input type="text" name="description" required />
<input
type="text"
name="description"
id="modify-description"
required
/>
</div>
<button type="submit">Modify</button>
</form>
</div>
<div id="wallet" class="popup">
<button onclick="togglePopup('wallet')" class="close">X</button>
Wallet
<div>
<label>Solde</label>
<span class="solde"></span>
</div>
<form id="pay-form" action="/api/user/pay" method="post">
<div class="data">
<label>Amount</label>
<input type="number" name="amount" required />
</div>
<button type="submit" onclick="updateSolde();">Pay</button>
</form>
</div>
</body>
</html>

23
src/main/webapp/js/loaded.js
View file

@ -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");
}
}

73
src/main/webapp/js/pixels.js
View file

@ -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 +=
'<td class="pixel" style="background:#' +
@ -46,21 +46,60 @@ function pixelClick(id) {
if (resp.ok) {
pixel = await resp.json();
if (localStorage.getItem("logged") === "true") {
// si le user est connecté
fetch(urlUser).then(async (resp) => {
if (resp.ok) {
// on récupère ses infos
user = await resp.json();
if (user.pixels.includes(pixel.id)) {
form = document.getElementById("modify-form");
// 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";
togglePopup("modify");
} else {
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 = document.getElementById("info-description");
description.innerHTML = pixel.description;
price = document.getElementById("info-price");
@ -68,11 +107,15 @@ function pixelClick(id) {
form = document.getElementById("buy-form");
form.action = urlPixel + pixel.id + "/buy";
}
togglePopup("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;
}

56
src/main/webapp/js/user.js
View file

@ -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") {
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";
} else {
popup.style.display = "none";
}
} else {
popup.style.display = "none";
}
}
}
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");
}
});
}