up liens, explication de score de complétion

This commit is contained in:
Tykayn 2025-06-17 13:23:47 +02:00 committed by tykayn
parent 81c613e93c
commit 21d4d5b850
9 changed files with 425 additions and 292 deletions

View file

@ -16,6 +16,9 @@
height: 300px;
margin: 20px 0;
}
.completion-info {
margin-bottom: 2rem;
}
</style>
{% endblock %}
@ -78,6 +81,29 @@
commerces avec note renseignée.
</div>
</div>
<div class="completion-info mt-4">
<div class="alert alert-info">
<div class="d-flex align-items-center" style="cursor: pointer;" onclick="toggleCompletionInfo()">
<i class="bi bi-info-circle me-2"></i>
<h4 class="alert-heading mb-0">Comment est calculé le score de complétion ?</h4>
<i class="bi bi-chevron-down ms-auto" id="completionInfoIcon"></i>
</div>
<div id="completionInfoContent" style="display: none;" class="mt-3">
<p>Le score de complétion est calculé en fonction de plusieurs critères :</p>
<ul>
<li>Nom du commerce (obligatoire)</li>
<li>Adresse complète (numéro, rue, code postal)</li>
<li>Horaires d'ouverture</li>
<li>Site web</li>
<li>Numéro de téléphone</li>
<li>Accessibilité PMR</li>
<li>Note descriptive</li>
</ul>
<p>Chaque critère rempli augmente le score de complétion. Un commerce parfaitement renseigné aura un score de 100%.</p>
</div>
</div>
</div>
<div id="maploader">
<div class="spinner-border" role="status">
@ -101,12 +127,9 @@
</div>
</div>
<div class="card mt-4">
<div id="distribution_completion" class="mt-4 mb-4"></div>
<div class="row">
<div class="col-md-6 col-12">
<h1 class="card-title p-4">Tableau des {{ stats.places |length }} lieux</h1>
@ -128,11 +151,19 @@
</table>
</div>
<h2>requête overpass</h2>
<pre class="p-4 bg-light">
{{query_places|raw}}
</pre>
</div>
<div class="card mt-4">
<div class="card-header">
<h2>Requête Overpass</h2>
</div>
<div class="card-body">
<pre class="p-4 bg-light">
{{query_places|raw}}
</pre>
<a href="https://overpass-turbo.eu/?Q={{ query_places|url_encode }}" class="btn btn-primary" target="_blank">
<i class="bi bi-box-arrow-up-right"></i> Exécuter dans Overpass Turbo
</a>
</div>
</div>
</div>
<!-- Bouton caché pour JOSM -->
@ -692,5 +723,20 @@
sortTable();
});
function toggleCompletionInfo() {
const content = document.getElementById('completionInfoContent');
const icon = document.getElementById('completionInfoIcon');
if (content.style.display === 'none') {
content.style.display = 'block';
icon.classList.remove('bi-chevron-down');
icon.classList.add('bi-chevron-up');
} else {
content.style.display = 'none';
icon.classList.remove('bi-chevron-up');
icon.classList.add('bi-chevron-down');
}
}
</script>
{% endblock %}

View file

