Merge branch 'main' into Olivier

config/packages/nyholm_psr7.yaml

@@ -0,0 +1,11 @@
+services:
+    # Register nyholm/psr7 services for autowiring with PSR-17 (HTTP factories)
+    Psr\Http\Message\RequestFactoryInterface: '@nyholm.psr7.psr17_factory'
+    Psr\Http\Message\ResponseFactoryInterface: '@nyholm.psr7.psr17_factory'
+    Psr\Http\Message\ServerRequestFactoryInterface: '@nyholm.psr7.psr17_factory'
+    Psr\Http\Message\StreamFactoryInterface: '@nyholm.psr7.psr17_factory'
+    Psr\Http\Message\UploadedFileFactoryInterface: '@nyholm.psr7.psr17_factory'
+    Psr\Http\Message\UriFactoryInterface: '@nyholm.psr7.psr17_factory'
+
+    nyholm.psr7.psr17_factory:
+        class: Nyholm\Psr7\Factory\Psr17Factory

config/packages/vich_uploader.yaml

@@ -0,0 +1,10 @@
+vich_uploader:
+    db_driver: orm
+    mappings:
+        sortie_images:
+            uri_prefix: /img/sortie
+            upload_destination: '%kernel.project_dir%/public/img/sortie'
+            namer:
+                service: Vich\UploaderBundle\Naming\UniqidNamer
+            delete_on_update: true
+            delete_on_remove: true

migrations/Version20241127091836.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20241127091836 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE sortie ADD image VARCHAR(255) DEFAULT NULL, ADD updated_at DATETIME DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE sortie DROP image, DROP updated_at');
+    }
+}

src/Controller/MainController.php

