templates/home/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5. <!-- Spinner de carga de capas -->
  6. <div id="loading-overlay" class="loading-overlay">
  7.     <div class="loading-content">
  8.         <div class="spinner-layers"></div>
  9.         <p></p>
  10.     </div>
  11. </div>
  13. <div id="map" class="map"></div>
  15. <script>
  16.     var objSig = new uiSig();
  17.     objSig.initMap();
  19.     // Función para mostrar el spinner de capas
  20.     function showLoading(mensaje) {
  21.         let overlay = document.getElementById('loading-overlay');
  22.         let texto = overlay.querySelector('p');
  23.         texto.innerHTML = mensaje;
  24.         overlay.style.display = 'flex';
  25.     }
  27.     // Función para ocultar el spinner de capas
  28.     function hideLoading() {
  29.         let overlay = document.getElementById('loading-overlay');
  30.         let contenido = overlay.querySelector('.loading-content');        
  31.         // Ocultar overlay
  32.         overlay.style.display = 'none';        
  33.         // Restaurar el contenido original (spinner + párrafo vacío)
  34.         contenido.innerHTML = '<div class="spinner-layers"></div><p></p>';
  35.     }
  37.     document.addEventListener("DOMContentLoaded", function(event) {        
  38.         {% if default_project_id %}
  39.             showLoading('Cargando el nombre de las capas... <br/> Cuando finalice elige una comarca para empezar');
  40.             // Cargar directamente el proyecto por defecto
  41.             console.log('Cargando proyecto por defecto: {{ default_project_name }} (ID: {{ default_project_id }})');
  42.             objSig.getLayersProject({{ default_project_id }});
  43.         {% else %}
  44.             console.error('No se ha configurado un proyecto por defecto en el .env');
  45.             alert('No se ha configurado un proyecto por defecto. Contacte con el administrador.');
  46.         {% endif %}
  48.         //add click event listener to button search
  49.         let btnSearch = document.getElementById('btnSearch');
  50.         
  51.         btnSearch.addEventListener("click", function() { 
  52.             //pass parameter content input search to function search
  53.             let contentSearch = document.getElementById('searchFeatures').value;
  54.             if (contentSearch != '')
  55.                 objSig.search(contentSearch);
  56.             else
  57.                 alert('Debe introducir un valor para realizar la búsqueda');          
  58.         });
  60.         //lanzar evento click de btnSearch para que se ejecute la busqueda al pulsar enter en el input search searchFeatures
  61.         document.getElementById('searchFeatures').addEventListener('keydown', function(event) {
  62.             if (event.keyCode === 13) {
  63.                 event.preventDefault();
  64.                 btnSearch.click();
  65.             }
  66.         });
  68.         //add click event listener to button btnLimpiar
  69.         let btnLimpiar = document.getElementById('btnLimpiar');
  70.         btnLimpiar.addEventListener("click", function() { 
  71.             let ctlContentSearch = document.getElementById('searchFeatures');
  72.             ctlContentSearch.value = '';
  73.             objSig.clear();          
  74.         });
  75.     });
  77.     // Función global para que uiSig pueda llamarla cuando termine la carga de capas
  78.     window.onLayersLoaded = function() {
  79.         console.log('Capas cargadas correctamente')
  80.         hideLoading();
  81.         console.log('Capas cargadas correctamente');
  82.     };
  84.     window.onLayersLoading = function(mensaje) {
  85.         console.log('>>> onLayersLoading ejecutado:', mensaje);
  86.         showLoading(mensaje);
  87.     };
  89. </script>
  91. {% endblock %}