templates/model/collection.html.twig line 18

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.                     {% if 'ROLE_ADMIN' in app.user.roles %}
  40.                         {{ form_row(form.ia) }}
  41.                     {% endif %}
  42.                     <button type="submit" class="btn btn-grad rounded-pill">Filtrer</button>
  43.                 </div>
  44.             {{ form_end(form) }}
  45.         </section>
  47.         <section>
  48.             <div class="results-filter">
  49.                 <span>{{ pageCount }} écussons pour cette recherche</span>
  50.             </div>
  51.             <div class="row block grid-collection" id="content-collection">
  52.                 {% for model in models %}
  53.                     <div class="card">{% if model.photos is empty %}
  54.                             <img src="/images/logo_ecusson_bleu_grand_format.png" class="img-fluid rounded- " alt="logo_ecusson_bleu_grand_format">
  55.                         {% else %}
  56.                             <img style="height: 400px" src="{{ model.photos[0].chemin }}" class="img-fluid rounded- " alt="">
  57.                         {% endif %}
  58.                         {% if model.genereParIa %}
  59.                             <span class="btn-genere-ia {% if model.iaValide %}ia-valide{% endif %}">inséré via IA</span>
  60.                         {% endif %}
  61.                         <h5>{{ model.titre }}</h5>
  62.                         {% if 'ROLE_ADMIN' in app.user.roles %}
  63.                             <span class="qty">x{{ model.nb > 10 ? model.nb : '0'~model.nb }}</span>
  64.                         {% else %}
  65.                             <br>
  66.                         {% endif %}
  67.                         <div class="card-body">
  68.                             <ul>
  69.                                 <li class="title-category">Catégories :</li>
  70.                             {% for categorie in model.categories %}
  71.                                 <li>
  72.                                     {{ categorie.nom }}
  73.                                 </li>
  74.                             {% endfor %}
  75.                             </ul>
  76.                         </div>
  77.                         <div class="bottom-card">
  78.                             <a href="{{ path('app_model_show', {'id':model.id}) }}" class="link" >En savoir plus</a>
  79.                         </div>
  80.                     </div>
  81.                 {% endfor %}
  82.             </div>
  83.             {{ knp_pagination_render(models) }}
  84.         </div>
  85.     </section>
  87. {% endblock %}
  89. {% block javascripts %}
  90.     {{ encore_entry_script_tags('app') }}
  91. {#    <script type="text/javascript">#}
  93. {#        let listButton = document.getElementById('list-button')#}
  94. {#        let gridButton = document.getElementById('grid-button')#}
  95. {#        let contentCollection = document.getElementById('content-collection')#}
  97. {#        gridButton.classList.add('active')#}
  99. {#        listButton.addEventListener('click', () => {#}
  101. {#                contentCollection.classList.remove('grid-collection')#}
  102. {#                contentCollection.classList.add('list-collection')#}
  103. {#                listButton.classList.add('active')#}
  104. {#                gridButton.classList.remove('active')#}
  105. {#        })#}
  107. {#        gridButton.addEventListener('click', () => {#}
  109. {#            contentCollection.classList.remove('list-collection');#}
  110. {#            contentCollection.classList.add('grid-collection');#}
  111. {#            gridButton.classList.add('active');#}
  112. {#            listButton.classList.remove('active')#}
  113. {#        })#}
  115. {#        $('.select2').select2();#}
  117. {#    </script>#}
  118.     <script type="text/javascript">
  119.         // Fonction pour ajouter ou mettre à jour un paramètre d'URL
  120.         function updateURLParameter(url, param, value) {
  121.             var re = new RegExp("([?&])" + param + "=.*?(&|$)", "i");
  122.             var separator = url.indexOf('?') !== -1 ? "&" : "?";
  123.             if (url.match(re)) {
  124.                 return url.replace(re, '$1' + param + "=" + value + '$2');
  125.             } else {
  126.                 return url + separator + param + "=" + value;
  127.             }
  128.         }
  130.         let listButton = document.getElementById('list-button')
  131.         let gridButton = document.getElementById('grid-button')
  132.         let contentCollection = document.getElementById('content-collection')
  134.         // Récupérer le mode actuel depuis l'URL
  135.         const currentMode = new URLSearchParams(window.location.search).get('view');
  137.         if (currentMode === 'list') {
  138.             // Si le mode actuel est "list", activer le bouton "list" et appliquer la classe CSS
  139.             contentCollection.classList.remove('grid-collection');
  140.             contentCollection.classList.add('list-collection');
  141.             listButton.classList.add('active');
  142.             gridButton.classList.remove('active');
  143.         } else {
  144.             // Par défaut, activer le bouton "grid"
  145.             gridButton.classList.add('active');
  146.         }
  148.         listButton.addEventListener('click', () => {
  149.             // Lorsque l'utilisateur clique sur le bouton "list", mettre à jour l'URL avec le mode "list"
  150.             window.location.href = updateURLParameter(window.location.href, 'view', 'list');
  151.         })
  153.         gridButton.addEventListener('click', () => {
  154.             // Lorsque l'utilisateur clique sur le bouton "grid", mettre à jour l'URL avec le mode "grid"
  155.             window.location.href = updateURLParameter(window.location.href, 'view', 'grid');
  156.         })
  158.         $('.select2').select2();
  159.     </script>
  160. {% endblock %}