templates/front/actualites.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  3. {% set queryParams = app.request.query.all %}
  5. {% block title %}{{ parent() }} | {{ rubrique.rubrique5.nom }}{% endblock %}
  7. {% block h1 %}{{ rubrique.rubrique5.nom }}{% endblock %}
  9. {% block ariane %}
  10.     <nav class="navigateur" aria-label="breadcrumb">
  11.         <ol class="breadcrumb">
  12.             <li class="breadcrumb-item"><a href="{{ path("home") }}">{{ config.titreAccueil }}</a></li>
  13.             <li class="breadcrumb-item active" aria-current="page">{{ rubrique.rubrique5.nom }}</li>
  14.         </ol>
  15.     </nav>
  16. {% endblock %}
  18. {% macro filter(queryParams) %}
  20.     <div class="col-4" id="filterZone">
  21.         <input id="searchInput" class="form-control bg-white rounded pl-40" placeholder="Rechercher" {% if queryParams is not empty and queryParams.recherche is defined %} value="{{queryParams.recherche}}" {% endif %}>
  22.         <i id="searchBtn" class="toggle-password-alone fa fa-search text-primary" ></i>
  23.         {% if queryParams is not empty and queryParams.recherche is defined %}
  24.             <i id="resetBtn" class="refresh fa fa-refresh text-danger"></i>
  25.         {% endif %}
  26.     </div>
  28.     {% set options = [
  29.         {
  30.             'k' : '',
  31.             'v' : 'Trier par :'
  32.         },
  33.         {
  34.             'k' : 'titre-croissant',
  35.             'v' : 'Titre A-Z'
  36.         },
  37.         {
  38.             'k' : 'titre-decroissant',
  39.             'v' : 'Titre Z-A'
  40.         },
  41.         {
  42.             'k' : 'date-croissante',
  43.             'v' : 'Date croissante'
  44.         },
  45.         {
  46.             'k' : 'date-decroissante',
  47.             'v' : 'Date décroissante'
  48.         },
  49.     ] %}
  51.     <div class="col-2">
  52.         <select class="bg-white rounded form-control" id="ordonnance">
  53.             {% for option in options %}
  54.                 <option {% if queryParams is not empty and queryParams.ordre is defined and queryParams.ordre == option.k %} selected {% endif %} value="{{option.k}}">{{option.v|raw}}</option>
  55.             {% endfor %}
  56.         </select>
  57.     </div>
  59. {% endmacro %}
  61. {% block body %}
  64.     {% if rubrique.rubrique5.srcImg %}
  65.         <div class="mx-12">
  66.             <img 
  67.                 src="{{ asset('images/rubrique/' ~ rubrique.rubrique5.srcImg) }}" 
  68.                 {% if rubrique.rubrique5.altImg %}
  69.                     alt="{{ rubrique.rubrique5.altImg }}" 
  70.                 {% endif %}
  71.                 {% if rubrique.rubrique5.titleImg %}
  72.                     title="{{ rubrique.rubrique5.titleImg }}" 
  73.                 {% endif %}
  75.                 class="imgRatio w-100 rounded"
  76.             >
  77.         </div>
  78.     {% endif %}
  81.     {% if rubrique.rubrique5.description %}
  82.         <div class="my-4 mx-12 ck bg-white p-4 rounded">{{ rubrique.rubrique5.description|raw }}</div>
  83.     {% endif %}
  87.     {# <div class="row justify-content-center mx-12"> #}
  88.     {% if droits %}
  90.         <div class="row justify-content-between mx-0 mt-4">
  91.             <div class="col-6"></div>
  92.             {{ _self.filter(queryParams) }}
  93.         </div>
  96.         <div id="zoneContent">
  97.             {% include "front/_actualite_data.html.twig" %}
  98.         </div>
  99.     {% endif %}
  105. {% endblock %}
  107. {% block javascripts %}
  109.     <script>
  112.         $("#searchBtn").click(function() {
  113.             updateData();
  114.         });
  116.         $("#ordonnance").change(function() {
  117.             updateData();
  118.         });
  120.         $('body').on('click', '#resetBtn', function() {
  121.             $("#searchInput").val('');
  122.             $('#ordonnance').prop('selectedIndex', 0);
  123.             
  124.             updateData();
  125.         });
  127.         function updateData(){
  128.             var inputValue = $("#searchInput").val();
  129.             const selectElement = document.querySelector("#ordonnance");
  130.             const selectedValue = selectElement.value;
  132.             const Params = new URLSearchParams();
  133.             Params.append('page', "{{page}}");
  134.             if(inputValue){
  135.                 Params.append('recherche', inputValue);
  136.             }
  137.             if(selectedValue){
  138.                 Params.append('ordre', selectedValue);
  139.             }
  140.             
  141.             const Url = new URL(window.location.href);
  142.     
  143.             fetch(Url.pathname + "?" + Params.toString() + "&ajax=xxx", {
  144.                 headers: {
  145.                     "X-Requested-With": "XMLHttpRequest"
  146.                 }
  147.             }).then(response => {
  148.                 return response.json()
  149.             }).then(data => {
  150.                 
  151.               const content = document.querySelector("#zoneContent");
  152.               content.innerHTML = data.content;
  154.               history.pushState({}, null, Url.pathname + "?" + Params.toString());
  156.  
  158.               if ($('#resetBtn').length > 0) {
  159.                 $('#resetBtn').remove();
  160.               }
  162.               if (inputValue){
  164.                 $('#filterZone').each(function() {
  165.                     $(this).append('<i id="resetBtn" class="refresh fa fa-refresh text-danger"></i>');
  166.                 });
  168.               }
  169.             
  171.             }).catch(e => alert(e));
  172.         }
  174.     </script>
  175.     
  176. {% endblock %}