@@ -13,8 +13,35 @@ use Symfony\Component\HttpFoundation\Request;
 
 class MainController extends AbstractController
 {
+
     #[Route('/', name: 'home')]
-    public function index(
+    public function home(SortieRepository $sortieRepository, TokenStorageInterface $tokenStorage,): Response
+    {
+        // Récupérer les 5 dernières sorties
+        $latestSorties = $sortieRepository->findBy([], ['dateHeureDebut' => 'DESC'], 5);
+        $token = $tokenStorage->getToken();
+        $userConnect = $token?->getUser();
+        $dateLimit = new \DateTime();
+        $dateLimit->modify('-30 days'); // Date limite = il y a 30 jours
+
+        $pastEvents = $sortieRepository->createQueryBuilder('s')
+            ->where('s.dateHeureDebut < :now')
+            ->andWhere('s.dateHeureDebut >= :dateLimit')
+            ->setParameter('now', new \DateTime())
+            ->setParameter('dateLimit', $dateLimit)
+            ->orderBy('s.dateHeureDebut', 'DESC')
+            ->getQuery()
+            ->getResult();
+
+        return $this->render('main/home.html.twig', [
+            'lastSorties' => $latestSorties,
+            'profile' => $userConnect,
+            'pastEvents' => $pastEvents,
+        ]);
+    }
+
+    #[Route('/dashboard', name: 'dashboard')]
+    public function dashboard(
         TokenStorageInterface $tokenStorage,
         SortieRepository $sortieRepository,
         Request $request

src/Controller/SortieController.php

@@ -11,16 +11,19 @@ use App\Repository\ParticipantRepository;
 use App\Repository\SortieRepository;
 use DateTime;
 use Doctrine\ORM\EntityManagerInterface;
+use OpenAI\Factory;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 use Symfony\Component\Security\Core\Authentication\Token\Storage\TokenStorageInterface;
+use OpenAI\Client;
 
 #[Route('/sortie', name: 'sortie_')]
 class SortieController extends AbstractController
 {
-    #[Route('/liste', name: 'list', methods: ['GET'])]
+    #[Route('/sortie/liste', name: 'list', methods: ['GET'])]
     public function index(
         TokenStorageInterface $tokenStorage,
         SortieRepository $sortieRepository,
@@ -39,6 +42,7 @@ class SortieController extends AbstractController
         $nonInscrit = $request->query->get('non_inscrit', false);
         $passees = $request->query->get('passees', false);
 
+        // Recherche par nom de sortie
         $sorties = $sortieRepository->findWithFilters($search, $siteId, $startDate, $endDate, $organisateur, $inscrit, $nonInscrit, $passees, $userConnect);
 
         return $this->render('sortie/list.html.twig', [
@@ -48,6 +52,7 @@ class SortieController extends AbstractController
         ]);
     }
 
+
     #[Route('/creates', name: 'create', methods: ['GET', 'POST'])]
     public function create(
         Request $request,
@@ -83,8 +88,14 @@ class SortieController extends AbstractController
                 return $this->redirectToRoute('sortie_create');
             }
 
+            // Gérer l'image (upload)
+            $imageFile = $form->get('imageFile')->getData();
+            if ($imageFile) {
+                $sortie->setImageFile($imageFile);
+            }
+
             // Définir les relations et l'état initial
-            $etat = $etatRepository->findOneBy(['libelle' => 'Ouverte']);
+            $etat = $etatRepository->findOneBy(['libelle' => 'Créée']);
             if (!$etat) {
                 $this->addFlash('error', 'Erreur interne : état introuvable.');
                 return $this->redirectToRoute('sortie_create');
@@ -105,6 +116,7 @@ class SortieController extends AbstractController
         return $this->render('sortie/create.html.twig', [
             'profile' => $userConnect,
             'form' => $form->createView(),
+            'sortie' => $sortie,
         ]);
     }
 
@@ -267,4 +279,5 @@ class SortieController extends AbstractController
         $this->addFlash('success', 'La sortie a été annulée avec succès.');
         return $this->redirectToRoute('home');
     }
+
 }

src/Entity/Sortie.php

@@ -7,9 +7,12 @@ use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\DBAL\Types\Types;
 use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\HttpFoundation\File\File;
 use Symfony\Component\Validator\Constraints as Assert;
+use Vich\UploaderBundle\Mapping\Annotation as Vich;
 
 #[ORM\Entity(repositoryClass: SortieRepository::class)]
+#[Vich\Uploadable]
 class Sortie
 {
     #[ORM\Id]
@@ -66,6 +69,15 @@ class Sortie
     )]
     private ?string $motifAnnul = null;
 
+    #[ORM\Column(type: 'string', length: 255, nullable: true)]
+    private ?string $image = null;
+
+    #[Vich\UploadableField(mapping: 'sortie_images', fileNameProperty: 'image')]
+    private ?File $imageFile = null;
+
+    #[ORM\Column(type: 'datetime', nullable: true)]
+    private ?\DateTimeInterface $updatedAt = null;
+
     public function __construct()
     {
         $this->participants = new ArrayCollection();
@@ -233,4 +245,44 @@ class Sortie
 
         return $this;
     }
+
+    public function getImage(): ?string
+    {
+        return $this->image;
+    }
+
+    public function setImage(?string $image): self
+    {
+        $this->image = $image;
+
+        return $this;
+    }
+
+    public function getImageFile(): ?File
+    {
+        return $this->imageFile;
+    }
+
+    public function setImageFile(?File $imageFile): self
+    {
+        $this->imageFile = $imageFile;
+
+        if ($imageFile) {
+            $this->updatedAt = new \DateTimeImmutable();
+        }
+
+        return $this;
+    }
+
+    public function getUpdatedAt(): ?\DateTimeInterface
+    {
+        return $this->updatedAt;
+    }
+
+    public function setUpdatedAt(?\DateTimeInterface $updatedAt): self
+    {
+        $this->updatedAt = $updatedAt;
+
+        return $this;
+    }
 }

src/Form/SortieType.php

@@ -9,6 +9,7 @@ use App\Entity\Site;
 use App\Entity\Sortie;
 use Symfony\Bridge\Doctrine\Form\Type\EntityType;
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\FileType;
 use Symfony\Component\Form\Extension\Core\Type\IntegerType;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\Extension\Core\Type\DateType;
