templates/inscription/inscription-centre.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block content %}
  4. <div class="page-collect-centre-inscription-form apk-page-inscription">
  5.     <div class="uk-container uk-margin-large-top">
  6.         <h2 class="h-big-lowcase-grey">{{ "Prendre un rendez-vous dans un centre de prélèvement"|trans }}</h2>
  7.         <div class="uk-grid" uk-grid>
  8.             <div class="uk-width-2-3@s">
  9.                 <div class="uk-text-uppercase uk-width-1-1" style="border-bottom: 1px solid grey;">{{ 'Votre Centre'|trans }}</div>
  10.                 <div class="adresse uk-margin-top">
  11.                     <ul class="fa-ul">
  12.                         <li>
  13.                             <img uk-svg width="14" height="14" src="/static/img/pictos/position.svg" />
  14.                             <strong>{{ centre.site.name }}</strong><br>
  15.                             {{ centre.site.address }}<br>
  16.                             {{ centre.site.zip }} {{ centre.site.city }}
  17.                         </li>
  18.                     </ul>
  19.                 </div>
  20.                 <div>
  21.                     <ul class="fa-ul telephone">
  22.                         <li>
  23.                             <img uk-svg width="14" height="14" src="/static/img/pictos/phone.svg" />
  24.                             <a href="tel:{{ centre.site.phone}}"
  25.                                target="_blank">{{ centre.site.phone}}</a>
  26.                         </li>
  27.                     </ul>
  28.                 </div>
  29.                 <div class="horaires">
  30.                     <ul class="fa-ul">
  31.                         <li>
  32.                             <img uk-svg width="14" height="14" src="/static/img/pictos/horaires.svg" />
  33.                             {# <strong>{{ 'Horaires'|trans }} {{ 'du'|trans }} {{ date['weekStartDate'] }} {{'au'|trans}} {{ date['weekEndDate'] }}</strong><br/> #}
  34.                             {% for jour,horaire in centre.days %}
  35.                                 {% if horaire %}
  36.                                     {{ jour|trans }} : {{ horaire }}
  37.                                     <br/>
  38.                                 {% else %}
  39.                                     {{ jour|trans }} : {{ "Fermé"|trans }}
  40.                                     <br/>
  41.                                 {% endif %}
  42.                             {% endfor %}
  43.                         </li>
  44.                     </ul>
  45.                 </div>
  46.                 {% if centre.site.informations %}
  47.                 <div class="apk-special-container">
  48.                     {{ centre.site.informations|raw }}
  49.                 </div>    
  50.                 {% endif %}
  51.                 <div>
  52.                 </div>
  53.             </div>
  54.             <div class="uk-width-1-3@s">
  55.                 {% if centre.site.picture %}
  56.                     <figure class="uk-margin-top">
  57.                         <img src="{{ centre.site.picture }}" alt="{{ centre.site.name }}" />
  58.                         {% if centre.site.copyright %}
  59.                             <figcaption>{{ centre.site.copyright }}</figcaption>
  60.                         {% endif %}
  61.                     </figure>
  62.                 {% else %}
  63.                     <img src="/static/img/logos/logo-crb.svg" alt="Croix-Rouge de Belgique"/>
  64.                 {% endif %}
  65.             </div>
  66.         </div>
  67.     </div>
  69.     <div class="uk-container uk-margin-medium-top">
  70.         <form class="uk-form" role="form" name="form-validation" id="form-validation" method="POST">
  71.             <div class="uk-text-uppercase uk-width-1-1" style="border-bottom: 1px solid grey;">{{ "A quelle date souhaitez-vous vous inscrire ?"|trans }}</div>
  72.             <div uk-slider>
  73.                 <div class="uk-position-relative">
  74.                     <div class="uk-slider-container uk-padding">
  75.                         <ul class="uk-slider-items uk-grid-small" uk-grid>
  76.                             {% for i in 0..5 %}
  77.                                 <li class=" uk-width-1-4@m">
  78.                                     <div class="apk-calendar">
  79.                                         {{ calendriers[i]|raw }}
  80.                                     </div>
  81.                                 </li>
  82.                             {% endfor %}
  83.                         </ul>
  84.                     </div>
  85.                     <div class="uk-visible@s">
  86.                         <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
  87.                         <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
  88.                     </div>
  89.                 </div>
  90.                 <ul class="uk-slider-nav uk-dotnav uk-margin-bottom uk-margin-left"></ul>
  91.             </div>
  92.             <div class="uk-grid-small" uk-grid>
  93.                 <div class="uk-width-1-1">
  94.                     <div class="uk-text-uppercase" style="border-bottom: 1px solid grey;">
  95.                         <label class="control-label">
  96.                             {{ "A quelle heure souhaitez-vous prendre rendez-vous le"|trans }} <span id="dateSelect" name="dateSelect" class="date-selected">...</span> ?
  97.                         </label>
  98.                     </div>
  99.                     <div class="uk-width-1-1@m" id="resultats">
  100.                         <div class="resultats-placeholder">
  101.                             <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="info"><path fill="currentColor" d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="currentColor" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
  102.                             {{ "Veuillez sélectionner d'abord une date dans le calendrier au-dessus"|trans }}
  103.                         </div>
  104.                     </div>
  105.                 </div>
  106.             </div>
  107.             <div class="uk-grid">
  108.                 <div class="uk-width-1-1">
  109.                     <div class="uk-text-uppercase" style="border-bottom: 1px solid grey;">
  110.                         {{ "Avant de terminer votre inscription,"|trans }}<br/>
  111.                         {{ "Nous avons besoin de ces quelques informations"|trans }}
  112.                     </div>
  113.                 </div>
  114.             </div>
  115.             <div class="uk-grid">
  116.                 {% if errorMessage or errorMessage != "" %}
  117.                     <div class="uk-width-1-1">
  118.                         <div class="uk-margin-bottom uk-alert uk-alert-warning" id="error-msg" uk-alert>{% if errorMessage %}{{ errorMessage|trans }}{% endif %}</div>
  119.                     </div>
  120.                 {% endif %}
  121.                 <input type="hidden" name="akimedia-centre" value="{{ centre.site.id }}">
  122.                 <div class="uk-grid-medium" uk-grid>
  123.                     <div class="uk-width-1-2@s ">
  124.                         <label class="control-label required" for="collecte_centre_form_lastname">{{ 'Nom'|trans }}</label><br/>
  125.                         <input type="text" id="collecte_centre_form_lastname" name="lastname" required="required" class="uk-input">
  126.                     </div>
  127.                     <div class="uk-width-1-2@s">
  128.                         <label class="control-label required" for="collecte_centre_form_firstname">{{ 'Prénom'|trans }}</label><br/>
  129.                         <input type="text" id="collecte_centre_form_firstname" name="firstname" required="required" class="uk-input">
  130.                     </div>
  131.                     <div class="uk-width-1-2@s">
  132.                         <label class="control-label required" for="collecte_centre_form_email">{{ 'Adresse mail'|trans }}</label><br/>
  133.                         <input type="email" id="collecte_centre_form_email" name="email" required="required" class="uk-input">
  134.                     </div>
  135.                     <div class="uk-width-1-2@s">
  136.                         <label class="control-label required" for="collecte_centre_form_email2">{{ 'Confirmez votre adresse mail'|trans }}</label><br/>
  137.                         <input type="email" id="collecte_centre_form_email2" name="email2" required="required" class="uk-input">
  138.                     </div>
  139.                     <div class="uk-width-1-2@s">
  140.                         <label class="control-label required" for="collecte_centre_form_phone">{{ 'Téléphone'|trans }}</label>
  141.                         <input type="text" id="collecte_centre_form_phone" name="phone" required="required" class="uk-input">
  142.                     </div>
  143.                     <div class="uk-width-1-2@s">
  144.                         <label class="control-label required" for="dtenaissance">{{ 'Date de naissance jj/mm/aaaa'|trans }}</label>
  145.                         <input class="uk-input" type="date" name="dtenaissance"  id ="dtenaissance"
  146.                             data-min="{{yearAllowed.min|date('Y-m-d')}}" data-max="{{yearAllowed.max|date('Y-m-d')}}"
  147.                             value="" autocomplete="false" maxlength="10" required>
  148.                     </div>
  149.                     <div class="uk-width-1-1 apk-choix uk-margin-top uk-grid-margin uk-first-column">
  150.                         <div class="uk-grid uk-grid-small uk-child-width-1-2@s" uk-grid>
  152.                             <div>
  153.                                 <div class="apk-sang">
  154.                                     <div class="uk-margin-top uk-position-relative">
  155.                                         <div>
  156.                                             <label class="required">{{ 'Déjà donné du sang'|trans }}</label>
  157.                                             <div id="inscription_form_plasma">
  158.                                                 <input type="radio" id="collecte_centre_form_alreadyBlood_0" name="alreadyBlood" required="required" value="OUI">
  159.                                                 <label for="collecte_centre_form_alreadyBlood_0" class="required apk-label-is-linked-to-field">{{ "Oui"|trans }}</label>
  160.                                                 <input type="radio" id="collecte_centre_form_alreadyBlood_1" name="alreadyBlood" required="required" value="non" checked="checked" class="apk-field-is-checked">
  161.                                                 <label for="collecte_centre_form_alreadyBlood_1" class="required apk-label-is-linked-to-field">{{ "Non"|trans }}</label>
  162.                                             </div>
  163.                                         </div>
  164.                                     </div>
  165.                                 </div>
  166.                             </div>
  168.                             <div>
  169.                                 <div class="apk-plasma">
  170.                                     <div class="uk-margin-top uk-position-relative">
  171.                                         <div>
  172.                                             <label class="required">{{ 'Déjà donné du plasma'|trans }}</label>
  173.                                             <div id="inscription_form_plasma">
  174.                                                 <input type="radio" id="collecte_centre_form_alreadyPlasma_0" name="alreadyPlasma" required="required" value="OUI">
  175.                                                 <label for="collecte_centre_form_alreadyPlasma_0" class="required apk-label-is-linked-to-field">{{ "Oui"|trans }}</label>
  176.                                                 <input type="radio" id="collecte_centre_form_alreadyPlasma_1" name="alreadyPlasma" required="required" value="non" checked="checked" class="apk-field-is-checked">
  177.                                                 <label for="collecte_centre_form_alreadyPlasma_1" class="required apk-label-is-linked-to-field">{{ "Non"|trans }}</label>
  178.                                             </div>
  179.                                         </div>
  180.                                     </div>
  181.                                 </div>
  182.                             </div>
  184.                         </div>
  185.                     </div>
  187.                     <div class="uk-width-1-1">
  188.                         <label class="gdpr-label">
  189.                             <input type="checkbox" id="collecte_centre_form_gdpr" name="gdpr" required="required" class="uk-checkbox uk-margin-small-right" value="1">{{ 'En cochant cette case, vous acceptez la manière dont vos données sont traitées.'|trans }} *</label>
  190.                     </div>
  191.                     <div class="uk-width-1-1">
  192.                         <div class="uk-display-inline-block">
  193.                             <button type="submit" id="collecte_centre_form_submit" class="uk-button">{{"Envoyer"|trans}}</button>
  194.                         </div>
  195.                     </div>
  196.                 </div>
  198.             </div>
  199.             <input id="collecte_centre_form_centre" name="centre" type="hidden" value="{{ centre.site.id }}">
  200.             <input id="collecte_centre_form_date" name="date" type="hidden" value="">
  201.             <input id="collecte_centre_form_horaire" name="horaire" type="hidden" value="">
  202.             <input id="collecte_centre_form_heure" name="heure" type="hidden" value="">
  203.         </form>
  204.     </div>
  206. </div>
  208.     
  209. {% endblock %}
  210. {% block inlinescripts %}
  212. <link href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css" rel="stylesheet">
  213. <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
  214. <script src="https://npmcdn.com/flatpickr@4.6.13/dist/l10n/{{app.request.locale}}.js"></script>
  216.     {% if not editmode %}
  217. <script>
  218.     var borne = [];
  219.     {% set now = "now"|date("Y-m-d") %}
  220.     {% for date in dates %}
  221.         {% set d = date|date("Y-m-d") %}
  222.         {% if d >= now %}
  223.             borne.push('{{ d }}');
  224.         {% endif %}
  225.     {% endfor %}
  226.     
  228.     $( document ).ready(function() {
  230.         //gestion de la birthDate
  231.         newMaxDate = false;
  232.         const BirthMaxOri = new Date($('#dtenaissance').attr('data-max'));
  233.         const BirthMinOri = new Date($('#dtenaissance').attr('data-min'));
  235.         let inputBirthDate = $("#dtenaissance").flatpickr({
  236.             locale : "{{app.request.locale}}",
  237.             dateFormat : "d/m/Y",
  238.             minDate : BirthMinOri,
  239.             maxDate : BirthMaxOri,
  240.             allowInput: true,
  241.         });
  243.         function setDateMax () {
  244.             let BirthMax = BirthMaxOri;
  245.             let BirthMin = BirthMinOri;
  246.             let newMaxDate = null;
  247.             let radioSelected = null;
  249.             let found = false;
  250.             $('.schedule-item').each(function(el){
  251.                 if($(this).is('.is-selected')) {
  252.                     found = true;
  253.                     radioSelected = $(this).find('input:checked');
  254.                 }
  255.             });
  256.             if(found) {
  257.                 newMaxDate = radioSelected.attr('data-id');
  258.                 BirthMax18 = new Date(newMaxDate);
  259.                 newBirthMax = new Date(BirthMax18.setFullYear(BirthMax18.getFullYear() - parseFloat({{yearAllowed.year}})));
  260.                 inputBirthDate.set('maxDate', newBirthMax);
  261.             } else {
  262.                 inputBirthDate.set('maxDate', BirthMaxOri);
  263.             }
  265.             inputBirthDate.clear();
  266.         }
  268.         setDateMax();
  269.         
  270.         $("form").on("submit", function() {
  272.             if($("#collecte_centre_form_email").val() != $("#collecte_centre_form_email2").val()){
  273.                 $("#error-msg").text("{{ 'Les adresses e-mails sont différentes, veuillez corriger'|trans }}");
  274.                 $("#error-msg").addClass("uk-padding-small uk-margin-bottom");
  275.                 console.log('in');
  276.                 return false;
  277.             }
  279.             
  280.             if($("#collecte_centre_form_horaire").val() == 'zzzzz'){
  281.             $("#error-msg").text("{{ 'Veuillez choisir une date et une heure.'|trans }}");
  282.             return false;
  283.         }
  284.         
  285.         // Ajout du test de validiter de l'horaire pour eviter les doublon
  286.         var horaire = $("#collecte_centre_form_horaire").val()+'|'+$("#collecte_centre_form_heure").val();
  287.         var codeCentre = $("#collecte_centre_form_centre").val();
  288.         });        
  290.         $("form").on("submit", function() {
  291.         });
  294.         $('.day').each(function () {
  295.             console.log ($(this).attr('data-date'));
  296.             if(borne.includes($(this).attr('data-date'))){
  297.                 $(this).addClass('date_actif');
  298.             }
  299.             else {
  300.                 $(this).addClass('not-active');
  301.             }
  304.         });
  306.         $('.day.date_actif').on("click", function () {
  307.             $('.day.is-selected').removeClass('is-selected');
  308.             $(this).addClass('is-selected');
  310.             var date = $(this).attr('data-date');
  311.             var centreid = $(this).attr('data-centre-id');
  313.             $("#dateSelect").html($(this).attr('data-date-format'));
  314.             $("#collecte_centre_form_date").val(date);
  316.             var lang = '{{ app.request.locale }}';
  317.             
  318.             $.ajax({
  319.                 dataType: "json",
  320.                 type: "GET",
  321.                 url: "{{ path('getHoraireCentreAkimedia') }}",
  322.                 data: {'date': date ,'centreid':centreid, 'lang':lang},
  323.                 success: function (data) {
  324.                     
  325.                     $('#resultats').html(data["msg"]);
  326.                     $("input[name='inscription']").on("click", function(){ 
  327.                         $("#collecte_centre_form_heure").val($(this).val());
  328.                         $("#collecte_centre_form_horaire").val($(this).attr("data-id"));
  329.                     });                    
  330.                     console.log(data);
  331.                     inputBirthDate.clear();
  332.                     
  333.                     $('.schedule-item').on("click", function () {
  334.                         var $radioSelected = $(this).find('.uk-radio');
  335.                         if($radioSelected.attr("data-id")){
  336.                                 
  337.                         $('.schedule-item').removeClass('is-selected');
  338.                         $(this).addClass('is-selected');
  339.                         $radioSelected.prop('checked', true);
  340.                         setDateMax();
  342.                         $("#collecte_centre_form_heure").val($radioSelected.val());
  343.                         $("#collecte_centre_form_horaire").val($radioSelected.attr("data-id"));
  344.                         }
  345.                         else{
  346.                                 $('.schedule-item').removeClass('is-selected');
  347.                         }
  348.                     });
  349.                 },
  350.                 error: function (xhr, textStatus, errorThrown) {
  351.                     UIkit.notification('{{ "Oops! Une erreur s'est produite. Veuillez réessayer."|trans }}', {status: 'danger'});
  352.                     console.log(xhr, textStatus, errorThrown);
  354.                 }
  355.             });
  358.         })
  360.     });
  361. </script>
  362.     {% endif %}
  363. {% endblock inlinescripts %}