261 lines
13 KiB
Twig
261 lines
13 KiB
Twig
{% extends 'main/base.html.twig' %}
|
|
|
|
{% block head %}
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Détails de la sortie</title>
|
|
{% block stylesheets %}
|
|
{{ encore_entry_link_tags('app') }}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
<style>
|
|
#delete-modal {
|
|
z-index: 1050;
|
|
}
|
|
#confirm-modal {
|
|
z-index: 1050;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
</head>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto p-6 bg-gray-50 rounded-lg shadow-lg mt-6">
|
|
<h1 class="text-4xl font-bold text-center text-gray-800 mb-8">🎉 {{ sortie.nom }} 🎉</h1>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
|
<div class="lg:col-span-7 bg-white rounded-lg shadow p-6">
|
|
<h2 class="text-2xl font-bold text-gray-700 border-b pb-4 mb-6">📋 Informations principales</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<p class="text-lg flex items-start">
|
|
<span class="text-2xl mr-2">🕒</span>
|
|
<span><strong>Date de début :</strong> {{ sortie.dateHeureDebut|date('d/m/Y H:i') }}</span>
|
|
</p>
|
|
<p class="text-lg flex items-start">
|
|
<span class="text-2xl mr-2">⏳</span>
|
|
<span><strong>Durée :</strong> {{ sortie.duree ? sortie.duree ~ ' minutes' : 'Non renseignée' }}</span>
|
|
</p>
|
|
<p class="text-lg flex items-start">
|
|
<span class="text-2xl mr-2">📆</span>
|
|
<span><strong>Date limite :</strong> {{ sortie.dateLimiteInscription|date('d/m/Y H:i') }}</span>
|
|
</p>
|
|
<p class="text-lg flex items-start">
|
|
<span class="text-2xl mr-2">👥</span>
|
|
<span><strong>Inscriptions max :</strong> {{ sortie.nbInscriptionsMax }}</span>
|
|
</p>
|
|
<p class="text-lg flex items-start">
|
|
<span class="text-2xl mr-2">🎓</span>
|
|
<span><strong>Organisateur :</strong> {{ sortie.organisateur.prenom }} {{ sortie.organisateur.nom }}</span>
|
|
</p>
|
|
<p class="text-lg flex items-start">
|
|
<span class="text-2xl mr-2">📌</span>
|
|
<span><strong>État :</strong> {{ sortie.etat.libelle }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-100 rounded-lg p-4 mt-6">
|
|
<h3 class="text-xl font-semibold text-gray-700">📝 Description</h3>
|
|
<p class="text-gray-800 text-lg mt-2">
|
|
{{ sortie.infosSortie ? sortie.infosSortie : 'Aucune description disponible.' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-100 rounded-lg p-4 mt-6">
|
|
<h3 class="text-xl font-semibold text-gray-700">👥 Participants inscrits</h3>
|
|
{% if sortie.participants is not empty %}
|
|
<ul class="list-disc pl-6 text-gray-800 mt-2">
|
|
{% for participant in sortie.participants %}
|
|
<li>
|
|
<a href="{{ path('profile_view', {'uuid': participant.idParticipant}) }}">
|
|
{{ participant.nom }} {{ participant.prenom }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="text-gray-600">Aucun participant inscrit pour le moment.</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if app.user and sortie.etat.libelle == 'Ouverte' and not sortie.participants.contains(app.user) and date(sortie.dateLimiteInscription) > date() %}
|
|
<form action="{{ path('sortie_inscription', { id: sortie.idSortie }) }}" method="post" class="mt-6">
|
|
<button type="submit" class="px-6 py-3 bg-green-500 text-white rounded-md shadow hover:bg-green-600">
|
|
✅ S'inscrire
|
|
</button>
|
|
</form>
|
|
{% elseif app.user and sortie.participants.contains(app.user) %}
|
|
<div class="mt-6">
|
|
<p class="text-green-600 font-bold">✅ Vous êtes déjà inscrit à cette sortie.</p>
|
|
{% if sortie.etat.libelle == 'Ouverte' %}
|
|
<form action="{{ path('sortie_unsubscribe', { id: sortie.idSortie }) }}" method="post" class="mt-6">
|
|
<button type="submit" class="px-6 py-3 bg-red-500 text-white rounded-md shadow hover:bg-red-600">
|
|
❌ Se désister
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if app.user and app.user.idParticipant == sortie.organisateur.idParticipant %}
|
|
<div class="mt-6 flex justify-end space-x-4">
|
|
{% if sortie.etat.libelle == 'Créée' or sortie.etat.libelle == 'Ouverte'%}
|
|
<button
|
|
type="button"
|
|
id="open-delete-modal"
|
|
class="px-6 py-3 bg-red-500 text-white rounded-md shadow hover:bg-red-600">
|
|
❌ Annuler la sortie
|
|
</button>
|
|
{% endif %}
|
|
{% if sortie.etat.libelle == 'Créée' %}
|
|
<a href="{{ path('sortie_edit', { id: sortie.idSortie }) }}"
|
|
class="px-6 py-3 bg-yellow-500 text-white rounded-md shadow hover:bg-yellow-600">
|
|
✏️ Modifier la sortie
|
|
</a>
|
|
{# <a href="{{ path('sortie_open', { id: sortie.idSortie }) }}"#}
|
|
{# class="px-6 py-3 bg-yellow-500 text-white rounded-md shadow hover:bg-yellow-600">#}
|
|
{# 🚀 Démarrer les inscriptions#}
|
|
{# </a>#}
|
|
<button
|
|
type="button"
|
|
id="open-confirm-modal"
|
|
class="px-6 py-3 bg-green-500 text-white rounded-md shadow hover:bg-green-600">
|
|
🚀 Démarrer les inscriptions
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if sortie.motifAnnul is not empty %}
|
|
<div class="mt-6 flex flex-col space-x-4">
|
|
<h4 class="text-base font-bold uppercase text-red-700 mb-2">🚫 Raison de l'annulation :</h4>
|
|
<p class="text-base text-gray-800">{{ sortie.motifAnnul }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="lg:col-span-5 bg-white rounded-lg shadow p-6">
|
|
<h2 class="text-2xl font-bold text-gray-700 border-b pb-4 mb-6">📍 Localisation</h2>
|
|
<div id="map" class="w-full h-96 rounded-lg shadow"></div>
|
|
<ul class="mt-4 text-gray-700 space-y-2">
|
|
<li><strong>🏢 Nom :</strong> {{ sortie.lieu.nom }}</li>
|
|
<li><strong>📍 Rue :</strong> {{ sortie.lieu.rue }}</li>
|
|
<li><strong>🏙️ Ville :</strong> {{ sortie.lieu.ville }}</li>
|
|
<li><strong>✉️ Code postal :</strong> {{ sortie.lieu.codePostal }}</li>
|
|
<li><strong>🌍 Latitude :</strong> {{ sortie.lieu.latitude }}</li>
|
|
<li><strong>🌍 Longitude :</strong> {{ sortie.lieu.longitude }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modale pour annuler la sortie -->
|
|
<div id="delete-modal" class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 hidden">
|
|
<div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-lg">
|
|
<h2 class="text-xl font-bold mb-4">Annuler la sortie</h2>
|
|
<form action="{{ path('sortie_cancel', { id: sortie.idSortie }) }}" method="post">
|
|
<div class="mb-4">
|
|
<label for="motif" class="block text-sm font-medium text-gray-700">Motif d'annulation :</label>
|
|
<textarea
|
|
name="motif"
|
|
id="motif"
|
|
rows="4"
|
|
class="block w-full mt-1 p-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"
|
|
required></textarea>
|
|
</div>
|
|
<div class="flex justify-end space-x-4">
|
|
<button
|
|
type="button"
|
|
id="cancel-modal"
|
|
class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">
|
|
Annuler
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">
|
|
Confirmer l'annulation
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{# Modale pour ouvrir les inscriptions d'une sortie#}
|
|
<div id="confirm-modal" class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 hidden">
|
|
<div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-lg">
|
|
<h2 class="text-xl font-bold mb-4">Ouvrir les inscriptions</h2>
|
|
<form action="{{ path('sortie_confirm', {id: sortie.idSortie}) }}" method="post">
|
|
<div class="mb-4">
|
|
<p class="text-base">La modification de cette sortie ne sera pu possible une fois les inscriptions ouverte</p>
|
|
</div>
|
|
<div class="flex justify-end space-x-4">
|
|
<button
|
|
type="button"
|
|
id="cancel-confirm-modal"
|
|
class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">
|
|
Annuler
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
|
|
Démarrer les inscriptions
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8">
|
|
<a href="{{ path('home') }}" class="px-6 py-3 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600">
|
|
🔙 Retour à l'accueil
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% block javascripts %}
|
|
{{ encore_entry_script_tags('app') }}
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const map = L.map('map').setView([{{ sortie.lieu.latitude }}, {{ sortie.lieu.longitude }}], 15);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
}).addTo(map);
|
|
|
|
const customIcon = L.icon({
|
|
iconUrl: '/img/pointeur.png',
|
|
iconSize: [100, 100],
|
|
iconAnchor: [50, 100],
|
|
popupAnchor: [0, -100],
|
|
});
|
|
|
|
L.marker([{{ sortie.lieu.latitude }}, {{ sortie.lieu.longitude }}], { icon: customIcon }).addTo(map)
|
|
.bindPopup("{{ sortie.lieu.nom }}")
|
|
.openPopup();
|
|
|
|
const openModalButton = document.getElementById('open-delete-modal');
|
|
const openModalConfirm = document.getElementById('open-confirm-modal');
|
|
|
|
const cancelModalButton = document.getElementById('cancel-modal');
|
|
const cancelModalConfirm = document.getElementById('cancel-confirm-modal')
|
|
|
|
const deleteModal = document.getElementById('delete-modal');
|
|
const confirmModal = document.getElementById('confirm-modal');
|
|
|
|
openModalButton?.addEventListener('click', () => {
|
|
deleteModal.classList.remove('hidden');
|
|
});
|
|
cancelModalButton?.addEventListener('click', () => {
|
|
deleteModal.classList.add('hidden');
|
|
});
|
|
|
|
openModalConfirm?.addEventListener('click', () => {
|
|
confirmModal.classList.remove('hidden');
|
|
})
|
|
cancelModalConfirm?.addEventListener('click', () => {
|
|
confirmModal.classList.add('hidden')
|
|
})
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
{% endblock %}
|