templates/recherche/carteCentre.html.twig line 1

Open in your IDE?
  3. {% if centres | length != 0 %}
  4.     {% for centre in centres %}
  6.     <div class="card" id="{{centre.id}}" data-latitude="{{centre.latitude}}" data-longitude="{{centre.longitude}}">
  7.         <div class="row">
  8.             <div class="col-md-3 containerInfo">
  9.                 <img class="imgCentre imgCentreClick " src="{{BASE_API}}centre/image/{{centre.id}}" alt="{{centre.name}}" onclick='goToCentre({{centre.id}},"{{centre.city}}","{{centre.postale}}","{{centre.slug}}")' />
  10.                 <div class="note">
  11.                     <span>{{centre.averageRating}}/5</span>
  12.                     <span class="material-icons">star</span>
  13.                     <span>({{centre.nbrReview}})</span>
  14.                 </div>
  15.             </div>
  16.             <div class="col-md-9 containerCentre">
  17.                 <span class="centreName centreNameClick" onclick='goToCentre({{centre.id}},"{{centre.city}}","{{centre.postale}}","{{centre.slug}}")'>{{centre.name}}</span>
  18.                 <div class="row">
  19.                     <div class="col-md-6 containerAudioChoice">
  20.                         <select id="audioCentre{{centre.id}}" data-centre="{{centre.id}}"  onchange="changeHoraireAudio(this)" class="audioCentre form-select" name="audioCentre{{centre.id}}">
  21.                             {% set i = 0 %}
  22.                             {% for audio in centre.audio %}
  23.                                 <option value="{{audio.id}}" {% if i == 0 %} selected {% endif %}>{{audio.lastname}} {{audio.name}}</option>
  24.                                 {% set i = i + 1 %}
  25.                             {% endfor %}
  26.                         </select>
  27.                         
  28.                     </div>
  29.                     <div class="col-md-6 containerAdresse">
  30.                         <p class="adresse">{{centre.address}}</p>
  31.                         <p class="CP">{{centre.postale}} {{centre.city}}</p>
  32.                     </div> 
  33.                 </div>
  34.             </div>
  35.         </div>
  36.         <div class="row avaibility-row">
  37.             {% set i = 0 %}
  38.             {% for audio in centre.audio %}
  39.                 <!-- Modify your motif select box -->
  40.                 <select class="form-select motif-select mot{{centre.id}}" data-id="{{centre.id}}" id="motif{{audio.id}}{{centre.id}}" data-audio-id="{{audio.id}}" onchange="changeHoraire({{audio.id}}, {{centre.id}})" {% if loop.first %} {% else %}style="display: none;"{% endif %}>
  41.                     <option hidden style="text-align:center;">Choisissez votre motif de consultation</option>
  42.                     {% for motif in audio.motifs %}
  43.                     {% if motif.isRdvonline and motif.titre != "Rendez-vous pro externe" and motif.titre != "Google Agenda" and motif.titre != "Suivie de l’essai" and motif.titre != "Confirmation de l’essai" and motif.titre != "Validation de l’appareillage" and motif.titre != "Facturation de l’appareillage" %}
  44.                         <option value="{{motif.id}}-{{motif.duration}}" data-duration="">{{motif.titre}} </option>
  45.                         {% endif %}
  46.                     {% endfor %}
  47.                 </select>
  48.                 <!-- Enclose the select within a div with a common class -->
  49.                 <div class="motif-container mot{{centre.id}}" id="motif-container{{audio.id}}" {% if loop.first %} {% else %}style="display: none;"{% endif %}>
  50.                     <!-- Your other elements and code here -->
  51.                     <div class="row avaibility-row">
  52.                         <div class="choixMotif mapChoice" id="choixMotif{{audio.id}}{{centre.id}}" style="display:none">Veuillez choisir un motif de consultation</div>
  53.                         <div id="avaibility{{audio.id}}{{centre.id}}" data-audio="{{audio.id}}" data-centre="{{centre.id}}" class="avaibility-container avaibility{{centre.id}} col-md-12"></div>
  54.                         <div class="loading-container" id="loading{{audio.id}}{{centre.id}}" style="display:none;">
  55.                             <img class="loading" src="/assets/img/recherche/loading.gif" alt="loading" />
  56.                         </div>
  57.                                                 <div id="alertDate{{audio.id}}{{centre.id}}" style="display:none" class="alertDate">Veuillez sélectionner un horaire</div>
  58. <div class="btnMap">                      
  59.                         <button class="prendreRDV btn btn-vert-inverse" id="rdv{{audio.id}}"  onclick="encodeAndCallVerificationSelection({{audio.id}}, {{centre.id}}, '{{centre.name|replace({'\'' : '\\\''})}}','{{audio.lastname}} {{audio.name}}');">Je prends RDV</button>
  60.                     </div>
  61.                     </div>
  62.                 </div>
  63.                 {% set i = i + 1 %}
  64.             {% endfor %}
  66.             
  67. <!-- Modal confirmatio info RDV -->
  68.     
  69.     </div></div>
  71.     <script>
  73.  var dateSelectionne = "";
  75.     {% set i = 0 %}
  76.     {% for audio in centre.audio %}
  77.         {% if i == 0 %}
  78.            dispo =  {{audio.schedule | json_encode() | raw}};
  79.             dispoSplit = getTimeAvailable(dispo);
  80.             dispoSplit = addEmptyTime(dispoSplit);
  81.             nextHtml = getChevronNext('{{audio.id}}');
  82.             prevHtml = getChevronPrev('{{audio.id}}');
  83.             initCalendar('{{audio.id}}','{{centre.id}}', dispoSplit);
  84.             $(".precedent").css("display","none");
  85.             $(".available-time-hide").css("display","none");
  86.     
  87.         {% endif %}
  88.         {% set i = i + 1 %}
  89.     {% endfor %}
  92.     var image = { 
  93.         url:"./assets/img/recherche/pointer.png",
  94.         scaledSize: new google.maps.Size(33,47), // scaled size
  95.     };
  96.     lati = "{{centre.latitude}}";// On récupère la latitude
  97.     lon = "{{centre.longitude}}"; // On récupère la longitude
  98.     var pos = {
  99.         lat: lati,
  100.         lng: lon
  101.     };
  102.     point = new google.maps.LatLng(lati, lon);
  103.     optionsMarqueur = {
  104.         position: point,
  105.         icon: image,
  106.         map: map,
  107.         animation: google.maps.Animation.DROP
  108.     }
  109.     marqueur = new google.maps.Marker(optionsMarqueur);
  110.     contenue = '<a href="#{{centre.id}}" onclick="cacherMap();"><img class="imgCentre" src="{{BASE_API}}centre/image/{{centre.id}}" alt="{{centre.name}}" style="width:120px; height:120px; object-fit:contain;"/></a>';
  111.     bindInfoWindow(marqueur, contenue);
  113.  function changeHoraire(audio_id, centre_id){
  114.  
  115.     $("#loading"+audio_id).css("display","flex");
  116.     $("#choixMotif"+audio_id+centre_id).css("display","none");
  117.     value = document.getElementById("motif"+audio_id).value;
  118.     id  = value.split('-')[0];
  119.     motifDuration = parseInt(value.split('-')[1]);
  120.     datetime = dateFormat(new Date(), "dd/mm/yyyy").toString();
  121.     getHoraire(audio_id,centre_id, datetime);
  122.     dateSelectionne = "";
  123.     $("#loading"+audio_id+centre_id).css("display","none");
  124.     $(".alertDate").css("display","none");
  126. }
  128. // Add an event listener to each audio select box
  129. $('.audioCentre').on('change', function () {
  130.     // Get the selected audio ID
  131.     var selectedAudioId = $(this).val();
  132.     var center = $(this).attr('data-centre');
  133.     console.log(center);
  134.     // Hide all motif select boxes
  135.     $('.mot'+center).hide();
  137.     // Show the motif select box corresponding to the selected audio
  138.     $('#motif' + selectedAudioId).show();
  139.     $('#motif-container' + selectedAudioId).show();
  141. });
  144. function encodeAndCallVerificationSelection(audio_id, centre_id, centre_name, audio_name) {
  145.     var motifFirst = $("#motif"+audio_id+centre_id+" option:selected").text();
  146.     if(motifFirst === "Choisissez votre motif de consultation"){
  147. $("#choixMotif"+audio_id+centre_id).show();
  148.     }
  149.     else{
  150.     //alert(motifFirst);
  151.     var encodedCentreName = encodeURIComponent(centre_name);
  152.     var encodedAudioName = encodeURIComponent(audio_name);
  153.     verificationSelection(audio_id, centre_id, encodedCentreName, encodedAudioName);
  154.     }
  155. }
  157. function verificationSelection(audio_id, centre_id, centre_name, audio_name) {
  158.     var decodedCentreName = decodeURIComponent(centre_name);
  159.     var decodedAudioName = decodeURIComponent(audio_name);
  161.     // Now you can use the decodedCentreName as needed
  162.     if (dateSelectionne !== "") {
  163.         if (getCookie('token') === "" || getCookie('token') === null) {
  164.             rendezVousEnCours = 1;
  165.             audioIDSelectionne = audio_id;
  166.             $('#loginModal').modal('show');     
  167.            // alert("sel");
  168.            
  169.         } else {
  170.             $("#loadingRDV").css("display", "flex");
  171.             rendezVousEnCours = 1;
  172.             infoRdvHtmlMotif(audio_id, centre_id, decodedCentreName, decodedAudioName);    
  173.         }
  174.     } else {
  175.         $("#alertDate" + audio_id + centre_id).css("display", "block");
  176.     }
  178.      $(document).on('hidden.bs.modal', '#loginModal', function () {
  179.        //alert("lgoin");
  180.         if (rendezVousEnCours == 1 && getCookie('token') != "" && getCookie('token') != null ){
  181.  $("#loadingRDV").css("display", "flex");
  182.             rendezVousEnCours = 1;
  183.             infoRdvHtmlMotif(audio_id, centre_id, decodedCentreName, decodedAudioName);         }
  184.       })
  186. }
  191. function audioActif(id){
  192.     audios = document.getElementsByClassName('audioInfo');
  193.     for (audio of audios){
  194.         audio.classList.remove("actif");
  195.     }
  196.     audio_actif_id = id;
  197.     document.getElementById(id).classList.add("actif");
  198.     changeHoraireAudio(id);
  199.     
  200. }
  204.     </script>
  207.     <style>
  208.     .gm-style .gm-style-iw-c{
  209.         padding:0 !important;
  210.             border: 1px solid #E2E2E2 !important;
  211.     }
  212.     .gm-style-iw-d{
  213.         overflow:hidden !important;
  214.     }
  216.     button.gm-ui-hover-effect img {
  217.         display: none !important;
  218.     }
  219.     </style>
  221.     {% endfor %}
  222. {% else  %}
  223. {% endif %}