@@ -16,6 +17,7 @@ use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Validator\Constraints\File;
 
 class SortieType extends AbstractType
 {
@@ -60,6 +62,18 @@ class SortieType extends AbstractType
                 'placeholder' => 'Sélectionnez un lieu',
                 'required' => true,
                 'attr' => ['id' => 'lieu-select'],
+            ])
+            ->add('imageFile', FileType::class, [
+                'label' => 'Image de la sortie',
+                'mapped' => false,
+                'required' => false,
+                'constraints' => [
+                    new File([
+                        'maxSize' => '5M',
+                        'mimeTypes' => ['image/jpeg', 'image/png'],
+                        'mimeTypesMessage' => 'Veuillez télécharger une image valide (JPEG ou PNG).',
+                    ])
+                ],
             ]);
     }
 

tailwind.config.js

@@ -6,6 +6,13 @@ module.exports = {
   ],
   theme: {
     extend: {},
+    screens: {
+      sm: '640px',  // Small screens start at 640px
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+    },
   },
   plugins: [],
 }

templates/main/base.html.twig

@@ -2,6 +2,7 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}&#128227; Sortie.com &#128266;{% endblock %}</title>
     <link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
     {% block stylesheets %}

templates/main/header.html.twig

@@ -2,61 +2,123 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% block stylesheets %}
         {{ encore_entry_link_tags('app') }}
+        <style>
+            #dropdown {
+                z-index: 10;
+            }
+        </style>
     {% endblock %}
 </head>
-
+<body class="bg-gray-100">
-<body>
+<nav class="flex justify-between items-center py-4 px-6 shadow-md bg-gradient-to-r from-[#2A8D57] via-[#008167] to-[#1B5667]">
-<div class="mx-auto">
+    <!-- Logo et Titre -->
-    <nav class="flex justify-between items-center py-4 shadow-md" style="background-color: #2a8d57;">
+    <a href="/" class="flex items-center space-x-3">
-        <!-- Titre + Logo -->
-        <a href="/">
-            <div class="flex items-center space-x-3 pl-4">
-                <h3 class="text-3xl text-white font-bold">Sortie</h3>
         <img src="{{ asset('img/logo.svg') }}" alt="Logo" class="h-10">
-            </div>
+        <h3 class="text-3xl text-white font-bold">Sortie</h3>
     </a>
+
+    <!-- Navigation principale -->
+    <ul class="hidden md:flex space-x-6 text-white font-medium">
+        <li>
+            <a href="{{ path('home') }}"
+               class="{% if app.request.attributes.get('_route') == 'home' %}font-bold underline{% endif %} hover:text-gray-200">
+                Accueil
+            </a>
+        </li>
+        <li>
+            <a href="{{ path('sortie_list') }}"
+               class="{% if app.request.attributes.get('_route') == 'sortie_list' %}font-bold underline{% endif %} hover:text-gray-200">
+                Liste des sorties
+            </a>
+        </li>
+        <li>
+            <a href="{{ path('participants') }}"
+               class="{% if app.request.attributes.get('_route') == 'participants' %}font-bold underline{% endif %} hover:text-gray-200">
+                Participants
+            </a>
+        </li>
+    </ul>
+
+    <!-- Profil utilisateur -->
     <div class="relative">
         {% if app.user %}
-                <div id="menu-button" class="w-full flex justify-center">
+            <button id="profile-menu" class="flex items-center space-x-2 focus:outline-none">
-                    <div class="relative">
                 <img src="{{ profile.fileName ? asset('upload/image/profile/' ~ profile.fileName) : asset('upload/image/profile/default.png') }}"
-                             class="w-16 h-16 rounded-full mr-4" />
+                     class="w-10 h-10 rounded-full border-2 border-white">
-                    </div>
+                <span class="text-white font-medium hidden md:inline">Profil</span>
-                </div>
-            {% else %}
-                <button style="height:64px; width: 64px;" id="menu-button" class="p-2 pr-4 text-gray-700 font-bold hover:text-blue-500 focus:outline-none">
-                    <img alt="burger-menu" src="{{ asset('img/burger-menu.svg') }}">
             </button>
