227 lines
17 KiB
HTML
227 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html th:replace="~{modele-page :: layout('Accueil - ENI-Enchères',~{::link} , ~{::#container-main})}" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
</head>
|
|
<body>
|
|
<div id="container-main">
|
|
<div class="container mt-4">
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<!-- Card principale pour le formulaire -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<!-- Formulaire de recherche avec sélection de catégorie -->
|
|
<form th:action="@{/enchere}" method="post" class="mb-3">
|
|
<div class="row">
|
|
<div class="col-md-6" th:if="${#authentication.principal != 'anonymousUser'}">
|
|
<!-- Zone de recherche -->
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control" th:attr="placeholder=#{home.search.title}, value=${session.searchTitle != null ? session.searchTitle : ''}" name="searchTitle">
|
|
</div>
|
|
<div class="mb-4">
|
|
<select class="form-control" name="searchCategory">
|
|
<option value="" th:text="#{home.search.cat}"></option>
|
|
<option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.libelle}" th:selected="${category.id == session.searchCategory}"></option>
|
|
</select>
|
|
</div>
|
|
<!-- Achats et Ventes -->
|
|
</div>
|
|
<div class="col-md-12" th:if="${#authentication.principal == 'anonymousUser'}">
|
|
<!-- Zone de recherche -->
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control" th:attr="placeholder=#{home.search.title}, value=${session.searchTitle != null ? session.searchTitle : ''}" name="searchTitle">
|
|
</div>
|
|
<div class="mb-4">
|
|
<select class="form-control" name="searchCategory">
|
|
<option value="" th:text="#{home.search.cat}"></option>
|
|
<option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.libelle}" th:selected="${category.id == session.searchCategory}"></option>
|
|
</select>
|
|
</div>
|
|
<!-- Achats et Ventes -->
|
|
</div>
|
|
<!-- Colonne pour le bouton de recherche -->
|
|
<div class="col-md-6 d-flex justify-content-center align-items-center"th:if="${#authentication.principal != 'anonymousUser'}">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="typeTransaction" id="achats" value="achats" th:checked="${SessionTypeTransaction != null and SessionTypeTransaction == 'achats'}" onchange="toggleCheckbox(this.value)">
|
|
<label class="form-check-label" for="achats" th:text="#{home.buy.title}"></label>
|
|
</div>
|
|
</div>
|
|
<!-- Checkboxes pour Achats -->
|
|
<div id="achatsOptions">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="achatOption" id="encheresOuvertes" th:value="encheresOuvertes" th:checked="${sessionAchatOptions != null and #lists.contains(sessionAchatOptions, 'encheresOuvertes')}" th:disabled="${sessionAchatOptions == null}">
|
|
<label class="form-check-label" for="encheresOuvertes" th:text="#{home.buy.open}"></label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="achatOption" id="enchereEnCours" th:value="enchereEnCours" th:checked="${sessionAchatOptions != null and #lists.contains(sessionAchatOptions, 'enchereEnCours')}" th:disabled="${sessionAchatOptions == null}">
|
|
<label class="form-check-label" for="enchereEnCours" th:text="#{home.buy.progress}"></label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="achatOption" id="enchereRemportees" th:value="enchereRemportees" th:checked="${sessionAchatOptions != null and #lists.contains(sessionAchatOptions, 'enchereRemportees')}" th:disabled="${sessionAchatOptions == null}">
|
|
<label class="form-check-label" for="enchereRemportees" th:text="#{home.buy.success}"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<!-- Boutons radio pour Ventes -->
|
|
<div class="mb-3">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="typeTransaction" id="ventes" value="ventes" th:checked="${SessionTypeTransaction != null and SessionTypeTransaction == 'ventes'}" onchange="toggleCheckbox(this.value)">
|
|
<label class="form-check-label" for="ventes" th:text="#{home.sell.title}"></label>
|
|
</div>
|
|
</div>
|
|
<!-- Checkboxes pour Ventes -->
|
|
<div id="ventesOptions">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" th:name="venteOption" id="venteEnCours" th:value="venteEnCours" th:checked="${sessionVenteOptions != null and #lists.contains(sessionVenteOptions, 'venteEnCours')}" th:disabled="${sessionVenteOptions == null}">
|
|
<label class="form-check-label" for="venteEnCours" th:text="#{home.sell.progress}"></label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" th:name="venteOption" id="ventesNonDebutees" th:value="ventesNonDebutees" th:checked="${sessionVenteOptions != null and #lists.contains(sessionVenteOptions, 'ventesNonDebutees')}" th:disabled="${sessionVenteOptions == null}">
|
|
<label class="form-check-label" for="ventesNonDebutees" th:text="#{home.sell.nostarted}"></label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" th:name="venteOption" id="ventesTerminees" th:value="ventesTerminees" th:checked="${sessionVenteOptions != null and #lists.contains(sessionVenteOptions, 'ventesTerminees')}" th:disabled="${sessionVenteOptions == null}">
|
|
<label class="form-check-label" for="ventesTerminees" th:text="#{home.sell.finish}"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row">
|
|
<br>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-12 d-flex justify-content-center align-items-center">
|
|
<button type="submit" style="font-size: 1em;" class="btn btn-primary btn-lg w-100" th:text="#{home.button.search}"></button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div th:each="article : ${articles}" class="col-md-6 mb-4">
|
|
<a th:href="@{/article/show(id=${article.id})}" class="text-decoration-none text-dark" id="article-card">
|
|
<div class="card shadow-sm h-100 card-article">
|
|
<div class="row g-0">
|
|
<div class="col-md-4 d-flex align-items-center justify-content-center p-3">
|
|
<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-md-8">
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="text-dark card-title" th:text="${article.nom}"></h5>
|
|
<p class="text-dark card-text mb-3" th:text="${article.desc}" style="overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;"></p>
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label mr-2" th:text="#{article.details.label.sale_price}"></label></strong>
|
|
<div class="col-form-label">
|
|
<span class="text-dark">
|
|
<i class="fas fa-coins"></i>
|
|
<span th:text="${article.prixInitial}"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label mr-2" th:text="#{article.details.label.last_price}"></label></strong>
|
|
<div class="col-form-label">
|
|
<i class="fas fa-coins"></i>
|
|
<span class="text-dark" th:text="${article.prixMaxEnchere}"></span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 d-flex flex-row align-items-center justify-content-between">
|
|
<strong><label class="col-form-label mr-2" th:text="#{article.details.label.seller}"></label></strong>
|
|
<div class="col-form-label">
|
|
<span class="text-dark" th:text="${article.pseudoUtilisateur}"></span>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted"><strong><span th:text="#{article.details.label.start_date}"></span>: </strong></h6>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted"><span th:text="${#dates.format(article.dateDebutEnch, 'dd/MM/yyyy')}"></span></h6>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted"><strong><span th:text="#{article.details.label.end_date}"></span>: </strong></h6>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted"><span th:text="${#dates.format(article.dateFinEnch, 'dd/MM/yyyy')}"></span></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="row mt-4" th:if="${not #lists.isEmpty(articles)}">
|
|
<div class="col-md-12">
|
|
<nav aria-label="Page navigation example">
|
|
<ul class="pagination justify-content-center">
|
|
<!-- Bouton pour la première page -->
|
|
<li class="page-item">
|
|
<a class="page-link" th:href="@{/enchere(page=1)}">
|
|
<span aria-hidden="true">«</span>
|
|
<span th:text="#{home.button.first}"></span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Bouton pour la page précédente -->
|
|
<li th:if="${currentPage > 1}" class="page-item">
|
|
<a class="page-link" th:href="@{/enchere(page=${currentPage - 1})}">
|
|
<span aria-hidden="true">‹</span>
|
|
<span th:text="#{home.button.previous}"></span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Afficher les deux dernières pages, la page en cours et les deux suivantes -->
|
|
<th:block th:each="page, iter : ${#numbers.sequence((currentPage - 2 > 0 ? currentPage - 2 : 1), (currentPage + 2 < totalPages ? currentPage + 2 : totalPages))}">
|
|
<li class="page-item" th:classappend="${currentPage == page ? 'active' : ''}">
|
|
<a class="page-link" th:href="@{/enchere(page=${page})}" th:text="${page}"></a>
|
|
</li>
|
|
</th:block>
|
|
|
|
<!-- Bouton pour la page suivante -->
|
|
<li th:if="${currentPage < totalPages}" class="page-item">
|
|
<a class="page-link" th:href="@{/enchere(page=${currentPage + 1})}">
|
|
<span aria-hidden="true">›</span>
|
|
<span th:text="#{home.button.next}"></span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Bouton pour la dernière page -->
|
|
<li class="page-item">
|
|
<a class="page-link" th:href="@{/enchere(page=${totalPages})}">
|
|
<span aria-hidden="true">»</span>
|
|
<span th:text="#{home.button.end}"></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|