@ -14,216 +14,120 @@
width: 100%;
margin-bottom: 1rem;
}
.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;
}
</style>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
<script >
// Fonction pour rechercher avec Addok
// Créer et configurer la liste de suggestions
const suggestionList = document.createElement('ul');
suggestionList.style.cssText = `
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
border-top: none;
max-height: 200px;
overflow-y: auto;
position: absolute;
background: white;
width: 100%;
z-index: 1000;
`;
// Configurer l'input de recherche
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('app_admin_labourer');
const inputContainer = searchInput.parentElement;
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
<script src="{{ asset('js/utils.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('citySearch');
const suggestionList = document.getElementById('citySuggestions');
// Ajouter un conteneur relatif pour le positionnement
const searchWrapper = document.createElement('div');
searchWrapper.style.position = 'relative';
inputContainer.appendChild(searchWrapper);
searchWrapper.appendChild(searchInput);
searchWrapper.appendChild(suggestionList);
let debounceTimer;
searchInput.addEventListener('input', async (e) => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(async () => {
const query = e.target.value;
if (query.length < 2) {
suggestionList.innerHTML = '';
return;
}
const suggestions = await searchInseeCode(query);
suggestionList.innerHTML = '';
if (suggestions.length === 0) {
const li = document.createElement('li');
li.style.cssText = `
padding: 8px 12px;
color: #666;
font-style: italic;
`;
li.textContent = 'Aucun résultat trouvé';
suggestionList.appendChild(li);
return;
}
suggestions.forEach(suggestion => {
const li = document.createElement('li');
li.style.cssText = `
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #eee;
`;
li.textContent = suggestion.label;
li.addEventListener('mouseenter', () => {
li.style.backgroundColor = '#f0f0f0';
});
li.addEventListener('mouseleave', () => {
li.style.backgroundColor = 'white';
});
li.addEventListener('click', () => {
searchInput.value = suggestion.postcode;
suggestionList.innerHTML = '';
labourer();
});
suggestionList.appendChild(li);
});
}, 300);
});
// Cacher la liste quand on clique ailleurs
document.addEventListener('click', (e) => {
if (!inputContainer.contains(e.target)) {
suggestionList.innerHTML = '';
}
});
});
// Définir la fonction labourer dans le scope global
function labourer() {
window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
}
// Fonction pour obtenir la couleur selon le pourcentage
function getColorFromPercent(percent) {
const red = Math.round(255 * (1 - percent/100));
const green = Math.round(255 * (percent/100));
return `rgb(${red}, ${green}, 0)`;
}
// Attendre le chargement du DOM
document.addEventListener('DOMContentLoaded', async function() {
// Récupérer le bouton labourer
const btnLabourer = document.querySelector('#labourer');
if (btnLabourer) {
// Ajouter l'écouteur d'événement click
btnLabourer.addEventListener('click', function() {
// Récupérer la valeur du code postal
const codePostal = document.querySelector('#app_admin_labourer').value;
// Rediriger vers la route de labourage avec le code postal
window.location.href = `/admin/labourer/${codePostal}`;
if (searchInput && suggestionList) {
setupCitySearch('citySearch', 'citySuggestions', function(suggestion) {
document.getElementById('selectedZipCode').value = suggestion.postcode;
});
}
const postalCodes = [{% for stat in stats %}'{{ stat.zone }}'{% if not loop.last %}, {% endif %}{% endfor %}];
{% verbatim %}
console.log(postalCodes);
let postalLines = ``;
postalCodes.forEach(code => {
if (/^\d+$/.test(code)) {
postalLines += `
area["postal_code"="${code}"]->.searchArea_${code};
nwr["admin_level"="8"]["name"](area.searchArea_${code});`;
}
});
const query = `[out:json][timeout:25];
(
${postalLines}
);
out body;
>;
out skel qt;`;
{% endverbatim %}
});
</script>
{% endblock %}
{% block body %}
<div class="container mt-4">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
<h1 class="mb-4">Tableau de bord</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<h2>Statistiques : {{ stats|length }} codes postaux</h2>
<table class="table table-hover table-striped table-responsive js-sort-table">
<thead>
<tr>
<th>Zone</th>
<th>Nombre de lieux</th>
<th>Complétude %</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for stat in stats %}
<tr>
<td>
<a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}">{{ stat.zone }} {{ stat.name }}</a>
</td>
<td>{{ stat.placesCount }}</td>
<td style="background : rgba(0 , 255, 0, {{stat.completionPercent / 100 }} )">{{ stat.completionPercent }}</td>
<td>
<a class="btn btn-sm btn-primary" href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}"><i class="bi bi-eye"></i></a>
<a class="btn btn-sm btn-warning" href="{{ path('app_admin_labourer', {'zip_code': stat.zone}) }}"><i class="bi bi-arrow-repeat"></i></a>
<a class="btn btn-sm btn-danger" href="{{ path('app_admin_delete_by_zone', {'zip_code': stat.zone}) }}"><i class="bi bi-trash"></i></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2>{{ places_count }} Lieux</h2>
<h2><button class="btn btn-primary" id="labourer">Labourer les mises à jour</button></h2>
<label for="app_admin_labourer">Rechercher une ville par son nom
<div id="loading_search_insee" class="d-none">
<div class="spinner-grow text-primary" role="status">
<div class="card">
<div class="card-body">
<h3 class="card-title">Labourer une ville</h3>
<form id="labourerForm" onsubmit="handleAddCityFormSubmit(event)">
<div class="search-container">
<input type="text"
id="citySearch"
class="form-control"
placeholder="Rechercher une ville..."
autocomplete="off">
<div id="citySuggestions" class="suggestion-list"></div>
</div>
<input type="hidden" name="zip_code" id="selectedZipCode">
<button type="submit" class="btn btn-primary mt-3">Labourer cette ville</button>
</form>
</div>
<span class="sr-only">Chargement...</span>
</div>
</label>
<input class="form-control" type="text" id="app_admin_labourer" placeholder="Entrez le nom d'une ville...">
<div id="suggestionList" class="suggestion-list"></div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<h2>Statistiques par ville</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Ville</th>
<th>Code postal</th>
<th>Complétion</th>
<th>Nombre de commerces</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for stat in stats %}
<tr>
<td>{{ stat.name }}</td>
<td>{{ stat.zone }}</td>
<td>{{ stat.completionPercent }}%</td>
<td>{{ stat.places|length }}</td>
<td>
<a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}" class="btn btn-sm btn-primary">Voir les statistiques</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}

View file

