fix pages zones
This commit is contained in:
Tykayn
tykayn
parent
1c24ae1fea
commit
00977d4fba
9 changed files with 6085 additions and 433 deletions
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
|
||||
|
||||
<style>
|
||||
.city-list {
|
||||
display: grid;
|
||||
|
|
@ -12,16 +12,19 @@
|
|||
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;
|
||||
|
|
@ -33,33 +36,41 @@
|
|||
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{
|
||||
|
||||
.list-group-item {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.list-group-item:hover{
|
||||
|
||||
.list-group-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -67,68 +78,77 @@
|
|||
{% 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="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 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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
</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>
|
||||
<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' %}
|
||||
<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/utils.js') }}'></script> #}
|
||||
{# <script src='{{ asset('js/utils.js') }}'></script> #}
|
||||
<script type="module">
|
||||
// import { adjustListGroupFontSize } from '{{ asset('js/utils.js') }}';
|
||||
// document.addEventListener('DOMContentLoaded', function() {
|
||||
|
|
@ -136,9 +156,9 @@
|
|||
// });
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Créer le formulaire email
|
||||
const emailFormHtml = `
|
||||
<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>
|
||||
|
|
@ -148,102 +168,101 @@
|
|||
</form>
|
||||
`;
|
||||
|
||||
// Créer les divs pour les messages
|
||||
const proposeLinkHtml = `
|
||||
// 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 = `
|
||||
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;
|
||||
// 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');
|
||||
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;
|
||||
let timeoutId;
|
||||
searchInput.addEventListener('input', function (e) {
|
||||
clearTimeout(timeoutId);
|
||||
resultsList.innerHTML = '';
|
||||
|
||||
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];
|
||||
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);
|
||||
|
||||
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}`;
|
||||
});
|
||||
}
|
||||
}
|
||||
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);
|
||||
});
|
||||
|
||||
ul.appendChild(li);
|
||||
});
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
|
||||
function displayStatsBubble(){
|
||||
const statsBubble = document.querySelector('#stats_bubble');
|
||||
|
||||
}
|
||||
function displayStatsBubble() {
|
||||
const statsBubble = document.querySelector('#stats_bubble');
|
||||
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue