160 lines
8.8 KiB
Twig
160 lines
8.8 KiB
Twig
{% extends 'main/base.html.twig' %}
|
|
|
|
{% block head %}
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Liste des sorties</title>
|
|
{% block stylesheets %}
|
|
{{ encore_entry_link_tags('app') }}
|
|
<style>
|
|
.pin-creee { background-color: #4CAF50; }
|
|
.pin-ouverte { background-color: #2196F3; }
|
|
.pin-archivee { background-color: #FF9800; }
|
|
.pin-en-cours { background-color: #FFC107; }
|
|
.pin-terminee { background-color: #9E9E9E; }
|
|
.pin-annulee { background-color: #f44336; }
|
|
.pin-default { background-color: #E0E0E0; }
|
|
.pin {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
</head>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto p-4 sm:p-6 bg-gray-50 rounded-lg shadow-lg mt-4 sm:mt-6">
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-center text-gray-800 mb-6 sm:mb-8">🎉 Liste des sorties</h1>
|
|
|
|
<form method="GET" action="{{ path('home') }}" class="bg-white rounded-lg shadow-md p-4 mb-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<div class="mt-4 grid grid-cols-1 sm: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>
|
|
|
|
<div class="mt-6 flex justify-end">
|
|
<button type="submit" class="btnPrimary">
|
|
🔎 Filtrer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
|
|
<a href="/sortie/creates" class="hidden sm:block">
|
|
<div class="bg-white rounded-lg shadow-md p-4 text-center">
|
|
<img src="/img/add.svg" alt="Créer une sortie" class="w-24 h-24 mx-auto mb-4">
|
|
<h2 class="text-lg font-semibold">Créer une sortie</h2>
|
|
</div>
|
|
</a>
|
|
{% for sortie in sorties %}
|
|
<a href="{{ path('sortie_view', { id: sortie.idSortie }) }}">
|
|
<div class="bg-white rounded-lg shadow-md p-4">
|
|
<div class="flex items-center mb-2">
|
|
<div class="pin
|
|
{% if sortie.etat.libelle == 'Créée' %} pin-creee
|
|
{% elseif sortie.etat.libelle == 'Ouverte' %} pin-ouverte
|
|
{% elseif sortie.etat.libelle == 'Archivée' %} pin-archivee
|
|
{% elseif sortie.etat.libelle == 'En cours' %} pin-en-cours
|
|
{% elseif sortie.etat.libelle == 'Terminée' %} pin-terminee
|
|
{% elseif sortie.etat.libelle == 'Annulée' %} pin-annulee
|
|
{% else %} pin-default {% endif %}
|
|
"></div>
|
|
<h2 class="text-lg font-semibold text-gray-800">{{ sortie.nom }}</h2>
|
|
</div>
|
|
{% if sortie.image %}
|
|
<img src="{{ asset('img/sortie/' ~ sortie.image) }}" alt="{{ sortie.nom }}" class="w-full h-48 object-cover rounded-lg mb-4">
|
|
{% endif %}
|
|
<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>
|
|
<strong>Inscriptions max :</strong> {{ sortie.nbInscriptionsMax }}<br>
|
|
<strong>Infos :</strong> {{ sortie.infosSortie }}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
{% else %}
|
|
<p class="text-gray-600 text-center col-span-4">Aucune sortie ne correspond à vos critères.</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% block javascripts %}
|
|
{{ encore_entry_script_tags('app') }}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const inscritCheckbox = document.getElementById('inscrit');
|
|
const nonInscritCheckbox = document.getElementById('non_inscrit');
|
|
|
|
inscritCheckbox.addEventListener('change', () => {
|
|
if (inscritCheckbox.checked) {
|
|
nonInscritCheckbox.checked = false;
|
|
}
|
|
});
|
|
|
|
nonInscritCheckbox.addEventListener('change', () => {
|
|
if (nonInscritCheckbox.checked) {
|
|
inscritCheckbox.checked = false;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
{% endblock %}
|