templates/default/annonces.html.twig line 1

Open in your IDE?
  1. {% extends 'base2.html.twig' %}
  3. {% block title %}Hello DefaultController!{% endblock %}
  5. {% block body %}
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  9. <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
  11. <!-- browse product -->
  12. <style>
  13.     .fav-message {
  14.         color: #fff; /* Blanc */
  15.         background-color: #F6249D; /* Rose */
  16.         font-size: 12px;
  17.         padding: 5px 10px;
  18.         border-radius: 5px;
  19.         position: absolute;
  20.         z-index: 1000;
  21.         display: none;
  22.         white-space: nowrap;
  23.     }
  25. .rating span {
  26.     font-size: 2em;
  27.     cursor: pointer;
  28.     transition: color 0.3s ease;
  29. }
  31. .rating .selected,
  32. .rating span:hover,
  33. .rating span:hover ~ span {
  34.     color: #D82E9F;
  35. }
  37. .btnMod {
  38.     background-color: #adb9ca;
  39.     color: white;
  40.     padding: 10px 20px;
  41.     text-decoration: none;
  42.     border-radius: 5px;
  43.     transition: background-color 0.3s ease;
  44. }
  46. .btnMod:hover {
  47.     background-color: #0073CD;
  48.     color: white;
  49. }
  50. </style>
  51. <section class="browse-product-area page-paddings" style="padding-top: 70px; background-color: white" id="annonces{{ app.session.get('type') }}">
  52.    {% if app.session.get('type') == 'pro' and not app.user %}
  53.       <div class="container-fluid" style="margin-top : -50px">
  54.          <div class="row" style="background: #D82E9F; text-align: right; color: white; height: 70px">
  55.             <h2 class="souts-title-particulier" style="padding-right: 8% !important; margin-top: 15px"><i><strong>100 Crédits offerts</strong> dès votre <a href="{{path('inscription',{'type':'pro'})}}" style="color:#fff;font-weight:800;text-decoration:underline!important;">création de compte</a> à utiliser sous <strong>100 jours !</strong> </i></h2>
  56.          </div>
  57.       </div>
  58.    {% endif %}
  59.    <div class="container">
  62.         <div class="row">
  63.             <div class="browse-vote-btn">
  64.                 <a href="{{path('app_default')}}" class="theme-btn particulier" style="margin-top: 20px; width: 250px"><i class="fas fa-arrow-left"></i>Accueil</a>
  65.             </div><br><br>
  66.         </div>
  69.       <div class="row">
  70.          <div class="col-xl-3 col-lg-4 col-md-4 col-sm-12 col-12">
  71.             <div class="browse-product-filter">
  72.                <div class="filter-box">
  73.                   <h3 class="theme-title blue">Recherche</h3>
  75. <form action="{{path('annonces')}}" name="searchForm" id="searchForm" method="get">
  77.                   <div class="filter-menu" style="display: flex; justify-content: center">
  78.                      <input class="form-control" type="text" placeholder="Rechercher" aria-label="rechercher" style="margin-right:10px;" name="motscles" value="{{motscles}}">
  79.                      <button class="theme-btn-pro" onclick="submitForm()"><i class="fas fa-search"></i></button>
  80.                   </div>
  81.                </div>
  82.                 
  83.                <div class="filter-box">
  84.     <h3 class="theme-title blue">Trier par</h3>
  85.     <div class="filter-menu">
  86.         <ul>
  87.             <li>
  88.                 <input class="styled-checkbox-pro" name="tri" id="styled-checkbox-1" type="checkbox" value="asc" {% if triSearch == 'asc' %}checked{% endif %}>
  89.                 <label for="styled-checkbox-1"><span>Prix Croissant</span></label>
  90.             </li>
  91.             <li>
  92.                 <input class="styled-checkbox-pro" name="tri" id="styled-checkbox-2" type="checkbox" value="desc" {% if triSearch == 'desc' %}checked{% endif %}>
  93.                 <label for="styled-checkbox-2"><span>Prix Décroissant</span></label>
  94.             </li>
  95.         </ul>
  96.     </div>
  97. </div>
  100.                 
  101.                <div class="filter-box">
  102.                   <h3 class="theme-title blue">Périmètre</h3>
  103.                   <div class="filter-menu">
  104.                 
  105.                      <ul>
  106.                         <li>
  107.                         <input type="hidden" id="villeSelect" value="{{ville}}">
  108.                            <select class="js-data-example-ajax" name="ville" style="width:100%" >                                        
  109.                         </select>
  110.                
  112.                            
  113.                         </li>
  114.                         <li>
  115.                            <label class="d-flex" for="styled-checkbox-4">
  116.                               <p>Rayon de</p> <input class="form-control" style="width: 50px; height:30px; margin: 0 1em ;" type="text" name="rayon" id="km" value="{{distance}}">
  117.                               <p>Km</p>
  118.                            </label>
  119.                         </li>
  120.                      </ul>
  123.                      <br>
  124.                   <div align="center" class="text-center">
  126.                   <button type="submit" class="btn btn-primary w-100" style="background-color : #ADB9CA">Appliquer</button>
  127.                   
  128.                   </div>
  130.                   </div>
  131.                </div>
  132.                <div class="filter-box">
  133.                   <h3 class="theme-title blue">Rechercher par catégories</h3>
  134.                   <div class="filter-menu">
  135.                      <ul>
  136.                            {% for res in categories %}
  137.                               <li>
  138.                                  <input class="styled-checkbox-pro" name="categories[]" id="styled-checkbox-cat-{{ res.id }}" type="checkbox" value="{{ res.id }}"
  139.                                        {% if res.id in categoriesSearch %}checked{% endif %}>
  140.                                  <label for="styled-checkbox-cat-{{ res.id }}"><span>{{ res.libelle }}</span></label>
  141.                               </li>
  142.                            {% endfor %}
  143.                      </ul>
  144.                   </div>
  145.                </div>
  148.                
  150.             </div>
  151.          </div>
  152.          <div class="col-xl-9 col-lg-8 col-md-8 col-sm-12 col-12">
  153.             <div class="browse-product-top">
  154.                <div class="row">
  155.                   <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
  156.                      <div class="browse-product-left d-flex align-items-center">
  157.     <p>Afficher</p>
  158.     <select class="form-select select-btn" name="nbParPage" aria-label="5" onchange="this.form.submit()">
  159.         <option value="5" {% if nbParPage == 5 %}selected{% endif %}>5</option>
  160.         <option value="10" {% if nbParPage == 10 %}selected{% endif %}>10</option>
  161.         <option value="20" {% if nbParPage == 20 %}selected{% endif %}>20</option>
  162.         <option value="30" {% if nbParPage == 30 %}selected{% endif %}>30</option>
  163.         <option value="25" {% if nbParPage == 25 %}selected{% endif %}>25</option>
  164.         <option value="50" {% if nbParPage == 50 %}selected{% endif %}>50</option>
  165.         <option value="75" {% if nbParPage == 75 %}selected{% endif %}>75</option>
  166.         <option value="100" {% if nbParPage == 100 %}selected{% endif %}>100</option>
  167.     </select>
  168.     <p>articles</p>
  169. </div>
  173.                      {% if  app.session.get('type') == 'pro' %}
  174.                      <input class="styled-checkbox-pro" id="styled-checkbox-filtre" type="checkbox" name="pro" onchange="submitForm()" {% if pro == 'on' %}checked{% endif %}>
  175.                      <label for="styled-checkbox-filtre" ><span>Annonces reservées uniquement aux profesionnels</span></label>
  176.                      {% endif %}
  177.                   </div>
  178.                   <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
  179.                      <div class="browse-product-right clearfix">
  180.                        
  181.                      </div>
  182.                    
  183.                   </div>
  184.                </div>
  185.             </div>
  186.             </form>
  187.             <div class="browse-product-box">
  188.                <div class="tab-content">
  189.                   <div class="tab-pane active" id="view-store-grid" role="tabpanel">
  190.                      <div class="row">
  192.                      {% for res in annonces %}
  193.                      
  194.                      <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-12">
  195.                         <div class="item-group">
  196.                            {% if res.booste == 1 %}<span class="store-label">Boosté </span>{% endif %}
  197.                            <div class="item-group-content">
  198.                                  <div class="items-like">
  199.                                     {% if app.user %}
  200.                                     <button class="btn-fav {% if res.id in favorisUser %}btn-fav-active{% endif %}" id="btnfav{{res.id}}" onclick="addFavoris({{res.id}})">
  201.                                        <i class="far fa-heart"></i>
  202.                                     </button>
  203.                                     <div id="fav-message-{{res.id}}" class="fav-message"></div>
  204.                                     {% else %}
  205.                                     <button class="btn-fav active" data-bs-toggle="modal" data-bs-target="#connexion-modal"><i class="far fa-heart"></i></button>
  206.                                     {% endif %}
  207.                                  </div>
  208.                                  <a href="{{path('detailAnonnce',{'id':res.id})}}">
  209.                                     <div class="item-group-avtar">
  210.                                        {% if res.images %}
  211.                                        <img src="{{asset('uploads/annonces/'~res.images)}}" alt="">
  212.                                        {% endif %}
  213.                                     </div>
  214.                                     <h3 class="theme-title">{{res.titre}}</h3>
  215.                                     <p class="theme-description">{{res.enseigne}} <span>-{{res.pourcentRemise }}%</span></p>
  216.                                     <div class="row price">
  217.                                        <div class="col-6">
  218.                                              <h2 class="item-price" style="text-decoration: line-through;">{{res.prix}}€</h2>
  219.                                        </div>
  220.                                        <div class="col-6">
  221.                                              <h2 class="item-price pink">{{res.newprix }}€</h2>
  222.                                        </div>
  223.                                     </div>
  224.                                     <div class="item-group-timer">
  225.                                        <ul class="clearfix">
  226.                                              <li><span>{{res.heures}}</span> Heure</li>
  227.                                              <li><span>{{res.minutes}}</span> Min</li>
  228.                                              <li><span>{{res.secondes}}</span> Sec</li>
  229.                                        </ul>
  230.                                     </div>
  231.                                  </a>
  232.                                  <div class="row mb-3 review">
  233.                                     <div class="col-12">
  234.                                        <p class="theme-description">Noter l'annonce</p>
  235.                                        <div class="store-ratting2">
  236.                                              {% if app.user %}
  237.                                              <a data-bs-toggle="modal" data-bs-target="#notez-{{ res.id }}" style="color: #D82E9F">
  238.                                                 {% else %}
  239.                                                 <a data-bs-toggle="modal" data-bs-target="#connexion-modal" style="color: #D82E9F">
  240.                                                    {% endif %}
  241.                                                    {% if res.moyAnnonce == 0 %}
  242.                                                    <i class="far fa-star"></i>
  243.                                                    <i class="far fa-star"></i>
  244.                                                    <i class="far fa-star"></i>
  245.                                                    <i class="far fa-star"></i>
  246.                                                    <i class="far fa-star"></i>
  247.                                                    {% endif %}
  248.                                                    {% if res.moyAnnonce == 0.5 %}
  249.                                                    <i class="fas fa-star-half-alt"></i>
  250.                                                    <i class="far fa-star"></i>
  251.                                                    <i class="far fa-star"></i>
  252.                                                    <i class="far fa-star"></i>
  253.                                                    <i class="far fa-star"></i>
  254.                                                    {% endif %}
  255.                                                    {% if res.moyAnnonce == 1 %}
  256.                                                    <i class="fas fa-star"></i>
  257.                                                    <i class="far fa-star"></i>
  258.                                                    <i class="far fa-star"></i>
  259.                                                    <i class="far fa-star"></i>
  260.                                                    <i class="far fa-star"></i>
  261.                                                    {% endif %}
  262.                                                    {% if res.moyAnnonce == 1.5 %}
  263.                                                    <i class="fas fa-star"></i>
  264.                                                    <i class="fas fa-star-half-alt"></i>
  265.                                                    <i class="far fa-star"></i>
  266.                                                    <i class="far fa-star"></i>
  267.                                                    <i class="far fa-star"></i>
  268.                                                    {% endif %}
  269.                                                    {% if res.moyAnnonce == 2 %}
  270.                                                    <i class="fas fa-star"></i>
  271.                                                    <i class="fas fa-star"></i>
  272.                                                    <i class="far fa-star"></i>
  273.                                                    <i class="far fa-star"></i>
  274.                                                    <i class="far fa-star"></i>
  275.                                                    {% endif %}
  276.                                                    {% if res.moyAnnonce == 2.5 %}
  277.                                                    <i class="fas fa-star"></i>
  278.                                                    <i class="fas fa-star"></i>
  279.                                                    <i class="fas fa-star-half-alt"></i>
  280.                                                    <i class="far fa-star"></i>
  281.                                                    <i class="far fa-star"></i>
  282.                                                    {% endif %}
  283.                                                    {% if res.moyAnnonce == 3 %}
  284.                                                    <i class="fas fa-star"></i>
  285.                                                    <i class="fas fa-star"></i>
  286.                                                    <i class="fas fa-star"></i>
  287.                                                    <i class="far fa-star"></i>
  288.                                                    <i class="far fa-star"></i>
  289.                                                    {% endif %}
  290.                                                    {% if res.moyAnnonce == 3.5 %}
  291.                                                    <i class="fas fa-star"></i>
  292.                                                    <i class="fas fa-star"></i>
  293.                                                    <i class="fas fa-star"></i>
  294.                                                    <i class="fas fa-star-half-alt"></i>
  295.                                                    <i class="far fa-star"></i>
  296.                                                    {% endif %}
  297.                                                    {% if res.moyAnnonce == 4 %}
  298.                                                    <i class="fas fa-star"></i>
  299.                                                    <i class="fas fa-star"></i>
  300.                                                    <i class="fas fa-star"></i>
  301.                                                    <i class="fas fa-star"></i>
  302.                                                    <i class="far fa-star"></i>
  303.                                                    {% endif %}
  304.                                                    {% if res.moyAnnonce == 4.5 %}
  305.                                                    <i class="fas fa-star"></i>
  306.                                                    <i class="fas fa-star"></i>
  307.                                                    <i class="fas fa-star"></i>
  308.                                                    <i class="fas fa-star"></i>
  309.                                                    <i class="fas fa-star-half-alt"></i>
  310.                                                    {% endif %}
  311.                                                    {% if res.moyAnnonce >= 5 %}
  312.                                                    <i class="fas fa-star"></i>
  313.                                                    <i class="fas fa-star"></i>
  314.                                                    <i class="fas fa-star"></i>
  315.                                                    <i class="fas fa-star"></i>
  316.                                                    <i class="fas fa-star"></i>
  317.                                                    {% endif %}
  318.                                                    ({{ res.moyAnnonce }})
  319.                                                 </a>
  320.                                        </div>
  321.                                     </div>
  322.                                  </div>
  323.                            </div>
  324.                         </div>
  326.                      <!-- Modal -->
  327.                      <div class="modal fade" id="notez-{{ res.id }}" tabindex="-1" aria-labelledby="notezLabel" aria-hidden="true">
  328.                         <div class="modal-dialog">
  329.                            <div class="modal-content">
  330.                               <div class="modal-header">
  331.                                  <h5 class="modal-title" id="notezLabel">Evaluer</h5>
  332.                                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  333.                               </div>
  334.                               <div class="modal-body">
  335.                                  <h2>Evaluez l'annonce : </h2><br>
  336.                                  <div class="rating store-ratting2">
  337.                                     <span data-value="5" title="Evaluer 5 Étoiles">★</span>
  338.                                     <span data-value="4" title="Evaluer 4 Étoiles">★</span>
  339.                                     <span data-value="3" title="Evaluer 3 Étoiles">★</span>
  340.                                     <span data-value="2" title="Evaluer 2 Étoiles">★</span>
  341.                                     <span data-value="1" title="Evaluer 1 Étoile">★</span>
  342.                                  </div>
  343.                               </div>
  344.                               <div class="modal-footer">
  345.                                  <a class="btnMod" data-bs-dismiss="modal" style="background-color: #D82E9F">Fermer</a>
  346.                                  <a class="btnMod submitRating" data-annonce-id="{{ res.id }}" style="display: none;">Valider</a>
  347.                               </div>
  348.                            </div>
  349.                         </div>
  350.                      </div>
  351.                      <!-- end modal -->
  352.                      </div>
  353.                      {% endfor %}
  354.                        
  355.                      </div>
  356.                   </div>
  357.                </div>
  358.                <div class="row">
  359.                   <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
  360.                      <div class="pagination-box text-center">
  361.                         {{ knp_pagination_render(annonces) }}
  362.                      </div>
  363.                   </div>
  364.                </div>
  365.             </div>
  366.            
  367.          </div>
  368.       </div>
  369.    </div>
  370. </section>
  371. <!-- Modal -->
  373. <!-- end modal -->
  374. <!-- browse product -->
  377. <script>
  378.     document.addEventListener('DOMContentLoaded', (event) => {
  379.         const searchInput = document.querySelector('input[name="motscles"]');
  380.         const searchForm = document.getElementById('searchForm');
  382.         searchInput.addEventListener('keydown', function(e) {
  383.             if (e.key === 'Enter') {
  384.                 e.preventDefault();
  385.             }
  386.         });
  388.         searchForm.addEventListener('submit', function(e) {
  389.             e.preventDefault();
  390.             submitForm();
  391.         });
  393.         function submitForm() {
  394.             searchForm.submit();
  395.         }
  397.         // Fonction pour soumettre le formulaire ou retirer le tri
  398.         function handleTriChange(event) {
  399.             const isChecked = event.target.checked;
  400.             const triInputs = document.querySelectorAll('input[name="tri"]');
  401.             if (!isChecked) {
  402.                 triInputs.forEach(input => {
  403.                     input.checked = false;
  404.                 });
  405.                 // Supprimer le paramètre 'tri' du formulaire
  406.                 const triField = document.querySelector('input[name="tri"]');
  407.                 if (triField) {
  408.                     triField.value = '';
  409.                 }
  410.                 // Soumettre le formulaire sans le paramètre 'tri'
  411.                 searchForm.submit();
  412.             } else {
  413.                 submitForm();
  414.             }
  415.         }
  417.         // Ajouter un écouteur d'événements aux boutons radio de tri
  418.         const triInputs = document.querySelectorAll('input[name="tri"]');
  419.         triInputs.forEach(input => {
  420.             input.addEventListener('change', handleTriChange);
  421.         });
  423.         // Ajouter un écouteur d'événements aux checkboxes de catégories
  424.         const categoryCheckboxes = document.querySelectorAll('input[name="categories[]"]');
  426.         categoryCheckboxes.forEach(checkbox => {
  427.             checkbox.addEventListener('change', submitForm);
  428.         });
  429.     });
  432.  function addFavoris(id) {
  433.         let elm = document.getElementById("btnfav" + id);
  434.         let messageElm = document.createElement('div');
  435.         messageElm.classList.add('fav-message');
  437.         let etat = elm.classList.contains('btn-fav-active') ? 'active' : 'non active';
  438.         let messageText = etat === 'non active' ? "Article ajouté aux favoris :)" : "Article retiré des favoris :(";
  439.         messageElm.textContent = messageText;
  441.         document.body.appendChild(messageElm);
  443.         let rect = elm.getBoundingClientRect();
  444.         messageElm.style.top = (rect.top - messageElm.offsetHeight - 5) + 'px';
  445.         messageElm.style.left = (rect.left + (elm.offsetWidth / 2) - (messageElm.offsetWidth / 2)) + 'px';
  446.         messageElm.style.display = 'block';
  448.         setTimeout(function() {
  449.             messageElm.style.display = 'none';
  450.             document.body.removeChild(messageElm);
  451.         }, 3000); // Message disparaît après 3 secondes
  453.         $.ajax({
  454.             type: "POST",
  455.             url: "{{ path('addFavoris') }}",
  456.             data: { id: id, etat: etat },
  457.             success: function(output) {
  458.                 elm.classList.toggle("btn-fav-active");
  459.             }
  460.         });
  461.     }
  462. </script>
  463. <script>
  465. $(document).ready(function() {
  466.     var selectedRating = 0;
  468.     function updateStarDisplay(rating) {
  469.         $('.rating span').each(function() {
  470.             var value = $(this).data('value');
  471.             $(this).toggleClass('selected', value <= rating);
  472.         });
  473.     }
  475.     $('.rating span').on('mouseenter', function() {
  476.         var index = $(this).data('value');
  477.         updateStarDisplay(index);
  478.     });
  480.     $('.rating span').on('mouseleave', function() {
  481.         updateStarDisplay(selectedRating);
  482.     });
  484.     $('.rating span').on('click', function() {
  485.         selectedRating = $(this).data('value');
  486.         updateStarDisplay(selectedRating);
  487.         $(this).closest('.modal-content').find('.submitRating').fadeIn('slow');
  488.     });
  490.     $('.submitRating').on('click', function() {
  491.         if (selectedRating > 0) {
  492.             var annonceId = $(this).data('annonce-id');
  493.             updateRating(selectedRating, annonceId);
  494.         } else {
  495.             alert('Veuillez sélectionner une note.');
  496.         }
  497.     });
  499.     function updateRating(note, annonceId) {
  500.         $.ajax({
  501.             type: "POST",
  502.             url: "/update-rating",
  503.             data: { note: note, annonceId: annonceId },
  504.             success: function(response) {
  505.                 alert('Merci pour votre évaluation de ' + note + ' étoiles!');
  506.                 $('#notez-' + annonceId).modal('hide');
  507.             },
  508.             error: function(xhr, status, error) {
  509.                 console.error(error);
  510.             }
  511.         });
  512.     }
  513. });
  516. </script>
  520. {% endblock %}