+            <!-- Menu déroulant -->
+            <div id="dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white shadow-md rounded-lg">
+                <ul class="py-2 text-gray-700">
+                    <li><a href="{{ path('profile_view', {'uuid': app.user.idParticipant}) }}" class="block px-4 py-2 hover:bg-gray-100">Mon profil</a></li>
+                    <li><a href="{{ path('dashboard', {'uuid': app.user.idParticipant}) }}" class="block px-4 py-2 hover:bg-gray-100">Dashboard</a></li>
+                    {% if 'ROLE_ADMIN' in app.user.roles %}
+                        <li><a href="{{ path('app_admin') }}" class="block px-4 py-2 hover:bg-gray-100">Administration</a></li>
                     {% endif %}
-            <ul id="navbar" class="hidden absolute top-20 right-0 w-max bg-white shadow-md p-4 pl-2 flex-col space-y-4">
+                    <li><a href="{{ path('app_logout') }}" class="block px-4 py-2 hover:bg-gray-100">Se déconnecter</a></li>
-                {% if app.user %}
-                    <li><a href="{{ path('home') }}" class="text-gray-700 font-bold hover:text-blue-500">Accueil</a></li>
-                    <li><a href="{{ path('sortie_list') }}" class="text-gray-700 font-bold hover:text-blue-500">Liste des sorties</a></li>
-                    <li><a href="{{ path('participants') }}" class="text-gray-700 font-bold hover:text-blue-500">Participants</a></li>
-                    <li><a href="{{ path('profile_view', {'uuid': app.user.idParticipant}) }}" class="text-gray-700 font-bold hover:text-blue-500">Mon profile</a></li>
-                {% endif %}
-                {% if app.user and ('ROLE_ADMIN' in app.user.roles) %}
-                    <li><a href="{{ path('app_admin') }}" class="text-gray-700 font-bold hover:text-blue-500">Administration</a></li>
-                {% endif %}
-                {% if app.user %}
-                    <li><a href="{{ path('app_logout') }}" class="text-gray-700 font-bold hover:text-blue-500">Se déconnecter</a></li>
-                {% else %}
-                    <li><a href="{{ path('app_register') }}" class="text-gray-700 font-bold hover:text-blue-500">S'inscrire</a></li>
-                    <li><a href="{{ path('app_login') }}" class="text-gray-700 font-bold hover:text-blue-500">Se connecter</a></li>
-                {% endif %}
                 </ul>
             </div>
-    </nav>
+        {% else %}
+            <div class="space-x-4">
+                <a href="{{ path('app_login') }}" class="text-white hover:text-gray-200">Se connecter</a>
+                <a href="{{ path('app_register') }}" class="text-white hover:text-gray-200">S'inscrire</a>
+            </div>
+        {% endif %}
     </div>
-</body>
 
+    <!-- Menu mobile -->
+    <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+    </button>
+</nav>
+
+<!-- Menu mobile (hidden par défaut) -->
+<div id="mobile-menu" class="hidden bg-gradient-to-r from-[#2A8D57] via-[#008167] to-[#1B5667] text-white py-4 md:hidden">
+    <ul class="space-y-4 px-6">
+        <li><a href="{{ path('home') }}" class="block hover:text-gray-200">Accueil</a></li>
+        <li><a href="{{ path('sortie_list') }}" class="block hover:text-gray-200">Liste des sorties</a></li>
+        <li><a href="{{ path('participants') }}" class="block hover:text-gray-200">Participants</a></li>
+    </ul>
+</div>
+
+{% block content %}
+{% endblock %}
+
+<!-- Scripts -->
 <script>
-    document.getElementById('menu-button').addEventListener('click', function () {
+    // Toggle menu pour mobile
-        const navbar = document.getElementById('navbar');
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
-        navbar.classList.toggle('hidden');
+    const mobileMenu = document.getElementById('mobile-menu');
-    });
-</script>
 
