120 lines
6.2 KiB
Twig
120 lines
6.2 KiB
Twig
{% extends 'main/base.html.twig' %}
|
|
|
|
{% block title %}📣 Sortie.com Admin City 🔊{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="flex">
|
|
{% include 'admin/sidebar.html.twig' %}
|
|
|
|
<!-- Main Content -->
|
|
<div class="ml-64 p-8 w-full">
|
|
<h1 class="text-2xl font-semibold mb-4">Gestion des villes</h1>
|
|
|
|
<!-- Actions: Ajouter -->
|
|
<div class="mb-4">
|
|
<!-- Bouton pour ouvrir la modale -->
|
|
<button id="openModal" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
|
|
Ajouter une ville
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Participants Table -->
|
|
<div class="overflow-x-auto bg-white rounded shadow">
|
|
<table class="min-w-full bg-white divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Code postal</th>
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
{% for city in citys %}
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ city.nom }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ city.codePostal }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<a href="{{ path('app_adminCityDelete', {'id': city.idVille}) }}" class="text-red-600 hover:text-red-900 ml-4">Supprimer</a>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="8" class="px-6 py-4 text-center text-gray-500">Aucune ville trouvée</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modale pour ajouter une ville -->
|
|
<div id="cityModal" class="fixed inset-0 z-50 hidden bg-gray-900 bg-opacity-50">
|
|
<div class="flex justify-center items-center min-h-screen">
|
|
<div class="bg-white p-6 rounded shadow-md w-1/3">
|
|
<h2 class="text-xl font-semibold mb-4">Ajouter une ville</h2>
|
|
<form id="addCityForm" method="POST" action="{{ path('app_adminCityAdd') }}">
|
|
<div class="mb-4">
|
|
<label for="postalCode" class="block text-sm font-medium text-gray-700">Code postal</label>
|
|
<input id="postalCode" name="postalCode" type="text" class="mt-1 block w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="citySelect" class="block text-sm font-medium text-gray-700">Sélectionner une ville</label>
|
|
<select id="citySelect" name="citySelect" class="mt-1 block w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required>
|
|
<!-- Options will be populated dynamically based on postal code -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">Ajouter</button>
|
|
<button type="button" id="closeModal" class="ml-2 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700">Annuler</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Ouvrir la modale
|
|
document.getElementById('openModal').addEventListener('click', function() {
|
|
document.getElementById('cityModal').classList.remove('hidden');
|
|
});
|
|
|
|
// Fermer la modale
|
|
document.getElementById('closeModal').addEventListener('click', function() {
|
|
document.getElementById('cityModal').classList.add('hidden');
|
|
});
|
|
|
|
// Fonction pour charger les villes en fonction du code postal en utilisant l'API Carto
|
|
document.getElementById('postalCode').addEventListener('input', function() {
|
|
const postalCode = this.value;
|
|
const citySelect = document.getElementById('citySelect');
|
|
|
|
if (postalCode.length >= 3) {
|
|
// URL de l'API Carto pour récupérer les villes en fonction du code postal
|
|
const apiUrl = `https://api-adresse.data.gouv.fr/search/?q=${postalCode}&type=municipality&limit=10`;
|
|
|
|
fetch(apiUrl)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Clear previous options
|
|
citySelect.innerHTML = '';
|
|
|
|
// Ajouter des nouvelles options de villes dans la liste déroulante
|
|
data.features.forEach(feature => {
|
|
const option = document.createElement('option');
|
|
option.value = feature.properties.label;
|
|
option.textContent = feature.properties.label; // Nom de la ville
|
|
citySelect.appendChild(option);
|
|
});
|
|
})
|
|
.catch(error => console.error('Erreur:', error));
|
|
} else {
|
|
// Clear options si le code postal est trop court
|
|
citySelect.innerHTML = '';
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
{% endblock %}
|