150 lines
11 KiB
HTML
150 lines
11 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="@{/accueil}" method="post" class="mb-3">
|
|
<div class="row">
|
|
<!-- Colonne pour la zone de recherche et Achats/Ventes -->
|
|
<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}" 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}"></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}" 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}"></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" onchange="toggleCheckbox(this.value)">
|
|
<label class="form-check-label" for="achats" th:text="#{home.sell.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" disabled>
|
|
<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" disabled>
|
|
<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" disabled>
|
|
<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" 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" disabled>
|
|
<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" disabled>
|
|
<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" disabled>
|
|
<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:src="${'images/articles/' + article.id + '.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 text" th:text="${article.nom}"></h5>
|
|
<p class="text-dark card-text mb-auto" th:text="${article.desc}"></p>
|
|
<div class="text-dark d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 th:text="#{home.article.sellprice}"> <span th:text="${article.prixVente}"></span> €</h6>
|
|
<h6 th:text="#{home.article.seller}"> <span th:text="${article.pseudoUtilisateur}"></span> </h6>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<h6 class="text-muted"> <span th:text="${#dates.format(article.dateFinEnch, 'dd/MM/yyyy')}"></span></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|