templates/model/collection.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Collection complète{% endblock %}
  5. {% block body %}
  6.     <div style="width: 100%;">
  7.         <section class='topPageCollection'>
  8. {#                <div class="firstPart">#}
  9. {#                    <h3 class="lists-title">Ecusson.</h3>#}
  10. {#                </div>#}
  11.                 <div class="subtitleCollection">
  12.                     <span class="mt-5">Le site est en cours de remplissage.<br>
  13.                     À venir, plus de 8 000 écussons. Merci de prendre contact pour plus d'informations.
  14.                     </span>
  15.                     <p>Nombre total d'écussons en base : {{ count }}</p>
  16.                 </div>
  18.             {{ form_start(form2, {'method': 'GET'}) }}
  19.                 <span class="searchPart">
  20.                     <i class="fa-solid fa-magnifying-glass" style="color: #ffffff;"></i>
  21.                         {{ form_row(form2.search) }}
  22.                     <button type="submit" class="btn btn-grad rounded-pill">Rechercher</button>
  23.                 </span>
  24.             {{ form_end(form2) }}
  25.             <div class="converter-list">
  26.                 <button id="list-button">
  27.                     <i class="fa-solid fa-list"></i>
  28.                 </button>
  29.                 <button id="grid-button">
  30.                     <i class="fa-solid fa-table-cells-large"></i>
  31.                 </button>
  32.             </div>
  33.             {{ form_start(form, {'method': 'GET'}) }}
  34.                 <div class="filterdiv">
  35.                         {{ form_row(form.categorie) }}
  36.                         {{ form_row(form.sousCategorie) }}
  37.                         {{ form_row(form.p) }}
  38.                         {{ form_row(form.tags) }}
  39.                     <button type="submit" class="btn btn-grad rounded-pill">Filtrer</button>
  40.                 </div>
  41.             {{ form_end(form) }}
  42.         </section>
  44.         <section>
  45.             <div class="results-filter">
  46.                 <span>{{ pageCount }} écussons pour cette recherche</span>
  47.             </div>
  48.             <div class="row block grid-collection" id="content-collection">
  49.                 {% for model in models %}
  50.                     <div class="card">{% if model.photos is empty %}
  51.                             <img src="/images/logo_ecusson_bleu_grand_format.png" class="img-fluid rounded- " alt="logo_ecusson_bleu_grand_format">
  52.                         {% else %}
  53.                             <img src="{{ model.photos[0].chemin }}" class="img-fluid rounded- " alt="">
  54.                         {% endif %}
  55.                         <h5>{{ model.titre }}</h5>
  56.                         {% if 'ROLE_ADMIN' in app.user.roles %}
  57.                             <span class="qty">x{{ model.nb > 10 ? model.nb : '0'~model.nb }}</span>
  58.                         {% else %}
  59.                             <br>
  60.                         {% endif %}
  61.                         <div class="card-body">
  62.                             <ul>
  63.                                 <li class="title-category">Catégories :</li>
  64.                             {% for categorie in model.categories %}
  65.                                 <li>
  66.                                     {{ categorie.nom }}
  67.                                 </li>
  68.                             {% endfor %}
  69.                             </ul>
  70.                         </div>
  71.                         <div class="bottom-card">
  72.                             <a href="{{ path('app_model_show', {'id':model.id}) }}" class="link" >En savoir plus</a>
  73.                         </div>
  74.                     </div>
  75.                 {% endfor %}
  76.             </div>
  77.             {{ knp_pagination_render(models) }}
  78.         </div>
  79.     </section>
  81. {% endblock %}
  83. {% block javascripts %}
  84.     {{ encore_entry_script_tags('app') }}
  85. {#    <script type="text/javascript">#}
  87. {#        let listButton = document.getElementById('list-button')#}
  88. {#        let gridButton = document.getElementById('grid-button')#}
  89. {#        let contentCollection = document.getElementById('content-collection')#}
  91. {#        gridButton.classList.add('active')#}
  93. {#        listButton.addEventListener('click', () => {#}
  95. {#                contentCollection.classList.remove('grid-collection')#}
  96. {#                contentCollection.classList.add('list-collection')#}
  97. {#                listButton.classList.add('active')#}
  98. {#                gridButton.classList.remove('active')#}
  99. {#        })#}
  101. {#        gridButton.addEventListener('click', () => {#}
  103. {#            contentCollection.classList.remove('list-collection');#}
  104. {#            contentCollection.classList.add('grid-collection');#}
  105. {#            gridButton.classList.add('active');#}
  106. {#            listButton.classList.remove('active')#}
  107. {#        })#}
  109. {#        $('.select2').select2();#}
  111. {#    </script>#}
  112.     <script type="text/javascript">
  113.         // Fonction pour ajouter ou mettre à jour un paramètre d'URL
  114.         function updateURLParameter(url, param, value) {
  115.             var re = new RegExp("([?&])" + param + "=.*?(&|$)", "i");
  116.             var separator = url.indexOf('?') !== -1 ? "&" : "?";
  117.             if (url.match(re)) {
  118.                 return url.replace(re, '$1' + param + "=" + value + '$2');
  119.             } else {
  120.                 return url + separator + param + "=" + value;
  121.             }
  122.         }
  124.         let listButton = document.getElementById('list-button')
  125.         let gridButton = document.getElementById('grid-button')
  126.         let contentCollection = document.getElementById('content-collection')
  128.         // Récupérer le mode actuel depuis l'URL
  129.         const currentMode = new URLSearchParams(window.location.search).get('view');
  131.         if (currentMode === 'list') {
  132.             // Si le mode actuel est "list", activer le bouton "list" et appliquer la classe CSS
  133.             contentCollection.classList.remove('grid-collection');
  134.             contentCollection.classList.add('list-collection');
  135.             listButton.classList.add('active');
  136.             gridButton.classList.remove('active');
  137.         } else {
  138.             // Par défaut, activer le bouton "grid"
  139.             gridButton.classList.add('active');
  140.         }
  142.         listButton.addEventListener('click', () => {
  143.             // Lorsque l'utilisateur clique sur le bouton "list", mettre à jour l'URL avec le mode "list"
  144.             window.location.href = updateURLParameter(window.location.href, 'view', 'list');
  145.         })
  147.         gridButton.addEventListener('click', () => {
  148.             // Lorsque l'utilisateur clique sur le bouton "grid", mettre à jour l'URL avec le mode "grid"
  149.             window.location.href = updateURLParameter(window.location.href, 'view', 'grid');
  150.         })
  152.         $('.select2').select2();
  153.     </script>
  154. {% endblock %}