johanleroy/ENI-sortir
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'Marvin'

Browse Source
This commit is contained in:
Olivier PARPAILLON
2024-11-21 10:19:18 +01:00
parent b467a5ea68 a27921f1a8
commit 94fad1ea08
2 changed files with 107 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
assets/js/lieu.js
View File

@@ -8,13 +8,16 @@ document.addEventListener('DOMContentLoaded', function () {
const longitudeLabel = document.getElementById('longitude-value'); const longitudeLabel = document.getElementById('longitude-value');
if (villeSelect && lieuSelect) { 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 () { villeSelect.addEventListener('change', function () {
const villeId = villeSelect.value; const villeId = villeSelect.value;
// Réinitialisation des options de lieu // Réinitialisation des options de lieu
lieuSelect.innerHTML = '<option value="">Sélectionnez un lieu</option>'; lieuSelect.innerHTML = '<option value="">Sélectionnez un lieu</option>';
lieuSelect.disabled = true; lieuSelect.disabled = true; // Toujours désactiver avant de récupérer les données
if (villeId) { if (villeId) {
fetch(`/get-lieux/${villeId}`) fetch(`/get-lieux/${villeId}`)
@@ -25,17 +28,19 @@ document.addEventListener('DOMContentLoaded', function () {
return response.json(); return response.json();
}) })
.then(data => { .then(data => {
// Mise à jour des options dans le menu déroulant // Ajouter les options si des lieux sont disponibles
lieuSelect.innerHTML = '<option value="">Sélectionnez un lieu</option>'; if (data.length > 0) {
data.forEach(lieu => { data.forEach(lieu => {
const option = document.createElement('option'); const option = document.createElement('option');
option.value = lieu.id; // ID pour soumettre au backend option.value = lieu.id; // Utiliser l'ID pour la soumission
option.textContent = lieu.nom; // Nom affiché option.textContent = lieu.nom; // Texte visible dans le menu
option.dataset.details = JSON.stringify(lieu); // Stocker les détails pour affichage
lieuSelect.appendChild(option); lieuSelect.appendChild(option);
}); });
lieuSelect.disabled = false; // Activer le menu des lieux
lieuSelect.disabled = false; } else {
lieuSelect.innerHTML = '<option value="">Aucun lieu disponible</option>';
lieuSelect.disabled = true; // Toujours désactivé si aucun lieu n'est trouvé
}
}) })
.catch(error => { .catch(error => {
console.error('Erreur lors de la récupération des lieux :', 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 () { lieuSelect.addEventListener('change', function () {
const selectedOption = lieuSelect.options[lieuSelect.selectedIndex]; const selectedOption = lieuSelect.options[lieuSelect.selectedIndex];
if (selectedOption && selectedOption.dataset.details) { if (selectedOption) {
const lieuDetails = JSON.parse(selectedOption.dataset.details); const lieuDetails = selectedOption.dataset.details
? JSON.parse(selectedOption.dataset.details)
: null;
// Mise à jour des labels avec les détails du lieu sélectionné // Mise à jour des labels avec les détails du lieu sélectionné
rueLabel.textContent = lieuDetails.rue || 'Non renseignée'; rueLabel.textContent = lieuDetails?.rue || 'Non renseignée';
codePostalLabel.textContent = lieuDetails.codePostal || 'Non renseigné'; codePostalLabel.textContent = lieuDetails?.codePostal || 'Non renseigné';
latitudeLabel.textContent = lieuDetails.latitude || 'Non renseignée'; latitudeLabel.textContent = lieuDetails?.latitude || 'Non renseignée';
longitudeLabel.textContent = lieuDetails.longitude || 'Non renseignée'; longitudeLabel.textContent = lieuDetails?.longitude || 'Non renseignée';
console.log('Lieu sélectionné:', lieuDetails); console.log('Lieu sélectionné:', lieuDetails);
} else { } 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'; rueLabel.textContent = 'Renseigner avec le lieu';
codePostalLabel.textContent = 'Renseigner avec le lieu'; codePostalLabel.textContent = 'Renseigner avec le lieu';
latitudeLabel.textContent = 'Renseigner avec le lieu'; latitudeLabel.textContent = 'Renseigner avec le lieu';

88
templates/sortie/create.html.twig
View File

@@ -13,6 +13,39 @@
width: 100%; width: 100%;
height: 500px; 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;
}
</style> </style>
{% endblock %} {% endblock %}
</head> </head>
@@ -27,19 +60,54 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4"> <div class="space-y-4">
{{ 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'}}) }} <div class="form-group">
{{ 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'}}) }} <label for="sortie_nom">Nom de la sortie</label>
{{ 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_widget(form.nom, { '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'}}) }} </div>
{{ 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'}}) }} <div class="form-group">
<label for="sortie_dateHeureDebut">Date et heure de début</label>
{{ form_widget(form.dateHeureDebut, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
</div>
<div class="form-group">
<label for="sortie_dateLimiteInscription">Date limite d'inscription</label>
{{ form_widget(form.dateLimiteInscription, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
</div>
<div class="form-group">
<label for="sortie_nbInscriptionsMax">Nombre de places</label>
{{ form_widget(form.nbInscriptionsMax, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
</div>
<div class="form-group">
<label for="sortie_duree">Durée (en minutes)</label>
{{ form_widget(form.duree, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
</div>
<div class="form-group">
<label for="sortie_infosSortie">Description et infos</label>
{{ form_widget(form.infosSortie, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
</div>
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
{{ 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'}}) }} <div class="form-group">
<label for="sortie_ville">Ville organisatrice</label>
{{ 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' } }) }}
</div>
<div class="form-group">
<label for="sortie_lieu">Lieu</label>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
{{ 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.lieu, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'id': 'lieu-select' } }) }}
<button type="button" id="add-lieu-button" class="p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">+</button> <button type="button" id="add-lieu-button" class="modern-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Ajouter
</button>
</div>
</div> </div>
<div> <div>
@@ -70,7 +138,7 @@
</a> </a>
</div> </div>
{{ form_end(form) }} {{ form_end(form, { 'render_rest': false }) }}
</div> </div>
</div> </div>