933 lines
37 KiB
Twig
933 lines
37 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;
|
|
}
|
|
|
|
#resultsMap {
|
|
height: 400px;
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
border-radius: 8px;
|
|
display: none;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<!-- Hero Section -->
|
|
<div class="container-fluid bg-primary text-black py-5 mb-5">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
|
|
<div class="col-lg-8 d-none d-lg-block">
|
|
<h1 class="display-4 fw-bold mb-4">
|
|
<img src="{{ asset('logo-osm.png') }}" alt="OpenStreetMap Logo" class="img-fluid"
|
|
style="max-height: 250px;">
|
|
<i class="bi bi-shop"></i> Mon Commerce OSM
|
|
</h1>
|
|
<p class="lead mb-4">
|
|
Améliorez la visibilité de votre commerce sur des milliers de sites web et applications en
|
|
quelques minutes.
|
|
</p>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
|
|
<div class="d-flex gap-3">
|
|
<a href="#search-section" class="btn btn-light btn-lg">
|
|
<i class="bi bi-search"></i> Trouver mon commerce
|
|
</a>
|
|
<a href="{{ path('faq') }}" class="btn btn-outline-light btn-lg">
|
|
<i class="bi bi-info-circle"></i> En savoir plus
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mt-5">
|
|
<!-- Benefits Section -->
|
|
<div class="row mb-5">
|
|
<div class="col-12 text-center mb-4">
|
|
<h2 class="fw-bold">Pourquoi mettre à jour vos informations sur OpenStreetMap ?</h2>
|
|
<p class="lead text-muted">Un seul ajout, une visibilité sur des milliers de plateformes</p>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-body text-center p-4">
|
|
<div class="mb-3">
|
|
<i class="bi bi-globe text-primary" style="font-size: 3rem;"></i>
|
|
</div>
|
|
<h3 class="card-title h5 fw-bold">Visibilité Maximale</h3>
|
|
<p class="card-text">Vos informations apparaîtront sur TomTom, Apple Plans, Facebook, CoMaps et
|
|
des
|
|
centaines d'autres applications.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-body text-center p-4">
|
|
<div class="mb-3">
|
|
<i class="bi bi-clock text-primary" style="font-size: 3rem;"></i>
|
|
</div>
|
|
<h3 class="card-title h5 fw-bold">Rapide et Simple</h3>
|
|
<p class="card-text">Mettez à jour vos horaires, contacts et services en quelques secondes
|
|
seulement, sans avoir à créer de compte.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-body text-center p-4">
|
|
<div class="mb-3">
|
|
<i class="bi bi-cash-coin text-primary" style="font-size: 3rem;"></i>
|
|
</div>
|
|
<h3 class="card-title h5 fw-bold">100% Gratuit</h3>
|
|
<p class="card-text">Service entièrement gratuit et sans engagement, fourni par une association
|
|
à but non lucratif.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Section -->
|
|
<div id="search-section" class="row mb-5">
|
|
<div class="col-lg-8 mx-auto">
|
|
<div class="card shadow border-0">
|
|
<div class="card-header bg-white py-3">
|
|
<h3 class="mb-0 fw-bold">
|
|
<i class="bi bi-search"></i> Rechercher votre commerce
|
|
</h3>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<p class="mb-4">
|
|
Entrez le nom de votre commerce et sa ville pour commencer à mettre à jour vos informations.
|
|
</p>
|
|
<div class="mb-4">
|
|
<label class="form-label fw-bold" for="researchShop">
|
|
Nom du commerce et ville
|
|
</label>
|
|
<div class="input-group input-group-lg">
|
|
<span class="input-group-text bg-white">
|
|
<i class="bi bi-building"></i>
|
|
</span>
|
|
<input class="form-control" type="text" id="researchShop"
|
|
placeholder="Ex: Boulangerie Dupont, Paris">
|
|
</div>
|
|
<div class="form-text">
|
|
<i class="bi bi-info-circle"></i> Exemple: Café de la Place, Lyon
|
|
</div>
|
|
<div class="mt-2 d-none">
|
|
<label class="form-label">Moteur de recherche :</label>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="searchEngine" id="nominatim"
|
|
value="nominatim" checked>
|
|
<label class="form-check-label" for="nominatim">Nominatim</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="searchEngine" id="addok"
|
|
value="addok">
|
|
<label class="form-check-label" for="addok">Addok</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="resultsList" class="mt-4"></div>
|
|
<div id="resultsMap"></div>
|
|
<div id="proposeLink" class="d-none"></div>
|
|
<div id="proposeMail" class="d-none">
|
|
<div class="mb-3">
|
|
<label for="emailInput" class="form-label fw-bold">Votre email professionnel</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white">
|
|
<i class="bi bi-envelope"></i>
|
|
</span>
|
|
<input type="email" id="emailInput" class="form-control"
|
|
placeholder="contact@moncommerce.fr">
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-send"></i> Recevoir mon lien de modification
|
|
</button>
|
|
</div>
|
|
<div id="emailForm"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How It Works Section -->
|
|
<div class="row mb-5">
|
|
<div class="col-12 text-center mb-4">
|
|
<h2 class="fw-bold">Comment ça marche ?</h2>
|
|
<p class="lead text-muted">Un processus simple en 3 étapes</p>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100 border-0 bg-light">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="bg-primary text-white rounded-circle p-3 me-3"
|
|
style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
|
|
<span class="fw-bold">1</span>
|
|
</div>
|
|
<h3 class="card-title h5 fw-bold mb-0">Recherchez votre commerce</h3>
|
|
</div>
|
|
<p class="card-text">Entrez le nom de votre établissement et sa localité pour le retrouver dans
|
|
notre base de données.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100 border-0 bg-light">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="bg-primary text-white rounded-circle p-3 me-3"
|
|
style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
|
|
<span class="fw-bold">2</span>
|
|
</div>
|
|
<h3 class="card-title h5 fw-bold mb-0">Recevez votre lien unique</h3>
|
|
</div>
|
|
<p class="card-text">Nous vous envoyons par email un lien sécurisé pour accéder à votre fiche
|
|
commerce.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100 border-0 bg-light">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="bg-primary text-white rounded-circle p-3 me-3"
|
|
style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
|
|
<span class="fw-bold">3</span>
|
|
</div>
|
|
<h3 class="card-title h5 fw-bold mb-0">Mettez à jour vos informations</h3>
|
|
</div>
|
|
<p class="card-text">Modifiez facilement vos horaires, contacts, services et autres informations
|
|
importantes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Section -->
|
|
<div class="row mb-5">
|
|
<div class="col-lg-10 mx-auto">
|
|
<div class="card bg-light border-0">
|
|
<div class="card-body p-4 text-center">
|
|
<h3 class="fw-bold mb-3">
|
|
<i class="bi bi-question-circle"></i> Besoin d'aide ?
|
|
</h3>
|
|
<p class="mb-4">
|
|
Notre équipe de bénévoles est là pour vous accompagner dans la mise à jour de vos
|
|
informations.
|
|
</p>
|
|
<a href="{{ path('app_public_ask_for_help') }}" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-envelope"></i> Contactez-nous
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
<script>
|
|
// Données des villes pour la carte
|
|
const citiesData = {{ citiesForMap|json_encode|raw }};
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
console.log('content loaded')
|
|
// 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
|
|
// Initialize the elements only if they exist
|
|
const proposeLinkElement = document.querySelector('#proposeLink');
|
|
const proposeMailElement = document.querySelector('#proposeMail');
|
|
|
|
if (proposeLinkElement) {
|
|
proposeLinkElement.innerHTML = proposeLinkHtml;
|
|
}
|
|
|
|
if (proposeMailElement) {
|
|
proposeMailElement.innerHTML = proposeMailHtml;
|
|
}
|
|
|
|
const searchInput = document.querySelector('#researchShop');
|
|
const resultsList = document.querySelector('#resultsList');
|
|
const resultsMap = document.querySelector('#resultsMap');
|
|
resultsList.classList.add('list-group', 'mt-2');
|
|
|
|
// Initialize map
|
|
let map = null;
|
|
let markers = [];
|
|
|
|
function initMap() {
|
|
if (!map) {
|
|
map = new maplibregl.Map({
|
|
container: 'resultsMap',
|
|
style: 'https://api.maptiler.com/maps/streets/style.json?key={{ maptiler_token }}',
|
|
center: [2.213749, 46.227638], // Center of France
|
|
zoom: 5
|
|
});
|
|
|
|
// Add navigation controls
|
|
map.addControl(new maplibregl.NavigationControl());
|
|
}
|
|
}
|
|
|
|
function clearMarkers() {
|
|
// Remove all existing markers
|
|
markers.forEach(marker => marker.remove());
|
|
markers = [];
|
|
}
|
|
|
|
function performSearch() {
|
|
clearTimeout(timeoutId);
|
|
resultsList.innerHTML = '';
|
|
resultsMap.style.display = 'none';
|
|
clearMarkers();
|
|
|
|
const query_input_user = searchInput.value;
|
|
|
|
if (query_input_user.length < 2) return;
|
|
|
|
// Get the selected search engine
|
|
const searchEngine = document.querySelector('input[name="searchEngine"]:checked').value;
|
|
|
|
let searchUrl;
|
|
if (searchEngine === 'nominatim') {
|
|
// Use Nominatim API
|
|
searchUrl = `https://nominatim.openstreetmap.org/search?q=${query_input_user}&format=json&limit=5&countrycodes=fr`;
|
|
} else {
|
|
// Use Addok API
|
|
searchUrl = `https://demo.addok.xyz/search?q=${query_input_user}&limit=5`;
|
|
}
|
|
|
|
fetch(searchUrl)
|
|
}
|
|
|
|
// Add event listeners to search engine radio buttons
|
|
document.querySelectorAll('input[name="searchEngine"]').forEach(radio => {
|
|
radio.addEventListener('change', performSearch);
|
|
});
|
|
|
|
let timeoutId;
|
|
searchInput.addEventListener('input', function (e) {
|
|
clearTimeout(timeoutId);
|
|
resultsList.innerHTML = '';
|
|
resultsMap.style.display = 'none';
|
|
clearMarkers();
|
|
|
|
if (e.target.value.length < 2) return;
|
|
|
|
const query_input_user = e.target.value;
|
|
|
|
timeoutId = setTimeout(() => {
|
|
// Get the selected search engine
|
|
const searchEngine = document.querySelector('input[name="searchEngine"]:checked').value;
|
|
|
|
let searchUrl;
|
|
if (searchEngine === 'nominatim') {
|
|
// Use Nominatim API
|
|
searchUrl = `https://nominatim.openstreetmap.org/search?q=${query_input_user}&format=json&limit=5&countrycodes=fr`;
|
|
} else {
|
|
// Use Addok API
|
|
searchUrl = `https://demo.addok.xyz/search?q=${query_input_user}&limit=5`;
|
|
}
|
|
|
|
fetch(searchUrl)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log(data);
|
|
|
|
resultsList.innerHTML = '';
|
|
const ul = document.createElement('ul');
|
|
ul.classList.add('list-group');
|
|
resultsList.appendChild(ul);
|
|
|
|
// This section will be handled in the code below
|
|
|
|
// Add "Not found" button
|
|
if (true) {
|
|
const notFoundButton = document.createElement('div');
|
|
notFoundButton.classList.add('mt-3', 'text-center');
|
|
notFoundButton.innerHTML = `
|
|
<button id="notFoundButton" class="btn btn-outline-secondary">
|
|
<i class="bi bi-search"></i> Je ne trouve pas mon commerce dans ces propositions
|
|
</button>
|
|
`;
|
|
resultsList.appendChild(notFoundButton);
|
|
|
|
// Add event listener to the "Not found" button
|
|
document.getElementById('notFoundButton').addEventListener('click', () => {
|
|
// Clear results list
|
|
resultsList.innerHTML = '';
|
|
// Hide map and clear markers
|
|
resultsMap.style.display = 'none';
|
|
clearMarkers();
|
|
|
|
// Show form to enter email
|
|
const notFoundForm = document.createElement('div');
|
|
notFoundForm.classList.add('card', 'mt-3');
|
|
notFoundForm.innerHTML = `
|
|
<div class="card-header">
|
|
<h5>Vous ne trouvez pas votre commerce ?</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Laissez-nous votre email et nous vous aiderons à ajouter votre commerce.</p>
|
|
<form id="notFoundForm">
|
|
<div class="mb-3">
|
|
<label for="notFoundEmail" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="notFoundEmail" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Envoyer</button>
|
|
</form>
|
|
</div>
|
|
`;
|
|
resultsList.appendChild(notFoundForm);
|
|
|
|
// Add event listener to the form
|
|
document.getElementById('notFoundForm').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const email = document.getElementById('notFoundEmail').value;
|
|
const query = document.querySelector('#researchShop').value;
|
|
|
|
// Try to get the INSEE code from the first search result
|
|
let insee = null;
|
|
if (searchEngine === 'nominatim') {
|
|
if (data.length > 0 && data[0].address && data[0].address.postcode) {
|
|
insee = data[0].address.postcode;
|
|
}
|
|
} else {
|
|
if (data.features && data.features.length > 0) {
|
|
insee = data.features[0].properties.citycode;
|
|
}
|
|
}
|
|
|
|
// Create a Demande with the business name and email
|
|
fetch('/api/demande/create', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
businessName: query,
|
|
insee: insee
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const demandeId = data.id;
|
|
|
|
// Update the Demande with the email
|
|
fetch(`/api/demande/${demandeId}/email`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: email
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Show success message
|
|
resultsList.innerHTML = `
|
|
<div class="alert alert-success mt-3">
|
|
<i class="bi bi-check-circle"></i> Votre demande a été enregistrée. Nous vous contacterons bientôt.
|
|
</div>
|
|
`;
|
|
} else {
|
|
alert('Erreur: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Une erreur est survenue lors de la mise à jour de la demande.');
|
|
});
|
|
} else {
|
|
alert('Erreur: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Une erreur est survenue lors de la création de la demande.');
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// Process the results based on the search engine
|
|
if (searchEngine === 'nominatim') {
|
|
// Show a message if there are no results
|
|
if (data.length === 0) {
|
|
const noResultsMessage = document.createElement('div');
|
|
noResultsMessage.classList.add('alert', 'alert-info', 'mt-3');
|
|
noResultsMessage.innerHTML = `
|
|
<i class="bi bi-info-circle"></i> Aucun résultat trouvé pour votre recherche.
|
|
`;
|
|
resultsList.appendChild(noResultsMessage);
|
|
} else {
|
|
// Initialize map if we have results
|
|
initMap();
|
|
resultsMap.style.display = 'block';
|
|
|
|
// Calculate bounds for the map
|
|
const bounds = new maplibregl.LngLatBounds();
|
|
|
|
// Add markers for each result
|
|
data.forEach((result, index) => {
|
|
const lat = parseFloat(result.lat);
|
|
const lon = parseFloat(result.lon);
|
|
|
|
// Extend bounds
|
|
bounds.extend([lon, lat]);
|
|
|
|
// Create marker with result number
|
|
const marker = new maplibregl.Marker({color: '#007bff'})
|
|
.setLngLat([lon, lat])
|
|
.setPopup(new maplibregl.Popup().setHTML(`
|
|
<strong>${result.name || result.display_name}</strong><br>
|
|
${result.address ? result.address.city || '' : ''}
|
|
`));
|
|
|
|
// Add label with result number
|
|
const el = marker.getElement();
|
|
el.innerHTML = `<div style="position: absolute; top: -30px; left: 7px; background: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; font-weight: bold; border: 2px solid #007bff;">${index + 1}</div>` + el.innerHTML;
|
|
|
|
marker.addTo(map);
|
|
markers.push(marker);
|
|
});
|
|
|
|
// Fit map to bounds with padding
|
|
if (!bounds.isEmpty()) {
|
|
map.fitBounds(bounds, {padding: 50});
|
|
}
|
|
}
|
|
|
|
data.forEach((result, index) => {
|
|
const li = document.createElement('li');
|
|
li.classList.add('list-group-item', 'cursor-pointer');
|
|
|
|
// Format the display text based on available properties
|
|
let displayText = result.display_name;
|
|
if (result.name) {
|
|
displayText = result.name;
|
|
if (result.address && result.address.city) {
|
|
displayText += `, ${result.address.city}`;
|
|
}
|
|
}
|
|
|
|
// Add result number
|
|
li.innerHTML = `<span class="badge bg-primary me-2">${index + 1}</span> ${displayText}`;
|
|
|
|
li.addEventListener('click', () => {
|
|
resultsList.innerHTML = ''; // Cacher la liste
|
|
resultsMap.style.display = 'none'; // Cacher la carte
|
|
clearMarkers(); // Supprimer les marqueurs
|
|
const lat = parseFloat(result.lat);
|
|
const lon = parseFloat(result.lon);
|
|
const query = `[out:json];
|
|
(
|
|
node["shop"](around:10,${lat},${lon});
|
|
node["amenity"](around:10,${lat},${lon});
|
|
);
|
|
out body;`;
|
|
|
|
console.log('result li clicked', result);
|
|
|
|
fetch('https://overpass-api.de/api/interpreter', {
|
|
method: 'POST',
|
|
body: query
|
|
})
|
|
.then(response => response.json())
|
|
.then(osmData => {
|
|
console.log('osmData', osmData);
|
|
if (osmData.elements.length > 0) {
|
|
console.log('osmData.elements', osmData.elements);
|
|
|
|
const place = osmData.elements[0];
|
|
console.log('place ', place);
|
|
console.log(`https://www.openstreetmap.org/${place.type}/${place.id}`, place.tags);
|
|
|
|
// Get INSEE code from result if available
|
|
let insee = null;
|
|
if (result.address && result.address.postcode) {
|
|
insee = result.address.postcode;
|
|
}
|
|
|
|
// Create a Demande with the business name
|
|
fetch('/api/demande/create', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
businessName: `${query_input_user} __ ${place.tags.name}` || displayText,
|
|
insee: insee,
|
|
osmObjectType: place.type,
|
|
osmId: place.id
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const demandeId = data.id;
|
|
|
|
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;
|
|
|
|
// Update the Demande with the email
|
|
fetch(`/api/demande/${demandeId}/email`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: email
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Redirect to the original route for backward compatibility
|
|
window.location.href = `/propose-email/${email}/${place.type}/${place.id}`;
|
|
} else {
|
|
alert('Erreur: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Une erreur est survenue lors de la mise à jour de la demande.');
|
|
});
|
|
});
|
|
}
|
|
} else {
|
|
alert('Erreur: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Une erreur est survenue lors de la création de la demande.');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
ul.appendChild(li);
|
|
});
|
|
} else {
|
|
// Process Addok results
|
|
// Show a message if there are no results
|
|
if (data.features.length === 0) {
|
|
const noResultsMessage = document.createElement('div');
|
|
noResultsMessage.classList.add('alert', 'alert-info', 'mt-3');
|
|
noResultsMessage.innerHTML = `
|
|
<i class="bi bi-info-circle"></i> Aucun résultat trouvé pour votre recherche.
|
|
`;
|
|
resultsList.appendChild(noResultsMessage);
|
|
} else {
|
|
// Initialize map if we have results
|
|
initMap();
|
|
resultsMap.style.display = 'block';
|
|
|
|
// Calculate bounds for the map
|
|
const bounds = new maplibregl.LngLatBounds();
|
|
|
|
// Add markers for each result
|
|
data.features.forEach((feature, index) => {
|
|
const [lon, lat] = feature.geometry.coordinates;
|
|
|
|
// Extend bounds
|
|
bounds.extend([lon, lat]);
|
|
|
|
// Create marker with result number
|
|
const marker = new maplibregl.Marker({color: '#007bff'})
|
|
.setLngLat([lon, lat])
|
|
.setPopup(new maplibregl.Popup().setHTML(`
|
|
<strong>${feature.properties.name}</strong><br>
|
|
${feature.properties.city || ''}
|
|
`));
|
|
|
|
// Add label with result number
|
|
const el = marker.getElement();
|
|
el.innerHTML = `<div style="position: absolute; top: -30px; left: 7px; background: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; font-weight: bold; border: 2px solid #007bff;">${index + 1}</div>` + el.innerHTML;
|
|
|
|
marker.addTo(map);
|
|
markers.push(marker);
|
|
});
|
|
|
|
// Fit map to bounds with padding
|
|
if (!bounds.isEmpty()) {
|
|
map.fitBounds(bounds, {padding: 50});
|
|
}
|
|
}
|
|
|
|
data.features.forEach((feature, index) => {
|
|
const li = document.createElement('li');
|
|
li.classList.add('list-group-item', 'cursor-pointer');
|
|
li.innerHTML = `<span class="badge bg-primary me-2">${index + 1}</span> ${feature.properties.name}, ${feature.properties.city}`;
|
|
|
|
li.addEventListener('click', () => {
|
|
resultsList.innerHTML = ''; // Cacher la liste
|
|
resultsMap.style.display = 'none'; // Cacher la carte
|
|
clearMarkers(); // Supprimer les marqueurs
|
|
const [lon, lat] = feature.geometry.coordinates;
|
|
const query = `[out:json];
|
|
(
|
|
node["shop"](around:100,${lat},${lon});
|
|
node["amenity"](around:100,${lat},${lon});
|
|
);
|
|
out body;`;
|
|
|
|
console.log('li clicked', li)
|
|
|
|
fetch('https://overpass-api.de/api/interpreter', {
|
|
method: 'POST',
|
|
body: query
|
|
})
|
|
.then(response => response.json())
|
|
.then(osmData => {
|
|
console.log('osmData', osmData)
|
|
if (osmData.elements.length > 0) {
|
|
console.log('osmData.elements', osmData.elements)
|
|
|
|
const place = osmData.elements[1];
|
|
console.log('place', place)
|
|
console.log(`https://www.openstreetmap.org/${place.type}/${place.id}`, place.tags);
|
|
|
|
|
|
// Create a Demande with the business name
|
|
fetch('/api/demande/create', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
businessName: `${query_input_user} __ ${place.tags.name}` || `${feature.properties.name}, ${feature.properties.city}`,
|
|
insee: feature.properties.citycode,
|
|
osmObjectType: place.type,
|
|
osmId: place.id
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const demandeId = data.id;
|
|
|
|
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;
|
|
|
|
// Update the Demande with the email
|
|
fetch(`/api/demande/${demandeId}/email`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: email
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Redirect to the original route for backward compatibility
|
|
window.location.href = `/propose-email/${email}/${place.type}/${place.id}`;
|
|
} else {
|
|
alert('Erreur: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Une erreur est survenue lors de la mise à jour de la demande.');
|
|
});
|
|
});
|
|
}
|
|
} else {
|
|
alert('Erreur: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Une erreur est survenue lors de la création de la demande.');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
ul.appendChild(li);
|
|
});
|
|
}
|
|
});
|
|
}, 500);
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
{% endblock %}
|