diff --git a/assets/js/lieu.js b/assets/js/lieu.js index 8c87c81..0f518cf 100644 --- a/assets/js/lieu.js +++ b/assets/js/lieu.js @@ -8,13 +8,16 @@ document.addEventListener('DOMContentLoaded', function () { const longitudeLabel = document.getElementById('longitude-value'); if (villeSelect && lieuSelect) { - // Listener pour la ville + // Désactiver le menu déroulant des lieux au départ + lieuSelect.disabled = true; + + // Listener pour le changement de ville villeSelect.addEventListener('change', function () { const villeId = villeSelect.value; // Réinitialisation des options de lieu lieuSelect.innerHTML = ''; - lieuSelect.disabled = true; + lieuSelect.disabled = true; // Toujours désactiver avant de récupérer les données if (villeId) { fetch(`/get-lieux/${villeId}`) @@ -25,17 +28,19 @@ document.addEventListener('DOMContentLoaded', function () { return response.json(); }) .then(data => { - // Mise à jour des options dans le menu déroulant - lieuSelect.innerHTML = ''; - data.forEach(lieu => { - const option = document.createElement('option'); - option.value = lieu.id; // ID pour soumettre au backend - option.textContent = lieu.nom; // Nom affiché - option.dataset.details = JSON.stringify(lieu); // Stocker les détails pour affichage - lieuSelect.appendChild(option); - }); - - lieuSelect.disabled = false; + // Ajouter les options si des lieux sont disponibles + if (data.length > 0) { + data.forEach(lieu => { + const option = document.createElement('option'); + option.value = lieu.id; // Utiliser l'ID pour la soumission + option.textContent = lieu.nom; // Texte visible dans le menu + lieuSelect.appendChild(option); + }); + lieuSelect.disabled = false; // Activer le menu des lieux + } else { + lieuSelect.innerHTML = ''; + lieuSelect.disabled = true; // Toujours désactivé si aucun lieu n'est trouvé + } }) .catch(error => { console.error('Erreur lors de la récupération des lieux :', error); @@ -43,21 +48,23 @@ document.addEventListener('DOMContentLoaded', function () { } }); - // Listener pour le lieu + // Listener pour le changement de lieu lieuSelect.addEventListener('change', function () { const selectedOption = lieuSelect.options[lieuSelect.selectedIndex]; - if (selectedOption && selectedOption.dataset.details) { - const lieuDetails = JSON.parse(selectedOption.dataset.details); + if (selectedOption) { + const lieuDetails = selectedOption.dataset.details + ? JSON.parse(selectedOption.dataset.details) + : null; // Mise à jour des labels avec les détails du lieu sélectionné - rueLabel.textContent = lieuDetails.rue || 'Non renseignée'; - codePostalLabel.textContent = lieuDetails.codePostal || 'Non renseigné'; - latitudeLabel.textContent = lieuDetails.latitude || 'Non renseignée'; - longitudeLabel.textContent = lieuDetails.longitude || 'Non renseignée'; + rueLabel.textContent = lieuDetails?.rue || 'Non renseignée'; + codePostalLabel.textContent = lieuDetails?.codePostal || 'Non renseigné'; + latitudeLabel.textContent = lieuDetails?.latitude || 'Non renseignée'; + longitudeLabel.textContent = lieuDetails?.longitude || 'Non renseignée'; console.log('Lieu sélectionné:', lieuDetails); } else { - // Réinitialisation des labels si aucun lieu n'est sélectionné + // Réinitialiser les labels si aucun lieu n'est sélectionné rueLabel.textContent = 'Renseigner avec le lieu'; codePostalLabel.textContent = 'Renseigner avec le lieu'; latitudeLabel.textContent = 'Renseigner avec le lieu'; diff --git a/templates/sortie/create.html.twig b/templates/sortie/create.html.twig index c3ace0c..31ee513 100644 --- a/templates/sortie/create.html.twig +++ b/templates/sortie/create.html.twig @@ -13,6 +13,39 @@ width: 100%; height: 500px; } + + .form-group { + display: flex; + flex-direction: column; + } + + .form-group label { + margin-bottom: 0.5rem; + font-weight: bold; + } + + .modern-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.75rem 1rem; + background-color: #1d4ed8; + color: #fff; + border: none; + border-radius: 0.5rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease-in-out; + } + + .modern-button:hover { + background-color: #2563eb; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transform: translateY(-1px); + } + + .modern-button svg { + margin-right: 0.5rem; + } {% endblock %} @@ -27,19 +60,54 @@
- {{ form_row(form.nom, {'label': 'Nom de la sortie', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }} - {{ form_row(form.dateHeureDebut, {'label': 'Date et heure de la sortie', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }} - {{ form_row(form.dateLimiteInscription, {'label': 'Date limite d\'inscription', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }} - {{ form_row(form.nbInscriptionsMax, {'label': 'Nombre de places', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }} - {{ form_row(form.duree, {'label': 'Durée (en minutes)', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }} - {{ form_row(form.infosSortie, {'label': 'Description et infos', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500'}}) }} +
+ + {{ form_widget(form.nom, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }} +
+ +
+ + {{ form_widget(form.dateHeureDebut, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }} +
+ +
+ + {{ form_widget(form.dateLimiteInscription, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }} +
+ +
+ + {{ form_widget(form.nbInscriptionsMax, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }} +
+ +
+ + {{ form_widget(form.duree, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }} +
+ +
+ + {{ form_widget(form.infosSortie, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }} +
- {{ form_row(form.ville, {'label': 'Ville organisatrice', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'id': 'ville-select'}}) }} -
- {{ form_row(form.lieu, {'label': 'Lieu', 'attr': {'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'id': 'lieu-select'}}) }} - +
+ + {{ form_widget(form.ville, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'id': 'ville-select' } }) }} +
+ +
+ +
+ {{ form_widget(form.lieu, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'id': 'lieu-select' } }) }} + +
@@ -70,7 +138,7 @@
- {{ form_end(form) }} + {{ form_end(form, { 'render_rest': false }) }}