templates/front/ssr31.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() }} | {{ r.nom }} | {{ ssr.nom }}{% endblock %}
  7. {% block h1 %}
  8.     {{ ssr.nom }}
  9.     {% if app.user and is_granted('ROLE_MODO') %}
  10.         <a target="_blank" href="{{ path('app_admin_sous_rubrique_show', {'uuid': ssr.uuid}) }}"><i class="text-danger" data-feather="unlock"></i></a>
  11.     {% endif %}
  12. {% endblock %}
  14. {% block ariane %}
  15.     <nav class="navigateur" aria-label="breadcrumb">
  16.         <ol class="breadcrumb">
  17.             <li class="breadcrumb-item"><a href="{{ path("home") }}">{{ config.titreAccueil }}</a></li>
  18.             <li class="breadcrumb-item"><a href="{{ path('rubriques', {slug:r.slug })}}">{{ r.nom }}</a></li>
  19.             <li class="breadcrumb-item active" aria-current="page">{{ ssr.nom }}</li>
  20.         </ol>
  21.     </nav>
  22. {% endblock %}
  24. {% macro filter(queryParams) %}
  26.     <div class="col-4" id="filterZone">
  27.         <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 %}>
  28.         <i id="searchBtn" class="toggle-password-alone fa fa-search text-primary" ></i>
  29.         {% if queryParams is not empty and queryParams.recherche is defined %}
  30.             <i id="resetBtn" class="refresh fa fa-refresh text-danger"></i>
  31.         {% endif %}
  32.     </div>
  34.     {% set options = [
  35.         {
  36.             'k' : '',
  37.             'v' : 'Trier par :'
  38.         },
  39.         {
  40.             'k' : 'titre-croissant',
  41.             'v' : 'Titre A-Z'
  42.         },
  43.         {
  44.             'k' : 'titre-decroissant',
  45.             'v' : 'Titre Z-A'
  46.         },
  47.         {
  48.             'k' : 'date-croissante',
  49.             'v' : 'Date croissante'
  50.         },
  51.         {
  52.             'k' : 'date-decroissante',
  53.             'v' : 'Date décroissante'
  54.         },
  55.     ] %}
  57.     <div class="col-2">
  58.         <select class="bg-white rounded form-control" id="ordonnance">
  59.             {% for option in options %}
  60.                 <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>
  61.             {% endfor %}
  62.         </select>
  63.     </div>
  65. {% endmacro %}
  67. {% block body %}
  69.     {% if ssr.phrase %}
  70.         <div class="my-4 mx-12 bg-white p-4 rounded ck">{{ ssr.phrase|raw }}</div>
  71.     {% endif %}
  73.     {% if ssr.srcImg %}
  74.         <div class="mx-12">
  75.             <img 
  76.                 src="{{ asset('images/sousrubrique/' ~ ssr.srcImg) }}" 
  77.                 {% if ssr.altImg %}
  78.                     alt="{{ ssr.altImg }}" 
  79.                 {% endif %}
  80.                 {% if ssr.titleImg %}
  81.                     title="{{ ssr.titleImg }}" 
  82.                 {% endif %}
  84.                 class="imgRatio rounded"
  85.             >
  86.         </div>
  87.     {% endif %}
  90.     {% if ssr.description %}
  91.         <div class="my-4 mx-12  bg-white p-4 rounded ck">{{ ssr.description|raw }}</div>
  92.     {% endif %}
  95.     {% if items %}
  97.         <div class="row justify-content-between mx-0 mt-4">
  98.             <div class="col-6"></div>
  99.             {{ _self.filter(queryParams) }}
  100.         </div>
  102.         <div id="zoneContent">
  103.             {% include "front/_ssr31_juridiques.html.twig" %}
  104.         </div>
  106.     {% endif %}
  108. {% endblock %}
  110. {% block javascripts %}
  112.     <script src="{{ asset('js/cardShow.js') }}"></script>
  113.     <script>
  115.         $("#searchBtn").click(function() {
  116.             updateData();
  117.         });
  119.         $("#ordonnance").change(function() {
  120.             updateData();
  121.         });
  123.         $('body').on('click', '#resetBtn', function() {
  124.             $("#searchInput").val('');
  125.             $('#ordonnance').prop('selectedIndex', 0);
  126.             
  127.             updateData();
  128.         });
  130.         function updateData(){
  131.             var inputValue = $("#searchInput").val();
  132.             const selectElement = document.querySelector("#ordonnance");
  133.             const selectedValue = selectElement.value;
  135.             const Params = new URLSearchParams();
  136.             Params.append('page', "{{page}}");
  137.             if(inputValue){
  138.                 Params.append('recherche', inputValue);
  139.             }
  140.             if(selectedValue){
  141.                 Params.append('ordre', selectedValue);
  142.             }
  143.             
  144.             const Url = new URL(window.location.href);
  145.     
  146.             fetch(Url.pathname + "?" + Params.toString() + "&ajax=xxx", {
  147.                 headers: {
  148.                     "X-Requested-With": "XMLHttpRequest"
  149.                 }
  150.             }).then(response => {
  151.                 return response.json()
  152.             }).then(data => {
  153.                 
  154.               const content = document.querySelector("#zoneContent");
  155.               content.innerHTML = data.content;
  157.               history.pushState({}, null, Url.pathname + "?" + Params.toString());
  159.               var elements = document.querySelectorAll(".taille");
  160.               sizeCard(elements);
  162.               if ($('#resetBtn').length > 0) {
  163.                 $('#resetBtn').remove();
  164.               }
  166.               if (inputValue){
  168.                 $('#filterZone').each(function() {
  169.                     $(this).append('<i id="resetBtn" class="refresh fa fa-refresh text-danger"></i>');
  170.                 });
  172.               }
  173.             
  175.             }).catch(e => alert(e));
  176.         }
  180.         var elements = document.querySelectorAll(".taille");
  181.         sizeCard(elements);
  183.         $(window).on('resize', function() {
  184.             var elements = document.querySelectorAll(".taille");
  185.             sizeCard(elements);
  186.         });
  187.     </script>
  188.     
  189. {% endblock %}