tykayn/osm-commerces
1
0
Fork 0
mirror of https://forge.chapril.org/tykayn/osm-commerces synced 2025-10-09 17:02:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

ajout recherche par nom

Browse source
This commit is contained in:
Tykayn 2025-05-28 16:24:34 +02:00 • committed by tykayn
parent 3a73c1adad
commit ccab916286
11 changed files with 345 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

155
templates/public/home.html.twig Normal file
View file

@ -0,0 +1,155 @@
{% extends 'base.html.twig' %}
{% block title %}{{ 'display.title'|trans }}{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
</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>
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. 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>
<p>
<div class="row">
<div class="col-12">
<label class="input-group-text" for="researchShop">Rechercher un commerce, écrivez son nom et la ville
<i class="bi bi-search"></i> <input class="form-control" type="text" id="researchShop" placeholder="Rechercher un commerce">
</label>
</div>
</div>
<div id="resultsList"></div>
<div id="proposeLink"></div>
<div id="proposeMail">
<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>
</div>
</div>
</div>
<script>
// 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);
});
});
</script>
{% endblock %}