templates/recherche/recherche.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.         <link rel="stylesheet" href="./assets/lib/mark-your-calendar/mark-your-calendar.css">
  6.      <link rel="stylesheet" href="./assets/css/recherche.css">
  7.     <link rel="stylesheet" href="./assets/lib/jquery-multiselect/jquery.multiselect.css">
  8. {% endblock %}
  10. {% block javascripts %}
  11.     {{ parent() }}    
  12.     <script src="./assets/lib/jquery-multiselect/jquery.multiselect.js"></script>
  13.     <script src="./assets/lib/mark-your-calendar/mark-your-calendar.js"></script>
  14.     <script src="/assets/js/mapJson.js"></script>
  15.     <script src="./assets/js/recherche.js"></script>
  16.     <script>
  17.         var map; 
  18.         var geocoder;
  19.         var infowindow;
  20. </script>
  21. {% endblock %}
  23. {% block body %}
  24.   {{ parent() }}
  25.   <div class="backgroundheaderSearch"></div>
  26. {% endblock %}
  28. {% block content %}
  29.   {{ parent() }}
  31. <section>
  32.     <div class="container">
  33.         <div class="col-md-6">
  34.             <h2 class="title">Vous recherchez un <br> audioprothésiste sur <br> <span id="villeTitre"></span></h2>
  35.         </div>
  36.     </div>
  37. </section>
  39. <section class="recherche">
  40. <!-- Back to top button -->
  41. <a id="button"> <i class="fas fa-angle-up"></i></a>
  42.     <div class="container-fluid" style="padding:0;">
  43.         <div class="row rowPrincipal" style="margin-right: 0;">
  44.             <div class="col-md-6 mapColumn">
  45.                 <div id="filterMap" class="filter-map" style="display:none"></div>
  46.                 <div class="btnMap">   
  48.                         <button class="prendreRDV btn btn-vert-inverse" id="showMap" onclick="validerFiltre()">
  49.                          <span class="text">voir sur la carte</span>  
  50.                          <div class="wave"></div>
  51.                         
  52.                         </button>
  53.                     </div>
  54.             </div>
  56.             <div class="col-md-6 ">
  57.                 <div id="filterSearch">
  58.                     <div class="inputSearch row">
  59.                         <div class="col-md-6">
  60.                             <div class="input-group">
  61.                                 <span class="input-group-text" id="nom-icon"><i class="far fa-search"></i></span>
  62.                                 <input type="text" class="form-control" placeholder="Nom de l’audioprothésiste" id="nom" name="nom" aria-label="nom" aria-describedby="nom-icon">
  63.                             </div>
  64.                         </div>
  65.                         <div class="col-md-6">
  66.                             <div class="input-group">
  67.                                 <span class="input-group-text" id="ville-icon"><i class="fas fa-map-marker-alt"></i></span>
  68.                                 <input type="text" class="form-control" placeholder="Ville" aria-label="ville" id="ville" name="ville" aria-describedby="ville-icon">
  69.                             </div>
  70.                         </div>
  71.                     </div>
  72.                    <!-- <div class="row">
  73.                         <select class="form-select"  id="motif" >
  74.                             <option hidden> Sélectionnez votre motif de consultation</option>  
  75.                         </select>
  76.                     </div> -->
  77.                     <div class="filtresContainer" >
  78.                         <div class="" style="padding-left:0; min-width: 120px;">
  79.                             <select class="" multiple="multiple" id="filtre" >
  80.                                 <optgroup label="Disponibilité">
  81.                                     <option  id="today" value="d1" data-name="disponibilite">Aujourdhui</option>  
  82.                                     <option  id="nextDay" value="d3" data-name="disponibilite"> Dans les 3 prochain jours</option>  
  83.                                 </optgroup>
  84.                                 <optgroup label="Spécialités" id="specialiter">
  85.                                     {% for specialite in specialites %}
  86.                                         <option  value="s{{specialite.id}}" data-name="specialites">{{specialite.libelle}}</option>  
  87.                                     {% endfor %}
  88.                                 <optgroup label="Prestations et prise en charge">
  89.                                     {% for prestation in prestations %}
  90.                                         <option  value="p{{prestation.id}}" data-name="prestations">{{prestation.libelle}}</option>  
  91.                                     {% endfor %}
  92.                                 </optgroup>
  93.                                 
  94.                             </select>
  95.                         </div>
  96.                         <div class="checkboxContainer">
  97.                             <div class="" style="text-align: left;">
  98.                             </div>
  99.                             <div class="" style="text-align:right; padding:0">
  100.                                 <button id="validateFiltre" onclick="validerFiltre()"><i class="far fa-search"></i></button>
  101.                             </div>
  102.                         </div>
  103.                     </div>
  104.                 </div>
  105.                 <script    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRmNV4VerjHHrsOoQOMmRWwpKL_ekzJrc&libraries=geometry,drawing,places&callback=initMap" defer></script>
  107.                 <div class="cardCentre">
  108.                     <div class="containerCards">
  109.                         {% include "./recherche/carteCentre.html.twig" %}
  110.                         {% include "./recherche/centreImported.html.twig" %}
  111.                          {% if centres | length == 0  and centresImported | length == 0 %}
  112.                            <p style="font-size:21px; margin-top:25px; font-weight:500;"> Il n'y a aucun résultat pour votre recherche </p>
  113.                         {% endif %}
  114.                     </div>
  115.                     <div class="loadingCards-container" id="loadingCards" style="display:none;">
  116.                         <img class="loading" src="./assets/img/recherche/loading.gif" alt="loading" />
  117.                     </div>
  118.                 </div>
  120.             </div>
  121.             
  122.         </div>
  123.         <div id="afficherMap" class="buttonMapContainer" onclick="afficherMap();"> <div class="buttonMap"> <span class="material-icons">map</span>Voir MAP</div></div>
  124.             <div id="cacherMap"  class="buttonMapContainer" onclick="cacherMap();"> <div class="buttonMap"> <span class="material-icons">map</span>Cacher MAP</div></div>
  126.     </div>
  127. </section>
  128. <script>
  129.   var btn = $('#button');
  131. $(window).scroll(function() {
  132.   if ($(window).scrollTop() > 300) {
  133.     btn.addClass('show');
  134.   } else {
  135.     btn.removeClass('show');
  136.   }
  137. });
  139. btn.on('click', function(e) {
  140.  
  141.  e.preventDefault();
  142.   $('html, body').animate({ scrollTop: $('html, body').offset().top }, '300');
  143. });
  144. $(document).ready(function () {
  145.   var filterSearch = $("#filterSearch");
  146.   var filterSearchOffset = filterSearch.offset().top;
  147.   function toggleStickyClass() {
  148.     var scrollPosition = $(window).scrollTop();
  149.     
  150.     if (scrollPosition > filterSearchOffset) {
  151.       
  152.       filterSearch.addClass("sticky-search");
  153.     } else {
  154.      
  155.       filterSearch.removeClass("sticky-search");
  156.     }
  157.   }
  158.   toggleStickyClass();
  159.   
  160.  
  161.   $(window).scroll(function () {
  162.     toggleStickyClass();
  163.   });
  164. });
  165. </script>
  167. {% endblock %}