112 lines
8.4 KiB
HTML
112 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html th:replace="~{modele-page :: layout(${article.nom},~{::link} , ~{::#container-main})}" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid" id="container-main">
|
|
<div class="row mt-3 justify-content-center">
|
|
<div class="col-12 col-md-8 col-lg-6"> <!-- Utilisation de classes Bootstrap pour rendre la colonne responsive -->
|
|
<div class="card" >
|
|
<div class="card-header" th:if="${#dates.format(article.dateFinEnch, 'yyyy-MM-dd')} > ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}">
|
|
<h4 th:text="'Article - offre en cours'"></h4>
|
|
</div>
|
|
<div class="card-header" th:unless="${#dates.format(article.dateFinEnch, 'yyyy-MM-dd')} > ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}">
|
|
<h4 th:if="${maxEncherePseudo} != null" th:text="#{article.details.winBy} + ' ' + (${#authentication.getName() == maxEncherePseudo ? #{article.details.winByYou} : maxEncherePseudo})"></h4>
|
|
<h4 th:unless="${maxEncherePseudo} != null" th:text="#{article.details.noWin}"></h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12 col-md-4">
|
|
<img th:if="${fileService.fileExists('/images/articles/' + article.id + '.jpg')}" th:src="'/images/articles/' + ${article.id} + '.jpg'" alt="Image de l'article" class="img-fluid rounded">
|
|
<img th:unless="${fileService.fileExists('/images/articles/' + article.id + '.jpg')}" th:src="@{/images/articles/no-data.jpg}" alt="Image de l'article" class="img-fluid rounded">
|
|
</div>
|
|
<div class="col-12 col-md-8">
|
|
<div class="mt-2 d-flex flex-column align-items-center">
|
|
<h1 th:text="${article.nom}"></h1>
|
|
</div>
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label" th:text="#{article.details.label.description}"></label></strong>
|
|
<span class="d-inline-block text-wrap text-sm text-justify" style="max-width: 60%;" th:text="${article.desc}"></span>
|
|
</div>
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label" th:text="#{article.details.label.seller}"></label></strong>
|
|
<a th:href="@{/profil/showProfil(userPseudo=${username.pseudo})}" class="text-decoration-none">
|
|
<span th:text="${username.pseudo}"></span>
|
|
</a>
|
|
</div>
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label" th:text="#{article.details.label.category}"></label></strong>
|
|
<span th:text="${cate}"></span>
|
|
</div>
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label" th:text="#{article.details.label.sale_price}"></label></strong>
|
|
<span th:text="${article.prixInitial}"></span>
|
|
</div>
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label" th:text="#{article.details.lastof}"></label></strong>
|
|
<span th:text="${maxEnchere} ? ${maxEnchere} : 'Aucune offre en cours'"></span>
|
|
</div>
|
|
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label" th:text="#{article.details.label.end_date}"></label></strong>
|
|
<span th:text="${article.dateFinEnch}"></span>
|
|
</div>
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label" th:text="#{article.details.label.pickup}"></label></strong>
|
|
<span th:text="${retrait} ? ${retrait.rue} + ' ' + ${retrait.code_postale} + ' ' + ${retrait.ville} : #{article.details.address.unknown}"></span>
|
|
</div>
|
|
<form th:if="${!isArticleCurrentUser} and ${#dates.format(article.dateFinEnch, 'yyyy-MM-dd')} > ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}" th:action="@{/enchere/incEnchere}" method="post" th:object="${enchere}" class="mt-2 d-flex flex-row align-items-end justify-content-between">
|
|
<input type="hidden" id="articleId" name="articleId" th:value="${article.id}">
|
|
<label for="montantEnchere" th:text="#{article.details.label.amount}"></label>
|
|
<input type="number" th:field="*{montantEnchere}" id="montantEnchere" step="0.01" min="0">
|
|
<span style="color: red;" th:if="${errors != null}">
|
|
<ul>
|
|
<li th:each="erreur: ${errors[0]}" th:text="${erreur.defaultMessage}"></li>
|
|
</ul>
|
|
</span>
|
|
<button type="submit" class="btn btn-primary" th:text="#{article.details.button.bid}"></button>
|
|
</form>
|
|
<div class="mt-5 d-flex justify-content-end align-items-center">
|
|
<a class="btn btn-secondary mr-2" href="/enchere" th:text="#{edit.article.back}"></a>
|
|
<a th:if="${#strings.equals(user.getPseudo(), article.pseudoUtilisateur)} and ${#dates.format(article.dateDebutEnch, 'yyyy-MM-dd')} > ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}" class="btn btn-primary" th:href="@{/article/edit(id=${article.id})}" th:text="#{edit.article.update}"></a>
|
|
<form th:if="${#dates.format(article.dateFinEnch, 'yyyy-MM-dd')} < ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')} and ${#strings.equals(user.getPseudo(), article.pseudoUtilisateur)}" th:action="@{/enchere/enchereDone}" method="post">
|
|
<input type="hidden" id="id" name="id" th:value="${article.id}">
|
|
<button type="submit" class="btn btn-primary" th:text="#{article.details.retrait}"></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-2" th:if="${isArticleCurrentUser}">
|
|
<div class="mt-2" th:if="${isArticleCurrentUser}">
|
|
<h5 th:text="#{article.details.ench}"></h5>
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th th:text="#{article.details.pseudo}"></th>
|
|
<th th:text="#{article.details.mountench}">Montant Enchère</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="enchere : ${encheres}">
|
|
<td>
|
|
<a th:href="@{/profil/showProfil(userPseudo=${enchere.pseudoUtilisateur})}" class="text-decoration-none">
|
|
<span th:text="${enchere.pseudoUtilisateur}"></span>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span th:text="${enchere.montantEnchere}"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|