templates/utils/localisation-form-input.html.twig line 1

Open in your IDE?
  1. <div class="input-white flex-grow-1" style="min-width: 200px;">
  2. <label for="input-localisation" class="w-100" style="padding-right: 10px;">
  3. <div>
  4. <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22.139 26.614">
  5. <g id="Icon_feather-map-pin" data-name="Icon feather-map-pin" transform="translate(-3.5 -0.5)">
  6. <path id="Tracé_17" data-name="Tracé 17" d="M24.639,11.569c0,7.832-10.069,14.545-10.069,14.545S4.5,19.4,4.5,11.569a10.069,10.069,0,1,1,20.139,0Z" transform="translate(0 0)" fill="none" stroke="#186d7c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
  7. <path id="Tracé_18" data-name="Tracé 18" d="M20.213,13.856A3.356,3.356,0,1,1,16.856,10.5a3.356,3.356,0,0,1,3.356,3.356Z" transform="translate(-2.287 -2.287)" fill="none" stroke="#186d7c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
  8. </g>
  9. </svg>
  10. </div>
  11. <input type="text" placeholder="Localisation" id="input-localisation" name="location" class="w-100" autocomplete="off" value="{% if location is defined and location %}{{ location }}{% endif %}" />
  12. <div id="start-localisation">
  13. <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path d="M256 0c17.7 0 32 14.3 32 32V42.4c93.7 13.9 167.7 88 181.6 181.6H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H469.6c-13.9 93.7-88 167.7-181.6 181.6V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V469.6C130.3 455.7 56.3 381.7 42.4 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H42.4C56.3 130.3 130.3 56.3 224 42.4V32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6V384c0-17.7 14.3-32 32-32s32 14.3 32 32v20.6c58.3-12.5 104.1-58.4 116.6-116.6H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h20.6C392.1 165.7 346.3 119.9 288 107.4V128c0 17.7-14.3 32-32 32s-32-14.3-32-32V107.4C165.7 119.9 119.9 165.7 107.4 224H128c17.7 0 32 14.3 32 32s-14.3 32-32 32H107.4zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" fill="#186d7c"/></svg>
  14. </div>
  15. </label>
  16. </div>
  18. <input type="hidden" name="lat" id="input-lat" value="{% if lat is defined and lat and location is defined and location %}{{ lat }}{% endif %}" />
  19. <input type="hidden" name="lon" id="input-lon" value="{% if lon is defined and lon and location is defined and location %}{{ lon }}{% endif %}" />
  21. <script src="{{ asset('lib/autocomplete/dist/autoComplete.min.js') }}"></script>
  22. <script>
  23. (function() {
  24. const config = {
  25. selector: "#input-localisation",
  26. data: {
  27. src: async (query) => {
  28. try {
  29. const source = await fetch(`/publicapi/villes/${query}`);
  30. const data = await source.json();
  31. return data;
  32. } catch (error) {
  33. return error;
  34. }
  35. },
  36. keys: ["villeNomReel"]
  37. },
  38. resultsList: {
  39. element: (list, data) => {
  40. if (!data.results.length) {
  41. const message = document.createElement("div");
  42. message.setAttribute("class", "no_result");
  43. message.innerHTML = `<span>Aucun résultat pour "${data.query}"</span>`;
  44. list.prepend(message);
  45. }
  46. },
  47. noResults: true,
  48. },
  49. resultItem: {
  50. element: (list, data) => {
  51. list.innerHTML = "<div class='d-flex align-items-center justify-content-between gap-5'><div class='fw-semibold'>"+ data.value.villeNomReel +"</div><div>"+ data.value.villeCodePostal.split('-')[0] +"</div></div>"
  52. },
  53. },
  54. debounce: 300,
  55. submit: true,
  56. searchEngine: (query, record) => {
  57. return record;
  58. },
  59. };
  61. const autoCompleteJS = new autoComplete(config);
  63. document.getElementById("input-localisation").addEventListener("selection", function (event) {
  64. if (event.detail.selection) {
  65. document.getElementById('input-localisation').value = event.detail.selection.value.villeNomReel;
  66. document.getElementById('input-lat').value = event.detail.selection.value.villeLatitudeDeg;
  67. document.getElementById('input-lon').value = event.detail.selection.value.villeLongitudeDeg;
  68. }
  69. });
  71. document.getElementById("start-localisation").addEventListener("click", function (event) {
  72. if (navigator.geolocation) {
  73. navigator.geolocation.getCurrentPosition(function(position) {
  74. document.getElementById('input-localisation').value = "Ma position";
  75. document.getElementById('input-lat').value = position.coords.latitude;
  76. document.getElementById('input-lon').value = position.coords.longitude;
  77. });
  78. } else {
  79. alert("La géolocalisation n'est pas disponible sur votre appareil.");
  80. }
  81. });
  82. })();
  83. </script>