@ -6,10 +6,6 @@
{% block body %}
<div class="container edit-land mt-4">
<pre>
{{ dump(commerce_overpass) }}
</pre>
<div class="card shadow-sm">
<div class="card-body">
<h1 class="card-title h2 mb-4">{{ 'display.welcome'|trans }} {{ commerce_overpass.tags_converted.name }}</h1>
@ -144,9 +140,14 @@
</button>
</div>
{% if commerce.stats %}
<a href="{{ path('app_admin_stats', {'zip_code': commerce.stats.zone}) }}" class="btn btn-outline-secondary">
<i class="bi bi-bar-chart"></i> zone {{commerce.stats.zone}}
</a>
{% endif %}
<a href="{{ path('app_public_dashboard' )}}" class="btn btn-outline-secondary">
<i class="bi bi-bar-chart"></i>
Dashboard
<i class="bi bi-bar-chart"></i> Dashboard
</a>
</div>
<div class="disclaimer mt-3 p-3 bg-light rounded">

View file

@ -1,43 +1,45 @@
{% block tags %}
<fieldset>
<div id="tags">
{% for k, v in commerce_overpass.tags_converted %}
<div class="row mb-3 {% if hide_filled_inputs and v is not empty %}d-none{% endif %}">
<div class="col-md-5">
{% if k not in excluded_tags_to_render %}
{% if k == 'phone' or k == 'contact:phone' %}
<i class="bi bi-telephone"></i>
{% elseif k == 'addr:housenumber' or k == 'addr:street' or k == 'addr:city' or k == 'addr:postcode' or k == 'addr:country' %}
<i class="bi bi-geo-alt"></i>
{% elseif k == 'contact:mastodon' %}
<i class="bi bi-mastodon"></i>
{% elseif k == 'email' or k == 'contact:email' %}
<i class="bi bi-envelope"></i>
{% elseif k == 'website' or k == 'contact:website' %}
{% elseif k == 'opening_hours' %}
<i class="bi bi-clock"></i>
{% else %}
<i class="bi bi-tag"></i>
{% endif %}
{% endif %}
<input type="text" class="form-control hidden" name="commerce_tag_key__{{ k }}" value="{{ k }}" title="{{ k }}" readonly>
{% if k not in excluded_tags_to_render %}
<span class="label-translated" title="{{ k }}">{{ ('display.keys.' ~ k)|trans }}</span>
{% endif %}
</div>
<div class="col-md-5">
{% for k, v in commerce_overpass.tags_converted %}
<div class="row mb-3 {% if hide_filled_inputs and v is not empty %}d-none{% endif %}">
<div class="col-md-5">
{% if k not in excluded_tags_to_render %}
<input type="text" class="form-control" name="commerce_tag_value__{{ k }}" value="{{ v }}">
<div class="d-flex align-items-center">
{% if k == 'phone' or k == 'contact:phone' %}
<i class="bi bi-telephone me-2"></i>
{% elseif k == 'addr:housenumber' or k == 'addr:street' or k == 'addr:city' or k == 'addr:postcode' or k == 'addr:country' %}
<i class="bi bi-geo-alt me-2"></i>
{% elseif k == 'contact:mastodon' %}
<i class="bi bi-mastodon me-2"></i>
{% elseif k == 'email' or k == 'contact:email' %}
<i class="bi bi-envelope me-2"></i>
{% elseif k == 'website' or k == 'contact:website' %}
<i class="bi bi-globe me-2"></i>
{% elseif k == 'opening_hours' %}
<i class="bi bi-clock me-2"></i>
{% else %}
<i class="bi bi-tag me-2"></i>
{% endif %}
<span class="label-translated" title="{{ k }}">{{ ('display.keys.' ~ k)|trans }}</span>
</div>
<input type="text" class="form-control d-none" name="commerce_tag_key__{{ k }}" value="{{ k }}" title="{{ k }}" readonly>
{% endif %}
</div>
</div>
{% endfor %}
<div class="col-md-5">
{% if k not in excluded_tags_to_render %}
<div class="input-group">
<input type="text"
class="form-control"
id="commerce_tag_value__{{ k }}"
name="commerce_tag_value__{{ k }}"
value="{{ v }}"
{% if hide_filled_inputs and v %}style="display: none;"{% endif %}>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</fieldset>
{% endblock %}

View file

@ -6,7 +6,55 @@
{{ parent() }}
<style>
.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;
}
</style>
{% endblock %}
@ -14,40 +62,61 @@
<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>
<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>
<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>
</div>
</div>
<div class="row city-list ">
<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>
<div class="col-md-8">
<div class="list-group">
{% for stat in stats %}
<a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
{{ stat.zone }} {{ stat.name }}
<span class="badge bg-primary rounded-pill">{{ stat.placesCount }} commerces</span>
</a>
{% endfor %}
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
Ajoutez votre ville
</div>
</div>
</div>
</div>
</div>
<script>
// Créer le formulaire email

View file

@ -27,7 +27,7 @@
<hr>
<form action="{{ path('app_public_submit', {'osm_object_id': commerce_overpass['@attributes'].id, 'version': commerce_overpass['@attributes'].version, 'changesetID': commerce_overpass['@attributes'].changeset }) }}" method="post" class="needs-validation">
<input type="hidden" name="osm_kind" value="{{ osm_kind }}">
<input type="hidden" name="osm_kind" value="{{ place.osmKind }}">
{% include 'public/edit/yenaunpeuplusjevouslemets.html.twig' %}