osm-commerces/public/js/utils.js

// Fonction pour gérer la recherche de villes
/**
 * 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
 */
function setupCitySearch(inputId, suggestionListId, onSelect) {
    const searchInput = document.getElementById(inputId);
    const suggestionList = document.getElementById(suggestionListId);

    if (!searchInput || !suggestionList) return;

    let timeoutId = null;

    searchInput.addEventListener('input', function () {
        clearTimeout(timeoutId);
        const query = this.value.trim();

        if (query.length < 2) {
            clearSuggestions();
            return;
        }

        timeoutId = setTimeout(() => performSearch(query), 300);
    });

    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();
        }
    });
}

// Fonction pour formater l'URL de labourage
/**
 * Génère l'URL de labourage pour un code postal donné
 * @param {string} zipCode - Le code postal
 * @returns {string} L'URL de labourage
 */
function getLabourerUrl(zipCode) {
    return `/admin/labourer/${zipCode}`;
}

// Fonction pour gérer la soumission du formulaire d'ajout de ville
function handleAddCityFormSubmit(event) {
    event.preventDefault();
    const form = event.target;
    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')
 */
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')
 */
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
 */
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 ...
}