templates/front/ssr22.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.             'k' : 'date-croissante',
  42.             'v' : 'Date croissante'
  43.         },
  44.         {
  45.             'k' : 'date-decroissante',
  46.             'v' : 'Date décroissante'
  47.         },
  48.     ] %}
  49.     <div class="col-2">
  50.         <select class="bg-white rounded form-control" id="ordonnance">
  51.             {% for option in options %}
  52.                 <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>
  53.             {% endfor %}
  54.         </select>
  55.     </div>
  56. {% endmacro %}
  57. {% block body %}
  58.     {% if ssr.phrase %}
  59.         <div class="my-4 mx-12 bg-white p-4 rounded ck">{{ ssr.phrase|raw }}</div>
  60.     {% endif %}
  61.     {% if ssr.srcImg %}
  62.         <div class="mx-12">
  63.             <img 
  64.                 src="{{ asset('images/sousrubrique/' ~ ssr.srcImg) }}" 
  65.                 {% if ssr.altImg %}
  66.                     alt="{{ ssr.altImg }}" 
  67.                 {% endif %}
  68.                 {% if ssr.titleImg %}
  69.                     title="{{ ssr.titleImg }}" 
  70.                 {% endif %}
  71.                 class="imgRatio rounded"
  72.             >
  73.         </div>
  74.     {% endif %}
  75.     {% if ssr.description %}
  76.         <div class="my-4 mx-12  bg-white p-4 rounded ck">{{ ssr.description|raw }}</div>
  77.     {% endif %}
  78.     {% if items %}
  79.         <div class="row justify-content-between mx-0 mt-4">
  80.             <div class="col-6"></div>
  81.             {{ _self.filter(queryParams) }}
  82.         </div>
  83.         <div id="zoneContent">
  84.             {% include "front/_ssr22_conferences.html.twig" %}
  85.         </div>
  86.         {# <div class="text-end me-2">
  87.             <button type="button" class="btnTransparent text-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  88.                 {% include "svg/svg-filter.html.twig" %} ({{ count }})
  89.             </button>
  90.         </div>
  91.         <div class="row justify-content-center mx-0">
  92.             {% for conference in conferences %}
  93.                 
  94.                 <div class="col-sm-12 col-md-12 col-lg-12  mt-4">
  95.                     <div class="p-4 bg-white rounded">
  96.                         <h3 class="text-center titreH3">{{ conference.titre }}</h3>
  97.                         {% if conference.description %}
  98.                             <div class="text-center ck">
  99.                                 {{ conference.description|raw }}
  100.                             </div>   
  101.                         {% endif %}
  102.                         {% if conference.lien %}
  103.                             <div class="text-end">
  104.                                 <a href="{{ conference.lien }}" target="_blank" class="lien">{{ conference.lien }}<a>
  105.                             </div> 
  106.                         {% endif %}
  107.                     </div>
  108.                 </div>
  109.             
  110.             {% endfor %}
  111.         </div> #}
  112.     {# {% else %}
  113.         <h4 class="text-center text-danger fst-italic my-4  mx-12 bg-white p-4 rounded">{{ config.messageDefault }}</h4> #}
  114.     {% endif %}
  115. {% endblock %}
  116. {% block javascripts %}
  117.     <script src="{{ asset('js/cardShow.js') }}"></script>
  118.     <script>
  119.         $("#searchBtn").click(function() {
  120.             updateData();
  121.         });
  122.         $("#ordonnance").change(function() {
  123.             updateData();
  124.         });
  125.         $('body').on('click', '#resetBtn', function() {
  126.             $("#searchInput").val('');
  127.             $('#ordonnance').prop('selectedIndex', 0);
  128.             
  129.             updateData();
  130.         });
  131.         function updateData(){
  132.             var inputValue = $("#searchInput").val();
  133.             const selectElement = document.querySelector("#ordonnance");
  134.             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;
  156.               history.pushState({}, null, Url.pathname + "?" + Params.toString());
  157.               var elements = document.querySelectorAll(".taille");
  158.               sizeCard(elements);
  159.               if ($('#resetBtn').length > 0) {
  160.                 $('#resetBtn').remove();
  161.               }
  162.               if (inputValue){
  163.                 $('#filterZone').each(function() {
  164.                     $(this).append('<i id="resetBtn" class="refresh fa fa-refresh text-danger"></i>');
  165.                 });
  166.               }
  167.             
  168.             }).catch(e => alert(e));
  169.         }
  170.         var elements = document.querySelectorAll(".taille");
  171.         sizeCard(elements);
  172.         $(window).on('resize', function() {
  173.             var elements = document.querySelectorAll(".taille");
  174.             sizeCard(elements);
  175.         });
  176.     </script>
  177.     
  178. {% endblock %}