refacto: devWeb - unify language used for comments (front)

This commit is contained in:
kmitresse
2024-05-01 15:45:41 +02:00
parent 97bfa17a70
commit dcd1f6b018
10 changed files with 26 additions and 64 deletions
@@ -1,4 +1,3 @@
<%@ page import="uppa.project.database.pojo.Card" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %> <%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %>
<%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %> <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
@@ -1,18 +1,15 @@
<%@ tag import="uppa.project.database.pojo.Player" %> <%@ tag import="uppa.project.database.pojo.Player" %>
<%@ tag import="uppa.project.database.pojo.Game" %> <%@ tag import="uppa.project.database.pojo.Game" %>
<%@ tag import="java.util.List" %>
<%@ tag import="java.util.ArrayList" %> <%@ tag import="java.util.ArrayList" %>
<%@ tag import="java.text.SimpleDateFormat" %> <%@ tag import="java.text.SimpleDateFormat" %>
<%@ tag import="java.util.Date" %> <%@ tag import="java.util.Date" %>
<%@tag description="component/statistics" pageEncoding="UTF-8" %> <%@tag description="component/statistics" pageEncoding="UTF-8" %>
<% <%
// Get game from request
Game game = (Game) request.getAttribute("game"); Game game = (Game) request.getAttribute("game");
ArrayList<Player> players = (ArrayList<Player>) request.getAttribute("players"); ArrayList<Player> players = (ArrayList<Player>) request.getAttribute("players");
%> %>
<%--<jsp:useBean id="game" class="uppa.project.database.pojo.Game" scope="request"/>--%>
<h4 class="title is-6">Information sur la partie</h4> <h4 class="title is-6">Information sur la partie</h4>
<div class="level"> <div class="level">
<div class="level-item has-text-centered has-text-on-top"> <div class="level-item has-text-centered has-text-on-top">
@@ -17,8 +17,6 @@
<% } %> <% } %>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu"> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
@@ -68,21 +66,20 @@
</nav> </nav>
<script type="module" defer> <script type="module" defer>
// Get all "navbar-burger" elements // Récupération de tous les éléments de classe "navbar-burger"
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them // Ajout d'un enventListener sur chaque élément
$navbarBurgers.forEach(el => { $navbarBurgers.forEach(el => {
el.addEventListener('click', () => { el.addEventListener('click', () => {
// Get the target from the "data-target" attribute // Récupere la valeur de l'attribut "data-target"
const target = el.dataset.target; const target = el.dataset.target;
const $target = document.getElementById(target); const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" // Ajoute ou supprime la classe "is-active" sur les éléments
el.classList.toggle('is-active'); el.classList.toggle('is-active');
$target.classList.toggle('is-active'); $target.classList.toggle('is-active');
}); });
}); });
</script> </script>
@@ -1,7 +1,7 @@
<%@tag description="form/forgotten-password" pageEncoding="UTF-8" %> <%@tag description="form/forgotten-password" pageEncoding="UTF-8" %>
<form id="forgotten-password-form" action="${pageContext.request.contextPath}/forgotten-password" method="post"> <form id="forgotten-password-form" action="${pageContext.request.contextPath}/forgotten-password" method="post">
<div class="field"> <!-- Field Username --> <div class="field">
<label class="label" for="email">Email</label> <label class="label" for="email">Email</label>
<div class="control has-icons-left"> <div class="control has-icons-left">
<input id="email" placeholder="johndoe@exemple.com" class="input is-fullwidth" required/> <input id="email" placeholder="johndoe@exemple.com" class="input is-fullwidth" required/>
@@ -17,15 +17,15 @@
<script defer type="module"> <script defer type="module">
const forgottenPasswordForm = document.querySelector("form#forgotten-password-form"); const forgottenPasswordForm = document.querySelector("form#forgotten-password-form");
// Form fields // Champ email
const emailInput = document.querySelector("input#email"); const emailInput = document.querySelector("input#email");
// Add event listener to the form submission // Ajout de l'écouteur d'événement sur la soumission du formulaire
forgottenPasswordForm.addEventListener("submit", onSubmit) forgottenPasswordForm.addEventListener("submit", onSubmit)
/** /**
* Handle the form submission with Ajax request * Gestion de la soumission du formulaire
* @param event {Event} - Event of the form submission * @param event {Event} - Événement de soumission du formulaire
*/ */
function onSubmit(event) { function onSubmit(event) {
event.preventDefault(); event.preventDefault();
@@ -45,8 +45,8 @@
} }
/** /**
* Handle the error of the form submission * Gestion des erreurs lors de la soumission du formulaire
* @param error {Error} - Error of the form submission * @param error {Error} - Erreur survenue lors de la soumission du formulaire
*/ */
function onError(error) { function onError(error) {
console.error("Error:", error) console.error("Error:", error)
@@ -81,7 +81,7 @@
setTimeout(() => notification.remove(), 5010); setTimeout(() => notification.remove(), 5010);
} }
// Remove the shake animation at the end of animation // Retrait des animations sur le champ email
emailInput.addEventListener("animationend", () => emailInput.style.animation = ""); emailInput.addEventListener("animationend", () => emailInput.style.animation = "");
</script> </script>
@@ -2,7 +2,6 @@
<form id="login-form" action="${pageContext.request.contextPath}/login" method="post"> <form id="login-form" action="${pageContext.request.contextPath}/login" method="post">
<!-- Field Username -->
<div class="field"> <div class="field">
<label class="label" for="username">Nom d'utilisateur</label> <label class="label" for="username">Nom d'utilisateur</label>
<div class="control has-icons-left"> <div class="control has-icons-left">
@@ -13,7 +12,6 @@
</div> </div>
</div> </div>
<!-- Field Password -->
<div class="field"> <div class="field">
<label class="label" for="password">Mot de passe</label> <label class="label" for="password">Mot de passe</label>
<div class="control has-icons-left"> <div class="control has-icons-left">
@@ -52,7 +50,7 @@
.catch((error) => { .catch((error) => {
console.log(error) console.log(error)
// Input animation // Animations des champs
inputs.forEach(input => { inputs.forEach(input => {
input.classList.add("is-danger"); input.classList.add("is-danger");
input.style.animation = "shake 0.5s ease-in-out" input.style.animation = "shake 0.5s ease-in-out"
@@ -79,12 +77,12 @@
notification.appendChild(notificationMessage); notification.appendChild(notificationMessage);
document.body.appendChild(notification); document.body.appendChild(notification);
// Remove notification and animation after 5s // Retirer la notification et les animations après 5 secondes
setTimeout(() => notification.remove(), 5010); setTimeout(() => notification.remove(), 5010);
}); });
}); });
// On animation end, remove class and animation // Retirer les animations des champs après la fin de l'animation
inputs.forEach(input => input.addEventListener("animationend", () => input.style.animation = "")); inputs.forEach(input => input.addEventListener("animationend", () => input.style.animation = ""));
</script> </script>
@@ -91,7 +91,6 @@
const nbRound = document.querySelector("input[name='nbRounds']"); const nbRound = document.querySelector("input[name='nbRounds']");
const nbValues = document.querySelector("input[name='nbValues']"); const nbValues = document.querySelector("input[name='nbValues']");
const nbColors = document.querySelector("input[name='nbColors']"); const nbColors = document.querySelector("input[name='nbColors']");
// Range inputs
const rangeInputs = document.querySelectorAll("input[type='range']"); const rangeInputs = document.querySelectorAll("input[type='range']");
rangeInputs.forEach(input => { rangeInputs.forEach(input => {
const tooltip = document.querySelector(input.dataset.tooltip); const tooltip = document.querySelector(input.dataset.tooltip);
@@ -104,7 +103,6 @@
}); });
}); });
// Radio buttons
const radioButtons = document.querySelectorAll('input[type="radio"]'); const radioButtons = document.querySelectorAll('input[type="radio"]');
radioButtons.forEach(radio => { radioButtons.forEach(radio => {
radio.addEventListener('change', () => { radio.addEventListener('change', () => {
@@ -113,7 +111,6 @@
}); });
}); });
// Form submission
const form = document.getElementById('new-game-form'); const form = document.getElementById('new-game-form');
form.addEventListener('submit', evt => { form.addEventListener('submit', evt => {
@@ -132,7 +129,7 @@
.then(data => { .then(data => {
if (data.code !== 200) throw new Error(data.message); if (data.code !== 200) throw new Error(data.message);
// Redirect to game page // Redirection vers la page de jeu
window.location.href = "${pageContext.request.contextPath}/game?id=" + data.message; window.location.href = "${pageContext.request.contextPath}/game?id=" + data.message;
}) })
.catch((error) => { .catch((error) => {
@@ -159,7 +156,7 @@
notification.appendChild(notificationMessage); notification.appendChild(notificationMessage);
document.body.appendChild(notification); document.body.appendChild(notification);
// Remove notification and animation after 5s // Retrait de la notification et des animations après 5 secondes
setTimeout(() => notification.remove(), 5010); setTimeout(() => notification.remove(), 5010);
}); });
}); });
@@ -88,6 +88,7 @@
const passwordFields = profileForm.querySelectorAll("div#old-password-field, div#password-field, div#repeat-password-field"); const passwordFields = profileForm.querySelectorAll("div#old-password-field, div#password-field, div#repeat-password-field");
const inputs = profileForm.querySelectorAll("input[type='text'], input[type='password']"); const inputs = profileForm.querySelectorAll("input[type='text'], input[type='password']");
// Afficher les champs de mot de passe si le lien est cliqué
changePassword.addEventListener("click", (e) => { changePassword.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
passwordFields.forEach(field => { passwordFields.forEach(field => {
@@ -130,10 +131,6 @@
.catch(onError) .catch(onError)
} }
/**
* Handle the error of the form submission
* @param error {Error} - Error of the form submission
*/
function onError(error) { function onError(error) {
console.log(error) console.log(error)
@@ -167,9 +164,6 @@
}, 5010); }, 5010);
} }
/**
* Handle the success of the form submission
*/
function onSuccess() { function onSuccess() {
console.log("Succès:", "Modifications effectuées avec succès") console.log("Succès:", "Modifications effectuées avec succès")
@@ -59,16 +59,11 @@
<script defer type="module"> <script defer type="module">
const registerForm = document.querySelector("form#register-form"); const registerForm = document.querySelector("form#register-form");
// Form fields
const inputs = registerForm.querySelectorAll("input, select"); const inputs = registerForm.querySelectorAll("input, select");
// Add event listener to the form submission
registerForm.addEventListener("submit", onSubmit) registerForm.addEventListener("submit", onSubmit)
/**
* Handle the form submission with Ajax request
* @param event {Event} - Event of the form submission
*/
function onSubmit(event) { function onSubmit(event) {
event.preventDefault(); event.preventDefault();
@@ -95,10 +90,7 @@
.catch(onError) .catch(onError)
} }
/**
* Handle the error of the form submission
* @param error {Error} - Error of the form submission
*/
function onError(error) { function onError(error) {
console.error("Error:", error) console.error("Error:", error)
@@ -26,19 +26,12 @@
const submitButton = document.querySelector("input[type=submit]"); const submitButton = document.querySelector("input[type=submit]");
const inputs = resetPasswordForm.querySelectorAll("input[type='text'], input[type='password']"); const inputs = resetPasswordForm.querySelectorAll("input[type='text'], input[type='password']");
// Form fields
const tokenInput = document.querySelector("input#token"); const tokenInput = document.querySelector("input#token");
const passwordInput = document.querySelector("input#password"); const passwordInput = document.querySelector("input#password");
const repasswordInput = document.querySelector("input#repassword"); const repasswordInput = document.querySelector("input#repassword");
// Add event listener to the form submission
resetPasswordForm.addEventListener("submit", onSubmit) resetPasswordForm.addEventListener("submit", onSubmit)
/**
* Handle the form submission with Ajax request
* @param event {Event} - Event of the form submission
*/
function onSubmit(event) { function onSubmit(event) {
event.preventDefault(); event.preventDefault();
@@ -65,14 +58,9 @@
.finally(() => submitButton.classList.remove("is-loading")); .finally(() => submitButton.classList.remove("is-loading"));
} }
/**
* Handle the error of the form submission
* @param error {Error} - Error of the form submission
*/
function onError(error) { function onError(error) {
console.error("Error:", error) console.error("Error:", error)
// Input fields in red
inputs.forEach(input => { inputs.forEach(input => {
input.classList.add("is-danger"); input.classList.add("is-danger");
input.style.animation = "shake 0.5s ease-in-out" input.style.animation = "shake 0.5s ease-in-out"
+5 -5
View File
@@ -52,18 +52,18 @@
</nav> </nav>
<script type="module" defer> <script type="module" defer>
// Get all "navbar-burger" elements // Récupération de tous les éléments de classe "navbar-burger"
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them // Ajout d'un eventListener sur chaque élément
$navbarBurgers.forEach(el => { $navbarBurgers.forEach(el => {
el.addEventListener('click', () => { el.addEventListener('click', () => {
// Get the target from the "data-target" attribute // Récupération de la cible à partir de l'attribut "data-target"
const target = el.dataset.target; const target = el.dataset.target;
const $target = document.getElementById(target); const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" // Toggle de la classe "is-active" sur les éléments
el.classList.toggle('is-active'); el.classList.toggle('is-active');
$target.classList.toggle('is-active'); $target.classList.toggle('is-active');
@@ -94,4 +94,4 @@
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>