templates/Nordinfo/Main/proposerevent.html.twig line 1

Open in your IDE?
  1. {% extends 'Nordinfo/Main/base.html.twig' %}
  2. {% block title %}Proposer un évènement - Nord Info
  3. {% endblock %}
  4. {% block body_class %}body-signaler bgColorGrey
  5. {% endblock %}
  6. {% block body %}
  7.   <main role="main" class="mainContent pt-0 pb-0 bgColorHighlightBlue" data-form-validation-step="hidden"
  8.         id="mainContent" tabindex="-1">
  9.     {% if referer is not null %}
  10.       {% set url_back = referer %}
  11.     {% else %}
  12.       {% set url_back = path('info') %}
  13.     {% endif %}
  14.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'_list-page'} %}
  15.     <div class="container pt-5">
  16.       <div class="containerPageHeader">
  17.         <h1 class="d-validation-none" data-focus-content-target="initial">Proposer un évènement</h1>
  18.         <h1 class="d-none d-validation-block">Vérifier votre message</h1>
  19.       </div>
  20.       <article class="pt-4">
  21.         <p class="d-validation-none">
  22.           Remplissez le formulaire ci-après pour proposer un évènement.
  23.           Cet évènement intégrera le fil “Agenda” de Nord info une fois validé par l’équipe de modération.
  24.         </p>
  25.         <p class="d-none d-validation-block">
  26.           Vérifiez les informations de votre évènement, répondez à la question de vérification puis cliquez sur Envoyer
  27.         </p>
  28.         <div class="pb-4"></div>
  29.         <p class="text-center d-validation-none">Les champs suivis d'un astérisque (<span class="colorRed">*</span>)
  30.           sont obligatoires</p>
  31.         <div class="alert alert-danger alert-errors" id="alertErrorsContainer">
  32.           <p class="mb-2">Les champ suivants doivent être renseignés :</p>
  33.           <ul class="mb-0" id="alertErrorsList"></ul>
  34.         </div>
  35.         <form action="{{ path('send_form_event') }}" enctype="multipart/form-data" method="POST"
  36.               class="needs-validation formCustom" novalidate>
  37.           <input type="hidden" name="raison">
  38.           <div class="form-validation-overlay mb-5">
  39.             <div class="form-group">
  40.               <div class="__input-wrapper">
  41.                 <div class="__inner">
  42.                   <label for="inputOrganisateur">
  43.                     <span class="label-text">Organisateur de l'évènement <span class="colorRed">*</span></span>
  44.                   </label>
  45.                   <input name="organisateur" type="text" data-paste-clear autocomplete="organization"
  46.                          class="form-control" id="inputOrganisateur" placeholder="" required>
  47.                 </div>
  48.               </div>
  49.             </div>
  50.             <div class="form-group">
  51.               <div class="__input-wrapper">
  52.                 <div class="__inner">
  53.                   <label for="inputEmail">
  54.                     <span class="label-text">Votre adresse courriel (ne sera pas diffusée) (ex : nom@domaine.fr) <span
  55.                         class="colorRed">*</span></span>
  56.                   </label>
  57.                   <input name="email_organisateur" type="email" data-paste-clear class="form-control" id="inputEmail"
  58.                          placeholder="" required>
  59.                 </div>
  60.               </div>
  61.             </div>
  62.             <div class="form-group">
  63.               <div class="__input-wrapper">
  64.                 <div class="__inner">
  65.                   <label for="inputTitre">
  66.                     <span class="label-text">Titre <span class="colorRed">*</span></span>
  67.                   </label>
  68.                   <input name="titre" type="text" data-paste-clear class="form-control" id="inputTitre" required>
  69.                 </div>
  70.               </div>
  71.             </div>
  72.             <div class="form-group">
  73.               <div class="__input-wrapper _select _label-hidden">
  74.                 <div class="__inner" style="position:relative;">
  75.                   <label for="selectCategory">
  76.                     <span class="label-text">Type de manifestation <span class="colorRed">*</span></span>
  77.                   </label>
  78.                   <select name="type" class="form-control" id="selectCategory" required>
  79.                     {% for type in types %}
  80.                       <option value="{{ type.id }}">{{ type.displayName }}</option>
  81.                     {% endfor %}
  82.                   </select>
  83.                 </div>
  84.               </div>
  85.             </div>
  86.             <div class="form-group" data-form-validation-step-file-wrapper>
  87.               <div class="inputFileWrapper">
  88.                 <input id="max_id" type="hidden" name="MAX_FILE_SIZE" value="2000000"/>
  89.                 <input onchange="upload_check()" type="file" name="image" id="file-1" class="inputfile inputfile-1"
  90.                        accept="image/jpeg,image/gif,image/png"/>
  91.                 <label for="file-1" class="label-file">
  92.                   {{ source('svg/icon_attachment.svg') }}
  93.                   <span>
  94.                                         <span class="label-text">Ajouter un visuel (affiche, flyer, etc.)</span>
  95.                                         <br>
  96.                                         <span class="fsXs">2 Mo maximum. JPEG, JPG, GIF, PNG</span>
  97.                                     </span>
  98.                 </label>
  99.               </div>
  100.               <script>
  101.                 function upload_check() {
  102.                   var upl = document.getElementById("file-1");
  103.                   var max = document.getElementById("max_id").value;
  105.                   if (upl.files[0].size > max) {
  106.                     alert("Fichier trop volumineux");
  107.                     upl.value = "";
  108.                   }
  109.                 }
  110.               </script>
  111.               <script>
  112.                 'use strict';
  113.                 (function (document, window, index) {
  114.                   var inputs = document.querySelectorAll('.inputfile');
  115.                   Array.prototype.forEach.call(inputs, function (input) {
  116.                     var label = input.nextElementSibling,
  117.                       labelVal = label.innerHTML;
  118.                     input.addEventListener('change', function (e) {
  119.                       var fileName = '';
  120.                       if (this.files && this.files.length > 1)
  121.                         fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
  122.                       else
  123.                         fileName = e.target.value.split('\\').pop();
  126.                       if (fileName)
  127.                         label.querySelector('span').innerHTML = fileName;
  128.                       else
  129.                         label.innerHTML = labelVal;
  132.                     });
  133.                     // Firefox bug fix
  134.                     input.addEventListener('focus', function () {
  135.                       input.classList.add('has-focus');
  136.                     });
  137.                     input.addEventListener('blur', function () {
  138.                       input.classList.remove('has-focus');
  139.                     });
  140.                   });
  141.                 }(document, window, 0));
  142.               </script>
  143.             </div>
  144.             <div class="form-group mb-5">
  145.               <div class="form-check">
  146.                 <input class="form-check-input" id="checkImageDroit" type="checkbox" value="" name="image_droit">
  147.                 <label class="form-check-label" for="checkImageDroit">
  148.                   <span class="label-text">Je certifie avoir les droits sur cette image</span>
  149.                 </label>
  150.               </div>
  151.             </div>
  152.             <div class="form-group">
  153.               <div class="__input-wrapper">
  154.                 <div class="__inner">
  155.                   <label for="inputLieu">
  156.                     <span class="label-text">Lieu (Salle, lieu dit, Bâtiment) <span class="colorRed">*</span></span>
  157.                   </label>
  158.                   <input name="lieu" type="text" data-paste-clear class="form-control" id="inputLieu" required>
  159.                 </div>
  160.               </div>
  161.             </div>
  162.             <div class="form-group">
  163.               <div class="__input-wrapper">
  164.                 <div class="__inner">
  165.                   <label for="inputAdresse">
  166.                     <span class="label-text">Adresse <span class="colorRed">*</span></span>
  167.                   </label>
  168.                   <input name="adresse" data-paste-clear type="text" class="form-control"
  169.                          id="inputAdresse" placeholder="" required>
  170.                   <input type="hidden" id="adresseSelected" value="false" />
  171.                   <div class="address-feedback position-absolute list-group top-0"
  172.                        style="z-index:1100;top: calc(100% - 14px);width: calc(100% - 63px);">
  173.                   </div>
  174.                 </div>
  175.               </div>
  176.             </div>
  177.             <div class="row mx-n2">
  178.               <div class="col-12 col-md-6 px-2">
  179.                 <div class="form-group">
  180.                   <div class="__input-wrapper">
  181.                     <div class="__inner">
  182.                       <label for="inputCodePostal">
  183.                         <span class="label-text">Code postal <span class="colorRed">*</span></span>
  184.                       </label>
  185.                       <input name="code_postal" type="text" data-paste-clear class="form-control" id="inputCodePostal" required>
  186.                     </div>
  187.                   </div>
  188.                 </div>
  189.               </div>
  190.               <div class="col-12 col-md-6 px-2">
  191.                 <div class="form-group containerAutocomplete">
  192.                   <div class="__input-wrapper">
  193.                     <div class="__inner">
  194.                       <label for="inputVille">
  195.                         <span class="label-text">Ville <span class="colorRed">*</span></span>
  196.                       </label>
  197.                       <input type="text" data-paste-clear autocomplete="randomstring" class="form-control" name="ville"
  198.                              id="inputVille" placeholder="" required>
  199.                     </div>
  200.                   </div>
  201.                 </div>
  202.               </div>
  203.             </div>
  204.             <div class="row mx-n2">
  205.               <div class="col-12 col-md-6 px-2">
  206.                 <div class="form-group">
  207.                   <div class="__input-wrapper _select">
  208.                     <div class="__inner">
  209.                       <label for="inputDateDebut">
  210.                         <span class="label-text">Date de début <span class="colorRed">*</span></span>
  211.                       </label>
  212.                       <input name="date_debut" autocomplete="off" type="text" class="form-control datetimepicker-input"
  213.                              id="inputDateDebut" placeholder="JJ/MM/AAAA" required>
  214.                     </div>
  215.                   </div>
  216.                 </div>
  217.               </div>
  218.               <div class="col-12 col-md-6 px-2">
  219.                 <div class="form-group">
  220.                   <div class="__input-wrapper _select">
  221.                     <div class="__inner">
  222.                       <label for="inputDateFin">
  223.                         <span class="label-text">Date de fin <span class="colorRed">*</span></span>
  224.                       </label>
  225.                       <input name="date_fin" autocomplete="off" type="text" class="form-control datetimepicker-input-2"
  226.                              id="inputDateFin" placeholder="JJ/MM/AAAA" disabled required>
  227.                     </div>
  228.                   </div>
  229.                 </div>
  230.               </div>
  231.               <script type="text/javascript">
  232.                 $(function () {
  233.                   jQuery.datetimepicker.setLocale('fr');
  234.                   jQuery('.datetimepicker-input').datetimepicker({
  235.                     lang: 'fr',
  236.                     timepicker: false,
  237.                     format: 'd/m/Y',
  238.                     dayOfWeekStart: 1,
  239.                     minDate: 0,
  240.                     timepickerScrollbar: false,
  241.                     scrollMonth: false,
  242.                     scrollInput: false,
  243.                     scrollTime: false,
  244.                     onSelectDate: function (dp, $input) {
  245.                       $('.datetimepicker-input-2').prop("disabled", false).val('');
  246.                       jQuery('.datetimepicker-input-2').datetimepicker({
  247.                         lang: 'fr',
  248.                         timepicker: false,
  249.                         format: 'd/m/Y',
  250.                         dayOfWeekStart: 1,
  251.                         minDate: dp,
  252.                         timepickerScrollbar: false,
  253.                         scrollMonth: false,
  254.                         scrollInput: false,
  255.                         scrollTime: false
  256.                       });
  257.                     }
  258.                   });
  259.                 });
  260.               </script>
  261.             </div>
  262.             <div class="row mx-n2">
  263.               <div class="col-12 col-md-6 px-2">
  264.                 <div class="form-group">
  265.                   <div class="__input-wrapper _select">
  266.                     <div class="__inner">
  267.                       <label for="inputHeureDebut">
  268.                         <span class="label-text">Heure de début <span class="colorRed">*</span></span>
  269.                       </label>
  270.                       <input name="heure_debut" autocomplete="off" type="text" class="form-control timepicker-input"
  271.                              id="inputHeureDebut" placeholder="00:00" required>
  272.                     </div>
  273.                   </div>
  274.                 </div>
  275.               </div>
  276.               <div class="col-12 col-md-6 px-2">
  277.                 <div class="form-group">
  278.                   <div class="__input-wrapper _select">
  279.                     <div class="__inner">
  280.                       <label for="inputHeureFin">
  281.                         <span class="label-text">Heure de fin <span class="colorRed">*</span></span>
  282.                       </label>
  283.                       <input name="heure_fin" autocomplete="off" type="text" class="form-control timepicker-input-2"
  284.                              id="inputHeureFin" placeholder="00:00" disabled required>
  285.                     </div>
  286.                   </div>
  287.                 </div>
  288.               </div>
  289.               <script type="text/javascript">
  290.                 $(function () {
  291.                   jQuery.datetimepicker.setLocale('fr');
  292.                   jQuery('.timepicker-input').datetimepicker({
  293.                     datepicker: false,
  294.                     timepicker: true,
  295.                     format: 'H:i',
  296.                     allowTimes: [
  297.                       '09:00', '09:30',
  298.                       '10:00', '10:30',
  299.                       '11:00', '11:30',
  300.                       '12:00', '12:30',
  301.                       '13:00', '13:30',
  302.                       '14:00', '14:30',
  303.                       '15:00', '15:30',
  304.                       '16:00', '16:30',
  305.                       '17:00', '17:30',
  306.                       '18:00', '18:30',
  307.                       '19:00', '19:30',
  308.                       '20:00', '20:30',
  309.                       '21:00', '21:30',
  310.                       '22:00', '22:30',
  311.                       '23:00'
  312.                     ],
  313.                     onSelectTime: function (dp, $input) {
  314.                       $('.timepicker-input-2').prop("disabled", false).val('');
  315.                       jQuery('.timepicker-input-2').datetimepicker({
  316.                         datepicker: false,
  317.                         timepicker: true,
  318.                         format: 'H:i',
  319.                         allowTimes: [
  320.                           '09:00', '09:30',
  321.                           '10:00', '10:30',
  322.                           '11:00', '11:30',
  323.                           '12:00', '12:30',
  324.                           '13:00', '13:30',
  325.                           '14:00', '14:30',
  326.                           '15:00', '15:30',
  327.                           '16:00', '16:30',
  328.                           '17:00', '17:30',
  329.                           '18:00', '18:30',
  330.                           '19:00', '19:30',
  331.                           '20:00', '20:30',
  332.                           '21:00', '21:30',
  333.                           '22:00', '22:30',
  334.                           '23:00'
  335.                         ],
  336.                       });
  337.                     }
  338.                   });
  339.                 });
  340.               </script>
  341.               <div class="form-group d-none">
  342.                 <div class="__input-wrapper _textarea">
  343.                   <div class="__inner border-bottom-0">
  344.                     <label for="inputHoraires">
  345.                       <span class="label-text">Horaires</span>
  346.                     </label>
  347.                     <textarea name="horaires" data-paste-clear class="form-control js-textarea-counter" maxlength="500"
  348.                               id="inputHoraires" placeholder="" rows="3"></textarea>
  349.                   </div>
  350.                 </div>
  351.               </div>
  352.             </div>
  353.             <div class="form-group">
  354.               <div class="__input-wrapper _textarea">
  355.                 <div class="__inner border-bottom-0">
  356.                   <label for="inputTarifs">
  357.                     <span class="label-text">Tarifs</span>
  358.                   </label>
  359.                   <textarea name="tarifs" data-paste-clear class="form-control js-textarea-counter" maxlength="500"
  360.                             id="inputTarifs" placeholder="" rows="3"></textarea>
  361.                 </div>
  362.               </div>
  363.             </div>
  364.             <div class="form-group">
  365.               <div class="__input-wrapper _textarea">
  366.                 <div class="__inner border-bottom-0">
  367.                   <label for="inputPresentation">
  368.                     <span class="label-text">Présentation (texte brut uniquement)<span class="colorRed">*</span></span>
  369.                   </label>
  370.                   <textarea name="presentation" data-paste-clear class="form-control js-textarea-counter"
  371.                             id="inputPresentation" placeholder="" rows="3" maxlength="2500" required></textarea>
  372.                 </div>
  373.               </div>
  374.             </div>
  375.             <div class="form-group">
  376.               <div class="__input-wrapper">
  377.                 <div class="__inner">
  378.                   <label for="inputEmail2">
  379.                     <span class="label-text">Adresse courriel pour informations complémentaires et/ou réservation (ex : nom@domaine.fr)</span>
  380.                   </label>
  381.                   <input name="email" type="text" data-paste-clear autocomplete="email" class="form-control"
  382.                          id="inputEmail2" placeholder="">
  383.                 </div>
  384.               </div>
  385.             </div>
  386.             <div class="form-group">
  387.               <div class="__input-wrapper">
  388.                 <div class="__inner">
  389.                   <label for="inputTelephone">
  390.                     <span
  391.                       class="label-text">Contact téléphonique pour informations complémentaires et/ou réservation</span>
  392.                   </label>
  393.                   <input name="telephone" type="tel" data-paste-clear class="form-control" id="inputTelephone"
  394.                          placeholder="(+33) ...">
  395.                 </div>
  396.               </div>
  397.             </div>
  398.             <div class="form-group">
  399.               <div class="__input-wrapper">
  400.                 <div class="__inner">
  401.                   <label for="inputLien1">
  402.                                         <span class="label-text">
  403.                                             Lien utile 1 (site internet, Facebook, Instagram, Twitter, etc.)
  404.                                         </span>
  405.                   </label>
  406.                   <input name="lien1" type="text" data-paste-clear class="form-control" id="inputLien1"
  407.                          placeholder="https://">
  408.                 </div>
  409.               </div>
  410.             </div>
  411.             <div class="form-group">
  412.               <div class="__input-wrapper">
  413.                 <div class="__inner">
  414.                   <label for="inputLien2">
  415.                                         <span class="label-text">
  416.                                             Lien utile 2 (site internet, Facebook, Instagram, Twitter, etc.)
  417.                                         </span>
  418.                   </label>
  419.                   <input name="lien2" type="text" data-paste-clear class="form-control" id="inputLien2"
  420.                          placeholder="https://">
  421.                 </div>
  422.               </div>
  423.             </div>
  424.             <div class="form-group mb-5">
  425.               <div class="form-check">
  426.                 <input class="form-check-input" type="checkbox" value="" name="checkbox" id="invalidCheck" required>
  427.                 <label class="form-check-label" for="invalidCheck">
  428.                   <span class="d-none label-text">Accepter les Conditions Générales d'Utilisation</span>
  429.                   <span>Accepter les</span>
  430.                   <a href="/pages-legales/cgu">Conditions Générales d'Utilisation</a>&nbsp;<span
  431.                     class="colorRed">*</span>
  432.                 </label>
  433.               </div>
  434.             </div>
  435.           </div>
  436.           <div class="form-group d-none d-validation-block">
  437.             <input type="hidden" name="nb1" value="{{ caps['valeur1']['valeur'] }}">
  438.             <input type="hidden" name="nb2" value="{{ caps['valeur2']['valeur'] }}">
  439.             <div class="__input-wrapper _captcha _propose-event">
  440.               <div class="__inner">
  441.                 <label for="inputCaptcha">Répondez à cette question de vérification avant d’envoyer votre évènement :
  442.                   Quel est le résultat de ({{ caps['valeur1']['libelle'] }}
  443.                   +
  444.                   {{ caps['valeur2']['libelle'] }}) (en chiffre)
  445.                   <span class="colorRed d-validation-none">*</span>
  446.                 </label>
  447.                 <input class="form-control _captcha" type="text" id="inputCaptcha" name="captcha" data-focus-content-target="verify">
  448.               </div>
  449.             </div>
  450.           </div>
  451.           <div class="__buttons-wrapper">
  452.             <button class="btn btnFormSubmit d-none d-validation-inline-block _modify" data-form-validation-step-toggle>
  453.               <span>MODIFIER</span>
  454.             </button>
  455.             <button class="btn btnFormSubmit d-none d-validation-inline-block" type="submit">
  456.               <span>ENVOYER</span>
  457.             </button>
  458.             <button class="btn btnFormSubmit d-validation-none _validation" data-form-validation-step-toggle>
  459.               <span>VALIDER</span>
  460.             </button>
  461.           </div>
  462.         </form>
  463.         <div style="padding-bottom:100px;"></div>
  464.       </article>
  465.     </div>
  466.   </main>
  467. {% endblock %}
  468. {% block javascripts %}
  469.   {{ parent() }}
  470.   {% include('Nordinfo/Main/parts/autocompleteCommune.js.html.twig') with {'autocomplete_selector':'inputVille'} %}
  471.   <script>
  472.     // FACULTATIF : Pour l'infobulle bootstrap du champ #inputAdresse
  473.     $(function () {
  474.       $('[data-toggle="tooltip"]').tooltip();
  475.     });
  477.     /*
  478.     * Script de gestion de recherche avec l'API adresses.data.gouv.fr
  479.     * 
  480.     */
  482.     var currentFocus = -1;
  483.     var fetchTrigger = 0;
  485.     // Fonction pour mettre en forme visuellement un résultat sélectionné
  486.     function setActive() {
  487.       var nbVal = $("div.address-feedback a").length;
  488.       if (!nbVal)
  489.         return false; // Si on n'a aucun résultat listé, on s'arrête là.
  490.       // On commence par nettoyer une éventuelle sélection précédente
  491.       $('div.address-feedback a').removeClass("active");
  493.       // Bidouille mathématique pour contraindre le focus dans la plage du nombre de résultats
  494.       currentFocus = ((currentFocus + nbVal - 1) % nbVal) + 1;
  496.       $('div.address-feedback a:nth-child(' + currentFocus + ')').addClass("active");
  497.     }
  499.     // Au clic sur une adresse suggérée, on ventile l'adresse dans les champs appropriés. On espionne mousedown plutôt que click pour l'attraper avant la perte de focus du champ adresse.
  500.     $('div.address-feedback').on("mousedown", "a", function (event) {
  501.       // Stop la propagation par défaut
  502.       event.preventDefault();
  503.       event.stopPropagation();
  505.       $("#inputAdresse").val($(this).attr("data-name"));
  506.       $("#inputCodePostal").val($(this).attr("data-postcode"));
  507.       $("#inputVille").val($(this).attr("data-city"));
  508.       $("#adresseSelected").val("true");
  509.       $("#inputAdresse").removeClass("error").parent().find('div.error').remove();
  511.       $('.address-feedback').empty();
  512.     });
  514.     // On espionne le clavier dans le champ adresse pour déclencher les actions qui vont bien
  515.     $("#inputAdresse").keyup(function (event) {
  516.       $("#adresseSelected").val("false");
  517.       // Stop la propagation par défaut
  518.       event.preventDefault();
  519.       event.stopPropagation();
  521.       if (event.keyCode === 38) { // Flèche HAUT
  522.         currentFocus--;
  523.         setActive();
  524.         return false;
  525.       } else if (event.keyCode === 40) { // Flèche BAS
  526.         currentFocus++;
  527.         setActive();
  528.         return false;
  529.       } else if (event.keyCode === 13) { // Touche ENTREE
  530.         if (currentFocus > 0) {
  531.           // On simule un clic sur l'élément actif
  532.           $("div.address-feedback a:nth-child(" + currentFocus + ")").mousedown();
  533.         }
  534.         return false;
  535.       }
  537.       // Si on arrive ici, c'est que l'user a avancé dans la saisie : on réinitialise le curseur de sélection.
  538.       $('div.address-feedback a').removeClass("active");
  539.       currentFocus = 0;
  541.       // On annule une éventuelle précédente requête en attente
  542.       clearTimeout(fetchTrigger);
  544.       // Si le champ adresse est vide, on nettoie la liste des suggestions et on ne lance pas de requête.
  545.       let rue = $("#inputAdresse").val();
  546.       if (rue.length === 0) {
  547.         $('.address-feedback').empty();
  548.         return false;
  549.       }
  551.       // On lance une minuterie pour une requête vers l'API.
  552.       fetchTrigger = setTimeout(function () {
  553.         // On lance la requête sur l'API
  554.         $.get('https://api-adresse.data.gouv.fr/search/', {
  555.           q: rue,
  556.           limit: 15,
  557.           autocomplete: 1
  558.         }, function (data, status, xhr) {
  559.           let liste = "";
  560.           $.each(data.features, function (i, obj) {
  561.             // Données phase 1 (obj.properties.label) & phase 2 : name, postcode, city.
  562.             // J'ajoute chaque élément dans une liste
  563.             let cooladdress = obj.properties.name + " " + obj.properties.postcode + " <strong>" + obj.properties.city + "</strong>";
  564.             liste += '<a class="list-group-item list-group-item-action py-1" href="#" name="' + obj.properties.label + '" data-name="' + obj.properties.name + '" data-postcode="' + obj.properties.postcode + '" data-city="' + obj.properties.city + '">' + cooladdress + '</a>';
  565.           });
  566.           $('.address-feedback').html(liste);
  567.         }, 'json');
  568.       }, 500);
  569.     });
  571.     // On cache la liste si le champ adresse perd le focus
  572.     $("#inputAdresse").focusout(function () {
  573.       $('.address-feedback').empty();
  574.     });
  576.     // On annule le comportement par défaut des touches entré et flèches si une liste de suggestion d'adresses est affichée
  577.     $("#inputAdresse").keydown(function (e) {
  578.       if ($("div.address-feedback a").length > 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13)) {
  579.         e.preventDefault();
  580.       }
  581.     });
  582.   </script>
  583.   <script>
  584.     (function() {
  586.       window.addEventListener('load', function() {
  587.         const form = document.querySelector('.formCustom');
  588.         if (form) {
  589.           form.reset();
  590.           clearCustomElements();
  591.         }
  592.       });
  593.       
  594.       function clearCustomElements() {
  595.         const fileInputs = document.querySelectorAll('input[type="file"]');
  596.         fileInputs.forEach(input => {
  597.           input.value = '';
  598.           const label = input.nextElementSibling;
  599.           if (label && label.classList.contains('label-file')) {
  600.             const span = label.querySelector('span span');
  601.             if (span) {
  602.               span.innerHTML = 'Ajouter un visuel (affiche, flyer, etc.)';
  603.             }
  604.           }
  605.         });
  607.         const disabledInputs = document.querySelectorAll('input[disabled]');
  608.         disabledInputs.forEach(input => {
  609.           input.value = '';
  610.         });
  612.         const addressFeedback = document.querySelector('.address-feedback');
  613.         if (addressFeedback) {
  614.           addressFeedback.innerHTML = '';
  615.         }
  617.         const form = document.querySelector('.formCustom');
  618.         if (form) {
  619.           form.classList.remove('was-validated');
  620.         }
  622.         const errorContainer = document.getElementById('alertErrorsContainer');
  623.         if (errorContainer) {
  624.           errorContainer.style.display = 'none';
  625.         }
  627.         const dateInputs = document.querySelectorAll('.datetimepicker-input, .datetimepicker-input-2, .timepicker-input, .timepicker-input-2');
  628.         dateInputs.forEach(input => {
  629.           input.value = '';
  630.           if (input.classList.contains('datetimepicker-input-2') || input.classList.contains('timepicker-input-2')) {
  631.             input.disabled = true;
  632.           }
  633.         });
  634.       }
  635.     })();
  636.   </script>
  637. {% endblock %}