florian.llimos/cartographie_bbe
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
florian.llimos 2024-11-12 16:33:13 +01:00
parent 6c22bdaba3
commit ffcf6fb8f2
3 changed files with 193 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
hello-world/css/style.css
View File

@ -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% {
border: 2px solid #95C11F;
}
}
100% {
/* 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 */

9
hello-world/hello-world.php
View File

@ -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,7 +152,6 @@ 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,
GROUP_CONCAT(u3yd_terms.term_id ORDER BY u3yd_terms.term_id) AS term_ids,
@ -162,15 +161,13 @@ function get_cartographie_markers() {
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'
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 = [];
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,
@ -184,8 +181,6 @@ foreach ($results as $row) {
}
// Envoyer le JSON avec les en-têtes appropriés
return $structured_data;
}

76
hello-world/js/main.js
View File

@ -49,13 +49,29 @@ jQuery(document).ready(function($) {
popupAnchor
})
: new L.Icon.Default();
var popupContent = `
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 = `
<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" : ""}'>
<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>
@ -63,9 +79,12 @@ jQuery(document).ready(function($) {
<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">
<div class="modal-images">
${imageUrls.map(url => `<img src="${url}" alt="Label Image">`).join('')}
</div>
</div>
`;
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 = {
'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'),
@ -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) {
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'))
@ -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 (otherFilterIds && Array.isArray(otherFilterIds)) {
if ($(this).hasClass('filter-active') && otherFilterIds && Array.isArray(otherFilterIds)) {
otherFilterIds.forEach(function(otherFilterId) {
$(otherFilterId).removeClass('filter-active').removeClass('button-active'); // Retire button-active des autres filtres
$(otherFilterId).removeClass('filter-active button-active');
});
}
filterMarkers();
});
}
filterMarkers(); // Met à jour les marqueurs après le changement de filtre
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);
// });
});