mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
up infos habitants sur stats
This commit is contained in:
Tykayn
tykayn
parent
21d4d5b850
commit
918527e15e
16 changed files with 559 additions and 240 deletions
|
|
@ -1,98 +1,68 @@
|
|||
// Fonction pour gérer la recherche de villes
|
||||
function setupCitySearch(searchInputId, suggestionListId, onCitySelected) {
|
||||
const searchInput = document.getElementById(searchInputId);
|
||||
/**
|
||||
* Configure la recherche de ville avec autocomplétion
|
||||
* @param {string} inputId - ID de l'input de recherche
|
||||
* @param {string} suggestionListId - ID de la liste des suggestions
|
||||
* @param {Function} onSelect - Callback appelé lors de la sélection d'une ville
|
||||
*/
|
||||
export function setupCitySearch(inputId, suggestionListId, onSelect) {
|
||||
const searchInput = document.getElementById(inputId);
|
||||
const suggestionList = document.getElementById(suggestionListId);
|
||||
|
||||
// Vérifier si les éléments existent avant de continuer
|
||||
if (!searchInput || !suggestionList) {
|
||||
console.debug(`Éléments de recherche non trouvés: ${searchInputId}, ${suggestionListId}`);
|
||||
return;
|
||||
}
|
||||
if (!searchInput || !suggestionList) return;
|
||||
|
||||
let searchTimeout;
|
||||
let timeoutId = null;
|
||||
|
||||
// Fonction pour nettoyer la liste des suggestions
|
||||
function clearSuggestions() {
|
||||
suggestionList.innerHTML = '';
|
||||
suggestionList.style.display = 'none';
|
||||
}
|
||||
searchInput.addEventListener('input', function () {
|
||||
clearTimeout(timeoutId);
|
||||
const query = this.value.trim();
|
||||
|
||||
// Fonction pour afficher les suggestions
|
||||
function displaySuggestions(suggestions) {
|
||||
clearSuggestions();
|
||||
if (suggestions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
suggestions.forEach(suggestion => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'suggestion-item';
|
||||
item.innerHTML = `
|
||||
<div class="suggestion-name">${suggestion.display_name}</div>
|
||||
<div class="suggestion-details">
|
||||
<span class="suggestion-type">${suggestion.type}</span>
|
||||
<span class="suggestion-postcode">${suggestion.postcode || ''}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
item.addEventListener('click', () => {
|
||||
searchInput.value = suggestion.display_name;
|
||||
clearSuggestions();
|
||||
if (onCitySelected) {
|
||||
onCitySelected(suggestion);
|
||||
}
|
||||
});
|
||||
|
||||
suggestionList.appendChild(item);
|
||||
});
|
||||
|
||||
suggestionList.style.display = 'block';
|
||||
}
|
||||
|
||||
// Fonction pour effectuer la recherche
|
||||
async function performSearch(query) {
|
||||
if (!query || query.length < 3) {
|
||||
if (query.length < 2) {
|
||||
clearSuggestions();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Recherche avec Nominatim
|
||||
const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&countrycodes=fr&limit=5`);
|
||||
const data = await response.json();
|
||||
|
||||
// Filtrer pour ne garder que les villes
|
||||
const citySuggestions = data.filter(item =>
|
||||
item.type === 'city' ||
|
||||
item.type === 'town' ||
|
||||
item.type === 'village' ||
|
||||
item.type === 'administrative'
|
||||
);
|
||||
|
||||
displaySuggestions(citySuggestions);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la recherche:', error);
|
||||
clearSuggestions();
|
||||
}
|
||||
}
|
||||
|
||||
// Gestionnaire d'événements pour l'input
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const query = e.target.value.trim();
|
||||
|
||||
// Annuler la recherche précédente
|
||||
if (searchTimeout) {
|
||||
clearTimeout(searchTimeout);
|
||||
}
|
||||
|
||||
// Attendre 300ms après la dernière frappe avant de lancer la recherche
|
||||
searchTimeout = setTimeout(() => {
|
||||
performSearch(query);
|
||||
}, 300);
|
||||
timeoutId = setTimeout(() => performSearch(query), 300);
|
||||
});
|
||||
|
||||
// Fermer la liste des suggestions en cliquant en dehors
|
||||
document.addEventListener('click', (e) => {
|
||||
function performSearch(query) {
|
||||
fetch(`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(query)}&fields=nom,code,codesPostaux&limit=5`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const citySuggestions = data.map(city => ({
|
||||
name: city.nom,
|
||||
postcode: city.codesPostaux[0],
|
||||
insee: city.code
|
||||
}));
|
||||
displaySuggestions(citySuggestions);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur lors de la recherche:', error);
|
||||
clearSuggestions();
|
||||
});
|
||||
}
|
||||
|
||||
function displaySuggestions(suggestions) {
|
||||
clearSuggestions();
|
||||
suggestions.forEach(suggestion => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'list-group-item';
|
||||
li.textContent = `${suggestion.name} (${suggestion.postcode})`;
|
||||
li.addEventListener('click', () => {
|
||||
searchInput.value = suggestion.name;
|
||||
clearSuggestions();
|
||||
if (onSelect) onSelect(suggestion);
|
||||
});
|
||||
suggestionList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function clearSuggestions() {
|
||||
suggestionList.innerHTML = '';
|
||||
}
|
||||
|
||||
// Fermer les suggestions en cliquant en dehors
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!searchInput.contains(e.target) && !suggestionList.contains(e.target)) {
|
||||
clearSuggestions();
|
||||
}
|
||||
|
|
@ -100,17 +70,97 @@ function setupCitySearch(searchInputId, suggestionListId, onCitySelected) {
|
|||
}
|
||||
|
||||
// Fonction pour formater l'URL de labourage
|
||||
function getLabourerUrl(zipCode) {
|
||||
/**
|
||||
* Génère l'URL de labourage pour un code postal donné
|
||||
* @param {string} zipCode - Le code postal
|
||||
* @returns {string} L'URL de labourage
|
||||
*/
|
||||
export function getLabourerUrl(zipCode) {
|
||||
return `/admin/labourer/${zipCode}`;
|
||||
}
|
||||
|
||||
// Fonction pour gérer la soumission du formulaire d'ajout de ville
|
||||
window.handleAddCityFormSubmit = function(event) {
|
||||
export function handleAddCityFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
const form = event.target;
|
||||
const zipCode = form.querySelector('input[name="zip_code"]').value;
|
||||
|
||||
if (zipCode) {
|
||||
window.location.href = getLabourerUrl(zipCode);
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
const zipCodeInput = form.querySelector('input[name="zip_code"]');
|
||||
if (!zipCodeInput.value) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
// Afficher le spinner
|
||||
submitButton.disabled = true;
|
||||
const originalContent = submitButton.innerHTML;
|
||||
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Labourer...';
|
||||
// Rediriger
|
||||
window.location.href = getLabourerUrl(zipCodeInput.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Colore les cellules d'un tableau en fonction des pourcentages
|
||||
* @param {string} selector - Le sélecteur CSS pour cibler les cellules à colorer
|
||||
* @param {string} color - La couleur de base en format RGB (ex: '154, 205, 50')
|
||||
*/
|
||||
export function colorizePercentageCells(selector, color = '154, 205, 50') {
|
||||
document.querySelectorAll(selector).forEach(cell => {
|
||||
const percentage = parseInt(cell.textContent);
|
||||
if (!isNaN(percentage)) {
|
||||
const alpha = percentage / 100;
|
||||
cell.style.backgroundColor = `rgba(${color}, ${alpha})`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Colore les cellules d'un tableau avec un gradient relatif à la valeur maximale
|
||||
* @param {string} selector - Le sélecteur CSS pour cibler les cellules à colorer
|
||||
* @param {string} color - La couleur de base en format RGB (ex: '154, 205, 50')
|
||||
*/
|
||||
export function colorizePercentageCellsRelative(selector, color = '154, 205, 50') {
|
||||
// Récupérer toutes les cellules
|
||||
const cells = document.querySelectorAll(selector);
|
||||
|
||||
// Trouver la valeur maximale
|
||||
let maxValue = 0;
|
||||
cells.forEach(cell => {
|
||||
const value = parseInt(cell.textContent);
|
||||
if (!isNaN(value) && value > maxValue) {
|
||||
maxValue = value;
|
||||
}
|
||||
});
|
||||
|
||||
// Appliquer le gradient relatif à la valeur max
|
||||
cells.forEach(cell => {
|
||||
const value = parseInt(cell.textContent);
|
||||
if (!isNaN(value)) {
|
||||
const alpha = value / maxValue; // Ratio relatif au maximum
|
||||
cell.style.backgroundColor = `rgba(${color}, ${alpha})`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajuste dynamiquement la taille du texte des éléments list-group-item selon leur nombre
|
||||
* @param {string} selector - Le sélecteur CSS des éléments à ajuster
|
||||
* @param {number} [minFont=0.8] - Taille de police minimale en rem
|
||||
* @param {number} [maxFont=1.2] - Taille de police maximale en rem
|
||||
*/
|
||||
export function adjustListGroupFontSize(selector, minFont = 0.8, maxFont = 1.2) {
|
||||
const items = document.querySelectorAll(selector);
|
||||
const count = items.length;
|
||||
let fontSize = maxFont;
|
||||
if (count > 0) {
|
||||
// Plus il y a d'items, plus la taille diminue, mais jamais en dessous de minFont
|
||||
fontSize = Math.max(minFont, maxFont - (count - 5) * 0.05);
|
||||
}
|
||||
items.forEach(item => {
|
||||
item.style.fontSize = fontSize + 'rem';
|
||||
});
|
||||
}
|
||||
|
||||
function check_validity() {
|
||||
if (!document.getElementById('editLand')) {
|
||||
return;
|
||||
}
|
||||
// ... suite du code ...
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue