templates/trajet/chercherResultats.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% import 'partials/avatar.html.twig' as avatar %}
  4. {% block title %}Résultats de recherche
  5. {% endblock %}
  7. {% block stylesheets %}{% endblock %}
  9. {% block body %}
  10. <div class="container py-5">
  11.     <div class="row">
  12.         {# Bouton pour mobile #}
  13.         <div class="d-lg-none text-center shadow-sm rounded py-1 mb-3">
  14.             <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="offcanvas"
  15.                 data-bs-target="#offcanvasRecherche">
  16.                 <strong>{{ depart }}
  17.                     →
  18.                     {{ arrivee }}
  19.                     |
  20.                     {{ dateTrajetFr }}</strong>
  21.                 <span class="text-end">
  22.                     <i class="bi bi-pencil"></i>
  23.                 </span>
  24.             </button>
  25.         </div>
  27.         {# === FORMULAIRE INLINE POUR DESKTOP === #}
  28.         <form method="GET" id="form-recherche" action="{{ path('app_chercher') }}"
  29.             class="d-none d-lg-flex gap-2 align-items-center bg-white p-3 shadow-sm rounded mb-4">
  31.             <div class="input-group">
  32.                 <span class="input-group-text text-vert">
  33.                     <i class="bi bi-geo-fill"></i>
  34.                 </span>
  35.                 <div class="form-floating">
  36.                     <select id="select_departureD" name="select_departure" class="form-select villages"
  37.                         data-current="{{ depart }}" required>
  38.                         <option value="{{ depart }}" selected>{{ depart }}</option>
  39.                     </select>
  40.                     <label for="select_departureD">Village de départ</label>
  41.                 </div>
  42.             </div>
  44.             <div class="input-group">
  45.                 <span class="input-group-text text-vert">
  46.                     <i class="bi bi-flag-fill"></i>
  47.                 </span>
  48.                 <div class="form-floating">
  49.                     <select id="select_arrivalD" name="select_arrival" class="form-select villages"
  50.                         data-current="{{ arrivee }}" required>
  51.                         <option value="{{ arrivee }}" selected>{{ arrivee }}</option>
  52.                     </select>
  53.                     <label for="select_arrivalD">Village d'arrivée</label>
  54.                 </div>
  55.             </div>
  57.             <div class="input-group">
  58.                 <span class="input-group-text text-vert">
  59.                     <i class="bi bi-calendar2-event-fill"></i>
  60.                 </span>
  61.                 <div class="form-floating">
  62.                     <input type="text" id="date_trajetD" class="form-control dateDepart" name="date_trajet"
  63.                         value="{{ dateTrajet }}" placeholder="Date du trajet" required>
  64.                     <label for="date_trajetD">Date du trajet</label>
  65.                 </div>
  66.             </div>
  68.             <div class="input-group">
  69.                 <span class="input-group-text text-vert">
  70.                     <i class="bi bi-person-fill"></i>
  71.                 </span>
  72.                 <div class="form-floating">
  73.                     <select class="form-select" id="floatingSelectGridD" name="places_min">
  74.                         {% for i in 1..8 %}
  75.                         <option value="{{ i }}" {% if i==places %} selected {% endif %}>{{ i }}</option>
  76.                         {% endfor %}
  77.                     </select>
  78.                     <label for="floatingSelectGridD">Passager(s)</label>
  79.                 </div>
  80.             </div>
  82.             <button type="submit" class="btn btn-orange btn-lg">Rechercher</button>
  83.         </form>
  85.         {# === OFFCANVAS POUR MOBILE === #}
  86.         <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasRecherche" style="height: 60vh;">
  87.             <div class="offcanvas-header">
  88.                 <h5 class="offcanvas-title">Modifier la recherche</h5>
  89.                 <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  90.             </div>
  91.             <div class="offcanvas-body">
  92.                 <form method="GET" action="{{ path('app_chercher') }}" class="d-flex flex-column gap-3">
  94.                     <div class="input-group">
  95.                         <span class="input-group-text text-vert">
  96.                             <i class="bi bi-geo-fill"></i>
  97.                         </span>
  98.                         <div class="form-floating">
  99.                             <select id="select_departure" name="select_departure" class="form-select villages"
  100.                                 data-current="{{ depart }}" required>
  101.                                 <option value="{{ depart }}" selected>{{ depart }}</option>
  102.                             </select>
  103.                             <label for="select_departure">Village de départ</label>
  104.                         </div>
  105.                     </div>
  107.                     <div class="input-group">
  108.                         <span class="input-group-text text-vert">
  109.                             <i class="bi bi-flag-fill"></i>
  110.                         </span>
  111.                         <div class="form-floating">
  112.                             <select id="select_arrival" name="select_arrival" class="form-select villages"
  113.                                 data-current="{{ arrivee }}" required>
  114.                                 <option value="{{ arrivee }}" selected>{{ arrivee }}</option>
  115.                             </select>
  116.                             <label for="select_arrival">Village d'arrivée</label>
  117.                         </div>
  118.                     </div>
  120.                     <div class="input-group">
  121.                         <span class="input-group-text text-vert">
  122.                             <i class="bi bi-calendar2-event-fill"></i>
  123.                         </span>
  124.                         <div class="form-floating">
  125.                             <input type="text" id="date_trajet" class="form-control dateDepart" name="date_trajet"
  126.                                 value="{{ dateTrajet }}" placeholder="Date du trajet" required>
  127.                             <label for="date_trajet">Date du trajet</label>
  128.                         </div>
  129.                     </div>
  131.                     <div class="input-group">
  132.                         <span class="input-group-text text-vert">
  133.                             <i class="bi bi-person-fill"></i>
  134.                         </span>
  135.                         <div class="form-floating">
  136.                             <select class="form-select" id="floatingSelectGrid" name="places_min">
  137.                                 {% for i in 1..8 %}
  138.                                 <option value="{{ i }}" {% if i==places %} selected {% endif %}>{{ i }}</option>
  139.                                 {% endfor %}
  140.                             </select>
  141.                             <label for="floatingSelectGrid">Passager(s)</label>
  142.                         </div>
  143.                     </div>
  145.                     <button type="submit" class="btn btn-orange w-100">Rechercher</button>
  146.                 </form>
  147.             </div>
  148.         </div>
  151.     </div>
  152.     <div class="row">
  153.         {# Colonne gauche : Filtres (visible seulement en desktop) #}
  154.         <div class="col-md-3 d-none d-md-block bg-light border-end" style="min-height: 70vh; position: sticky; top: 0;">
  155.             <div class="p-3">
  156.                 <h5 class="fw-bold">Filtres</h5>
  157.                 <p class="text-muted">Aucun filtre disponible</p>
  158.             </div>
  159.         </div>
  161.         {# Colonne droite : Résultats #}
  162.         <div class="col-md-9 col-12">
  163.             <div class="d-md-none p-3 text-end">
  164.                 <button id="filter-btn" class="btn btn-outline-secondary btn-sm">
  165.                     <i class="bi bi-funnel"></i>
  166.                     Filtrer
  167.                 </button>
  168.             </div>
  170.             <div class="p-3">
  171.                 {# Les onglets #}
  172.                 <ul class="nav nav-tabs mb-4" id="resultTabs" role="tablist">
  173.                     <li class="nav-item" role="presentation">
  174.                         <button class="nav-link active fw-bold" id="trajets-exacts-tab" data-bs-toggle="tab"
  175.                             data-bs-target="#trajets-exacts" type="button" role="tab">
  176.                             <i class="bi bi-car-front"></i> Résultats • {{ trajets|length }}
  177.                         </button>
  178.                     </li>
  179.                     <li class="nav-item" role="presentation">
  180.                         <button class="nav-link fw-bold" id="trajets-autres-tab" data-bs-toggle="tab"
  181.                             data-bs-target="#trajets-autres" type="button" role="tab">
  182.                             <i class="bi bi-car-front"></i> Autres départs • {{ autresTrajets|length }}
  183.                         </button>
  184.                     </li>
  185.                 </ul>
  189.                 <div class="tab-content">
  190.                     <div class="tab-pane fade show active" id="trajets-exacts" role="tabpanel"
  191.                         aria-labelledby="trajets-exacts-tab">
  192.                         <p>
  193.                             <small>Résultat(s) pour
  194.                                 <b>{{ depart }}
  195.                                     →
  196.                                     {{ arrivee }}</b>
  197.                             </small>
  198.                             <small class="small-sm">
  199.                                 | le
  200.                                 {{ dateTrajetFr }}</small>
  201.                         </p>
  202.                         {# Bloc déjà existant : résultats exacts #}
  203.                         {% include 'partials/_resultats_trajets.html.twig' with { trajets: trajets, depart: depart,
  204.                         arrivee: arrivee, places: places } %}
  205.                     </div>
  207.                     <div class="tab-pane fade" id="trajets-autres" role="tabpanel" aria-labelledby="trajets-autres-tab">
  208.                         <p>
  209.                             <small>Résultat(s) pour
  210.                                 <b> Autres départs
  211.                                     →
  212.                                     {{ arrivee }}</b>
  213.                             </small>
  214.                             <small class="small-sm">
  215.                                 | le
  216.                                 {{ dateTrajetFr }}</small>
  217.                         </p>
  218.                         {# On réutilise temporairement les mêmes trajets pour tester visuellement #}
  219.                         {% include 'partials/_resultats_trajets.html.twig' with { trajets: autresTrajets, depart:
  220.                         depart, arrivee: arrivee, places: places } %}
  221.                     </div>
  222.                 </div>
  225.             </div>
  226.         </div>
  227.     </div>
  228. </div>
  230. {% endblock %}
  231. {% block javascripts %}
  232. <script>
  233.     document.addEventListener('DOMContentLoaded', function () {
  234.         document.querySelectorAll('.trajet-passe').forEach(function (el) {
  235.             el.addEventListener('click', function (e) {
  236.                 e.preventDefault();
  237.                 Swal.fire({
  238.                     icon: 'info',
  239.                     title: 'Trajet déjà commencé',
  240.                     text: 'Ce trajet a déjà débuté aujourd\'hui et ne peut plus être réservé.',
  241.                     confirmButtonText: 'Ok',
  242.                     confirmButtonColor: '#ff6f00'
  243.                 });
  244.             });
  245.         });
  246.     });
  247. </script>
  249. <script>
  250.     document.getElementById('filter-btn').addEventListener('click', function () {
  251.         Swal.fire({
  252.             icon: 'info',
  253.             title: 'Aucun filtre disponible',
  254.             text: 'Les filtres seront bientôt disponibles.',
  255.             confirmButtonText: 'Ok',
  256.             confirmButtonColor: '#ff6f00'
  257.         });
  258.     });
  259. </script>
  262. {% endblock %}