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