143 lines
7.4 KiB
Twig
143 lines
7.4 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" />
|
|
{% 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">🎉 Détails de la sortie</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>{{ participant.nom }} {{ participant.prenom }}</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) %}
|
|
<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">
|
|
<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>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# {% if app.user %}#}
|
|
{# <div class="mt-6 flex">#}
|
|
{# <a href="{{ path('sortie_inscription') }}">#}
|
|
{# <button class="px-6 py-3 bg-green-500 text-white rounded-md shadow hover:bg-green-600">M'inscrire</button>#}
|
|
{# </a>#}
|
|
{# </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.ville }}</li>
|
|
<li><strong>🌍 Latitude :</strong> {{ sortie.lieu.latitude }}</li>
|
|
<li><strong>🌍 Longitude :</strong> {{ sortie.lieu.longitude }}</li>
|
|
</ul>
|
|
</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);
|
|
|
|
L.marker([{{ sortie.lieu.latitude }}, {{ sortie.lieu.longitude }}]).addTo(map)
|
|
.bindPopup("{{ sortie.lieu.nom }}")
|
|
.openPopup();
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
{% endblock %}
|