plein de truc
This commit is contained in:
marvin
@@ -1,4 +1,5 @@
|
||||
{% extends 'main/base.html.twig' %}
|
||||
|
||||
{% block head %}
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@@ -10,13 +11,92 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto p-4">
|
||||
<h1 class="text-2xl font-bold mb-6 text-center">Liste des sorties</h1>
|
||||
<div class="container mx-auto p-6 bg-gray-50 rounded-lg shadow-lg mt-6">
|
||||
<h1 class="text-3xl font-bold text-center text-gray-800 mb-8">🎉 Liste des sorties</h1>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
<!-- Section de filtre -->
|
||||
<form method="GET" action="{{ path('home') }}" class="bg-white rounded-lg shadow-md p-4 mb-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Filtre par nom -->
|
||||
<div>
|
||||
<label for="search" class="block text-sm font-medium text-gray-700">🔍 Recherche</label>
|
||||
<input type="text" name="search" id="search" value="{{ app.request.query.get('search', '') }}"
|
||||
class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="Nom de la sortie">
|
||||
</div>
|
||||
|
||||
<!-- Filtre par site -->
|
||||
<div>
|
||||
<label for="site" class="block text-sm font-medium text-gray-700">📍 Site</label>
|
||||
<select name="site" id="site" class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
<option value="">Tous les sites</option>
|
||||
{% for site in sites %}
|
||||
<option value="{{ site.idSite }}" {% if site.idSite == app.request.query.get('site') %}selected{% endif %}>
|
||||
{{ site.nom }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filtre par date de début -->
|
||||
<div>
|
||||
<label for="start_date" class="block text-sm font-medium text-gray-700">📅 Date de début</label>
|
||||
<input type="date" name="start_date" id="start_date" value="{{ app.request.query.get('start_date', '') }}"
|
||||
class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
</div>
|
||||
|
||||
<!-- Filtre par date de fin -->
|
||||
<div>
|
||||
<label for="end_date" class="block text-sm font-medium text-gray-700">📅 Date de fin</label>
|
||||
<input type="date" name="end_date" id="end_date" value="{{ app.request.query.get('end_date', '') }}"
|
||||
class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cases à cocher -->
|
||||
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" name="organisateur" id="organisateur" value="1"
|
||||
{% if app.request.query.get('organisateur') %}checked{% endif %}
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="organisateur" class="ml-2 text-sm text-gray-700">Sorties dont je suis l'organisateur/trice</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" name="inscrit" id="inscrit" value="1"
|
||||
{% if app.request.query.get('inscrit') %}checked{% endif %}
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="inscrit" class="ml-2 text-sm text-gray-700">Sorties auxquelles je suis inscrit/e</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" name="non_inscrit" id="non_inscrit" value="1"
|
||||
{% if app.request.query.get('non_inscrit') %}checked{% endif %}
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="non_inscrit" class="ml-2 text-sm text-gray-700">Sorties auxquelles je ne suis pas inscrit/e</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" name="passees" id="passees" value="1"
|
||||
{% if app.request.query.get('passees') %}checked{% endif %}
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="passees" class="ml-2 text-sm text-gray-700">Sorties passées</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bouton soumettre -->
|
||||
<div class="mt-6 flex justify-end">
|
||||
<button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600">
|
||||
🔎 Filtrer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Affichage des sorties -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
|
||||
{% for sortie in sorties %}
|
||||
<div class="bg-white rounded-lg shadow-md p-4">
|
||||
<h2 class="text-lg font-semibold">{{ sortie.nom }}</h2>
|
||||
<h2 class="text-lg font-semibold text-gray-800">{{ sortie.nom }}</h2>
|
||||
<p class="mt-2 text-gray-600">
|
||||
<strong>Date de début :</strong> {{ sortie.dateHeureDebut|date('d/m/Y H:i') }}<br>
|
||||
<strong>Durée :</strong> {{ sortie.duree }} minutes<br>
|
||||
@@ -24,9 +104,11 @@
|
||||
<strong>Infos :</strong> {{ sortie.infosSortie }}
|
||||
</p>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Voir plus</a>
|
||||
<a href="{{ path('sortie_view', { id: sortie.idSortie }) }}" class="text-blue-500 hover:text-blue-700 font-medium">Voir plus</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-600 text-center col-span-6">Aucune sortie ne correspond à vos critères.</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -46,6 +46,10 @@
|
||||
.modern-button svg {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
#add-lieu-modal .bg-white {
|
||||
max-width: 80%;
|
||||
max-height: 90%;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
</head>
|
||||
@@ -58,6 +62,7 @@
|
||||
|
||||
{{ form_start(form, { 'attr': { 'class': 'space-y-6' } }) }}
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div class="form-group">
|
||||
@@ -137,24 +142,31 @@
|
||||
Annuler
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{ form_rest(form) }}
|
||||
{{ form_end(form, { 'render_rest': false }) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div id="add-lieu-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-4xl aspect-w-16 aspect-h-9">
|
||||
<div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl">
|
||||
<h2 class="text-xl font-bold mb-4">Ajouter un lieu</h2>
|
||||
<div id="map" class="w-full h-full mb-4 rounded-lg"></div>
|
||||
<div id="lieu-details" class="mb-4 text-gray-700"></div>
|
||||
|
||||
<div class="form-group mb-4">
|
||||
<label for="lieu-nom" class="block text-sm font-medium text-gray-700">Nom du lieu</label>
|
||||
<input type="text" id="lieu-nom" class="block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Nom du lieu" />
|
||||
<div id="lieu-nom-error" class="text-sm text-red-500 mt-1 hidden"></div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="w-full h-96 mb-4 rounded-lg"></div>
|
||||
|
||||
<div class="flex justify-end space-x-4">
|
||||
<button type="button" id="cancel-add-lieu" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300">Annuler</button>
|
||||
<button type="button" id="select-location" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">Sélectionner</button>
|
||||
<button type="button" id="save-lieu" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">Enregistrer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% block javascripts %}
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<script src="https://unpkg.com/leaflet-geosearch/dist/geosearch.umd.js"></script>
|
||||
|
||||
95
templates/sortie/edit.html.twig
Normal file
95
templates/sortie/edit.html.twig
Normal file
@@ -0,0 +1,95 @@
|
||||
{% extends 'main/base.html.twig' %}
|
||||
|
||||
{% block head %}
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Modifier la sortie</title>
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
{% endblock %}
|
||||
</head>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto p-8 bg-white rounded-lg shadow-lg mt-8">
|
||||
<h1 class="text-3xl font-extrabold text-center text-gray-800 mb-10">📝 Modifier la sortie</h1>
|
||||
|
||||
{{ form_start(form, { 'attr': { 'class': 'space-y-8' } }) }}
|
||||
|
||||
<!-- Informations principales -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<label for="nom" class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
🎉 Nom de la sortie
|
||||
</label>
|
||||
{{ form_row(form.nom, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
||||
</div>
|
||||
<div>
|
||||
<label for="dateHeureDebut" class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
🕒 Date et heure de début
|
||||
</label>
|
||||
{{ form_row(form.dateHeureDebut, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Durée et date limite d'inscription -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<label for="duree" class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
⏳ Durée (minutes)
|
||||
</label>
|
||||
{{ form_row(form.duree, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
||||
</div>
|
||||
<div>
|
||||
<label for="dateLimiteInscription" class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
📆 Date limite d'inscription
|
||||
</label>
|
||||
{{ form_row(form.dateLimiteInscription, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nombre maximum et informations complémentaires -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<label for="nbInscriptionsMax" class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
👥 Nombre maximum d'inscriptions
|
||||
</label>
|
||||
{{ form_row(form.nbInscriptionsMax, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
||||
</div>
|
||||
<div>
|
||||
<label for="infosSortie" class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
📝 Informations complémentaires
|
||||
</label>
|
||||
{{ form_row(form.infosSortie, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ville et lieu -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<label for="ville" class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
🏙️ Ville
|
||||
</label>
|
||||
{{ form_row(form.ville, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
||||
</div>
|
||||
<div>
|
||||
<label for="lieu" class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
📍 Lieu
|
||||
</label>
|
||||
{{ form_row(form.lieu, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
<div class="flex justify-end mt-8 space-x-4">
|
||||
<a href="{{ path('sortie_view', { id: sortie.getIdSortie() }) }}" class="px-6 py-3 bg-gray-500 text-white rounded-lg shadow-md hover:bg-gray-600">
|
||||
❌ Annuler
|
||||
</a>
|
||||
<button type="submit" class="px-6 py-3 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600">
|
||||
💾 Enregistrer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
133
templates/sortie/view.html.twig
Normal file
133
templates/sortie/view.html.twig
Normal file
@@ -0,0 +1,133 @@
|
||||
{% 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">
|
||||
<!-- Informations principales -->
|
||||
<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>
|
||||
|
||||
<!-- Description -->
|
||||
<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>
|
||||
|
||||
<!-- Participants -->
|
||||
<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>
|
||||
|
||||
<!-- Bouton S'inscrire -->
|
||||
{% 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>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Modifier (visible uniquement pour l'organisateur) -->
|
||||
{% 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 %}
|
||||
</div>
|
||||
|
||||
<!-- Carte -->
|
||||
<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.nom }}</li>
|
||||
<li><strong>✉️ Code postal :</strong> {{ sortie.lieu.ville.codePostal }}</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 %}
|
||||
Reference in New Issue
Block a user