templates/home/cours/filter/index.html.twig line 1

Open in your IDE?
  1. {% extends 'home/homeLayout.html.twig' %}
  2. {% import 'home/components/cours/coursGrid.html.twig' as courGrid %}
  3. {% import 'home/components/cours/coursListItem.html.twig' as courList %}
  4. {% block stylesheets %}
  5.     {{ parent() }}
  6.     <link rel="stylesheet" href="{{ asset('css/filter_page.css') }}?v={{ random() }}">
  7. {% endblock %}
  8. {% block body %}
  9.     <div class="filter_page">
  10.         <div class="filter_header" style="background-image: url({{ asset('images/filter/header.png')}})">
  11.             <div class="seach_bar_holder">
  12.              <input type="text" class="form-control search_bar" value="{{ searchTerm }}"   onkeydown="if (event.keyCode == 13) { event.preventDefault(); search(this.value); }">
  13.             </div>
  14.         </div>
  15.         <div class="content">
  16.             <div class="container">
  17.                 <div class="row">
  18.                     <div class="col-md-3" style="padding-right: 0;">
  19.                         <div class="filter_side_bar">
  20.                             <h3>Categories</h3>
  21.                             <ul class="categories">
  22.                                 {% for category in getCategories() %}
  23.                                     <li>
  24.                                         <div>
  25.                                             <span class="cat_title">
  26.                                                 <div>{{ category.nom }}</div>
  27.                                             </span>
  28.                                         </div>
  29.                                         <ul class="souCategory">
  30.                                         
  31.                                         {% for subcategoryArray in getSubcategories(category) %}
  32.                                             <li >
  33.                                                 <div>
  34.                                                     <span class="subCat_title">
  35.                                                         <a href="{{ path('home_cours_filter_index', {'subcategory': subcategoryArray.subcategory_id}) }}">{{ subcategoryArray.subcategory }}</a>
  36.                                                     </span>
  37.                                                 </div>
  38.                                                 {# 
  39.                                                                                                     
  40.                                                                                                 #}
  41.                                             </li>
  42.                                         {% endfor %}</ul>
  43.                                     </li>
  44.                                 {% endfor %}
  45.                             </ul>
  46.                         </div>
  47.                     </div>
  48.                     <div class="col-md-9" style="padding-left: 0;">
  49.                         <div>
  50.                             <div class="top_filter">
  51.                                 <div class=" sort_by">
  52.                                     <label class="form-label">Par Page</label>
  53.                                     <select class="form-select" onchange="changeLimit(this.value)">
  54.             <option {% if limit == 3 %}selected{% endif %} value="3">3</option>
  55.             <option {% if limit == 9 %}selected{% endif %} value="9">9</option>
  56.             <option {% if limit == 15 %}selected{% endif %} value="15">15</option>
  57.         </select>
  58.                                 </div>
  59.                                 <div class="display_mode">
  60.                                     <a href="#" onclick="changeDisplay('grid');"  class="single  {% if displayMode == 'grid' %}selected{% endif %}">
  61.                                         <i class="fa-solid fa-grip"></i>
  62.                                     </a>
  63.                                     <a href="#" onclick="changeDisplay('list');" class="single  {% if displayMode == 'list' %}selected{% endif %}">
  64.                                         <i class="fa-solid fa-list"></i>
  65.                                     </a>
  66.                                 </div>
  67.                             </div>
  68.                         </div>
  69.                         <div class="container-fluid">
  70.                             <div class="row">
  71.                                 {% for cours in data %}
  72.                                      {% if displayMode =="list" %}
  73.                                         {{ courList.displayCourse(cours) }}
  74.                                  
  75.                                      {% else %}
  76.                                         {{ courGrid.displayCourse(cours) }}
  77.                                          
  78.                                      {% endif %}
  79.                                     
  80.                                         
  81.                                 {% endfor %}
  82.                             </div>
  83.                         </div>
  84.                         <div class="pagination">
  85.                             <nav aria-label="Page navigation">
  86.                                 <ul class="pagination">
  87.                                     {% if currentPage > 1 %}
  88.                                         <li class="page-item">
  89.                                             <a class="page-link" href="{{ path('home_cours_filter_index', {'page': currentPage - 1}) }}">Précédent</a>
  90.                                         </li>
  91.                                     {% endif %}
  92.                                     {% for page in 1..totalPages %}
  93.                                         <li class="page-item {% if page == currentPage %}active{% endif %}">
  94.                                             <a class="page-link" href="{{ path('home_cours_filter_index', {'page': page}) }}">{{ page }}</a>
  95.                                         </li>
  96.                                     {% endfor %}
  97.                                     {% if currentPage < totalPages %}
  98.                                         <li class="page-item">
  99.                                             <a class="page-link" href="{{ path('home_cours_filter_index', {'page': currentPage + 1}) }}">Suivant</a>
  100.                                         </li>
  101.                                     {% endif %}
  102.                                 </ul>
  103.                             </nav>
  104.                         </div>
  105.                     </div>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  110. {% endblock %}
  111. {% block scripts %}
  112.     {{ parent() }}
  113.     <script>
  114.      function changeDisplay(value) {
  115.         var urlParams = new URLSearchParams(window.location.search);
  116.         urlParams.set('display_mode', value);
  117.         window.location.search = urlParams.toString();
  118.     }
  119.     
  120.      function search(value) {
  121.         var urlParams = new URLSearchParams(window.location.search);
  122.         urlParams.set('search', value);
  123.         window.location.search = urlParams.toString();
  124.     }
  125.     $(document).ready(function() {
  126.         $('.form-select').change(function() {
  127.             var limit = $(this).val();
  128.             var urlParams = new URLSearchParams(window.location.search);
  129.         urlParams.set('limit', limit);
  130.         window.location.search = urlParams.toString();
  131.         });
  132.     });
  133. </script>
  134. {% endblock %}