templates/rendez_vous/index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% block title %}Hello DefaultController!{% endblock %}
  3. {% block style %} <link href="{{asset('css/about.css')}}" rel="stylesheet">{% endblock %}
  4. {% block body %}
  5. <style>
  6. .titreRdv
  7. {
  8.     color:#061d32;
  9.     font-size:20px
  10. }
  11. .table-condensed
  12. {
  13.     width:100%
  14. }
  15. .datepicker
  16. {
  17.     width:350px
  18. }
  19. .datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover
  20. {
  21.     background:#c1ab92 !important
  22. }
  23. .custom-block-03
  24. {
  25.     margin-top:1000px
  26. }
  27. .disponible
  28. {
  29.     background:#c1ab92;
  30.     margin-bottom:20px
  31. }
  32.   @media (min-width: 576px)
  33.   {
  34. .modal-dialog {
  35.   max-width: 800px;
  36.   margin: 5.75rem auto;
  37. }
  38.   }
  39. </style>
  40.   
  41.   
  42.                 <div  class="Rectangle-1"><a href="{{path('app_default')}}"><img src="{{asset('img/group.svg')}}" ></a></div>
  43.                 <div  class="Rectangle-0"><h2>Prendre rendez-vous</h2>
  44.                     <div class="row">
  45.                         <div class="col-lg-4" style="background:#c1ab92">
  46.                        
  47.                             <label class="titreRdv">Choisir un lieu</label>
  48.                             <div style="color:red; font-size:20px; display:none" id="erreurLieu">Vous devez choisir un lieu</div>
  49.                             <select class="form-control" required id="lieu" name="lieu" onchange="selectEtab()">
  50.                                 <option value="">-- Votre lieu</option>
  51.                                 {% for res in lieux %}
  52.                                 <option value="{{res.id}}" {% if lieuGet == res.id %}selected{% endif %}>{{res.libelle}}</option>
  53.                                 {% endfor %}
  54.                             </select>
  55.                              <label class="titreRdv">Choisir un avocat</label>
  56.                             <div style="color:red; font-size:20px; display:none" id="erreurLieu">Vous devez choisir un lieu</div>
  57.                             <select class="form-control" required id="avocat" name="avocat" onchange="selectAvocat()">
  58.                                 <option value="">-- Votre avocat</option>
  59.                                 {% for res in avocatsListe %}
  60.                                 <option value="{{res.avocats.id}}" {% if avocatGet == res.avocats.id %}selected{% endif %}>{{res.avocats.nom}} {{res.avocats.prenom}}</option>
  61.                                 {% endfor %}
  62.                             </select>
  63.                            
  64. {% if lieuGet != 'vide' and avocatsListe is not empty and avocat is not empty %}
  65.                              <label class="titreRdv">Choisir une date</label>
  66.                               <div style="color:red; font-size:20px; display:none" id="erreurDate">Vous devez choisir une date</div>
  67.                             <input type="text" name="date" id="dateS" class="form-control datepicker" required>
  68.                           
  69.                             <br>
  70.                             <button type="button" class="btn btn-success" onclick="tranchesHoraires()">Voir les disponibilités</button>
  71.                                {% endif %}
  72.                             <br><br>
  73.                          
  74.                         </div>
  75.                         <div class="col-lg-8"><h2 style="color:#212529; padding-bottom:0">Choisissez un créneau horaire</h2>
  76.                         <hr>
  77.                         <div id="horaires">
  78.                             <div class="alert alert-danger" role="alert" style="font-size:18px">
  79.                             Vous devez d'abord valider une date souhaitée pour voir afficher les créneaux disponibles
  80.                             </div>
  81.                             </div>
  82.                         
  83.                         </div>
  84.                     </div>
  85.                 </div>
  86.                 
  87.           
  88.         </div>
  89.     </div>
  90. </div>
  91. <!-- Modal -->
  92. <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  93.   <div class="modal-dialog" role="document">
  94.     <div class="modal-content">
  95.       <div class="modal-header">
  96.         <h5 class="modal-title" id="exampleModalLabel" style="color:#000">Dernière étape pour confirmer le rendez-vous</h5>
  97.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  98.           <span aria-hidden="true">&times;</span>
  99.         </button>
  100.       </div>
  101.       <div class="modal-body">
  102.       <form action="{{path('confirmerRdv')}}" method="post">
  103. {% if avocat %}
  104.       <input type="hidden" name="avocatInput" value="{{avocat.id}}">
  105.       {% endif %}
  106.       <input type="hidden" name="dateInput" id="dateInput" value="">
  107.       <input type="hidden" name="horaireInput" id="horaireInput" value="">
  108.       <input type="hidden" name="lieuInput" id="lieuInput" value="">
  109.         <div class="row">
  110.          <div class="col-sm-4">
  111.             {% if avocat %} <span>Avocat : Maître {{avocat.nom}} {{avocat.prenom}}</span> {% endif %}
  112.         </div> 
  113.         <div class="col-sm-4">
  114.              <span>Date : </span><span id="dateSelect"></span> 
  115.         </div> 
  116.          <div class="col-sm-4">
  117.             <span >Horaire : </span><span id="horaireSelect"></span> 
  118.         </div>
  119.         </div>
  120. <hr>
  121.         <div class="row">
  122.             <div class="col-sm-6">
  123.                 <label>Votre nom</label>
  124.                 <input type="text" class="form-control" name="nom" required>
  125.             </div>
  126.             <div class="col-sm-6">
  127.                 <label>Votre prénom</label>
  128.                 <input type="text" class="form-control" name="prenom" required>
  129.             </div>
  130.         </div>
  131. <br>
  132.         <div class="row">
  133.             <div class="col-sm-6">
  134.                 <label>Votre téléphone</label>
  135.                 <div class="row">
  136.                     <div class="col-4">
  137.                         <select class="form-control" name="extension">
  138.                             <option value="+32">+32</value>
  139.                             <option value="+33">+33</value>
  140.                             <option value="+352">+352</value>
  141.                         </select>
  142.                     </div>
  143.                     <div class="col-8">
  144.                         <input type="text" class="form-control" name="tel" required>
  145.                     </div>
  146.                 </div>
  147.                 </div>
  148.             <div class="col-sm-6">
  149.                 <label>Votre email</label>
  150.                 <input type="email" class="form-control" name="email" required>
  151.             </div>
  152.         </div>
  153.         
  154.         <br>
  155.         <div class="row">
  156.             <div class="col-sm-12">
  157.                 <label>Motif de votre demande</label>
  158.                 <textarea name="motif" class="form-control"></textarea>
  159.             </div>
  160.            
  161.         </div>
  162.       </div>
  163.       <div class="modal-footer">
  164.         <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
  165.         <button type="submit" class="btn btn-primary">Confirmer le rendez-vous</button>
  166.       </div>
  167.       </form>
  168.     </div>
  169.   </div>
  170. </div>
  171. {% endblock %}
  172. {% block javascripts %}
  173. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  174. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  175. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  176.  <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
  177.          rel = "stylesheet">
  178.       <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
  179.       <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  180.       
  181.       <style>
  182. .ui-widget-header {
  183.   border: 1px solid #061d32;
  184.   background: #061d32;
  185.   color: #ffffff;
  186.   font-weight: bold;
  187. }
  188. .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  189.   border: 1px solid #061d32;
  190.   background: #061d32;
  191.   font-weight: bold;
  192.   color: #fff;
  193. }
  194. </style>
  195.       <!-- Javascript -->
  196.       <script>
  197.          $(function() {
  198.             
  199.            
  200.             var enableDays = [
  201.     {% for res in fermeture %}
  202.         "{{res}}",
  203.         {% endfor %}
  204. ];
  205.             function enableAllTheseDays(date) {
  206.                 var sdate = $.datepicker.formatDate( 'd-m-yy', date)
  207.                 if($.inArray(sdate, enableDays) != -1) {
  208.                     return [true];
  209.                 }
  210.                 return [false];
  211.             }
  212.             $( ".datepicker" ).datepicker({
  213.                 closeText: 'Fermer',
  214. prevText: 'Précédent',
  215. nextText: 'Suivant',
  216. currentText: 'Aujourd\'hui',
  217. monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
  218. monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  219. dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  220. dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  221. dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
  222. weekHeader: 'Sem.',
  223.                 dateFormat: 'dd-mm-yy', 
  224.                 beforeShowDay: enableAllTheseDays,minDate: 8});
  225.            
  226.          });
  227.       </script>
  228.   
  229.   
  230.   
  231.   <script>
  232.   function tranchesHoraires()
  233.     {
  234.        
  235.         var date = document.getElementById('dateS').value
  236.          var lieu = document.getElementById('lieu').value
  237.          var avocat = document.getElementById('avocat').value
  238.         if(lieu == '')
  239.         {
  240.             document.getElementById("erreurLieu").style.display = "block"; 
  241.         }
  242.         else
  243.         {
  244.             document.getElementById("erreurLieu").style.display = "none"; 
  245.         }
  246.          if(date == '')
  247.         {
  248.             document.getElementById("erreurDate").style.display = "block"; 
  249.         }
  250.         else
  251.         {
  252.             document.getElementById("erreurDate").style.display = "none"; 
  253.         }
  254.          if(date != '' && lieu != '')
  255.         {
  256.             $.ajax({
  257.                 url: "{{ path('ajaxTranchesHoraires') }}",
  258.                 type : "post",
  259.                 data: {'date':date, 'lieu':lieu, 'avocat':avocat},
  260.                 success:function(retour){
  261.                     $('#horaires').html(retour)
  262.                 }
  263.             });
  264.         }
  265.        
  266.     }
  267.      function selectHoraire(date,lieu,tranche)
  268.         {
  269.              
  270.             $('#dateSelect').html(date)
  271.             $('#horaireSelect').html(tranche)
  272.             $('#dateInput').val(date)
  273.             $('#horaireInput').val(tranche)
  274.             $('#lieuInput').val(lieu)
  275.            
  276.         }
  277.          function selectEtab()
  278.         {
  279.             var id = $('#lieu').val()
  280.             window.location.href = "?lieu="+id;
  281.         }
  282.           function selectAvocat()
  283.         {
  284.             var id = $('#avocat').val()
  285.             var idLieu = $('#lieu').val()
  286.             window.location.href = "?lieu="+idLieu+"&avocat="+id;
  287.         }
  288.   </script>
  289.   
  290. {% endblock %}