osm-labo/templates/public/home.html.twig

{% extends 'base.html.twig' %}

{% block title %}{{ 'display.title'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>

    <style>
        #citiesMap {
            height: 400px;
            width: 100%;
            margin-bottom: 2rem;
            border-radius: 8px;
            overflow: hidden;
        }

        .map-container {
            position: relative;
        }

        .map-legend {
            position: absolute;
            top: 10px;
            right: 10px;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            font-size: 12px;
            z-index: 1000;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .city-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }

        .city-item {
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }

        .city-item a {
            text-decoration: none;
            color: inherit;
        }

        .suggestion-list {
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
            width: 100%;
            z-index: 1000;
            display: none;
        }

        .suggestion-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
        }

        .suggestion-item:hover {
            background-color: #f5f5f5;
        }

        .suggestion-name {
            font-weight: bold;
        }

        .suggestion-details {
            font-size: 0.9em;
            color: #666;
        }

        .suggestion-type {
            margin-right: 8px;
        }

        .search-container {
            position: relative;
            margin-bottom: 1rem;
        }

        .list-group-item {
            cursor: pointer;

        }

        .list-group-item:hover {
            background-color: #f5f5f5;
            color: #000;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="container mt-4">
        <div class="row">
            <div class="col-12">
                <h1>
                    <i class="bi bi-shop"></i> Mon Commerce OSM
                </h1>
                <p class="mt-4 p-4">
                    Bonjour, ce site permet de modifier les informations de votre commerce sur OpenStreetMap afin de
                    gagner en visibilité sur des milliers de sites web à la fois en une minute, c'est gratuit et sans
                    engagement.
                    <br>Nous sommes bénévoles dans une association à but non lucratif.
                    <br>Nous vous enverrons un lien unique pour cela par email, et si vous en avez besoin, nous pouvons
                    vous aider.
                </p>
                <div class="row">
                    <div class="col-12">
                        <label class="label" for="researchShop">
                            <i class="bi bi-search bi-2x"></i> Rechercher un commerce, écrivez son nom et la ville
                        </label>
                        <input class="form-control" type="text" id="researchShop" placeholder="Mon commerce, Paris">
                    </div>
                </div>

                <div id="resultsList"></div>
                <div id="proposeLink" class="d-none"></div>
                <div id="proposeMail" class="d-none">
                    <input type="email" id="emailInput" class="form-control"
                           placeholder="mon_email_de_commerce@exemple.com">
                    <button type="submit" class="btn btn-primary p-4 d-block"><i class="bi bi-envelope"></i> Envoyer
                    </button>
                </div>
                <div id="emailForm"></div>
                

                {% if citiesForMap is not empty %}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <div>
                                    <h3><i class="bi bi-geo-alt"></i> Carte des villes disponibles</h3>
                                    <p class="mb-0">Cliquez sur un marqueur pour voir les statistiques de la ville</p>
                                </div>
                                <a href="{{ path('app_public_add_city') }}" class="btn btn-success">
                                    <i class="bi bi-plus-circle"></i> Ajouter ma ville
                                </a>
                            </div>
                            <div class="card-body p-0">
                                <div class="map-container">
                                    <div id="citiesMap"></div>
                                    <div class="map-legend">
                                        <div class="legend-item">
                                            <div class="legend-color" style="background-color: #28a745;"></div>
                                            <span>Complétion > 80%</span>
                                        </div>
                                        <div class="legend-item">
                                            <div class="legend-color" style="background-color: #17a2b8;"></div>
                                            <span>Complétion 50-80%</span>
                                        </div>
                                        <div class="legend-item">
                                            <div class="legend-color" style="background-color: #ffc107;"></div>
                                            <span>Complétion < 50%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                


            </div>
        </div>
        <div class="row city-list ">
            <div id="stats_bubble"></div>
            <div class="mt-5">
                <h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
                <p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre
                    ville grâce à OpenStreetMap</p>

            </div>
            {% set sorted_stats = stats|sort((a, b) => a.zone <=> b.zone) %}
            {% for stat in sorted_stats %}


                {% if stat.zone != 'undefined' and stat.zone matches '/^\\d+$/' %}
                    <a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}"
                       class="list-group-item list-group-item-action d-flex p-4 rounded-3 justify-content-between align-items-center">
                        <div class="d-flex flex-column">
                            <span class="zone">{{ stat.zone }}</span>
                            <span class="name">{{ stat.name }}</span>
                        </div>
                        <div class="d-flex flex-column">
                            <span class="badge bg-primary rounded-pill">{{ stat.placesCount }} lieux</span>
                            <span class="badge  rounded-pill completion {% if stat.completionPercent > 80 %}bg-success{% else %}bg-info{% endif %}">{{ stat.completionPercent }}%</span>
                        </div>
                    </a>
                {% endif %}
            {% endfor %}
            {% include 'public/labourage-form.html.twig' %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
    {# <script src='{{ asset('js/utils.js') }}'></script> #}
    <script type="module">
        // import { adjustListGroupFontSize } from '{{ asset('js/utils.js') }}';
        // document.addEventListener('DOMContentLoaded', function() {
        //     adjustListGroupFontSize('.list-group-item');
        // });
    </script>

    <script>
        // Données des villes pour la carte
        const citiesData = {{ citiesForMap|json_encode|raw }};
        const mapToken = '{{ maptiler_token }}';

        // Initialiser la carte si des données sont disponibles
        if (citiesData.length > 0 && mapToken) {
            document.addEventListener('DOMContentLoaded', function() {
                // Créer les features GeoJSON pour la carte
                const features = citiesData.map(city => ({
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [city.coordinates.lon, city.coordinates.lat]
                    },
                    properties: {
                        name: city.name,
                        zone: city.zone,
                        placesCount: city.placesCount,
                        completionPercent: city.completionPercent,
                        population: city.population,
                        url: city.url
                    }
                }));

                const geojson = {
                    type: 'FeatureCollection',
                    features: features
                };

                // Calculer le centre de la carte (moyenne des coordonnées)
                const bounds = new maplibregl.LngLatBounds();
                features.forEach(feature => {
                    bounds.extend(feature.geometry.coordinates);
                });

                // Initialiser la carte
                const map = new maplibregl.Map({
                    container: 'citiesMap',
                    style: `https://api.maptiler.com/maps/streets/style.json?key=${mapToken}`,
                    bounds: bounds,
                    fitBoundsOptions: {
                        padding: 50
                    }
                });

                // Ajouter les marqueurs
                features.forEach(feature => {
                    const properties = feature.properties;
                    
                    // Déterminer la couleur selon le pourcentage de complétion
                    let color = '#ffc107'; // Jaune par défaut
                    if (properties.completionPercent > 80) {
                        color = '#28a745'; // Vert
                    } else if (properties.completionPercent > 50) {
                        color = '#17a2b8'; // Bleu
                    }

                    // Créer le marqueur
                    const marker = new maplibregl.Marker({
                        color: color,
                        scale: 0.8
                    })
                    .setLngLat(feature.geometry.coordinates)
                    .setPopup(
                        new maplibregl.Popup({ offset: 25 })
                        .setHTML(`
                            <div style="min-width: 200px;">
                                <h6 style="margin: 0 0 10px 0; color: #333;">${properties.name}</h6>
                                <div style="font-size: 12px; color: #666;">
                                    <div><strong>Code INSEE:</strong> ${properties.zone}</div>
                                    <div><strong>Lieux:</strong> ${properties.placesCount}</div>
                                    <div><strong>Complétion:</strong> ${properties.completionPercent}%</div>
                                    ${properties.population ? `<div><strong>Population:</strong> ${properties.population.toLocaleString()}</div>` : ''}
                                </div>
                                <div style="margin-top: 10px;">
                                    <a href="${properties.url}" class="btn btn-sm btn-primary" style="text-decoration: none;">
                                        Voir les statistiques
                                    </a>
                                </div>
                            </div>
                        `)
                    )
                    .addTo(map);

                    // Ajouter le nom de la ville comme label
                    const label = new maplibregl.Marker({
                        element: (() => {
                            const el = document.createElement('div');
                            el.className = 'city-label';
                            el.style.cssText = `
                                background: rgba(255, 255, 255, 0.9);
                                border: 1px solid #ccc;
                                border-radius: 4px;
                                padding: 2px 6px;
                                font-size: 11px;
                                font-weight: bold;
                                color: #333;
                                white-space: nowrap;
                                pointer-events: none;
                                margin-top: -25px;
                                margin-left: 15px;
                            `;
                            el.textContent = properties.name;
                            return el;
                        })()
                    })
                    .setLngLat(feature.geometry.coordinates)
                    .addTo(map);
                });

                // Ajouter les contrôles de navigation
                map.addControl(new maplibregl.NavigationControl());
            });
        }

        // Créer le formulaire email
        const emailFormHtml = `
        <form id="emailForm" class="mt-3">
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="emailInput" required>
            </div>
            <button type="submit" class="btn btn-primary">Envoyer</button>
        </form>
    `;

        // Créer les divs pour les messages
        const proposeLinkHtml = `
        <div id="proposeLink" class="alert alert-success ">
            Un email a déjà été enregistré pour ce commerce. Nous vous enverrons le lien de modification.
        </div>
    `;

        const proposeMailHtml = `
        <div id="proposeMail" class="alert alert-info "  >
            Aucun email n'est enregistré pour ce commerce. Veuillez saisir votre email pour recevoir le lien de modification.
            ${emailFormHtml}
        </div>
    `;

        // Ajouter les éléments au DOM
        document.querySelector('#proposeLink').innerHTML = proposeLinkHtml;
        document.querySelector('#proposeMail').innerHTML = proposeMailHtml;

        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.querySelector('#researchShop');
            const resultsList = document.querySelector('#resultsList');
            resultsList.classList.add('list-group', 'mt-2');

            let timeoutId;
            searchInput.addEventListener('input', function (e) {
                clearTimeout(timeoutId);
                resultsList.innerHTML = '';

                if (e.target.value.length < 3) return;

                timeoutId = setTimeout(() => {
                    fetch(`https://demo.addok.xyz/search?q=${e.target.value}&limit=5`)
                        .then(response => response.json())
                        .then(data => {
                            resultsList.innerHTML = '';
                            const ul = document.createElement('ul');
                            ul.classList.add('list-group');
                            resultsList.appendChild(ul);

                            data.features.forEach(feature => {
                                const li = document.createElement('li');
                                li.classList.add('list-group-item', 'cursor-pointer');
                                li.textContent = `${feature.properties.name}, ${feature.properties.city}`;

                                li.addEventListener('click', () => {
                                    resultsList.innerHTML = ''; // Cacher la liste
                                    const [lon, lat] = feature.geometry.coordinates;
                                    const query = `[out:json];
                                    (
                                        node["shop"](around:100,${lat},${lon});
                                        node["amenity"](around:100,${lat},${lon});
                                    );
                                    out body;`;

                                    fetch('https://overpass-api.de/api/interpreter', {
                                        method: 'POST',
                                        body: query
                                    })
                                        .then(response => response.json())
                                        .then(osmData => {
                                            if (osmData.elements.length > 0) {
                                                const place = osmData.elements[0];
                                                console.log(`https://www.openstreetmap.org/${place.type}/${place.id}`, place.tags);


                                                if (place.tags && (place.tags['contact:email'] || place.tags['email'])) {
                                                    document.querySelector('#proposeLink').classList.remove('d-none');
                                                    document.querySelector('#proposeMail').classList.add('d-none');
                                                } else {
                                                    document.querySelector('#proposeMail').classList.remove('d-none');
                                                    document.querySelector('#proposeLink').classList.add('d-none');

                                                    const emailForm = document.querySelector('#proposeMail form');
                                                    emailForm.addEventListener('submit', (e) => {
                                                        e.preventDefault();
                                                        const email = emailForm.querySelector('#emailInput').value;
                                                        window.location.href = `/propose-email/${email}/${place.type}/${place.id}`;
                                                    });
                                                }
                                            }
                                        });
                                });

                                ul.appendChild(li);
                            });
                        });
                }, 500);
            });

            function displayStatsBubble() {
                const statsBubble = document.querySelector('#stats_bubble');

            }

        });
    </script>
{% endblock %}