templates/Commande/domicile.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block headerCss %}{% endblock %}
  3. {% block navHome %} selected{% endblock %}
  4. {% block navHomeHamburger %} active{% endblock %}
  5. {% block classHome %} class="home"{% endblock %}
  7. {% block contenu %}
  8.     <div class="app-commande-domicile  bg-curve-500">
  9.         {% include 'Commande/subheader.html.twig' %}
  11.         <section class="step1">
  12.             <div class="title">Vos Informations</div>
  14.             {{ form_start(form, {attr:{'class': 'forms' }}) }}
  15.                 <div class="names">
  16.                     <div class="name first">
  17.                         <label for="firstname">Nom <span class="red">*</span></label>
  18.                         {{ form_widget(form.nom) }}
  19.                     </div>
  20.                     <div class="name last">
  21.                         <label for="firstname">Prénom <span class="red">*</span></label>
  22.                         {{ form_widget(form.prenom) }}
  23.                     </div>
  24.                 </div>
  25.                 <div class="number">
  26.                     <label for="phone">Numéro de téléphone <span class="red">*</span></label>
  27.                     {{ form_widget(form.tel) }}
  28.                 </div>
  29.                 <div class="email">
  30.                     <label for="email">Email <span class="red">*</span></label>
  31.                     {{ form_widget(form.email) }}
  32.                 </div>
  33.                 <div class="gender">
  34.                     <label for="sexe">Sexe <span class="red">*</span></label>
  35.                     {{ form_widget(form.sexe) }}
  36.                 </div>
  37.                 <div class="ages">
  38.                     <label for="age">Âge <span class="red">*</span></label>
  39.                     {{ form_widget(form.age) }}
  40.                 </div>
  42.                 <div class="adresse">
  43.                     <label for="age">Adresse <span class="red">*</span></label>
  44.                     {{ form_widget(form.adresse) }}
  45.                 </div>
  47.                 <div class="codePostal">
  48.                     <label for="age">Code Postal <span class="red">*</span></label>
  49.                     {{ form_widget(form.codePostal) }}
  50.                 </div>
  52.                 <div class="code">
  53.                     <label for="age">CODES / ÉTAGE / INTERPHONE / BÂTIMENT <span class="red">*</span></label>
  54.                     {{ form_widget(form.complement) }}
  55.                 </div>
  57.                 <div class="btns">
  58.                     <div class="btn-text">
  59.                         <div class="btn-title">Pourquoi ces informations ?</div>
  60.                         <div class="btn-desc">Afin de permettre la meilleure prise en charge pour votre consultation.</div>
  61.                         <div class="btn-desc">En cliquant sur « Passer à l'étape suivante » vous acceptez nos <a href="{{ URL_URGD }}/fr/conditions-generales">CGV</a> ainsi que nos <a href="{{ URL_URGD }}/fr/conditions-generales">CGU</a>.</div>
  63.                     </div>
  64. {#                    <a class="submit-button" href="">#}
  65. {#                        <div class="button">#}
  66. {#                            <div class="text">Passer à l’étape suivante</div>#}
  67. {#                            <span class="material-icons">#}
  68. {#                                arrow_right_alt#}
  69. {#                            </span>#}
  70. {#                        </div>#}
  71. {#                    </a>#}
  73.                     <button  data-loading-text="En cours de chargement..." id="submit-button" class="submit-button" type="submit" style="border: none" onclick="sendEvent()"><div class="button">
  74.                             <div class="text">Passer à l’étape suivante</div>
  75.                             <span class="material-icons">
  76.                                 arrow_right_alt
  77.                             </span>
  78.                         </div></button>
  80.                 </div>
  81.                 <div class="status">
  82.                     <div class="step">Étape 1/3</div>
  83.                     <div class="bar">
  84.                         <div class="b1"></div>
  85.                     </div>
  86.                 </div>
  88.             {{ form_end(form) }}
  89.         </section>
  92.     </div>
  93.     <style>.button-loading {
  94.             background-color: #ccc; /* Gray color */
  95.             pointer-events: none; /* Prevents clicking while loading */
  96.         }
  97.     </style>
  98. {% endblock %}
  100. {% block javascripts %}
  101.     {{ parent() }}
  102.     <script type="text/javascript"
  103.             src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=AIzaSyBJtK198y2pIPcUrZ0ztURy7en0_R3DI60"></script>
  105.     <script type="text/javascript">
  107.         document.addEventListener('DOMContentLoaded', function () {
  108.             var form = document.querySelector('form.forms'); // Adjust the selector to match your form
  109.             var submitButton = document.getElementById('submit-button');
  111.             form.addEventListener('submit', function () {
  112.                 // Change button to loading state
  113.                 submitButton.classList.add('button-loading');
  114.                 submitButton.querySelector('.text').textContent = submitButton.getAttribute('data-loading-text');
  115.                 submitButton.disabled = true; // Disable the button to prevent multiple submissions
  116.             });
  117.         });
  118.         
  119.         function sendEvent() {
  120.             gtag('event', 'confirmation    ', {
  121.                 'event_category': 'medecin_a_domicile',
  122.                 'event_label': 'CTA_confirmer_ma_visite'
  123.             });
  124.         }
  128.         // Google autocomplete
  129.         function initializeAutocomplete(id) {
  130.             var element = document.getElementById(id);
  131.             if (element) {
  132.                 var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
  133.                 google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
  134.             }
  135.         }
  137.         function onPlaceChanged() {
  138.             var place = this.getPlace();
  139.             console.log('place', place);  // Uncomment this line to view the full object returned by Google API.
  141.             if(place && place.address_components)
  142.                 for(var i = 0; i < place.address_components.length; i++)
  143.                     if(place.address_components[i].types[0] === 'postal_code')
  144.                         $('#commande_codePostal').val(place.address_components[i].short_name);
  146.             if (place && place.geometry && place.geometry.viewport && place.geometry.viewport) {
  147.                 var i = 0;
  148.                 var placeGeometry = place.geometry.viewport;
  149.                 var latitude = 0;
  150.                 var longitude = 0;
  152.                 for (var property in placeGeometry) {
  153.                     if (placeGeometry.hasOwnProperty(property)) {
  155.                         if (i === 0) {
  156.                             for (var subProperty in placeGeometry[property]) {
  157.                                 if (placeGeometry[property].hasOwnProperty(subProperty)) {
  158.                                     longitude = placeGeometry[property][subProperty];
  159.                                 }
  160.                             }
  162.                             i++;
  163.                         }
  164.                         else {
  165.                             for (var subProperty in placeGeometry[property]) {
  166.                                 if (placeGeometry[property].hasOwnProperty(subProperty)) {
  167.                                     latitude = placeGeometry[property][subProperty];
  168.                                 }
  169.                             }
  170.                         }
  172.                     }
  173.                 }
  175.                 console.log('latitude', latitude);
  176.                 console.log('longitude', longitude);
  178.                 $('#commande_latitude').val(latitude);
  179.                 $('#commande_longitude').val(longitude);
  180.             }
  181.         }
  184.         google.maps.event.addDomListener(window, 'load', function () {
  185.             initializeAutocomplete('commande_adresse');
  186.         });
  190.     </script>
  191. {% endblock %}