up liens, explication de score de complétion
This commit is contained in:
Tykayn
tykayn
parent
81c613e93c
commit
21d4d5b850
9 changed files with 425 additions and 292 deletions
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue