From 210d1b974cc22a329a5ae8b2a97b1c0777f91c04 Mon Sep 17 00:00:00 2001 From: e1754709 Date: Thu, 10 Aug 2023 09:49:27 -0400 Subject: [PATCH] =?UTF-8?q?Filtres=20du=20d=C3=A9mon=20JS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 8196 -> 8196 bytes app/Http/Controllers/BouteilleController.php | 27 +- public/.DS_Store | Bin 6148 -> 8196 bytes public/css/filtres.css | 62 +++++ public/css/hamburger.css | 2 +- public/css/recherche.css | 2 +- public/icons/.DS_Store | Bin 0 -> 6148 bytes public/icons/filter.svg | 1 + public/icons/sort.svg | 1 + public/js/hamburger.js | 1 - public/js/search.js | 254 ++++++++++++++----- resources/lang/en/messages.php | 13 + resources/views/bouteilles/edit.blade.php | 0 resources/views/bouteilles/index.blade.php | 39 ++- resources/views/celliers/show.blade.php | 2 +- resources/views/layout/app.blade.php | 17 +- storage/.DS_Store | Bin 6148 -> 6148 bytes 17 files changed, 333 insertions(+), 88 deletions(-) create mode 100644 public/icons/.DS_Store create mode 100644 public/icons/filter.svg create mode 100644 public/icons/sort.svg delete mode 100644 resources/views/bouteilles/edit.blade.php diff --git a/.DS_Store b/.DS_Store index 8f48da3ca7cc4d3c935b99d9bde5796adffa99fd..4df4ffe10b8671285c6641e5781d86c6d10bdd0c 100644 GIT binary patch delta 57 zcmZp1XmQwZS!i;TNGXSjk%f+esfGFE|04FA`-C$Y;Ub&=i?B0qW|#QJ!VHuL@>rMw D9m)}# delta 66 zcmZp1XmQwZS%`7_ TWoO>ZCh?tx$;fPzC@V7nzcvz~ diff --git a/app/Http/Controllers/BouteilleController.php b/app/Http/Controllers/BouteilleController.php index b9b6d1d..ac6aaed 100644 --- a/app/Http/Controllers/BouteilleController.php +++ b/app/Http/Controllers/BouteilleController.php @@ -25,24 +25,43 @@ public function __construct() public function index(Request $request) { $searchTerm = $request->input('query'); + $rouge = $request->rouge; + $blanc = $request->blanc; + $rose = $request->rose; + $orange = $request->orange; + $pays = $request->pays; + // On verifie si on a un terme de recherche - if ($searchTerm) { + if ($searchTerm || $rouge || $blanc || $rose || $orange || $pays) { + + // On verifie si on a une couleur, une catégorie, un pays ou une région $bouteilles = Bouteille::search($searchTerm) - ->where('existe_plus', false) ->orderBy('nom', 'asc') + ->when($pays, function ($query) use ($pays) { + return $query->where('pays_fr', $pays); + }) + ->when(($rouge || $blanc || $rose || $orange), function ($query) use ($rouge, $blanc, $rose, $orange) { + $colors = array_filter([$rouge, $blanc, $rose, $orange]); + return $query->whereIn('couleur_fr', $colors); + }) ->paginate(30); $message = __('messages.add'); // On ajoute le message afin de l'avoir dans la bonne langue dans la vue foreach ($bouteilles as $bouteille) { $bouteille->message = $message; + $bouteille->nombreBouteilles = $bouteilles->total(); } - // On retourne les bouteilles en json return response()->json($bouteilles); + } else { $celliers = Cellier::where('user_id', auth()->id())->get(); - return view('bouteilles.index', compact('celliers')); + //filter pays by alphabetical order + $pays = Bouteille::select('pays_fr')->distinct()->get()->sortBy('pays_fr'); + $regions = Bouteille::select('region_fr')->distinct()->get()->sortBy('region_fr'); + $prix = Bouteille::select('prix')->distinct()->get(); + return view('bouteilles.index', compact('celliers', 'pays', 'regions', 'prix')); } } diff --git a/public/.DS_Store b/public/.DS_Store index 6183288fa337d1465006a363f38da498b95306bf..ee3340e7210993a00373b4008075de85cf39fde5 100644 GIT binary patch literal 8196 zcmeHMTWl3Y7@lui=S@}fo)U-ZGCj~e}FXAf`+JQxx~!cH>t??3bZ zGdtgW|IC>^j4^Z<&5evTF~(%dTxtubxJBaaJl~Y0sHU1E$e%GkH|0;}94~j1ZCnu} z5F-#H5F-#H5F>DRAV6m}Px5WfebE}1F#<6H_ap**e=sO>nT+JLkm1%rMR)}u$*%xm zqG!4Xgg!X zO{Y$^Z|ZC{wsdYi-D;fLwyCYvXzyr0eOi$lnjhRTm^toDxZW8t2}BzKtDQ5cvz0S) z{8EqjB2m>?p3!&Z87b-leRyP4&1j2D^xFF;1KV@`VXNSi%xH^zn%+R(a}N|O-aeA| zoZ^J*XSBL}*2x#0Y+!XcPRf4L@<#*fM8KcMe6JAngodLw`SQAqrWJi_&>{!BWc8Ap zUq9!yptp+v!5v1!AY%Imcubt=!SaOq<7lq znS2ye);^$qX!K^?&=2vJo`OZC89A)h*Q#lsrX_1xVc4o}P}9e0aTU!MH5=8<`jC^& zS&pKaVw?`OQy(b_Y!z*fsNA7GtdHisi3ysbPcvv0)kzxpF+TF%tRL*3wA^ch_v-!n zn13u=u=Y<8yJT%fcnnZ|xMI}8o%&2W@Cy8m36On;t{>#xb(v<^Q&Z#8T76JY%i7m6 zEspJ$Y~nO6x}dh)oLnc?Cq%Y6*(NlFPN`*V1D#2`*otFf`&RIuo`Qy4lQU$5?$!V9vr} z)F`c$)=8VCPN_@0x>Syru}b1e-K5{J15ms~U+|=fTg6MFuYcFw5ieI3h7q!ONqxhL z<~8d#b?iu9W0Ig=nQb?6I3#Wb-9zGr>pX{XvtcNy_b)HU&h=;#(KSSjw@%2MwpvYO z{lH3@7_ZHX)K#lV-J{JHYNDl8rs&e7P*oFc8x@KnttwJmwvY;;sN1$H6ir%nq&~7! z;Q_9(P){UUdZ;J)zZ3N$yTm?cGi;WK`V0G&{m%Y@O!Q2^z^ag-Em)5ZY(*!w<015+ zAGR83g7KJZnx9&yS733amqY#yJ;aq7b>_3uMe-|B(MEpNY6&pmW<@IkkmryfBz7`f4Iiy Ne|-Lj?7Mf1e*xd~8gu{v delta 176 zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGjdEU6q~50$jCG?VE1GL8J5ZX0%DBYC#wk* zs)<)uTbk-97#msE>L^rO8X4#)n3$Q=)^c))D(hPZ#b@W_=H+)z-X|c>*tL18SP|pK zh8--6**Q1_nSmw)fdDsxc~qF diff --git a/public/css/filtres.css b/public/css/filtres.css index e69de29..e96d5fa 100644 --- a/public/css/filtres.css +++ b/public/css/filtres.css @@ -0,0 +1,62 @@ +.filtres-tris-conteneur { + display: flex; + gap: 10px; + margin: 10px; + margin-top: 0; + max-width: 100%; + max-height: 100px; + justify-content: center; + align-items: center; + padding: 10px; +} +.filtres-tris-conteneur > * { + min-width: 50%; + display: flex; + align-items: center; + justify-content: space-around; + border-radius: 5px; + background-color: var(--light-brown); + padding-block: 10px; +} +.filtres-tris-conteneur > * img { + max-width: 40px; + max-height: 40px; +} + +.resultats { + margin-inline: auto; +} +.zone-pillules { + margin-inline: 10px; + display: flex; +} +.zone-pillules > div { + display: flex; + background-color: rgb(187, 187, 187); + color: black; + border-radius: 25px; + padding: 5px; + padding-top: 7px; + padding-left: 7px; + margin: 5px; + font-size: 14px; + font-weight: bold; + max-width: fit-content; +} +.zone-pillules > div p { + margin: 0; + margin-top: 1px; + padding: 0; + text-align: center;; +} +.zone-pillules > div button { + background-color: transparent; + border: none; + font-size: 14px; + font-weight: bold; + cursor: pointer; + height: 10px; +} +.zone-pillules > div img { + max-height: 100%; +} \ No newline at end of file diff --git a/public/css/hamburger.css b/public/css/hamburger.css index 03cd0ad..fb82788 100644 --- a/public/css/hamburger.css +++ b/public/css/hamburger.css @@ -134,7 +134,7 @@ height: calc(100% - 100px); margin-top: 100px; background-color: rgba(0, 0, 0, 0.3); - display: none; + display: none; } .show { diff --git a/public/css/recherche.css b/public/css/recherche.css index 9a23033..54ba0e6 100644 --- a/public/css/recherche.css +++ b/public/css/recherche.css @@ -2,7 +2,7 @@ .rechercheConteneur { position: sticky; /* Set the position to sticky */ top: 0; /* Stick the element at the top of the container */ - z-index: 2; + z-index: 1; margin-inline: 0; min-width: 100%; display: flex; diff --git a/public/icons/.DS_Store b/public/icons/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 \ No newline at end of file diff --git a/public/icons/sort.svg b/public/icons/sort.svg new file mode 100644 index 0000000..ea942b8 --- /dev/null +++ b/public/icons/sort.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/js/hamburger.js b/public/js/hamburger.js index d9a7efa..0b7ae97 100644 --- a/public/js/hamburger.js +++ b/public/js/hamburger.js @@ -5,7 +5,6 @@ window.onload = function() { menuBouton.addEventListener("click", function() { - console.log("Allo") menuMobile.classList.toggle("is-active"); overlayGrey.classList.toggle("show"); }) diff --git a/public/js/search.js b/public/js/search.js index e63dddf..774c78a 100644 --- a/public/js/search.js +++ b/public/js/search.js @@ -1,6 +1,15 @@ document.addEventListener('DOMContentLoaded', function () { const searchInput = document.getElementById('searchInput'); const searchResults = document.querySelector('.indexBouteilles'); + const filtresTrigger = document.querySelector('.filtres-trigger'); + const filtresSideBar = document.querySelector('.filtres-side-bar'); + filtresSideBar.style.display = "none"; + + filtresTrigger.addEventListener('click', function() { + filtresSideBar.style.display = "block"; + }); + searchInput.addEventListener('input', fetchSearchResults); + filtresSideBar.addEventListener('input', fetchSearchResults); // Fonction qui récupère les images de pastille function getPastilleClass(image_pastille_alt) { @@ -70,16 +79,6 @@ document.addEventListener('DOMContentLoaded', function () { return cardHTML; } - function handleSearchInput() { - const searchTerm = searchInput.value.trim(); - - searchTerm.length > 0 ? - // Récupérer les résultats de recherche - fetchSearchResults(searchTerm) : - // Vider les résultats de recherche - searchResults.innerHTML = ''; - } - // Fonction pour récupérer les résultats de recherche function fetchPaginatedResults(url) { window.scroll({ top: 0, left: 0, behavior: 'smooth' }); @@ -88,7 +87,9 @@ document.addEventListener('DOMContentLoaded', function () { .then(response => { const responseData = response.data; const bouteilles = responseData.data; - + //console.log(bouteilles[0].nombreBouteilles); + let resultatsHtml = document.querySelector('.resultats'); + resultatsHtml.innerHTML = bouteilles[0].nombreBouteilles + " résultats"; // Générer le HTML des résultats de recherche let resultsHTML = ''; bouteilles ? @@ -100,63 +101,59 @@ document.addEventListener('DOMContentLoaded', function () { // Ajouter les résultats de recherche au container searchResults searchResults.innerHTML = resultsHTML; - // Ne pas afficher la pagination si le nombre de résultats est inférieur à 30 - if(bouteilles.length >= 30) { - let links = responseData.links; - // Add the pagination links to the searchResults container - - const paginationHTML = responseData.links - ? ` - - ` - : ''; - - // Ajouter la pagination au container searchResults - searchResults.insertAdjacentHTML('beforeend', paginationHTML); - - const paginationLinks = document.querySelectorAll('.pagination a.page-link'); - // Ajouter un event listener sur les liens de pagination - paginationLinks.forEach(link => { - link.addEventListener('click', function (event) { - event.preventDefault(); - const url = this.getAttribute('href'); - // Récupérer les résultats de recherche - fetchPaginatedResults(url); - }); - }); + let links = responseData.links; + // Add the pagination links to the searchResults container + const paginationHTML = responseData.links + ? ` +
    + prem. - // Récupération du bouton de pagination - const boutonPagination = document.querySelector(".numeroPage"); - // Ajouter un event listener sur le bouton de pagination - boutonPagination.addEventListener("keydown", function(event) { - // si la touche entrée est pressée, on empeche le comportement par défaut et on change l'url - if (event.key === "Enter" || event.keyCode === 13) { - event.preventDefault(); - // attributions des valeurs dans des variables pour rendre le tout plus lisible - const numeroPage = parseInt(boutonPagination.value); - const dernierePage = links[links.length-2].label; - let url; - numeroPage >= 1 && numeroPage <= dernierePage ? - // si le numero de page est entre 1 et le nombre de page max, on change l'url - url = links[1].url.replace("page=1", "page=" + numeroPage) : - // sinon on change l'url pour la premiere page - url = links[1].url; - // Récupérer les résultats de recherche - fetchPaginatedResults(url); - } + prec. + + + + suiv. + + dern. +
+ ` + : ''; + + // Ajouter la pagination au container searchResults + searchResults.insertAdjacentHTML('beforeend', paginationHTML); + + const paginationLinks = document.querySelectorAll('.pagination a.page-link'); + // Ajouter un event listener sur les liens de pagination + paginationLinks.forEach(link => { + link.addEventListener('click', function (event) { + event.preventDefault(); + // Récupérer les résultats de recherche + url += "&page=" + link.getAttribute('href').split('page=')[1]; + fetchPaginatedResults(url); }); - } + }); + + // Récupération du bouton de pagination + const boutonPagination = document.querySelector(".numeroPage"); + // Ajouter un event listener sur le bouton de pagination + boutonPagination.addEventListener("keydown", function(event) { + // si la touche entrée est pressée, on empeche le comportement par défaut et on change l'url + if (event.key === "Enter" || event.keyCode === 13) { + event.preventDefault(); + // attributions des valeurs dans des variables pour rendre le tout plus lisible + const numeroPage = parseInt(boutonPagination.value); + const dernierePage = links[links.length-2].label; + let url; + numeroPage >= 1 && numeroPage <= dernierePage ? + // si le numero de page est entre 1 et le nombre de page max, on change l'url + url = links[1].url.replace("page=1", "page=" + numeroPage) : + // sinon on change l'url pour la premiere page + url = links[1].url; + // Récupérer les résultats de recherche + fetchPaginatedResults(url); + } + }); }) .catch(error => { console.error('Error fetching paginated results:', error); @@ -164,11 +161,128 @@ document.addEventListener('DOMContentLoaded', function () { }); } - function fetchSearchResults(searchTerm) { - const url = `/bouteilles?query=${encodeURIComponent(searchTerm)}`; - fetchPaginatedResults(url); + function fetchSearchResults(event) { + + + const searchTerm = searchInput?.value.trim() || ""; + let url = "/bouteilles?"; + if (searchTerm) { + url += `query=${encodeURIComponent(searchTerm)}&`; + } + + const selectedCouleurs = document.querySelectorAll("#couleurs input[type=checkbox]:checked"); + + selectedCouleurs.forEach(selectedCouleur => { + let pilluleCouleur = document.querySelector("#pillule-" + selectedCouleur.value); + if (pilluleCouleur) { + pilluleCouleur.remove(); + } + url = createPillHtml(selectedCouleur, url); + }); + + const selectedPays = document.querySelector("#filtre-pays"); + if (selectedPays.value !== "") { + let pillulePays = document.querySelector("#pillule-pays"); + if (pillulePays) { + pillulePays.remove(); + } + url = createPillHtml(selectedPays, url); + } + setupPilluleClickListeners(url); + + const existingPillules = document.querySelectorAll(".zone-pillules > div"); + existingPillules.forEach(pillule => { + const filterValue = pillule.id.split("-")[1]; + const filterInput = document.querySelector(`#filtre-${filterValue}`); + const isChecked = filterInput && filterInput.checked; + + if (!isChecked) { + pillule.remove(); + } + }); + + // Call fetchPaginatedResults only if there's a searchTerm or if filters are applied + if (searchTerm || selectedCouleurs.length > 0 || selectedPays.value) { + fetchPaginatedResults(url); + } else { + // Clear the search results if no searchTerm or filters are applied + searchResults.innerHTML = ''; + } + } + +function createPillHtml(pillule, url) { + if (!pillule) { + return url; + } + + let valeurFiltre = pillule.value; + let nomFiltre; + if (pillule.type === "checkbox" || pillule.type === "radio") { + nomFiltre = pillule.name.split("-")[1]; + } else if (pillule.tagName === "SELECT") { + nomFiltre = pillule.id.split("-")[1]; + } + //console.log(nomFiltre, valeurFiltre); + + let zonePillules = document.querySelector(".zone-pillules"); + let existingPillule = document.querySelector(`#pillule-${nomFiltre}`); + + console.log(existingPillule, nomFiltre, valeurFiltre); + + if (existingPillule) { + existingPillule.remove(); + } + + let newPillule = document.createElement("div"); + newPillule.id = `pillule-${nomFiltre}`; + //console.log(newPillule); + newPillule.innerHTML = ` +

${valeurFiltre}

+ + `; + + zonePillules.appendChild(newPillule); + url += `${encodeURIComponent(nomFiltre)}=${encodeURIComponent(valeurFiltre)}&`; + console.log(url); + return url; +} + + + + + + function resetFilterInput(filterValue) { + let filterInput = document.querySelector("#filtre-" + filterValue); + if (filterInput.type === "checkbox" || filterInput.type === "radio") { + filterInput.checked = false; + + const pillule = document.querySelector(`#pillule-${filterValue}`); + if (pillule) { + pillule.remove(); + } + } else if (filterInput.tagName === "SELECT") { + filterInput.selectedIndex = 0; + } else if (filterInput.type === "text") { + filterInput.value = ""; + } } - // Ajout d'un event listener sur l'input de recherche - searchInput.addEventListener('input', handleSearchInput); + function setupPilluleClickListeners(url) { + const zonePillules = document.querySelector(".zone-pillules"); + + zonePillules.addEventListener("click", function(event) { + const pillule = event.target.closest(".zone-pillules > div"); + if (pillule) { + const filterValue = pillule.id.split("-")[1]; + resetFilterInput(filterValue); + pillule.remove(); + fetchSearchResults(); + url = createPillHtml(filterValue, url); + } + }); + } + + }); diff --git a/resources/lang/en/messages.php b/resources/lang/en/messages.php index b1684a9..dfe4d1c 100644 --- a/resources/lang/en/messages.php +++ b/resources/lang/en/messages.php @@ -50,6 +50,19 @@ 'add' => 'Add', 'no_results_message' => 'No results for', + //Filters + 'filters' => 'Filters', + 'filter' => 'Filter', + 'all' => 'All', + 'red' => 'Red', + 'white' => 'White', + 'rose' => 'Rosé', + 'orange' => 'Orange', + 'country' => 'Country', + + //Sort + 'sort' => 'Sort', + //Modal - Add Bottle 'cellar' => 'Cellar', 'quantity' => 'Quantity', diff --git a/resources/views/bouteilles/edit.blade.php b/resources/views/bouteilles/edit.blade.php deleted file mode 100644 index e69de29..0000000 diff --git a/resources/views/bouteilles/index.blade.php b/resources/views/bouteilles/index.blade.php index 5e71b72..1beb212 100644 --- a/resources/views/bouteilles/index.blade.php +++ b/resources/views/bouteilles/index.blade.php @@ -6,12 +6,49 @@ + @endpush -
+

+ +
+
+ filtres +

@lang('messages.filters')

+
+
+ tri +

@lang('messages.sort')

+
+
+
+
+ +
+ @csrf +
+ + + + + + + + +
+
+ + +
+
diff --git a/resources/views/celliers/show.blade.php b/resources/views/celliers/show.blade.php index 31c4117..e2d545c 100644 --- a/resources/views/celliers/show.blade.php +++ b/resources/views/celliers/show.blade.php @@ -15,7 +15,7 @@ @csrf @method('PUT') - +
crayon modification
diff --git a/resources/views/layout/app.blade.php b/resources/views/layout/app.blade.php index 371fdc3..43acd5a 100644 --- a/resources/views/layout/app.blade.php +++ b/resources/views/layout/app.blade.php @@ -26,15 +26,7 @@ -
    - @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties) - @if($localeCode != LaravelLocalization::getCurrentLocale()) - - {{ $properties['native'] }} - - @endif - @endforeach -
+ @if(!isset($cacherLayout))
{{-- @@ -59,6 +51,13 @@ Changer vos infos personnelles Changer votre mot de passe Ajouter une bouteille au répertoire + @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties) + @if($localeCode != LaravelLocalization::getCurrentLocale()) + + {{ $properties['native'] }} + + @endif + @endforeach
diff --git a/storage/.DS_Store b/storage/.DS_Store index e0e81fbf9b49d2a7b39503305887a14d2ce01559..a219d5f4216995f6fab4bcfa2c6f71ed4c985ea3 100644 GIT binary patch delta 21 ccmZoMXffEZhl#_)$U;ZK)WUr85he#w07