templates/recherche/centreImported.html.twig line 1

Open in your IDE?
  2. {% if centresImported | length != 0 %}
  3.     <div class="row align-items-stretch cards">
  4.         {% for centre in centresImported %}
  5.            <div class="col-md-6 mb-2 mbImported">
  6.                <div class="card p-2 h-100 map-card" id="{{centre.id}}" data-latitude="" data-longitude="">
  7.                    <div class="row">
  8.                        <div class="col-md-4 containerInfo">
  9.                            <img class="imgCentre imgCentreClick" src="/assets/img/header/logo.png" alt="{{centre.nom}}" onclick='goToCentreIsImported("{{centre.ville}}","{{centre.codePostal}}","{{centre.slug}}")'/>
  11.                        </div>
  12.                        <div class="col-md-8 containerCentre">
  13.                            <span class="centreName centreNameClick" onclick='goToCentreIsImported("{{centre.ville}}","{{centre.codePostal}}","{{centre.slug}}")'>{{centre.nom}}</span>
  14.                            <div class="text-box-info mt-2">
  16.                                <div class="containerAdresse">
  17.                                    <p class="adresse"> <i class="fas fa-map-marker-alt me-2"></i>{{centre.adresse}} -
  18.                                   {{centre.codePostal}} {{centre.ville}}</p>
  20.                                </div>
  21.                            </div>
  22.                        </div>
  23.                    </div>
  25.                    <button class="prendreRDV btn btn-vert-inverse" id="rdv{{centre.id}}" onclick="verificationSelectionImported({{centre.id}},'{{centre.nom}}','{{centre.adresse}}','{{centre.codePostal}}','{{centre.ville}}');" ><i class="fal fa-calendar-alt me-2"></i> Je prends RDV</button>
  27.                </div>
  31.                <style>
  33.                 .card.active {
  34.         border: 2px solid #7e7e7e !important; 
  35.           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  36. /* Replace this with your desired background color */
  37.     }
  38.                    .gm-style .gm-style-iw-c{
  39.                        padding:0 !important;
  40.                        border: 1px solid #E2E2E2 !important;
  41.                    }
  42.                    .gm-style-iw-d{
  43.                        overflow:hidden !important;
  44.                    }
  46.                    button.gm-ui-hover-effect img {
  47.                        display: none !important;
  48.                    }
  49.                </style>
  51.                <script>
  53.  function addActiveClassToElement(id) {
  54.         $(".card").removeClass("active"); // Remove active class from all elements first
  55.         $("#" + id).addClass("active"); // Add active class to the element with corresponding id
  56.     }
  58. var image = { 
  59.                       url: "./assets/img/map.png",
  60.         scaledSize: new google.maps.Size(33,47), // scaled size
  61.     };
  62.     lati = "{{centre.latitude}}";// On récupère la latitude
  63.     lon = "{{centre.longitude}}"; // On récupère la longitude
  64.     var pos = {
  65.         lat: lati,
  66.         lng: lon
  67.     };
  68.     point = new google.maps.LatLng(lati, lon);
  69.     optionsMarqueur = {
  70.         position: point,
  71.         icon: image,
  72.         map: map,
  73.         animation: google.maps.Animation.DROP
  74.     }
  75.     marqueur = new google.maps.Marker(optionsMarqueur);
  76.     contenue = '<a href="#{{centre.id}}" onclick="cacherMap();"><img class="imgCentre" src="/assets/img/header/logo.png" alt="{{centre.nom}}" style="width:120px; height:120px; object-fit:contain;"/></a>';
  77.     bindInfoWindow(marqueur, contenue);
  79.  google.maps.event.addListener(marqueur, "click", function() {
  80.         var centreId = "{{ centre.id }}";
  81.         addActiveClassToElement(centreId);
  82.         cacherMap(); // Call your cacherMap() function
  83.     });
  85.                </script>
  86.            </div>
  88.         {% endfor %}
  89.     </div>
  91. {# Pagination links #}
  93. <div class="pagination">
  94.     {% set totalResults = centresImported|length %}
  96.     {% if page > 1 %}
  97.         <a class="pagination-button" href="?{{ app.request.query.all|merge({'page': page - 1})|merge({'ville': app.request.query.get('ville')})|merge({'latitude': app.request.query.get('latitude')})|merge({'longitude': app.request.query.get('longitude')})|url_encode }}">
  98.             &laquo;
  99.         </a>
  100.     {% endif %}
  102.     {% for p in 1..totalPages %}
  103.         {% if p == page %}
  104.          <a class="pagination-button current-page" href="?{{ app.request.query.all|merge({'page': p})|merge({'ville': app.request.query.get('ville')})|merge({'latitude': app.request.query.get('latitude')})|merge({'longitude': app.request.query.get('longitude')})|url_encode }}">
  105.                 {{ p }}
  106.             </a>
  107.            {# <span class="current-page">{{ p }}</span>#}
  108.         {% else %}
  109.             <a class="pagination-button" href="?{{ app.request.query.all|merge({'page': p})|merge({'ville': app.request.query.get('ville')})|merge({'latitude': app.request.query.get('latitude')})|merge({'longitude': app.request.query.get('longitude')})|url_encode }}">
  110.                 {{ p }}
  111.             </a>
  112.         {% endif %}
  113.     {% endfor %}
  115.     {% if page < totalPages %}
  116.         <a class="pagination-button" href="?{{ app.request.query.all|merge({'page': page + 1})|merge({'ville': app.request.query.get('ville')})|merge({'latitude': app.request.query.get('latitude')})|merge({'longitude': app.request.query.get('longitude')})|url_encode }}">
  117.             &raquo;
  118.         </a>
  119.     {% endif %}
  120. </div>
  125. </div>
  128. {% else  %}
  129. {% endif %}