templates/Services/Main/service.html.twig line 1

Open in your IDE?
  1. {% extends 'Services/base.html.twig' %}
  2. {% block header_epingles %}
  3.   {{ include('Lenord/Main/parts/epingles.html.twig') }}
  4. {% endblock %}
  5. {% block header_breadcrumb %}
  6.   {% include 'Nordinfo/Main/parts/breadcrumb.html.twig' %}
  7. {% endblock %}
  8. {% block body %}
  9.   <main tabindex="-1" role="main" id="mainContent">
  10.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'--nordServices --postDetails'} %}
  11.     <article style="overflow:visible;position:relative;z-index:98;">
  12.       <div class="containerSm containerPostDetails --nordServices mBLg">
  13.         <h1 class="__headingMain mTMd--imp">{{ service.titre }}</h1>
  14.         <ul class="__tags">
  15.           {% if service.sousprofils is not empty %}
  16.             {% if service.sousprofils|length == count_sous_profils %}
  17.               <li class="--profile"><a href="{{ path('services_services', {'slug': 'particulier'}) }}">Particulier</a></li>
  18.             {% else %}
  19.               {% for sp in service.sousprofils %}
  20.                 <li class="--profile">
  21.                   <a href="{{ path('services_services', {'slug': 'particulier'}) }}?sp[]={{ sp.aliasUrl }}">{{ sp.titre }}</a>{% if not loop.last %},{% endif %}
  22.                 </li>
  23.               {% endfor %}
  24.             {% endif %}
  25.           {% endif %}
  26.           {% for grandprofil in service.grandprofils %}
  27.             {% if grandprofil.aliasUrl != 'particulier' %}
  28.               <li class="--profile">
  29.                 <a href="{{ path('services_services', {'slug': grandprofil.aliasUrl}) }}">{{ grandprofil.titre }}</a>{% if not loop.last %},{% endif %}
  30.               </li>
  31.             {% endif %}
  32.           {% endfor %}
  33.           {% for sp in service.themes %}
  34.             <li class="{% if (service.sousprofils is not empty or service.grandprofils is not empty) and loop.first %}--separator{% endif %}">
  35.               {{ sp.titre }}{% if not loop.last %},{% endif %}
  36.             </li>
  37.           {% endfor %}
  38.         </ul>
  39.         <div class="separatorLine --sm"></div>
  40.         <div class="containerContent --nordServices">
  41.           <p class="__intro">{{ service.chapo }}</p>
  42.           {{ content_post|raw }}
  43.         </div>
  44.         {% if id == 45 %}
  45.           <div
  46.             style="background-color:#ecf4f7;padding-bottom:4rem;margin-top:4rem;width:100vw;transform:translateX(-50%);left:50%;position:relative;">
  47.             <div class="containerSm containerPostDetails --nordServices">
  48.               <h2 class="headingSection pTMd mBMd--imp">Mon adresse</h2>
  49.               <form class="formCustom mBMd--imp">
  50.                 <div class="form-group">
  51.                   <div class="__input-wrapper">
  52.                     <div class="__inner" style="position:relative;">
  53.                       <label for="inputAddress" style="margin-bottom:.5em;">
  54.                         <span class="label-text">Adresse</span>
  55.                       </label>
  56.                       <div id="autocomplete" class="autocomplete">
  57.                         <input class="autocomplete-input"
  58.                                placeholder="Entrez le nom de la rue"
  59.                                aria-label="Entrez le nom de la rue"
  60.                                id="inputAddress"
  61.                         >
  62.                         <ul class="autocomplete-result-list"></ul>
  63.                       </div>
  64.                       <div class="d-none">
  65.                         <input type="text"
  66.                                class="form-control"
  67.                                id="rueInput"
  68.                                placeholder="Entrez le nom de la rue"
  69.                                list="rueOptions"
  70.                                aria-autocomplete="list"
  71.                                aria-activedescendant="rueOptions"
  72.                                aria-expanded="false"
  73.                                style="padding:0.25rem 3rem 0.25rem 0.75rem;"
  74.                                onkeyup="handlerOnKeyUp(event)"
  75.                                onkeydown="handlerOnKeyDown(event)"
  76.                                onfocusout="handlerOnFocusOut(event)"
  77.                                autocomplete="one-time-code"
  78.                         >
  79.                         <ul class="address-feedback position-absolute list-group top-0"
  80.                             style="z-index:1100;top:calc(100% + 1px);width:calc(100%);" id="rueOptions"></ul>
  81.                       </div>
  82.                       <button onclick="init(event)" type="button"
  83.                               class="cardCollege__btnBack" id="btn_reinitialisation" style="display:none;">
  84.                         <svg xmlns="http://www.w3.org/2000/svg" height="1em"
  85.                              viewBox="0 0 384 512">
  86.                           <path
  87.                             d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
  88.                         </svg>
  89.                         <span class="sr-only">Vider la recherche</span></button>
  90.                       <div style="display:none;" class="cardCollege__containerLoader" id="rueInputLoader"
  91.                            aria-hidden="true">
  92.                         <div class="loader"></div>
  93.                       </div>
  94.                     </div>
  95.                   </div>
  96.                 </div>
  97.               </form>
  98.               <div id="libelle_multiple" class="labelMultipleColleges" style="display:none;">Cette adresse relève de
  99.                 plusieurs secteurs et donc de plusieurs collèges :
  100.               </div>
  101.               <div id="leCollege" class="cardColleges" style="display:none;">
  102.                 <div class="cardColleges__inner">
  103.                   <div>
  104.                     <h3 id="college_nom"></h3>
  105.                     <p id="college_adresse"></p>
  106.                     <ul class="cardColleges__listButtons">
  107.                       <li>
  108.                         <a id="college_telephone_lien" href="">
  109.                           <div class="cardColleges__inner">
  110.                             <span class="cardColleges__icon">
  111.                               <svg aria-hidden="true" id="b502a819-aaf7-4b39-99a9-de8335e974aa"
  112.                                    data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265.57 265.51">
  113.                                 <defs>
  114.                                   <style>
  115.                                     .a7dd9744-ec09-4c6c-9c16-c23d5f53046b {
  116.                                       fill: #17323f;
  117.                                     }
  118.                                   </style>
  119.                                 </defs>
  120.                                 <path id="aeeccaf6-071a-4ed9-8b98-9c660428bb39"
  121.                                       data-name="e079d0e0-4290-4499-8edc-92635082f6d4"
  122.                                       class="a7dd9744-ec09-4c6c-9c16-c23d5f53046b"
  123.                                       d="M208.1,274.5a125.29,125.29,0,0,1-45.4-11.6C99.1,232.7,49,188.5,21.3,122.2A233.38,233.38,0,0,1,9.8,78.8,51.3,51.3,0,0,1,20,37.9,84.63,84.63,0,0,1,52.1,11.3,21.59,21.59,0,0,1,62.4,9a11.34,11.34,0,0,1,7.8,3.9c11.3,17.7,22.1,35.7,32.9,53.6A9.93,9.93,0,0,1,101.9,80c-6.1,5.9-12.5,11.5-19,16.9-13.7,11.5-15.2,15.8-5.8,31.1a146,146,0,0,0,24,30.7c18.1,16.5,37.3,31.9,56.8,46.7,14.9,11.2,17.4,10.1,28.9-4.4,4.1-5.1,8-10.4,12.3-15.2,7-8,11.1-8.5,20.1-3.3,16.6,9.7,33,19.6,49.7,29.1a9.3,9.3,0,0,1,5.1,11.7,64.5,64.5,0,0,1-46.9,47.5A135.69,135.69,0,0,1,208.1,274.5Z"
  124.                                       transform="translate(-8.99 -8.99)"></path>
  125.                               </svg>
  126.                             </span>
  127.                             <span class="cardColleges__text" id="college_telephone"></span>
  128.                           </div>
  129.                         </a>
  130.                       </li>
  131.                       <li id="bloc_mail">
  132.                         <a id="college_mail_href" href="#">
  133.                           <div class="cardColleges__inner">
  134.                             <span class="cardColleges__icon">
  135.                               <svg aria-hidden="true" id="b5c621d6-1983-4327-9028-3fe9272e594c"
  136.                                    data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 384">
  137.                                 <path
  138.                                   d="M502.3,190.8a6,6,0,0,1,9.7,4.7V400a48,48,0,0,1-48,48H48A48,48,0,0,1,0,400V195.6a6,6,0,0,1,9.7-4.7c22.4,17.4,52.1,39.5,154.1,113.6,21.1,15.4,56.7,47.8,92.2,47.6,35.7.3,72-32.8,92.3-47.6C450.3,230.4,479.9,208.2,502.3,190.8ZM256,320c23.2.4,56.6-29.2,73.4-41.4,132.7-96.3,142.8-104.7,173.4-128.7A23.93,23.93,0,0,0,512,131V112a48,48,0,0,0-48-48H48A48,48,0,0,0,0,112v19a24.08,24.08,0,0,0,9.2,18.9c30.6,23.9,40.7,32.4,173.4,128.7,16.8,12.2,50.2,41.8,73.4,41.4Z"
  139.                                   transform="translate(0 -64)"></path>
  140.                               </svg>
  141.                             </span>
  142.                             <span class="cardColleges__text" id="college_mail">xxxxxxxxx@ac-lille.fr</span>
  143.                           </div>
  144.                         </a>
  145.                       </li>
  146.                       <li>
  147.                         <a target="_blank" class="--icon-external" id="college_site_ent"
  148.                            href="#" title="Site internet">
  149.                           <div class="cardColleges__inner">
  150.                             <span class="cardColleges__icon">
  151.                               <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512">
  152.                                 <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
  153.                                 <path
  154.                                   d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/>
  155.                               </svg>
  156.                             </span>
  157.                             <span class="cardColleges__text">
  158.                               Site internet
  159.                               <span class="cardColleges__icon">
  160.                                 <svg aria-hidden="true" id="f0e66a82-9691-4c5a-8636-9953692f0b2f"
  161.                                      data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.3 234.74"
  162.                                      fill="currentColor">
  163.                                   <rect y="51.74" height="183"></rect>
  164.                                   <path d="M0,234.74H183v-183H0ZM20.4,72H162.7v142.3H20.4Z" transform="translate(0 0)">
  165.                                   </path>
  166.                                   <polygon
  167.                                     points="113.2 0 113.2 20.3 211.9 20.3 211.9 121.6 232.3 121.6 232.3 0 113.2 0">
  168.                                   </polygon>
  169.                                 </svg>
  170.                               </span>
  171.                             </span>
  172.                           </div>
  173.                         </a>
  174.                       </li>
  175.                     </ul>
  176.                   </div>
  177.                 </div>
  178.                 <p>
  179.                   <span id="college_rne"></span>
  180.                   <span id="college_nb_eleve"></span>
  181.                   <span class="font-weight-bold">Restauration scolaire :</span> <a id="college_menu_link" href="#"
  182.                                                                                    target="_blank"
  183.                                                                                    title="Consulter le menu"
  184.                                                                                    class="link-external">Consulter le
  185.                     menu du restaurant scolaire</a>
  186.                 </p>
  187.               </div>
  188.               <div id="lesImages" class="cardColleges__map mBMd--imp" style="display:none;">
  189.                 <div class="flex-item-left" id="college_image"></div>
  190.                 <div class="flex-item-right no-first-image" id="college_map"></div>
  191.               </div>
  192.               <div id="results"></div>
  193.               <p class="textCenter pBMd" style="display:none;" id="lien_reinitialisation">
  194.                 <button onclick="init();" class="btnResetCollegeSearch" id="btnResetCollegeSearch">Réinitialiser la
  195.                   recherche
  196.                 </button>
  197.               </p>
  198.             </div>
  199.             <script>
  200.               (() => {
  201.                 const loader = document.getElementById('rueInputLoader');
  202.                 const btnReset = document.getElementById('btn_reinitialisation');
  204.                 function filterByNord(results) {
  205.                   return results.filter(function (result) {
  206.                     return result.properties.postcode && result.properties.postcode.startsWith('59');
  207.                   });
  208.                 }
  210.                 new Autocomplete('#autocomplete', {
  211.                   search: input => {
  212.                     const url = `https://api-adresse.data.gouv.fr/search?q=${encodeURI(input)}&limit=4&autocomplete=1`;
  213.                     return new Promise(resolve => {
  214.                       if (input.length < 3) {
  215.                         return resolve([]);
  216.                       }
  217.                       loader.style.display = 'block';
  218.                       fetch(url)
  219.                         .then(response => response.json())
  220.                         .then(data => {
  221.                           const suggestions = filterByNord(data.features);
  222.                           const results = suggestions.map((result, index) => {
  223.                             return {...result, index};
  224.                           })
  225.                           loader.style.display = 'none';
  226.                           resolve(results);
  227.                         })
  228.                     })
  229.                   },
  230.                   debounceTime: 1000,
  231.                   submitOnEnter: true,
  232.                   renderResult: (result, props) => {
  233.                     let address = result.properties.name + " " + result.properties.postcode + " <strong>" + result.properties.city + "</strong>";
  234.                     return `
  235.                               <li ${props}>
  236.                                 ${address}
  237.                               </li>
  238.                             `
  239.                   },
  240.                   getResultValue: result => {
  241.                     return result.properties.name + " " + result.properties.postcode + " " + result.properties.city;
  242.                   },
  243.                   onSubmit: result => {
  244.                     btnReset.style.display = 'none';
  245.                     loader.style.display = 'block';
  246.                     getInfoRue(result.properties.name + " " + result.properties.postcode + " " + result.properties.city);
  247.                   }
  248.                 })
  249.               })();
  250.             </script>
  251.           </div>
  252.         {% elseif id == 500 %}
  253.           <div
  254.             style="background-color:#ecf4f7;padding-bottom:4rem;margin-top:4rem;width:100vw;transform:translateX(-50%);left:50%;position:relative;">
  255.             <div class="containerSm containerPostDetails --nordServices">
  256.               <h2 class="headingSection pTMd mBMd--imp">Mon adresse</h2>
  257.               <form class="formCustom mBMd--imp">
  258.                 <div class="form-group">
  259.                   <div class="__input-wrapper">
  260.                     <div class="__inner" style="position:relative;">
  261.                       <label for="inputAddress" style="margin-bottom:.5em;">
  262.                         <span class="label-text">Adresse</span>
  263.                       </label>
  264.                       <div id="autocomplete" class="autocomplete">
  265.                         <input class="autocomplete-input"
  266.                                placeholder="Entrez le numéro et le nom de la rue"
  267.                                aria-label="Entrez le numéro et le nom de la rue"
  268.                                id="inputAddress"
  269.                         >
  270.                         <ul class="autocomplete-result-list"></ul>
  271.                       </div>
  272.                       <div style="display:none;">
  273.                         <label for="rueInput">
  274.                           <span class="label-text">Adresse</span>
  275.                         </label>
  276.                         <input type="text" class="form-control" id="rueInput"
  277.                                placeholder="Entrez le numéro et le nom de la rue"
  278.                                list="rueOptions" style="padding:0.25rem 3rem 0.25rem 0.75rem;"
  279.                                onkeyup="handlerOnKeyUp(this.value)" onkeydown="handlerOnKeyDown(event)"
  280.                                onfocusout="handlerOnFocusOut()" autocomplete="one-time-code">
  281.                         <ul class="address-feedback position-absolute list-group top-0"
  282.                             style="z-index:1100;top:calc(100% + 1px);width:calc(100%);" id="rueOptions"></ul>
  283.                       </div>
  284.                       <button class="cardCollege__btnBack" id="btn_reinitialisation"
  285.                               style="display: none;" type="button">
  286.                         <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512">
  287.                           <path
  288.                             d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
  289.                           </path>
  290.                         </svg>
  291.                         <span class="sr-only">Vider la recherche</span></button>
  292.                       <div style="display: none;" class="cardCollege__containerLoader" id="rueInputLoader"
  293.                            aria-hidden="true">
  294.                         <div class="loader"></div>
  295.                       </div>
  296.                     </div>
  297.                   </div>
  298.                 </div>
  299.               </form>
  300.               <div id="mnsContainer"></div>
  301.               <p class="textCenter pBMd" style="display: none;" id="lien_reinitialisation">
  302.                 <button onclick="init();" class="btnResetCollegeSearch" id="btnResetMnsSearch">Réinitialiser la
  303.                   recherche
  304.                 </button>
  305.               </p>
  306.               <script>
  307.                 (() => {
  308.                   const loader = document.getElementById('rueInputLoader');
  309.                   const btnReset = document.getElementById('btn_reinitialisation');
  310.                   const inputAddress = document.getElementById('inputAddress');
  312.                   new Autocomplete('#autocomplete', {
  313.                     search: input => {
  314.                       const url = `https://api-adresse.data.gouv.fr/search?q=${encodeURI(input)}&limit=20&autocomplete=1`;
  315.                       return new Promise(resolve => {
  316.                         if (input.length < 3) {
  317.                           return resolve([]);
  318.                         }
  319.                         loader.style.display = 'block';
  320.                         fetch(url)
  321.                           .then(response => response.json())
  322.                           .then(data => {
  323.                             const suggestions = filterByNord(data.features);
  324.                             const results = suggestions.map((result, index) => {
  325.                               return {...result, index};
  326.                             })
  327.                             loader.style.display = 'none';
  328.                             resolve(results);
  329.                           })
  330.                       })
  331.                     },
  332.                     debounceTime: 1000,
  333.                     submitOnEnter: true,
  334.                     renderResult: (result, props) => {
  335.                       let address = result.properties.name + " " + result.properties.postcode + " <strong>" + result.properties.city + "</strong>";
  336.                       return `
  337.                               <li ${props}>
  338.                                 ${address}
  339.                               </li>
  340.                             `
  341.                     },
  342.                     getResultValue: result => {
  343.                       return result.properties.name + " " + result.properties.postcode + " " + result.properties.city;
  344.                     },
  345.                     onSubmit: async result => {
  346.                       btnReset.style.display = 'none';
  347.                       loader.style.display = 'block';
  348.                       await displayMnsInfo(result.properties.name + " " + result.properties.postcode + " " + result.properties.city);
  349.                     }
  350.                   })
  352.                   let currentFocus = -1;
  353.                   let fetchTrigger = 0;
  355.                   document.getElementById('btnResetMnsSearch').addEventListener('click', function (event) {
  356.                     init(event);
  357.                   });
  359.                   document.getElementById('btnResetMnsSearch').addEventListener('keyup', function (event) {
  360.                     if (event.key === 'Enter') {
  361.                       init(event);
  362.                     }
  363.                   });
  365.                   btnReset.addEventListener('click', init.bind(event));
  367.                   function httpRequest(url, callback) {
  368.                     let xhr = new XMLHttpRequest();
  369.                     xhr.onreadystatechange = function () {
  370.                       if (xhr.readyState === 4 && xhr.status === 200) {
  371.                         callback(JSON.parse(xhr.responseText));
  372.                       }
  373.                     };
  374.                     xhr.open('GET', url, false);
  375.                     xhr.send();
  376.                   }
  378.                   function init(e) {
  379.                     e.preventDefault();
  380.                     document.getElementById('rueInput').setAttribute('aria-expanded', 'false');
  381.                     document.getElementById('rueInputLoader').style.display = 'none';
  382.                     document.getElementById("rueInput").focus();
  383.                     document.getElementById('rueInput').value = "";
  384.                     inputAddress.value = "";
  385.                     afficheResultat(false);
  386.                     let datalist = document.getElementById('rueOptions');
  387.                     datalist.innerHTML = '';
  388.                     document.getElementById('lien_reinitialisation').style.display = "none";
  389.                     document.getElementById('btn_reinitialisation').style.display = "none";
  390.                     document.getElementById('rueInput').disabled = false;
  391.                     document.getElementById('rueInput').focus();
  392.                     document.getElementById('mnsContainer').innerHTML = '';
  393.                   }
  395.                   function afficheResultat(bool) {
  396.                     if (bool) {
  397.                       document.getElementById('lien_reinitialisation').style.display = "";
  398.                       document.getElementById('btn_reinitialisation').style.display = "";
  399.                       document.getElementById('rueInput').disabled = true;
  400.                       document.getElementById('rueInput').setAttribute('aria-expanded', 'false');
  401.                     }
  402.                   }
  404.                   function filterByNord(results) {
  405.                     return results.filter(function (result) {
  406.                       return result.properties.postcode && result.properties.postcode.startsWith('59');
  407.                     });
  408.                   }
  410.                   function convertirPremiereLettreMajuscule(chaine) {
  411.                     // Diviser la phrase en mots
  412.                     let mots = chaine.toLowerCase().split(" ");
  413.                     // Convertir la première lettre de chaque mot en majuscule
  414.                     for (let i = 0; i < mots.length; i++) {
  415.                       mots[i] = mots[i].charAt(0).toUpperCase() + mots[i].slice(1);
  416.                     }
  417.                     // Réassembler les mots en une phrase et la retourner
  418.                     return mots.join(" ");
  419.                   }
  421.                   async function getAddress(address) {
  422.                     const addressResponse = await fetch(
  423.                       `https://api-adresse.data.gouv.fr/search/?q=${encodeURIComponent(address)}`);
  424.                     const addressData = await addressResponse.json();
  425.                     return addressData.features[0].geometry.coordinates;
  426.                   }
  428.                   async function getMnsDetails(mns) {
  429.                     let url = '/ajax/get_mns_details?code_utpas=' + mns[0].attributes.code_utpas;
  430.                     let adresse;
  431.                     let type = "MNS";
  432.                     let horaires;
  433.                     let adresseMail;
  434.                     let photoUrl;
  435.                     let photoExists;
  436.                     let formattedTelephone = '';
  437.                     let telephone_lien = "";
  438.                     let nom;
  439.                     let result_array = [];
  440.                     let features;
  441.                     httpRequest(url, function (response) {
  442.                       features = response.features;
  443.                       let i = 0;
  444.                       features.forEach(feature => {
  445.                           const telephone = feature.attributes.telephone;
  446.                           if (telephone && telephone.length > 0) {
  447.                             // Supprimer tous les espaces du numéro de téléphone
  448.                             const cleanedTelephone = telephone.replace(/\s/g, '');
  449.                             // Formater le numéro de téléphone avec des espaces en utilisant une expression régulière
  450.                             formattedTelephone = cleanedTelephone.replace(/^(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1 $2 $3 $4 $5');
  451.                             // Remplacer "03" par "+33"
  452.                             formattedTelephone = formattedTelephone.replace("03", "+33 3");
  453.                             // Formater le lien de téléphone avec le format tel:
  454.                             telephone_lien = 'tel:' + cleanedTelephone.replace(/^(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1 $2 $3 $4 $5').replace("03", "+333").replace(/\s/g, '');
  455.                           }
  456.                           adresseMail = feature.attributes.adressemail;
  457.                           horaires = feature.attributes.horaires;
  458.                           adresse = feature.attributes.adresse + " " + feature.attributes.cp + " " + convertirPremiereLettreMajuscule(feature.attributes.commune);
  459.                           nom = "Maison Nord Solidarités (ex Unité Territoriale de Prévention et d'Action Sociale) " + mns[0].attributes.nomutpas;
  460.                           if (feature.attributes.adresse2 != null && feature.attributes.adresse2 == "ANTENNE") {
  461.                             nom = "Antenne Maison Nord Solidarités " + mns[0].attributes.nomutpas;
  462.                             type = "ANTENNE";
  463.                           }
  464.                           photoUrl =
  465.                             `https://datasig.lenord.fr/applications/mns/${feature.attributes.code_mns_txt}.jpg`;
  466.                           photoExists = checkPhotoExist(feature.attributes.code_mns_txt);
  467.                           tmp_array = [];
  468.                           tmp_array['id'] = feature.attributes.code_utpas;
  469.                           tmp_array['type'] = type;
  470.                           tmp_array['code_mns'] = feature.attributes.code_mns_txt;
  471.                           tmp_array['nom'] = convertirPremiereLettreMajuscule(nom);
  472.                           tmp_array['adresse'] = adresse;
  473.                           tmp_array['horaires'] = horaires;
  474.                           tmp_array['picto_access'] = feature.attributes.picto_access;
  475.                           tmp_array['longitude'] = feature.attributes.x_wgs84;
  476.                           tmp_array['latitude'] = feature.attributes.y_wgs84;
  477.                           tmp_array['telephone'] = formattedTelephone;
  478.                           tmp_array['telephone_lien'] = telephone_lien;
  479.                           tmp_array['adresseMail'] = adresseMail;
  480.                           tmp_array['photoUrl'] = photoUrl;
  481.                           tmp_array['photoExists'] = photoExists;
  482.                           result_array[i] = tmp_array;
  483.                           i++;
  484.                         }
  485.                       );
  486.                     });
  487.                     return result_array;
  488.                   }
  490.                   async function getMnsInfo(address) {
  491.                     const coordinates = await getAddress(address);
  492.                     let url = '/ajax/get_mns_info?lat=' + coordinates[0] + '&lng=' + coordinates[1];
  493.                     let mnsList;
  494.                     httpRequest(url, function (response) {
  495.                       mnsList = response.features;
  496.                     });
  497.                     return await getMnsDetails(mnsList);
  498.                   }
  500.                   function checkPhotoExist(photo) {
  501.                     let url = '/ajax/check_photo_exists?photo=' + photo;
  502.                     httpRequest(url, function (response) {
  503.                       return response;
  504.                       //}
  505.                     });
  506.                     /*try {
  507.                       const response = await fetch(url, {
  508.                         method: 'HEAD'
  509.                       });
  510.                       return response.ok;
  511.                     } catch (error) {
  512.                       return false;
  513.                     }*/
  514.                   }
  516.                   async function displayMnsInfo(address) {
  517.                     document.getElementById('mnsContainer').innerHTML = '';
  518.                     const mnsInfosArray = await getMnsInfo(address);
  519.                     const googleMapsStaticApiKey = 'AIzaSyCmvIOcgfl_y9l40sGBnqOo-6KypVacBP8';
  520.                     mnsInfosArray.forEach(mnsInfo => {
  521.                       const staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${encodeURIComponent(mnsInfo.adresse)}&markers=color:red%7C${mnsInfo.latitude},${mnsInfo.longitude}&zoom=16&size=600x400&maptype=roadmap&key=${googleMapsStaticApiKey}`;
  522.                       const googleMapsLink =
  523.                         `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(mnsInfo.adresse)}`;
  524.                       const mnsElement = document.createElement('div');
  525.                       mnsElement.innerHTML = `
  526.                         <div  class="cardColleges" style="">
  527.                         <div class="cardColleges__inner">
  528.                           <div>
  529.                             <h3>${mnsInfo.nom}</h3>
  530.                             <p> ${mnsInfo.adresse}</p>
  531.                             <ul class="cardColleges__listButtons">
  532.                               ${mnsInfo.telephone ? ` <li>
  533.                                 <a href="${mnsInfo.telephone_lien}">
  534.                                   <div class="cardColleges__inner">
  535.                                     <span class="cardColleges__icon">
  536.                                       <svg aria-hidden="true" id="b502a819-aaf7-4b39-99a9-de8335e974aa"
  537.                                         data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265.57 265.51">
  538.                                         <defs>
  539.                                           <style>
  540.                                             .a7dd9744-ec09-4c6c-9c16-c23d5f53046b {
  541.                                               fill: #17323f;
  542.                                             }
  543.                                           </style>
  544.                                         </defs>
  545.                                         <path id="aeeccaf6-071a-4ed9-8b98-9c660428bb39"
  546.                                           data-name="e079d0e0-4290-4499-8edc-92635082f6d4"
  547.                                           class="a7dd9744-ec09-4c6c-9c16-c23d5f53046b"
  548.                                           d="M208.1,274.5a125.29,125.29,0,0,1-45.4-11.6C99.1,232.7,49,188.5,21.3,122.2A233.38,233.38,0,0,1,9.8,78.8,51.3,51.3,0,0,1,20,37.9,84.63,84.63,0,0,1,52.1,11.3,21.59,21.59,0,0,1,62.4,9a11.34,11.34,0,0,1,7.8,3.9c11.3,17.7,22.1,35.7,32.9,53.6A9.93,9.93,0,0,1,101.9,80c-6.1,5.9-12.5,11.5-19,16.9-13.7,11.5-15.2,15.8-5.8,31.1a146,146,0,0,0,24,30.7c18.1,16.5,37.3,31.9,56.8,46.7,14.9,11.2,17.4,10.1,28.9-4.4,4.1-5.1,8-10.4,12.3-15.2,7-8,11.1-8.5,20.1-3.3,16.6,9.7,33,19.6,49.7,29.1a9.3,9.3,0,0,1,5.1,11.7,64.5,64.5,0,0,1-46.9,47.5A135.69,135.69,0,0,1,208.1,274.5Z"
  549.                                           transform="translate(-8.99 -8.99)"></path>
  550.                                       </svg>
  551.                                     </span>
  552.                                     <span class="cardColleges__text">${mnsInfo.telephone}</span>
  553.                                   </div>
  554.                                 </a>
  555.                               </li> ` : ''}
  556.                               ${mnsInfo.adresseMail ? `<li>
  557.                                 <a href="mailto:${mnsInfo.adresseMail}">
  558.                                   <div class="cardColleges__inner">
  559.                                     <span class="cardColleges__icon">
  560.                                       <svg aria-hidden="true" id="b5c621d6-1983-4327-9028-3fe9272e594c"
  561.                                         data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 384">
  562.                                         <path
  563.                                           d="M502.3,190.8a6,6,0,0,1,9.7,4.7V400a48,48,0,0,1-48,48H48A48,48,0,0,1,0,400V195.6a6,6,0,0,1,9.7-4.7c22.4,17.4,52.1,39.5,154.1,113.6,21.1,15.4,56.7,47.8,92.2,47.6,35.7.3,72-32.8,92.3-47.6C450.3,230.4,479.9,208.2,502.3,190.8ZM256,320c23.2.4,56.6-29.2,73.4-41.4,132.7-96.3,142.8-104.7,173.4-128.7A23.93,23.93,0,0,0,512,131V112a48,48,0,0,0-48-48H48A48,48,0,0,0,0,112v19a24.08,24.08,0,0,0,9.2,18.9c30.6,23.9,40.7,32.4,173.4,128.7,16.8,12.2,50.2,41.8,73.4,41.4Z"
  564.                                           transform="translate(0 -64)"></path>
  565.                                       </svg>
  566.                                     </span>
  567.                                     <span class="cardColleges__text" >${mnsInfo.adresseMail}</span>
  568.                                   </div>
  569.                                 </a>
  570.                               </li>` : ''}
  572.                             </ul>
  573.                           </div>
  574.                         </div>
  575.                         ${mnsInfo.horaires ? `<p >
  576.                           <b>Horaires : </b><span>${mnsInfo.horaires}</span>
  577.                         </p>` : ''}
  579.                         ${mnsInfo.picto_access ? `<p >
  580.                           <b>Accessibilité des lieux :</b><br /><iframe  title="Détail de l'accessibilité de ${mnsInfo.nom}"
  581.                             src="${mnsInfo.picto_access}"
  582.                             height="150"
  583.                             width="330"
  584.                             loading="lazy"
  585.                             style="border: none;"
  586.                           > 
  587.                           </iframe>
  588.                         </p>` : ''}
  590.                       </div>
  591.                     </section>
  593.                       <div  class="cardColleges__map mBMd--imp" style="">
  594.                         <div class="flex-item-left">
  595.                           <img src="${mnsInfo.photoUrl}" alt="">
  596.                         </div>
  597.                         <div class="flex-item-right">
  598.                           <a target="_blank" href="${googleMapsLink}" title="Itinéraire vers ${mnsInfo.nom}" style="position:relative;">
  599.                             <img src="${staticMapUrl}" alt="Itinéraire vers ${mnsInfo.nom}" style="width:100%;height:100%;position:absolute;left:0;top:0;object-fit:cover;border:0">
  600.                           </a>
  601.                         </div>
  602.                       </div>
  603.                         `;
  604.                       if (mnsInfo.type === "MNS") {
  605.                         document.getElementById('mnsContainer').appendChild(mnsElement);
  606.                       }
  607.                     });
  608.                     afficheResultat(true);
  609.                     btnReset.focus();
  610.                     loader.style.display = 'none';
  611.                   }
  613.                   async function onRueSelection(inputValue) {
  614.                     const address = inputValue.trim();
  615.                     if (address.length > 0) {
  616.                       await displayMnsInfo(address);
  617.                       document.getElementById('lien_reinitialisation').style.display = "";
  618.                       document.getElementById('btn_reinitialisation').style.display = "";
  619.                       document.getElementById('rueInput').disabled = true;
  620.                     }
  621.                   }
  623.                   function setActive() {
  624.                     let nbVal = $("div.address-feedback a").length;
  625.                     if (!nbVal)
  626.                       return false;
  627.                     $('div.address-feedback a').removeClass("active");
  629.                     currentFocus = ((currentFocus + nbVal - 1) % nbVal) + 1;
  631.                     $('div.address-feedback a:nth-child(' + currentFocus + ')').addClass("active");
  632.                   }
  634.                   function handlerOnKeyUp() {
  635.                     event.preventDefault();
  636.                     event.stopPropagation();
  638.                     if (event.keyCode === 38) {
  639.                       currentFocus--;
  640.                       setActive();
  641.                       return false;
  642.                     } else if (event.keyCode === 40) {
  643.                       currentFocus++;
  644.                       setActive();
  645.                       return false;
  646.                     } else if (event.keyCode === 13) {
  647.                       if (currentFocus > 0) {
  648.                         if ($("div.address-feedback a:nth-child(" + currentFocus + ")").attr("data-name")) {
  649.                           $("#rueInput").val($("div.address-feedback a:nth-child(" + currentFocus + ")").attr("data-name") + ' ' + $(
  650.                             "div.address-feedback a:nth-child(" + currentFocus + ")").attr("data-postcode") + ' ' + $(
  651.                             "div.address-feedback a:nth-child(" + currentFocus + ")").attr("data-city"));
  652.                         } else {
  653.                           $("#rueInput").val('');
  654.                         }
  655.                         $('.address-feedback').empty();
  656.                         onRueSelection($("#rueInput").val()).then(r => null);
  657.                       }
  658.                       return false;
  659.                     }
  661.                     $('div.address-feedback a').removeClass("active");
  662.                     currentFocus = 0;
  664.                     clearTimeout(fetchTrigger);
  666.                     let rue = $("#rueInput").val();
  668.                     if (rue.length === 0) {
  669.                       $('.address-feedback').empty();
  670.                       return false;
  671.                     }
  673.                     if (rue.length > 2) {
  674.                       document.getElementById('rueInputLoader').style.display = 'block';
  675.                       fetchTrigger = setTimeout(function () {
  676.                         $.get('https://api-adresse.data.gouv.fr/search/', {
  677.                           q: rue,
  678.                           limit: 20,
  679.                           autocomplete: 1
  680.                         }, function (data, status, xhr) {
  681.                           let liste = "";
  682.                           let suggestions = filterByNord(data.features);
  683.                           $.each(suggestions, function (i, obj) {
  684.                             let cooladdress = obj.properties.name + " " + obj.properties.postcode + " <strong>" + obj
  685.                               .properties.city + "</strong>";
  686.                             if (obj.properties.type && obj.properties.type.trim() !== 'municipality') {
  687.                               liste +=
  688.                                 '<a class="list-group-item list-group-item-action py-1" href="javascript:void(0)" name="' +
  689.                                 obj.properties.label + '" data-name="' + obj.properties.name + '" data-postcode="' + obj
  690.                                   .properties.postcode + '" data-city="' + obj.properties.city + '">' + cooladdress + '</a>';
  691.                             }
  692.                           });
  693.                           $('.address-feedback').html(liste);
  694.                           const elems = document.querySelectorAll('.list-group-item');
  695.                           for (let i = 0; i < elems.length; i++) {
  696.                             elems[i].addEventListener('mousedown', function (event) {
  697.                               handlerOnMouseDown(event, i, elems[i]);
  698.                             });
  699.                           }
  700.                           document.getElementById('rueInputLoader').style.display = 'none';
  702.                           document.getElementById('rueInput').setAttribute('aria-expanded', 'true');
  703.                         }, 'json');
  704.                       }, 500);
  705.                     }
  706.                   }
  708.                   function handlerOnKeyDown(e) {
  709.                     if ($("div.address-feedback a").length > 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13)) {
  710.                       e.preventDefault();
  711.                     }
  712.                   }
  714.                   function handlerOnFocusOut() {
  715.                     $('.address-feedback').empty();
  716.                     document.getElementById('rueInput').setAttribute('aria-expanded', 'false');
  717.                   }
  719.                   function handlerOnMouseDown(event, index, element) {
  720.                     event.preventDefault();
  721.                     event.stopPropagation();
  722.                     $("#rueInput").val($(element).attr("data-name") + ' ' + $(element).attr("data-postcode") + ' ' + $(element).attr(
  723.                       "data-city"));
  724.                     $('.address-feedback').empty();
  725.                     onRueSelection($("#rueInput").val()).then(r => null);
  726.                   }
  728.                 })();
  729.               </script>
  730.             </div>
  731.           </div>
  732.         {% endif %}
  733.       </div>
  734.     </article>
  735.     {% if is_preview != 1 %}
  736.       <div class="container pT pB">
  737.         {% include 'Nordinfo/Main/parts/article-actions.html.twig' with {'post_title': title, 'post_id':'test', 'is_le_nord':true} %}
  738.       </div>
  739.     {% endif %}
  740.     {% if is_pdf|default and is_pdf == 1 %}{% else %}
  741.       <div class="containerVoting">
  742.         <div class="containerSm" aria-live="polite">
  743.           {% if hasVoted == 1 %}
  744.             <p id="labelSuccess" class="__result" style="margin-bottom:0;display:block!important;">Vous avez déja donné
  745.               votre avis sur ce
  746.               service.</p>
  747.           {% else %}
  748.             <fieldset class="__fieldset" id="fieldset">
  749.               <legend>Ce contenu vous a-t-il été utile ?</legend>
  750.               <div>
  751.                 <div>
  752.                   <input type="radio" id="vote_yes" name="vote" value="positif" aria-labelledby="label_yes"
  753.                          class="sr-only">
  754.                   <label id="label_yes" for="vote_yes">
  755.                   <span aria-hidden="true">
  756.                     <img src="{{ asset('img/brandmaster/icon-yes.svg') }}" alt="">
  757.                   </span>
  758.                     <span>Oui</span>
  759.                   </label>
  760.                 </div>
  761.                 <div>
  762.                   <input
  763.                     type="radio" id="vote_no" name="vote" value="negatif" aria-labelledby="label_no" class="sr-only">
  764.                   <label id="label_no" for="vote_no">
  765.                   <span aria-hidden="true">
  766.                     <img src="{{ asset('img/brandmaster/icon-no.svg') }}" alt="">
  767.                   </span>
  768.                     <span>Non</span>
  769.                   </label>
  770.                 </div>
  771.               </div>
  772.             </fieldset>
  773.             <div class="containerBtnSubmitVote"
  774.                  id="containerBtnSubmitVote"
  775.                  style="display:none;"
  776.             >
  777.               <button
  778.                 id="btnSubmitVote"
  779.                 class="btn btnFormSubmit --nordServices"
  780.                 aria-disabled="false"
  781.                 aria-busy="false"
  782.               >
  783.                 <span>Valider</span>
  784.                 <span class="loader"></span>
  785.               </button>
  786.             </div>
  787.             <p id="labelSuccess" class="__result" role="status">Merci d'avoir donné votre avis</p>
  788.             <p id="labelSuccessMessage" class="__result" role="status">Merci de votre message</p>
  789.             <div class="__containerForm" id="containerForm" style="display:none;">
  790.               <p class="__subtitle">Comment améliorer cette page ?</p>
  791.               <form
  792.                 action="#"
  793.                 method="post"
  794.                 class="needs-validation formCustom"
  795.                 id="formComment"
  796.               >
  797.                 <div class="form-group">
  798.                   <div class="__input-wrapper">
  799.                     <div class="__inner">
  800.                       <label for="inputComment">
  801.                         <span class="label-text">Votre commentaire <span class="colorRed">*</span></span>
  802.                       </label>
  803.                       <input
  804.                         type="text"
  805.                         class="form-control"
  806.                         id="inputComment"
  807.                         name="comment"
  808.                         placeholder=""
  809.                         required
  810.                       >
  811.                     </div>
  812.                   </div>
  813.                 </div>
  814.                 <div class="__buttons-wrapper containerBtnSubmitComment">
  815.                   <button
  816.                     class="btn btnFormSubmit --nordServices"
  817.                     id="btnSubmitFormComment"
  818.                     type="submit"
  819.                     aria-disabled="false"
  820.                     aria-busy="false"
  821.                   >
  822.                     <span>Valider</span>
  823.                     <span class="loader"></span>
  824.                   </button>
  825.                 </div>
  826.               </form>
  827.             </div>
  828.           {% endif %}
  829.         </div>
  830.       </div>
  831.     {% endif %}
  832.   </main>
  833. {% endblock %}
  834. {% block include_js %}
  835.   <script type="text/javascript">
  836.     const id = "{{ id }}";
  837.     const btnSubmitFormComment = document.getElementById('btnSubmitFormComment');
  838.     const formComment = document.getElementById('formComment');
  839.     const containerBtnSubmitVote = document.getElementById('containerBtnSubmitVote');
  840.     const btnSubmitVote = document.getElementById('btnSubmitVote');
  841.     const voteYes = document.getElementById('vote_yes');
  842.     const voteNo = document.getElementById('vote_no');
  843.     const containerForm = document.getElementById('containerForm');
  844.     const fieldset = document.getElementById('fieldset');
  845.     const labelSuccess = document.getElementById('labelSuccess');
  846.     const inputComment = document.getElementById('inputComment');
  847.     const labelSuccessMessage = document.getElementById('labelSuccessMessage');
  849.     function toggleSubmitButtonVisibility() {
  850.       if (voteYes.checked || voteNo.checked) {
  851.         containerBtnSubmitVote.style.display = 'block';
  852.       } else {
  853.         containerBtnSubmitVote.style.display = 'none';
  854.       }
  855.     }
  857.     voteYes.addEventListener('change', toggleSubmitButtonVisibility);
  858.     voteNo.addEventListener('change', toggleSubmitButtonVisibility);
  860.     btnSubmitVote.addEventListener('click', function (e) {
  861.       e.preventDefault();
  862.       if (voteYes.checked) {
  863.         btnSubmitVote.classList.add('--loading');
  864.         btnSubmitVote.setAttribute('aria-disabled', 'true');
  865.         btnSubmitVote.setAttribute('aria-busy', 'true');
  866.         btnSubmitVote.setAttribute('disabled', 'disabled');
  867.         $.ajax({
  868.           url: "{{ path('services_save_avis') }}",
  869.           data: {
  870.             'id': id,
  871.             'valeur': 'positif'
  872.           },
  873.           type: "POST",
  874.           success: function () {
  875.             setTimeout(() => {
  876.               containerBtnSubmitVote.style.display = 'none';
  877.               fieldset.style.display = 'none';
  878.               labelSuccess.style.display = 'block';
  879.             }, 1500);
  880.           }
  881.         });
  882.       } else if (voteNo.checked) {
  883.         btnSubmitVote.classList.add('--loading');
  884.         btnSubmitVote.setAttribute('aria-disabled', 'true');
  885.         btnSubmitVote.setAttribute('aria-busy', 'true');
  886.         btnSubmitVote.setAttribute('disabled', 'disabled');
  887.         setTimeout(() => {
  888.           containerForm.style.display = 'block';
  889.           containerBtnSubmitVote.style.display = 'none';
  890.           fieldset.style.display = 'none';
  891.         }, 1000);
  892.       }
  893.     });
  895.     formComment.addEventListener('submit', function (e) {
  896.       e.preventDefault();
  897.       btnSubmitFormComment.classList.add('--loading');
  898.       btnSubmitFormComment.setAttribute('aria-disabled', 'true');
  899.       btnSubmitFormComment.setAttribute('aria-busy', 'true');
  900.       btnSubmitFormComment.setAttribute('disabled', 'disabled');
  901.       $.ajax({
  902.         url: "{{ path('services_save_avis') }}",
  903.         data: {
  904.           'id': id,
  905.           'valeur': 'negatif',
  906.           'comment': inputComment.value
  907.         },
  908.         type: "POST",
  909.         success: function () {
  910.           setTimeout(() => {
  911.             containerForm.style.display = 'none';
  912.             labelSuccessMessage.style.display = 'block';
  913.           }, 1500);
  914.         }
  915.       });
  916.     });
  917.     if (id === "45") {
  918.       {% include 'Services/js/college.js' %}
  919.     }
  920.   </script>
  921. {% endblock %}