461 lines
19 KiB
Twig
461 lines
19 KiB
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 %}
|
|
|