refacto labourage form

This commit is contained in:
Tykayn 2025-06-18 00:41:24 +02:00 committed by tykayn
parent 31b2bd4689
commit 5441abd405
12 changed files with 674 additions and 424 deletions

View file

@ -23,7 +23,6 @@
overflow-y: auto;
width: 100%;
z-index: 1000;
display: none;
}
.suggestion-item {
padding: 8px 12px;
@ -50,58 +49,6 @@
</style>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
<script src='{{ asset('js/utils.js') }}'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialiser les tooltips Bootstrap
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
// Colorer les cellules de pourcentage
colorizePercentageCells('td:nth-child(3)');
// colorier selon le nombre de lieux
colorizePercentageCellsRelative('td:nth-child(4)', '154, 205, 50');
const searchInput = document.getElementById('citySearch');
const suggestionList = document.getElementById('citySuggestions');
if (searchInput && suggestionList) {
setupCitySearch('citySearch', 'citySuggestions', function(suggestion) {
document.getElementById('selectedZipCode').value = suggestion.postcode;
});
}
// Attacher le submit du formulaire en JS
const labourerForm = document.getElementById('labourerForm');
if (labourerForm) {
labourerForm.addEventListener('submit', handleAddCityFormSubmit);
}
// Gestionnaire pour les boutons de labourage
document.querySelectorAll('.btn-labourer').forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
console.log('submit', this.dataset);
const zipCode = this.dataset.zipCode;
if (!zipCode) return;
// Désactiver le bouton et ajouter le spinner
this.disabled = true;
const originalContent = this.innerHTML;
this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Labourer...';
// Rediriger vers l'URL de labourage
window.location.href = getLabourerUrl(zipCode);
});
});
});
</script>
{% endblock %}
{% block body %}
<div class="container">
@ -167,34 +114,30 @@
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<h3 class="card-title">Labourer une ville</h3>
<p class="card-text">
<i class="bi bi-info-circle"
data-bs-toggle="tooltip"
data-bs-placement="right"
data-bs-html="true"
title="<strong>Qu'est-ce que le labourage ?</strong><br><br>Le labourage consiste à rechercher automatiquement tous les commerces et lieux d'intérêt dans une ville sur OpenStreetMap. Cette action permet de :<br><br>- Découvrir les commerces existants<br>- Mesurer leur taux de complétion<br>- Identifier les informations manquantes<br>- Faciliter la mise à jour des données"></i>
Rechercher une ville pour labourer ses commerces
</p>
<form id="labourerForm">
<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 btn-labourer">Labourer cette ville</button>
</form>
</div>
</div>
</div>
</div>
{% include 'public/labourage-form.html.twig' %}
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
<script src='{{ asset('js/utils.js') }}'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialiser les tooltips Bootstrap
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
// Colorer les cellules de pourcentage
colorizePercentageCells('td:nth-child(3)');
// colorier selon le nombre de lieux
colorizePercentageCellsRelative('td:nth-child(4)', '154, 205, 50');
enableLabourageForm();
performSearch('dieppe');
});
</script>
{% endblock %}