feat: devWeb - update profile page

This commit is contained in:
kmitresse
2024-04-26 22:17:15 +02:00
parent 350011cb66
commit 93d6677449
7 changed files with 491 additions and 88 deletions
@@ -1,4 +1,10 @@
<%@ page import="uppa.project.database.pojo.Player" %>
<%@ page import="uppa.project.database.pojo.Game" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%--<%@ taglib uri = "https://mvnrepository.com/artifact/jakarta.servlet.jsp.jstl/jakarta.servlet.jsp.jstl-api" prefix = "c" %>--%>
<%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %>
<%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
@@ -9,93 +15,38 @@
<div class="columns is-centered">
<div class="column is-5-tablet is-5-desktop is-5-widescreen">
<component:card title="Profil">
<fieldset disabled>
<jsp:useBean id="user" class="uppa.project.database.pojo.User" scope="session"/>
<div class="field">
<label class="label">Nom d'utilisateur</label>
<input class="input" type="text" value="${user.username}">
</div>
<div class="field">
<label class="label">Email</label>
<input class="input" type="text" value="${user.email}">
</div>
<div class="field">
<label class="label">Mot de passe</label>
<a href="/profile/password">Changer le mot de passe</a>
</div>
<div class="field">
<label class="label">Date de naissance</label>
<input class="input" type="text" value="${user.birth.toLocaleString()}">
</div>
<div class="field">
<label class="label">Genre</label>
<input class="input" type="text" value="${user.gender}">
</div>
<fieldset>
<form:profile/>
</fieldset>
<div class="buttons">
<button class="button is-primary is-outlined">Modifier</button>
<button class="button is-primary has-text-white">Supprimer le compte</button>
</div>
</component:card>
</div>
<div class="column is-5-tablet is-5-desktop is-5-widescreen">
<component:card title="Statistiques">
<h4 class="title is-4">Statistiques globales</h4>
<div class="level">
<div class="level-item has-text-centered">
<div>
<p class="heading">Parties</p>
<p class="title">${user.nbPlayedGame}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Victoires</p>
<p class="title">${user.nbWin}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Clics corrects</p>
<p class="title">${user.nbRightClicks}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Clics rapides</p>
<p class="title">${user.nbRapidClicks}</p>
</div>
</div>
</div>
<%-- TODO: Tableau des 10 dernières parties--%>
<h4 class="title is-4">10 dernières parties</h4>
<table class="table is-fullwidth">
<thead>
<tr>
<th>Date</th>
<th>Victoire</th>
<th>Score</th>
<th></th>
</tr>
</thead>
<tbody>
<c:forEach var="game" items="${user.playedGames}">
<tr>
<td>${game.createdAt}</td>
<td>${game.winner}</td>
<td>${game.score}</td>
<td><a href="/game/${game.id}">Voir</a></td>
</tr>
</c:forEach>
</table>
<component:statistics/>
</component:card>
</div>
</div>
</component:hero>
</layout:base>
</layout:base>
<script defer type="text/javascript">
const gameList = document.getElementById('game-list');
console.log("gameList", gameList)
${user.playedGames}.forEach((player) => {
console.log("player", player)
gameListTr = document.createElement('tr');
gameListTdDate = document.createElement('td');
gameListTdDate.innerHTML = player.game.createdAt;
gameListTdScore = document.createElement('td');
gameListTdScore.innerHTML = player.score;
gameListTdWinner = document.createElement('td');
gameListTdWinner.innerHTML = player.game.winner;
gameListTdLink = document.createElement('td');
gameListTdLink.innerHTML = `<a href="/game/${player.game.id}">Voir</a>`;
gameListTr.appendChild(gameListTdDate);
gameListTr.appendChild(gameListTdScore);
gameListTr.appendChild(gameListTdWinner);
gameListTr.appendChild(gameListTdLink);
})
</script>