templates/Services/js/college.js line 1

Open in your IDE?
  1. let currentFocus = -1;
  2. let fetchTrigger = 0;
  4. document.getElementById('btnResetCollegeSearch').addEventListener('click', function(event) {
  5.   init(event);
  6. });
  8. document.getElementById('btnResetCollegeSearch').addEventListener('keyup', function(event) {
  9.   if (event.key === 'Enter') {
  10.     init(event);
  11.   }
  12. });
  14. function httpRequest(url, callback) {
  15.   let xhr = new XMLHttpRequest();
  16.   xhr.onreadystatechange = function () {
  17.     if (xhr.readyState === 4 && xhr.status === 200) {
  18.       callback(JSON.parse(xhr.responseText));
  19.     }
  20.   };
  21.   xhr.open('GET', url, true);
  22.   xhr.send();
  23. }
  25. function init(e) {
  26.   e.preventDefault();
  27.   document.getElementById('rueInputLoader').style.display = 'none';
  28.   document.getElementById("rueInput").focus();
  29.   document.getElementById('rueInput').value = "";
  30.   document.getElementById('inputAddress').value = "";
  31.   afficheResultat(false);
  32.   let datalist = document.getElementById('rueOptions');
  33.   datalist.innerHTML = '';
  34.   document.getElementById('lien_reinitialisation').style.display = "none";
  35.   document.getElementById('btn_reinitialisation').style.display = "none";
  36.   document.getElementById('rueInput').disabled = false;
  37.   document.getElementById('rueInput').focus();
  38.   document.getElementById('libelle_multiple').style.display = "none";
  39.   document.getElementById('results').innerHTML = '';
  40. }
  42. function afficheResultat(bool) {
  43.   document.getElementById('leCollege').style.display = "none";
  44.   document.getElementById('lesImages').style.display = "none";
  45.   if (bool) {
  46.     document.getElementById('leCollege').style.display = "";
  47.     document.getElementById('lesImages').style.display = "";
  48.     document.getElementById('lien_reinitialisation').style.display = "";
  49.     document.getElementById('btn_reinitialisation').style.display = "";
  50.     document.getElementById('rueInput').disabled = true;
  51.   }
  52. }
  54. function filterByNord(results) {
  55.   return results.filter(function (result) {
  56.     return result.properties.postcode && result.properties.postcode.startsWith('59');
  57.   });
  58. }
  60. function getInfoCollege(numetab) {
  61.   let url = "/ajax/get_info_colleges?id=" + numetab;
  62.   httpRequest(url, function (response) {
  63.     if (response.features.length > 0) {
  64.       let attributes = response.features[0].attributes;
  65.       
  66.       document.getElementById('college_rne').innerHTML = "";
  67.       document.getElementById('college_nb_eleve').innerHTML = "";
  68.       document.getElementById('college_image').innerHTML = "";
  70.       document.getElementById('college_nom').innerHTML = attributes["type_"] + " " + attributes["Denomination"];
  71.       document.getElementById('college_adresse').innerHTML = attributes["adresse1"] + " " + attributes["adresse2"] + " " + attributes["codepostal"] + " " + attributes["Ville"];
  72.       document.getElementById('college_telephone').innerHTML = attributes["Tél"].replaceAll(".", " ").replace("03", "+33 3");
  73.       document.getElementById('college_telephone_lien').href = attributes["Tél"].replace("03", "tel:+333").replaceAll(".", "");
  74.       
  75.       const googleMapsStaticApiKey = 'AIzaSyCmvIOcgfl_y9l40sGBnqOo-6KypVacBP8';
  76.       const address = attributes["adresse1"] + " " + attributes["adresse2"] + " " + attributes["codepostal"] + " " + attributes["Ville"];
  77.       const staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${encodeURIComponent(address)}&zoom=16&size=600x400&maptype=roadmap&key=${googleMapsStaticApiKey}`;
  79.       const googleMapsLink = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
  81.       document.getElementById('college_map').innerHTML = `<a target="_blank" href="${googleMapsLink}" title="Itinéraire vers ${attributes["type_"] + " " + attributes["Denomination"]}" style="position:relative;">
  82.                                                       <img src="${staticMapUrl}" alt="Itinéraire vers ${attributes["type_"] + " " + attributes["Denomination"]}" style="width:100%;height:100%;position:absolute;left:0;top:0;object-fit:cover;border:0">
  83.                                                     </a>`;
  86.       document.getElementById('college_site_ent').href = attributes["URL_ENT"];
  87.       document.getElementById('college_site_ent').title = "Site internet du collège " + attributes["Denomination"] + " " + attributes["Ville"];
  89.       document.getElementById('college_menu_link').href = "https://nord.webgerest.fr/?RNE=" + attributes["NUMETAB"];
  91.       document.getElementById('college_mail').innerHTML = "ce." + attributes["NUMETAB"].toLowerCase() + "@ac-lille.fr";
  92.       document.getElementById('college_mail_href').href = "mailto:ce." + attributes["NUMETAB"].toLowerCase() + "@ac-lille.fr";
  94.       if (attributes["NUMETAB"]) {
  95.         document.getElementById('college_rne').innerHTML = "<span class='font-weight-bold'>Code UAI, RNE :</span> " + attributes["NUMETAB"] + "<br />";
  96.       }
  97.       if (attributes["nb_eleve"]) {
  98.         document.getElementById('college_nb_eleve').innerHTML = "<b>Nombre d'élèves :</b> " + attributes["nb_eleve"] + "<br />";
  99.       }
  100.       if (attributes["Lien_Photo"]) {
  101.         document.querySelector('#lesImages .flex-item-right').classList.remove("no-first-image");
  102.         document.getElementById('college_image').classList.add("flex-item-left");
  103.         let college_image = document.createElement("img");
  104.         college_image.setAttribute("src", attributes["Lien_Photo"]);
  105.         college_image.setAttribute("alt", "");
  106.         document.getElementById("college_image").appendChild(college_image);
  107.       } else {
  108.         let flexItemRight = document.querySelector('#lesImages .flex-item-right');
  109.         flexItemRight.classList.add('no-first-image');
  110.         document.getElementById('college_image').classList.remove("flex-item-left");
  111.       }
  113.       if (attributes["mail_college"]) {
  114.         document.getElementById('college_mail').innerHTML = attributes["mail_college"];
  115.         document.getElementById('bloc_mail').style.display = "";
  116.       }
  118.       afficheResultat(true);
  120.       document.getElementById('btn_reinitialisation').focus();
  121.       document.getElementById('rueInputLoader').style.display = 'none';
  123.       let leCollegeElement = document.getElementById('leCollege');
  124.       let lesImagesElement = document.getElementById('lesImages');
  125.       let leCollegeCopy = leCollegeElement.cloneNode(true);
  126.       leCollegeCopy.setAttribute('id', 'leCollege' + numetab);
  127.       leCollegeElement.style.display = 'none';
  128.       let lesImagesCopy = lesImagesElement.cloneNode(true);
  129.       lesImagesCopy.setAttribute('id', 'lesImages' + numetab);
  130.       lesImagesElement.style.display = 'none';
  131.       let resultsContainer = document.getElementById('results');
  132.       resultsContainer.appendChild(leCollegeCopy);
  133.       resultsContainer.appendChild(lesImagesCopy);
  135.     } else {
  136.       afficheResultat(false);
  137.     }
  138.   });
  139. }
  141. function getCollegeProximite(geometry) {
  142.   document.getElementById('results').innerHTML = '';
  143.   let url = '/ajax/get_college_proximite?lat=' + geometry.coordinates[0] + '&lng=' + geometry.coordinates[1];
  144.   httpRequest(url, function (response) {
  145.     if (response.features.length > 0) {
  146.       if (response.features.length > 1) {
  147.         document.getElementById('libelle_multiple').style.display = "";
  148.       } else {
  149.         document.getElementById('libelle_multiple').style.display = "none";
  150.       }
  151.       let responses = response.features;
  152.       responses.forEach(function (item) {
  153.         const attributes = item.attributes;
  154.         getInfoCollege(attributes["numetab"]);
  155.       });
  156.     } else {
  157.       afficheResultat(false);
  158.     }
  159.   });
  160. }
  162. function getInfoRue(rue) {
  163.   if (rue.length > 2) {
  164.     let url = 'https://api-adresse.data.gouv.fr/search/?q=' + encodeURIComponent(rue); // + "&limit=150";
  165.     httpRequest(url, function (response) {
  166.       if (response.features.length > 0) {
  167.         let geometry = response.features[0].geometry;
  168.         getCollegeProximite(geometry);
  169.       } else {
  170.         afficheResultat(false);
  171.         document.getElementById('rueInputLoader').style.display = 'none';
  172.       }
  173.     });
  174.   }
  175. }
  177. function onRueSelection(inputValue) {
  178.   if (inputValue.length > 2) {
  179.     document.getElementById('rueInputLoader').style.display = 'block';
  180.     setTimeout(getInfoRue(inputValue), 200);
  181.   }
  182. }
  184. function setActive() {
  185.   let nbVal = $("div.address-feedback a").length;
  186.   if (!nbVal)
  187.     return false;
  188.   $('div.address-feedback a').removeClass("active");
  190.   currentFocus = ((currentFocus + nbVal - 1) % nbVal) + 1;
  192.   $('div.address-feedback a:nth-child(' + currentFocus + ')').addClass("active");
  193. }
  195. function handlerOnKeyUp(ev) {
  196.   event.preventDefault();
  197.   event.stopPropagation();
  199.   if (event.keyCode === 38) {
  200.     currentFocus--;
  201.     setActive();
  202.     return false;
  203.   } else if (event.keyCode === 40) {
  204.     currentFocus++;
  205.     setActive();
  206.     return false;
  207.   } else if (event.keyCode === 13) {
  208.     if (currentFocus > 0) {
  209.       if ($("div.address-feedback a:nth-child(" + currentFocus + ")").attr("data-name")) {
  210.         $("#rueInput").val($("div.address-feedback a:nth-child(" + currentFocus + ")").attr("data-name") + ' ' + $("div.address-feedback a:nth-child(" + currentFocus + ")").attr("data-postcode") + ' ' + $("div.address-feedback a:nth-child(" + currentFocus + ")").attr("data-city"));
  211.       } else {
  212.         $("#rueInput").val('');
  213.       }
  214.       $('.address-feedback').empty();
  215.       onRueSelection($("#rueInput").val());
  216.     }
  217.     return false;
  218.   }
  220.   $('div.address-feedback a').removeClass("active");
  221.   currentFocus = 0;
  223.   clearTimeout(fetchTrigger);
  225.   let rue = $("#rueInput").val();
  226.   
  227.   if (rue.length === 0) {
  228.     $('.address-feedback').empty();
  229.     ev.target.setAttribute('aria-expanded', 'false');
  230.     return false;
  231.   }
  233.   document.getElementById('libelle_multiple').style.display = "none";
  234.   
  235.   if (rue.length > 2) {
  236.     document.getElementById('rueInputLoader').style.display = 'block';
  237.     fetchTrigger = setTimeout(function () {
  238.       $.get('https://api-adresse.data.gouv.fr/search/', {
  239.         q: rue,
  240.         limit: 4,
  241.         autocomplete: 1
  242.       }, function (data, status, xhr) {
  243.         let liste = "";
  244.         let suggestions = filterByNord(data.features);
  245.         if (suggestions.length > 0) {
  246.           ev.target.setAttribute('aria-expanded', 'true');
  247.         }
  248.         $.each(suggestions, function (i, obj) {
  249.           let cooladdress = obj.properties.name + " " + obj.properties.postcode + " <strong>" + obj.properties.city + "</strong>";
  250.           liste += '<li><a class="list-group-item list-group-item-action py-1" href="javascript:void(0)" name="' + obj.properties.label + '" data-name="' + obj.properties.name + '" data-postcode="' + obj.properties.postcode + '" data-city="' + obj.properties.city + '">' + cooladdress + '</a></li>';
  251.         });
  252.         $('.address-feedback').html(liste);
  253.         const elems = document.querySelectorAll('.list-group-item');
  254.         for (let i = 0; i < elems.length; i++) {
  255.           elems[i].addEventListener('mousedown', function (event) {
  256.             handlerOnMouseDown(event, i, elems[i]);
  257.           });
  258.         }
  259.         document.getElementById('rueInputLoader').style.display = 'none';
  260.       }, 'json');
  261.     }, 500);
  262.   }
  263. }
  265. function handlerOnKeyDown(e) {
  266.   if ($("div.address-feedback a").length > 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13)) {
  267.     e.preventDefault();
  268.   }
  269. }
  271. function handlerOnFocusOut(ev) {
  272.   $('.address-feedback').empty();
  273.   ev.target.setAttribute('aria-expanded', 'false');
  274. }
  276. function handlerOnMouseDown(event, index, element) {
  277.   event.preventDefault();
  278.   event.stopPropagation();
  279.   $("#rueInput").val($(element).attr("data-name") + ' ' + $(element).attr("data-postcode") + ' ' + $(element).attr("data-city"));
  280.   $('.address-feedback').empty();
  281.   onRueSelection($("#rueInput").val());
  282. }