+    mobileMenuButton.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+    });
+
+    // Toggle menu déroulant pour le profil
+    const profileMenuButton = document.getElementById('profile-menu');
+    const dropdown = document.getElementById('dropdown');
+
+    if (profileMenuButton) {
+        profileMenuButton.addEventListener('click', (event) => {
+            event.stopPropagation(); // Empêche la fermeture immédiate lorsque le bouton est cliqué
+            dropdown.classList.toggle('hidden');
+        });
+
+        // Fermer le menu lorsqu'on clique ailleurs
+        document.addEventListener('click', (event) => {
+            if (!dropdown.classList.contains('hidden')) {
+                const isClickInsideMenu = dropdown.contains(event.target) || profileMenuButton.contains(event.target);
+                if (!isClickInsideMenu) {
+                    dropdown.classList.add('hidden');
+                }
+            }
+        });
+    }
+</script>
+</body>
 </html>

templates/main/home.html.twig

@@ -0,0 +1,144 @@
+{% extends 'main/base.html.twig' %}
+
+{% block head %}
+    <head>
+        <meta charset="UTF-8">
+        {% block title %}&#128227; Sortie.com {{ profile.pseudo }} &#128266;{% endblock %}
+        {% block stylesheets %}
+            {{ encore_entry_link_tags('app') }}
+            <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
+            <style>
+                .swiper-container {
+                    width: 100%;
+                    height: 500px; /* Ajustez selon vos besoins */
+                }
+
+                .swiper-slide {
+                    position: relative;
+                }
+
+                .swiper-slide img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    border-radius: 1rem;
+                }
+
+                .swiper-slide .text-overlay {
+                    position: absolute;
+                    bottom: 20px;
+                    left: 20px;
+                    right: 20px;
+                    background: rgba(0, 0, 0, 0.5);
+                    color: white;
+                    padding: 20px;
+                    border-radius: 0.5rem;
+                    text-align: left;
+                }
+
+                .swiper-slide .text-overlay h3 {
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                    margin-bottom: 10px;
+                }
+
+                .swiper-slide .text-overlay p {
+                    font-size: 1rem;
+                    line-height: 1.5;
+                }
+
+                .swiper-button-next,
+                .swiper-button-prev {
+                    color: white;
+                }
+                .swiper-pagination-bullet {
+                    background: #22c55e; /* Vert Tailwind (green-500) */
+                }
+
+                .swiper-pagination-bullet-active {
+                    background: #16a34a; /* Vert plus foncé pour le point actif */
+                }
+            </style>
+        {% endblock %}
+    </head>
+{% endblock %}
+
+{% block content %}
+    <div class="container mx-auto py-10">
+        <!-- Section carrousel -->
+        <h2 class="text-4xl font-bold text-center mb-8">Dernières sorties</h2>
+        <div class="w-full relative">
+            <div class="swiper default-carousel swiper-container">
+                <div class="swiper-wrapper">
+                    {% if lastSorties is not empty %}
+                        {% for sortie in lastSorties %}
+                            <div class="swiper-slide">
+                                {% if sortie.image %}
+                                    <img src="{{ asset('img/sortie/' ~ sortie.image) }}" alt="{{ sortie.nom }}">
+                                {% else %}
+                                    <img src="{{ asset('img/default-placeholder.png') }}" alt="Image par défaut">
+                                {% endif %}
+                                <div class="text-overlay">
+                                    <a href="{{ path('sortie_view', {'id': sortie.idSortie}) }}"
+                                       class="text-2xl font-bold text-green-600 hover:text-green-700 transition-colors">
+                                        {{ sortie.nom }}
+                                    </a>
+                                    <p>Date : {{ sortie.dateHeureDebut|date('d/m/Y H:i') }}</p>
+                                    <p>{{ sortie.infosSortie|slice(0, 150) ~ '...' }}</p>
+                                </div>
+                            </div>
+
+                        {% endfor %}
+                    {% else %}
+                        <p class="text-center text-gray-500">Aucune sortie récente disponible.</p>
+                    {% endif %}
+                </div>
+                <div class="swiper-button-next"></div>
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-pagination"></div>
+            </div>
+        </div>
+
+        <!-- Section des événements terminés -->
+        <div class="mt-12">
+            <h2 class="text-3xl font-bold text-center mb-6">Événements terminés</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {% if pastEvents is not empty %}
+                    {% for event in pastEvents %}
+                        <a href="{{ path('sortie_view', {'id': event.idSortie}) }}"
+                           class="bg-gray-100 p-6 rounded-lg shadow-md hover:shadow-xl hover:scale-105 transition-transform duration-300 ease-in-out">
+                            {% if event.image %}
+                                <img src="{{ asset('img/sortie/' ~ event.image) }}" alt="{{ event.nom }}" class="w-full h-40 object-cover rounded-md mb-4">
+                            {% else %}
+                                <img src="{{ asset('img/default-placeholder.png') }}" alt="Image par défaut" class="w-full h-40 object-cover rounded-md mb-4">
+                            {% endif %}
+                            <h3 class="text-xl font-bold text-green-600">{{ event.nom }}</h3>
+                            <p class="text-gray-600 text-sm">Terminé le : {{ event.dateHeureDebut|date('d/m/Y H:i') }}</p>
+                            <p class="text-gray-500 mt-2 text-sm">{{ event.infosSortie|slice(0, 100) ~ '...' }}</p>
+                        </a>
+                    {% endfor %}
+                {% else %}
+                    <p class="text-center text-gray-500">Aucun événement terminé disponible.</p>
+                {% endif %}
+            </div>
+        </div>
+
+    <!-- Inclure les fichiers JavaScript Swiper -->
+    {% block javascripts %}
+        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+        <script>
+            var swiper = new Swiper(".default-carousel", {
+                loop: true,
+                pagination: {
+                    el: ".swiper-pagination",
+                    clickable: true,
+                },
+                navigation: {
+                    nextEl: ".swiper-button-next",
+                    prevEl: ".swiper-button-prev",
+                },
+            });
+        </script>
+    {% endblock %}
+{% endblock %}
+

