templates/fronts/list_projets.html.twig line 1

  1. {% extends 'base_front.html.twig' %}
  3. {% block title %}Hello DefaultController!{% endblock %}
  5.     {% block body %}
  7.         <!-- Content ============================================= -->
  8.         <section id="content">
  9.             <div class="col-mt-30">
  12.                 <div class="research-structures-section py-5">
  13.                     <div class="container">
  14.                         <!-- Titre -->
  15.                         <h2 class="section-title text-center mb-5">Nos Projets</h2>
  17.                         <!-- Filtres améliorés -->
  18.                         <div class="filter-container mb-5">
  19.                             <form id="filterForm" class="filter-form">
  20.                                 <div class="row g-3">
  21.                                     <div class="col-md-6">
  22.                                         <div class="filter-group">
  23.                                             <label for="filterStructure" class="filter-label">Structures</label>
  24.                                             <select name="filterStructure" id="filterStructure" class="form-select filter-select">
  25.                                                 <option value="">Toutes les structures</option>
  26.                                                 {% for structure in structures %}
  27.                                                     <option value="{{ structure.id }}">{{ structure.nomLong }}</option>
  28.                                                 {% endfor %}
  29.                                             </select>
  30.                                         </div>
  31.                                     </div>
  32.                                     <div class="col-md-6">
  33.                                         <div class="filter-group">
  34.                                             <label for="filterNom" class="filter-label">Nom du projet</label>
  35.                                             <div class="input-with-icon">
  36.                                                 <input type="text" id="filterNom" class="form-control" placeholder="Rechercher par nom">
  37.                                                 <i class="fas fa-search"></i>
  38.                                             </div>
  39.                                         </div>
  40.                                     </div>
  41.                                 </div>
  42.                             </form>
  43.                         </div>
  45.                         <!-- Cartes des structures -->
  46.                         <div id="structureLaboContainer" class="row g-4">
  48.                             {% for projet in projets %}
  49.                                 <div class="col-lg-4 col-md-6 mb-4 projet-card" data-structure="{{ projet.structure.id }} "
  50.                                 data-projet="{{ projet.nom }}"
  51.                                 >
  52.                                 <a href="{{ path('app_projet_details', {'id': projet.id}) }}">
  54.                                     <div class="structure-card-inner">
  55.                                         <div class="card-image">
  56.                                             {% if projet.image is not null %}
  57.                                                 <img src="/upload/projets/{{ projet.image }}" alt="{{ projet.nom }}" class="img-fluid"
  58.                                                 style="width: 180px; height: 180px;">
  59.                                             {% else %}
  60.                                                 <img src="/front/icons/projet.png" alt="{{ projet.image }}" class="img-fluid"
  61.                                                 style="width: 180px; height: 180px;">
  62.                                             {% endif %}
  63.                                         </div>
  64.                                         <div class="card-content">
  65.                                             <h3 class="card-title">{{ projet.nom }}</h3>
  66.                                             <div class="card-footer">
  67.                                                 <span class="institution">{{ projet.structure ? projet.structure.nomLong : '' }}</span>
  68.                                                 <span class="view-more">Voir plus <i class="fas fa-arrow-right"></i></span>
  69.                                             </div>
  70.                                         </div>
  71.                                     </div>
  72.                                 </a>
  73.                             </div>
  74.                         {% endfor %}
  77.                         <!-- ... -->
  78.                     </div>
  80.                 </div>
  81.             </div>
  84.         </div>
  85.     </section>
  86.     <!-- #content end -->
  88.     <script>
  89.         document.addEventListener('DOMContentLoaded', function() {
  90.             const filterForm = document.getElementById('filterForm');
  91.             const structureCards = document.querySelectorAll('.projet-card');
  93.             function filterStructures() {
  94.                 const filterStructure = document.getElementById('filterStructure').value;
  95.                  const filterNom = document.getElementById('filterNom').value.toLowerCase();
  97.                 structureCards.forEach(card => {
  98.                     const structure = card.getAttribute('data-structure');
  99.                     const nom = card.getAttribute('data-projet').toLowerCase();
  101.                     let isVisible = true;
  103.                     if (filterStructure && structure !== filterStructure) {
  104.                         isVisible = false;
  105.                     }
  106.                     if (filterNom && !nom.includes(filterNom)) {
  107.                     isVisible = false;
  108.                 }
  110.                     card.style.display = isVisible ? 'block' : 'none';
  111.                 });
  112.             }
  114.             filterForm.addEventListener('change', filterStructures);
  115.         });
  116.     </script>
  119. {% endblock %}