103 lines
6.8 KiB
HTML
103 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html th:replace="~{modele-page :: layout('${articleDetailsTitle}',~{::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">
|
|
<h4 th:text="#{article.details.heading}"></h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12 col-md-4">
|
|
<img th:src="@{'/images/articles/' + ${article.id} + '.jpg'}" alt="image-vente" class="img-thumbnail" style="width: 100%; height: auto;">
|
|
</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">Dernière offre</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}" 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="${#fields.hasErrors('montantEnchere')}">
|
|
<ul>
|
|
<li th:each="erreur: ${#fields.errors('montantEnchere')}" th:text="${erreur}"></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="/accueil" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="mt-2">
|
|
<h5>Enchérisseurs</h5>
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Pseudo</th>
|
|
<th>Montant Enchère</th> <!-- Nouvelle colonne pour afficher le montant de l'enchère -->
|
|
</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>
|