templates/main/inscription.html.twig

@@ -1,4 +1,4 @@
-{% extends 'main/base.html.twig' %}
+{% extends 'base.html.twig' %}
 {% block head %}
     <head>
         <meta charset="UTF-8">

templates/sortie/create.html.twig

@@ -46,6 +46,7 @@
                 .modern-button svg {
                     margin-right: 0.5rem;
                 }
+
                 #add-lieu-modal .bg-white {
                     max-width: 80%;
                     max-height: 90%;
@@ -60,8 +61,7 @@
         <div class="w-full max-w-3xl bg-white p-8 rounded-lg shadow-lg">
             <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">Créer une sortie</h1>
 
-            {{ form_start(form, { 'attr': { 'class': 'space-y-6' } }) }}
+            {{ form_start(form, { 'attr': { 'class': 'space-y-6', 'enctype': 'multipart/form-data' } }) }}
-
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div class="space-y-4">
@@ -94,10 +94,29 @@
                         <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 class="form-group">
+                        <label for="sortie_imageFile">Image de la sortie</label>
+                        {{ form_widget(form.imageFile, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'onchange': 'previewImage(event)' } }) }}
+                        <small class="text-gray-500">Formats acceptés : JPG, PNG (max. 5 Mo).</small>
+
+                        {% if sortie and sortie.image %}
+                            <div class="mt-4">
+                                <img id="image-preview" src="{{ asset('img/sortie/' ~ sortie.image) }}" alt="Image prévisualisée" class="w-full h-auto rounded-lg border border-gray-300">
+                            </div>
+                        {% else %}
+                            <div class="mt-4">
+                                <img id="image-preview" src="" alt="Aucune image sélectionnée" class="w-full h-auto rounded-lg border border-gray-300 hidden">
+                            </div>
+                        {% endif %}
+
+                        <button type="button" id="generate-image" class="modern-button mt-2">
+                            Générer une image
+                        </button>
+                    </div>
                 </div>
 
                 <div class="space-y-4">
