From ffcf6fb8f282d1bfbec10a07d09e456774e163a4 Mon Sep 17 00:00:00 2001 From: "florian.llimos" Date: Tue, 12 Nov 2024 16:33:13 +0100 Subject: [PATCH] fix: update SQL query, add JavaScript function, modify CSS --- hello-world/css/style.css | 102 +++++++++++++++++++++++++--- hello-world/hello-world.php | 53 +++++++-------- hello-world/js/main.js | 132 +++++++++++++++++++++--------------- 3 files changed, 193 insertions(+), 94 deletions(-) diff --git a/hello-world/css/style.css b/hello-world/css/style.css index ef6b3e2..6de2c8b 100644 --- a/hello-world/css/style.css +++ b/hello-world/css/style.css @@ -9,6 +9,10 @@ padding: 0; } +.red { + color: red; +} + .bold { font-family: Inter; font-size: 14px; @@ -100,10 +104,22 @@ .leaflet-popup-content { margin: 0; padding: 0; - padding-bottom: 10px; width: 250px !important; } +.modal-images { + display: grid; + grid-template-columns: repeat(2, auto); + width: 90%; + margin-left: 5%; +} + +.modal-images > img { + justify-self: center; + align-self: center; + height: 80px !important; +} + .leaflet-popup-close-button > span:nth-child(1) { width: 25px; height: 25px; @@ -200,9 +216,34 @@ .modal-domaine-black, .modal-container-black { background-color: #634e42 !important; + +} + +.modal-border-green { + border: 5px solid #95C11F !important; + border-radius: 25px; +} + +.modal-border-yellow { + border: 5px solid #ffc800 !important; + border-radius: 25px; } +.modal-border-blue { + border: 5px solid #91a2ff !important; + border-radius: 25px; +} + +.modal-border-red { + border: 5px solid #ff792d !important; + border-radius: 25px; +} + +.modal-border-black { + border: 5px solid #634e42 !important; + border-radius: 25px; +} .modal-associe, .modal-annee, .modal-etat { padding: 0 !important; @@ -217,7 +258,6 @@ .modal-container { - padding-top: 10px; padding-bottom: 10px; } @@ -243,6 +283,7 @@ grid-column: a / c; justify-self: center; align-self: center; + border-radius: 25px 25px 0 0; } .modal-domaine { @@ -297,41 +338,80 @@ border-radius: 50px; align-self: center; justify-self: start; - margin-left: 4px !important; - margin-top: 0 !important; + margin-left: 4px; +} + +#toggle-associe.filter-active { + background: none !important; } .toggle-to-anim-enfant { animation-name: toActifEnfant; - animation-duration: 2000ms; + animation-duration: 1000ms; + animation-fill-mode: forwards; } .toggle-to-anim-parent { animation-name: toActifParent; - animation-duration: 2000ms; + animation-duration: 1000ms; + animation-fill-mode: forwards; +} + +.toggle-to-anim-enfant-reverse { + animation-name: toInactiveEnfant; + animation-duration: 1000ms; + animation-fill-mode: forwards; +} + +.toggle-to-anim-parent-reverse { + animation-name: toInactiveParent; + animation-duration: 1000ms; + animation-fill-mode: forwards; } @keyframes toActifEnfant { 0% { background-color: #634E42; + transform: translateX(0); } - 100% { background-color: #95C11F; - margin-left: 40px !important; + transform: translateX(38px); } } @keyframes toActifParent { 0% { - background-color: #634E42; + border: 2px solid #634E42; + background-color: white !important; } - 100% { - background-color: #95C11F; + border: 2px solid #95C11F; } } +/* Reverse keyframes */ +@keyframes toInactiveEnfant { + 0% { + background-color: #95C11F; + transform: translateX(38px); + } + 100% { + background-color: #634E42; + transform: translateX(0); + } +} + +@keyframes toInactiveParent { + 0% { + border: 2px solid #95C11F; + } + 100% { + border: 2px solid #634E42; + } +} + + /* EOF TOGGLE */ /* EOF TOGGLE */ diff --git a/hello-world/hello-world.php b/hello-world/hello-world.php index 55dfdb7..578d2f5 100644 --- a/hello-world/hello-world.php +++ b/hello-world/hello-world.php @@ -47,7 +47,7 @@ function display_hello_world_page() {
Associé-e BBE
-
+
@@ -152,40 +152,35 @@ function get_cartographie_markers() { global $wpdb; $table_name = $wpdb->prefix . 'posts'; - // Effectuer la requête pour obtenir les résultats - $results = $wpdb->get_results(" - SELECT u3yd_posts.ID, u3yd_posts.post_name, u3yd_term_taxonomy.taxonomy, + $results = $wpdb->get_results(" + SELECT u3yd_posts.ID, u3yd_posts.post_name, u3yd_term_taxonomy.taxonomy, GROUP_CONCAT(u3yd_terms.term_id ORDER BY u3yd_terms.term_id) AS term_ids, GROUP_CONCAT(u3yd_terms.name ORDER BY u3yd_terms.term_id) AS term_names - FROM u3yd_posts - INNER JOIN u3yd_term_relationships ON u3yd_posts.ID = u3yd_term_relationships.object_id - INNER JOIN u3yd_term_taxonomy ON u3yd_term_relationships.term_taxonomy_id = u3yd_term_taxonomy.term_taxonomy_id - INNER JOIN u3yd_terms ON u3yd_term_taxonomy.term_id = u3yd_terms.term_id - WHERE u3yd_posts.post_status = 'publish' - AND u3yd_posts.post_type = 'seriestv' - GROUP BY u3yd_posts.ID, u3yd_term_taxonomy.taxonomy; -"); + FROM u3yd_posts + INNER JOIN u3yd_term_relationships ON u3yd_posts.ID = u3yd_term_relationships.object_id + INNER JOIN u3yd_term_taxonomy ON u3yd_term_relationships.term_taxonomy_id = u3yd_term_taxonomy.term_taxonomy_id + INNER JOIN u3yd_terms ON u3yd_term_taxonomy.term_id = u3yd_terms.term_id + WHERE u3yd_posts.post_status = 'publish' + AND u3yd_posts.post_type = 'markercartographie' + GROUP BY u3yd_posts.ID, u3yd_term_taxonomy.taxonomy; + "); -// Structurer les données en regroupant les taxonomies par ID -$structured_data = []; + $structured_data = []; + + foreach ($results as $row) { + if(!isset($structured_data[$row->ID])){ + $structured_data[$row->ID] = [ + 'name' => $row->post_name, + ]; + } + if ($row->taxonomy == "categorielabel") { + $structured_data[$row->ID][$row->taxonomy] = explode(",", $row->term_names); + } else { + $structured_data[$row->ID][$row->taxonomy] = $row->term_names; + } -foreach ($results as $row) { - // Si le post n'existe pas encore dans le tableau, l'ajouter avec les données de base - if(!isset($structured_data[$row->ID])){ - $structured_data[$row->ID] = [ - 'name' => $row->post_name, - ]; - } - if ($row->taxonomy == "categorielabel") { - $structured_data[$row->ID][$row->taxonomy] = explode(",", $row->term_names); - } else { - $structured_data[$row->ID][$row->taxonomy] = $row->term_names; } -} - - -// Envoyer le JSON avec les en-têtes appropriés return $structured_data; } \ No newline at end of file diff --git a/hello-world/js/main.js b/hello-world/js/main.js index 582638c..2a96d00 100644 --- a/hello-world/js/main.js +++ b/hello-world/js/main.js @@ -49,23 +49,42 @@ jQuery(document).ready(function($) { popupAnchor }) : new L.Icon.Default(); - var popupContent = ` - ${item.photo ? `${itemNom}` : ''} -
- -

${itemDomaine}

-
-
-

${itemNom}

-

${itemCodePostal} ${itemVille}

-
-

${itemAssocie === "Oui" ? "Associé-e BBE" : ""}

-

Année : ${itemAnnee}

-

État d'avancement : ${itemAvancement}

-

${itemLabel}

- - + let imageUrl = ''; + + let imageUrls = []; + + if (Array.isArray(itemLabel)) { + if (itemLabel.includes("Label haie") && itemLabel.includes("Label végétal local")) { + imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/logo.png'); + imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/baseline-dark.svg'); + } else if (itemLabel.includes("Label haie")) { + imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/baseline-dark.svg'); + } else if (itemLabel.includes("Label végétal local")) { + imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/logo.png'); + } + } + + let popupContent = ` +
+ ${item.photo ? `${itemNom}` : ''} +
+ +

${itemDomaine}

+
+
+

${itemNom}

+

${itemCodePostal} ${itemVille}

+
+

${itemAssocie === "Oui" ? "Associé-e BBE" : ""}

+

Année : ${itemAnnee}

+

État d'avancement : ${itemAvancement}

+

${itemLabel}

+
+ ${imageUrls.map(url => `Label Image`).join('')} +
+
`; + var marker = L.marker([itemLatitude, itemLongitude], { icon: markerIcon }) .bindPopup(popupContent); allMarkers.push(marker); @@ -109,17 +128,14 @@ jQuery(document).ready(function($) { 'Prévu': $('#prevu').hasClass('filter-active'), }; - var associeFilters = { - 'Oui': $('#associe-oui').hasClass('filter-active'), - 'Non': $('#associe-non').hasClass('filter-active'), - }; - + var associeFilterActive = $('#toggle-associe').hasClass('filter-active'); + var labelFilters = { 'aucun': $('#label-aucun').hasClass('filter-active'), 'haie': $('#label-haie').hasClass('filter-active'), 'vegetal': $('#label-vegetal').hasClass('filter-active'), }; - + var domaineFilters = { 'Lieux de plantation': $('#lieux-de-plantation').hasClass('filter-active'), 'Acheteur de bois': $('#chaufferies-bois-clients').hasClass('filter-active'), @@ -127,61 +143,77 @@ jQuery(document).ready(function($) { 'Acheteur de chaleur': $('#chaufferies-vente-de-chaleur').hasClass('filter-active'), 'Plateformes logistiques': $('#plateformes-logistiques').hasClass('filter-active'), }; - + var filteredMarkers = allMarkers.filter(function(marker) { let popupContent = marker.getPopup().getContent(); - + let matchesStatusFilter = Object.keys(statusFilters).some(function(key) { return statusFilters[key] ? popupContent.includes(key) : false; }) || !Object.values(statusFilters).includes(true); - - let matchesAssocieFilter = Object.keys(associeFilters).some(function(key) { - return associeFilters[key] ? popupContent.includes(` ${key}`) : false; - }) || !Object.values(associeFilters).includes(true); - + + let matchesAssocieFilter = associeFilterActive ? popupContent.includes('Associé-e BBE') : true; + let matchesLabelFilter = labelFilters['haie'] && labelFilters['vegetal'] ? (popupContent.includes('Label haie') || popupContent.includes('végétal local')) : (labelFilters['haie'] ? popupContent.includes('Label haie') : (labelFilters['vegetal'] ? popupContent.includes('végétal local') : labelFilters['aucun'] ? popupContent.includes('Aucun') : true)); - + let matchesDomaineFilter = Object.keys(domaineFilters).some(function(key) { return domaineFilters[key] ? popupContent.includes(key) : false; }) || !Object.values(domaineFilters).includes(true); return matchesStatusFilter && matchesAssocieFilter && matchesLabelFilter && matchesDomaineFilter; }); - + markersCluster.clearLayers(); markersCluster.addLayers(filteredMarkers); } - + function handleFilterClick(filterId, otherFilterIds) { $(filterId).on('click', function() { $(this).toggleClass('filter-active'); - - // Ajouter ou retirer button-active seulement si l'élément a la classe wait-button + if ($(this).hasClass('wait-button')) { $(this).toggleClass('button-active'); } - if ($(this).hasClass('filter-active')) { - if (otherFilterIds && Array.isArray(otherFilterIds)) { - otherFilterIds.forEach(function(otherFilterId) { - $(otherFilterId).removeClass('filter-active').removeClass('button-active'); // Retire button-active des autres filtres - }); - } - } - - filterMarkers(); // Met à jour les marqueurs après le changement de filtre + if ($(this).hasClass('filter-active') && otherFilterIds && Array.isArray(otherFilterIds)) { + otherFilterIds.forEach(function(otherFilterId) { + $(otherFilterId).removeClass('filter-active button-active'); + }); + } + + filterMarkers(); }); } - + + function handleToggleClick(toggleId) { + $(toggleId).on('click', function() { + const parentElement = document.querySelector(toggleId); + const childElement = document.querySelector(`${toggleId} > div`); + + if ($(this).toggleClass('filter-active').hasClass('filter-active')) { + parentElement.classList.remove("toggle-to-anim-parent-reverse"); + childElement.classList.remove("toggle-to-anim-enfant-reverse"); + parentElement.classList.add("toggle-to-anim-parent"); + childElement.classList.add("toggle-to-anim-enfant"); + } else { + parentElement.classList.remove("toggle-to-anim-parent"); + childElement.classList.remove("toggle-to-anim-enfant"); + parentElement.classList.add("toggle-to-anim-parent-reverse"); + childElement.classList.add("toggle-to-anim-enfant-reverse"); + } + + filterMarkers(); + }); + } + handleFilterClick('#en-cours', ['#prevu', '#projets-finis']); handleFilterClick('#prevu', ['#en-cours', '#projets-finis']); handleFilterClick('#projets-finis', ['#en-cours', '#prevu']); - handleFilterClick('#associe-oui', ['#associe-non']); - handleFilterClick('#associe-non', ['#associe-oui']); + handleToggleClick('#toggle-associe'); + handleFilterClick('#label-haie', ['#label-aucun']); handleFilterClick('#label-vegetal', ['#label-aucun']); @@ -191,12 +223,4 @@ jQuery(document).ready(function($) { handleFilterClick('#chaufferies-vente-de-chaleur', false); handleFilterClick('#plateformes-logistiques', false); - // $('#reset-button').on('click', function() { - // let allHtmlElement = document.querySelectorAll("*"); - // allHtmlElement.forEach(htmlElement => { - // htmlElement.classList.remove("filter-active"); - // }); - // map.setView([48.9000, 0.1000], 9); - // addMarkers(initialMarkerData); - // }); }); \ No newline at end of file