templates/front/ssr13.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  2. {% set queryParams = app.request.query.all %}
  3. {% block title %}{{ parent() }} | {{ r.nom }} | {{ ssr.nom }}{% endblock %}
  4. {% block h1 %}
  5.     {{ ssr.nom }}
  6.     {% if app.user and is_granted('ROLE_MODO') %}
  7.         <a target="_blank" href="{{ path('app_admin_sous_rubrique_show', {'uuid': ssr.uuid}) }}"><i class="text-danger" data-feather="unlock"></i></a>
  8.     {% endif %}
  9. {% endblock %}
  10. {% block ariane %}
  11.     <nav class="navigateur" aria-label="breadcrumb">
  12.         <ol class="breadcrumb">
  13.             <li class="breadcrumb-item"><a href="{{ path("home") }}">{{ config.titreAccueil }}</a></li>
  14.             <li class="breadcrumb-item"><a href="{{ path('rubriques', {slug:r.slug })}}">{{ r.nom }}</a></li>
  15.             <li class="breadcrumb-item active" aria-current="page">{{ ssr.nom }}</li>
  16.         </ol>
  17.     </nav>
  18. {% endblock %}
  19. {% 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>
  27.     {% set options = [
  28.         {
  29.             'k' : '',
  30.             'v' : 'Trier par :'
  31.         },
  32.         {
  33.             'k' : 'titre-croissant',
  34.             'v' : 'Titre A-Z'
  35.         },
  36.         {
  37.             'k' : 'titre-decroissant',
  38.             'v' : 'Titre Z-A'
  39.         }
  40.     ] %}
  41.     <div class="col-2">
  42.         <select class="bg-white rounded form-control" id="ordonnance">
  43.             {% for option in options %}
  44.                 <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>
  45.             {% endfor %}
  46.         </select>
  47.     </div>
  48. {% endmacro %}
  49. {% block body %}
  50.     {% if ssr.phrase %}
  51.         <div class="my-4 mx-12 bg-white p-4 rounded ck">{{ ssr.phrase|raw }}</div>
  52.     {% endif %}
  53.     {% if ssr.srcImg %}
  54.         <div class="mx-12">
  55.             <img 
  56.                 src="{{ asset('images/sousrubrique/' ~ ssr.srcImg) }}" 
  57.                 {% if ssr.altImg %}
  58.                     alt="{{ ssr.altImg }}" 
  59.                 {% endif %}
  60.                 {% if ssr.titleImg %}
  61.                     title="{{ ssr.titleImg }}" 
  62.                 {% endif %}
  63.                 class="imgRatio rounded"
  64.             >
  65.         </div>
  66.     {% endif %}
  67.     {% if ssr.description %}
  68.         <div class="my-4 mx-12  bg-white p-4 rounded ck">{{ ssr.description|raw }}</div>
  69.     {% endif %}
  70.     {% if items %}
  71.         <div class="row justify-content-between mx-0 mt-4">
  72.             <div class="col-6"></div>
  73.             {{ _self.filter(queryParams) }}
  74.         </div>
  75.         <div id="zoneContent">
  76.             {% include "front/_ssr13_archives.html.twig" %}
  77.         </div>
  78.     {% endif %}
  79.     {# {% if items %} #}
  80.         {# <div class="text-end me-2">
  81.             <button type="button" class="btnTransparent text-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  82.                 {% include "svg/svg-filter.html.twig" %} ({{ count }})
  83.             </button>
  84.         </div> #}
  85.         {# {% if items %}
  86.             {{ _self.filter(queryParams) }}
  87.         {% endif %} #}
  88.         {# <div class="row justify-content-center mx-0">
  89.             {% for archive in items %}
  90.                 
  91.                 <div class="col-sm-12 col-md-12 col-lg-12  mt-4">
  92.                     <div class="p-4 bg-white rounded">
  93.                         <h3 class="text-center titreH3">{{ archive.nom }}</h3>
  94.                         {% if archive.description %}
  95.                             <div class="ck">
  96.                                 {{ archive.description|raw }}
  97.                             </div>   
  98.                         {% endif %}
  99.                     </div>
  100.                 </div>
  101.             
  102.             {% endfor %}
  103.         </div> #}
  104.         {# {% if items %}
  105.             <div id="zoneContent">
  106.                 {% include "front/_ssr13_archives.html.twig" %}
  107.             </div>
  108.         {% endif %} #}
  109.     {# {% else %}
  110.         <h4 class="text-center text-danger fst-italic my-4  mx-12 bg-white p-4 rounded">{{ config.messageDefault }}</h4> #}
  111.     {# {% endif %} #}
  112.     {# <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  113.         <div class="modal-dialog modal-lg">
  114.         {{form_start(form)}}
  115.             <div class="modal-content">
  116.                 <div class="modal-header">
  117.                     <h5 class="modal-title" id="exampleModalLabel">Filtres</h5>
  118.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  119.                 </div>
  120.                 <div class="modal-body">
  121.                     <div class="row align-items">
  122.                         <div class="col-md-6">
  123.                             {{form_row(form.recherche)}}
  124.                         </div>
  125.                         <div class="col-md-6">
  126.                             {{form_row(form.order)}}
  127.                         </div>
  128.                     </div>     
  129.                 </div>
  130.                 <div class="modal-footer">
  131.                     <a class="btn btn-dark" href="{{ path('ssrubriques', {slug: r.slug, slug2 : ssr.slug }) }}">RĂ©initialiser</a>
  132.                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
  133.                     <button type="submit" class="btn btn-primary">Rechercher</button>
  134.                 </div>
  135.             </div>
  136.             {{form_end(form)}}
  137.         </div>
  138.     </div> #}
  139. {% endblock %}
  140. {% block javascripts %}
  141.     <script src="{{ asset('js/cardShow.js') }}"></script>
  142.     <script>
  143.         $("#searchBtn").click(function() {
  144.             updateData();
  145.         });
  146.         $("#ordonnance").change(function() {
  147.             updateData();
  148.         });
  149.         $('body').on('click', '#resetBtn', function() {
  150.             $("#searchInput").val('');
  151.             $('#ordonnance').prop('selectedIndex', 0);
  152.             
  153.             updateData();
  154.         });
  155.         function updateData(){
  156.             var inputValue = $("#searchInput").val();
  157.             const selectElement = document.querySelector("#ordonnance");
  158.             const selectedValue = selectElement.value;
  159.             const Params = new URLSearchParams();
  160.             Params.append('page', "{{page}}");
  161.             if(inputValue){
  162.                 Params.append('recherche', inputValue);
  163.             }
  164.             if(selectedValue){
  165.                 Params.append('ordre', selectedValue);
  166.             }
  167.             
  168.             const Url = new URL(window.location.href);
  169.     
  170.             fetch(Url.pathname + "?" + Params.toString() + "&ajax=xxx", {
  171.                 headers: {
  172.                     "X-Requested-With": "XMLHttpRequest"
  173.                 }
  174.             }).then(response => {
  175.                 return response.json()
  176.             }).then(data => {
  177.                 
  178.               const content = document.querySelector("#zoneContent");
  179.               content.innerHTML = data.content;
  180.               history.pushState({}, null, Url.pathname + "?" + Params.toString());
  181.               var elements = document.querySelectorAll(".taille");
  182.               sizeCard(elements);
  183.               if ($('#resetBtn').length > 0) {
  184.                 $('#resetBtn').remove();
  185.               }
  186.               if (inputValue){
  187.                 $('#filterZone').each(function() {
  188.                     $(this).append('<i id="resetBtn" class="refresh fa fa-refresh text-danger"></i>');
  189.                 });
  190.               }
  191.             
  192.             }).catch(e => alert(e));
  193.         }
  194.         var elements = document.querySelectorAll(".taille");
  195.         sizeCard(elements);
  196.         $(window).on('resize', function() {
  197.             var elements = document.querySelectorAll(".taille");
  198.             sizeCard(elements);
  199.         });
  200.     </script>
  201.     
  202. {% endblock %}