fix: update SQL query, add JavaScript function, modify CSS

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-left: 4px;
-    margin-top: 0 !important;
+}
+
+#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 */
 

hello-world/hello-world.php

@@ -47,7 +47,7 @@ function display_hello_world_page() {
                 <div class="container-title-filter">
                     <h5 id="associe-button" class="h2-low">Associé-e BBE</h5>
                 </div>
-                <div class="container-toggle" id="toggle-associe">
+                <div class="container-toggle" id="toggle-associe" value="all">
                     <div></div>
                 </div>
             </div>
@@ -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("
- $results = $wpdb->get_results("
+        SELECT u3yd_posts.ID, u3yd_posts.post_name, u3yd_term_taxonomy.taxonomy, 
- 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 
+        FROM u3yd_posts 
- INNER JOIN u3yd_term_relationships ON u3yd_posts.ID = u3yd_term_relationships.object_id 
+        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_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 
+        INNER JOIN u3yd_terms ON u3yd_term_taxonomy.term_id = u3yd_terms.term_id 
- WHERE u3yd_posts.post_status = 'publish' 
+        WHERE u3yd_posts.post_status = 'publish' 
- AND u3yd_posts.post_type = 'seriestv' 
+        AND u3yd_posts.post_type = 'markercartographie' 
- GROUP BY u3yd_posts.ID, u3yd_term_taxonomy.taxonomy;
+        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;
 
 }

hello-world/js/main.js

@@ -49,23 +49,42 @@ jQuery(document).ready(function($) {
                     popupAnchor
                 }) 
                 : new L.Icon.Default();
-            var popupContent = `
+            let imageUrl = '';
-                ${item.photo ? `<img src="${item.photo}" alt="${itemNom}" style="max-width:100%; height:auto;">` : ''}
+
-                <div class="modal-container-header">
+            let imageUrls = [];
-                    <img src="https://images.pexels.com/photos/27880483/pexels-photo-27880483/free-photo-of-clairiere-terrain-fleurs-voiture.jpeg?auto=compress&cs=tinysrgb&w=400&lazy=load" style="height: 200px; width: 100%; object-fit: cover;">
+
-                    <p class='modal-domaine color-white ${itemDomaine === "Lieux de plantation" ? "modal-domaine-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-domaine-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-domaine-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-domaine-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-domaine-red" : ""}'>${itemDomaine}</p>
+            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 = `
+                <div class='modal-container ${itemDomaine === "Lieux de plantation" ? "modal-border-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-border-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-border-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-border-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-border-red" : ""}'>
+                    ${item.photo ? `<img src="${item.photo}" alt="${itemNom}" style="max-width:100%; height:auto;">` : ''}
+                    <div class="modal-container-header">
+                        <img src="https://images.pexels.com/photos/27880483/pexels-photo-27880483/free-photo-of-clairiere-terrain-fleurs-voiture.jpeg?auto=compress&cs=tinysrgb&w=400&lazy=load" style="height: 200px; width: 100%; object-fit: cover;">
+                        <p class='modal-domaine color-white ${itemDomaine === "Lieux de plantation" ? "modal-domaine-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-domaine-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-domaine-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-domaine-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-domaine-red" : ""}'>${itemDomaine}</p>
+                    </div>
+                    <div class='modal-container ${itemDomaine === "Lieux de plantation" ? "modal-container-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-container-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-container-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-container-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-container-red" : ""}' style='padding-top: 10px;'>
+                        <h2 class='modal-name'>${itemNom}</h2>
+                        <h3 class='modal-adress'>${itemCodePostal} ${itemVille}</h3>
+                    </div>
+                    <p class="modal-associe"><span class="bold">${itemAssocie === "Oui" ? "Associé-e BBE" : ""}</span></p>
+                    <p class="modal-annee">Année : <span class="bold">${itemAnnee}</span></p>
+                    <p class="modal-etat">État d'avancement : <span class="bold">${itemAvancement}</span></p>
+                    <p class="none">${itemLabel}</p>
+                    <div class="modal-images">
+                        ${imageUrls.map(url => `<img src="${url}" alt="Label Image">`).join('')}
+                    </div>
                 </div>    
-                <div class='modal-container ${itemDomaine === "Lieux de plantation" ? "modal-container-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-container-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-container-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-container-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-container-red" : ""}'>
-                    <h2 class='modal-name'>${itemNom}</h2>
-                    <h3 class='modal-adress'>${itemCodePostal} ${itemVille}</h3>
-                </div>
-                <p class="modal-associe"><span class="bold">${itemAssocie === "Oui" ? "Associé-e BBE" : ""}</span></p>
-                <p class="modal-annee">Année : <span class="bold">${itemAnnee}</span></p>
-                <p class="modal-etat">État d'avancement : <span class="bold">${itemAvancement}</span></p>
-                <p class="none">${itemLabel}</p>
-                <img src="" class="modal-label-1">
-                <img src="" class="modal-label-2">
             `;
+                
             var marker = L.marker([itemLatitude, itemLongitude], { icon: markerIcon })
                 .bindPopup(popupContent);
             allMarkers.push(marker);
@@ -109,10 +128,7 @@ jQuery(document).ready(function($) {
             'Prévu': $('#prevu').hasClass('filter-active'),
         };
         
-        var associeFilters = {
+        var associeFilterActive = $('#toggle-associe').hasClass('filter-active');
-            'Oui': $('#associe-oui').hasClass('filter-active'),
-            'Non': $('#associe-non').hasClass('filter-active'),
-        };
         
         var labelFilters = {
             'aucun': $('#label-aucun').hasClass('filter-active'),
@@ -135,9 +151,7 @@ jQuery(document).ready(function($) {
                 return statusFilters[key] ? popupContent.includes(key) : false;
             }) || !Object.values(statusFilters).includes(true); 
             
-            let matchesAssocieFilter = Object.keys(associeFilters).some(function(key) {
+            let matchesAssocieFilter = associeFilterActive ? popupContent.includes('Associé-e BBE') : true;
-                return associeFilters[key] ? popupContent.includes(` ${key}`) : false;
-            }) || !Object.values(associeFilters).includes(true);
     
             let matchesLabelFilter = labelFilters['haie'] && labelFilters['vegetal'] 
                 ? (popupContent.includes('Label haie') || popupContent.includes('végétal local')) 
@@ -160,28 +174,46 @@ jQuery(document).ready(function($) {
         $(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 ($(this).hasClass('filter-active') && otherFilterIds && Array.isArray(otherFilterIds)) {
-                if (otherFilterIds && Array.isArray(otherFilterIds)) {
+                otherFilterIds.forEach(function(otherFilterId) {
-                    otherFilterIds.forEach(function(otherFilterId) {
+                    $(otherFilterId).removeClass('filter-active button-active');
-                        $(otherFilterId).removeClass('filter-active').removeClass('button-active'); // Retire button-active des autres filtres
+                });
-                    });
-                }
             }
 
-            filterMarkers(); // Met à jour les marqueurs après le changement de filtre
+            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']);
+    handleToggleClick('#toggle-associe');
-    handleFilterClick('#associe-non', ['#associe-oui']);
+
     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);
-    // });
 });