-
                     <div class="form-group">
                         <label for="sortie_lieu">Lieu</label>
                         <div class="flex items-center space-x-2">
@@ -131,7 +150,6 @@
                         <label class="block text-sm font-medium text-gray-700">Longitude :</label>
                         <span id="longitude-value" class="block w-full p-3 border border-gray-300 rounded-lg bg-gray-100">Renseigner avec le lieu</span>
                     </div>
-
                 </div>
             </div>
 
@@ -148,30 +166,29 @@
         </div>
     </div>
 
-    <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">
-            <h2 class="text-xl font-bold mb-4">Ajouter un lieu</h2>
-
-            <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="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>
         {{ encore_entry_script_tags('add-lieu') }}
         {{ encore_entry_script_tags('show-lieu') }}
+
+        <script>
+            function previewImage(event) {
+                const input = event.target;
+                const preview = document.getElementById('image-preview');
+
+                if (input.files && input.files[0]) {
+                    const reader = new FileReader();
+                    reader.onload = function (e) {
+                        preview.src = e.target.result;
+                        preview.classList.remove('hidden');
+                    };
+                    reader.readAsDataURL(input.files[0]);
+                } else {
+                    preview.src = '';
+                    preview.classList.add('hidden');
+                }
+            }
+        </script>
     {% endblock %}
 {% endblock %}

templates/sortie/list.html.twig

@@ -1,32 +1,20 @@
 {% 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 {
+                .pin-creee { background-color: #4CAF50; }
-                    background-color: #4CAF50;
+                .pin-ouverte { background-color: #2196F3; }
-                }
+                .pin-archivee { background-color: #FF9800; }
-                .pin-ouverte {
+                .pin-en-cours { background-color: #FFC107; }
-                    background-color: #2196F3;
+                .pin-terminee { background-color: #9E9E9E; }
-                }
+                .pin-annulee { background-color: #f44336; }
-                .pin-archivee {
+                .pin-default { background-color: #E0E0E0; }
-                    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;
@@ -43,15 +31,17 @@
     <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>
 
+        <!-- Formulaire de recherche -->
         <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">
+                <!-- Recherche -->
                 <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>
-
+                <!-- 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">
@@ -63,13 +53,13 @@
                         {% endfor %}
                     </select>
                 </div>
-
+                <!-- 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>
-
+                <!-- 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', '') }}"
@@ -77,6 +67,7 @@
                 </div>
             </div>
 
+            <!-- Options supplémentaires -->
             <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"
@@ -84,21 +75,18 @@
                            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 %}
@@ -107,6 +95,7 @@
                 </div>
             </div>
 
+            <!-- Bouton de filtrage -->
             <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
@@ -114,6 +103,7 @@
             </div>
         </form>
 
+        <!-- Liste des sorties -->
         <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">
@@ -126,24 +116,19 @@
                     <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' %}
+                                {% if sortie.etat.libelle == 'Créée' %} pin-creee
-                                    pin-creee
+                                {% elseif sortie.etat.libelle == 'Ouverte' %} pin-ouverte
-                                {% elseif sortie.etat.libelle == 'Ouverte' %}
+                                {% elseif sortie.etat.libelle == 'Archivée' %} pin-archivee
-                                    pin-ouverte
+                                {% elseif sortie.etat.libelle == 'En cours' %} pin-en-cours
-                                {% elseif sortie.etat.libelle == 'Archivée' %}
+                                {% elseif sortie.etat.libelle == 'Terminée' %} pin-terminee
-                                    pin-archivee
+                                {% elseif sortie.etat.libelle == 'Annulée' %} pin-annulee
-                                {% elseif sortie.etat.libelle == 'En cours' %}
+                                {% else %} pin-default {% endif %}
-                                    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>