templates/base.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="es">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title>{% block title %}bienvenido al Visor Gis!{% endblock %}</title>
  7.         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
  8.         {% block stylesheets %}
  9.             <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
  10.             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  11.             <!-- Bulma Responsive Tables -->
  12.             <link rel="stylesheet" href="/css/bulma_responsive_tables.css">
  13.             <link rel="stylesheet" type="text/css" href="/css/base.css"/>
  14.             <!-- Font Awesome -->
  15.             <link href="/fontawesome/css/fontawesome.css" rel="stylesheet">
  16.             <link href="/fontawesome/css/brands.css" rel="stylesheet">
  17.             <link href="/fontawesome/css/solid.css" rel="stylesheet">
  18.             <link href="/css/leaflet/leaflet-control-boxzoom.css" rel="stylesheet" />
  19.             <link href="/css/leaflet/leaflet-control-hand.css" rel="stylesheet" />
  20.             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@drustack/leaflet.resetview/dist/L.Control.ResetView.min.css" />
  21.             <link rel="stylesheet" href="/css/leaflet/coord-projection.css" />
  22.             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.control.layers.tree@1.0.0/L.Control.Layers.Tree.css">
  23.         {% endblock %}
  25.         {% block javascripts %}
  26.             <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  27.             <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
  28.             <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.9.0/proj4.js"></script>
  29.             <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>
  30.             <script src="https://unpkg.com/@mapbox/leaflet-pip@latest/leaflet-pip.js"></script>
  31.             <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
  32.             <script src="/js/leaflet/leaflet-control-boxzoom.js"></script>
  33.             <script src="/js/leaflet/leaflet-control-hand.js"></script>
  34.             <script src="https://cdn.jsdelivr.net/npm/@drustack/leaflet.resetview/dist/L.Control.ResetView.min.js"></script>
  35.             <script src="https://cdn.jsdelivr.net/npm/leaflet.control.layers.tree@1.0.0/L.Control.Layers.Tree.js"></script>
  36.             
  37.             <script src="/js/leaflet/coord-projection.js"></script>
  38.             <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>            
  39.             <script src="/js/jszip.min.js"></script>
  40.             <script src="/js/utils.js"></script>
  41.             <script src="/js/sig.js"></script>
  42.         {% endblock %}
  43.     </head>
  44.     <body>
  45.         <div class="wrapper">
  46.             <!-- Botón para mostrar/ocultar *** menú comentado, no necesario de momento -->
  47.             <button id="toggleMenu" title="Mostrar/Ocultar Menú" aria-label="Toggle menu">
  48.                 <span class="icon">
  49.                     <i class="fas fa-bars"></i>
  50.                 </span>
  51.             </button>
  52.             
  54.             <nav id="navbar" class="main-navbar">
  55.                 <div class="navbar" role="navigation" aria-label="main navigation">
  56.                     <div id="navbrand" class="navbar-brand">                        
  57.                     </div>
  58.                     <div id="navMenu" class="navbar-menu">
  59.                         <div class="navbar-item is-expanded">    
  60.                             
  61.                             <div class="field is-horizontal">
  62.                                 <div class="field-body is-justify-content-space-between">
  63.                                     <div class="field is-narrow has-addons">
  64.                                         <div class="control is-expanded">
  65.                                             <input id="searchFeatures" name="searchFeatures" class="input is-fullwidth" type="text" placeholder="Buscar Ref Catastral...">
  66.                                         </div>
  67.                                         <div class="control">
  68.                                             <button id="btnSearch" class="button is-info">
  69.                                                 <span class="icon is-small">
  70.                                                     <i class="fas fa-search"></i>
  71.                                                 </span>
  72.                                                 <span>Buscar</span>
  73.                                             </button>
  74.                                         </div>
  75.                                     </div>
  76.                                     <div class="field">
  77.                                         <div class="control">
  78.                                             <button id="btnLimpiar" class="button is-info">
  79.                                                 <span class="icon is-small">
  80.                                                     <i class="fas fa-eraser"></i>
  81.                                                 </span>
  82.                                                 <span>Limpiar</span>
  83.                                             </button>
  84.                                         </div>
  85.                                     </div>
  86.                                 </div>
  87.                             </div>
  88.                         </div>
  89.                     </div>
  90.                     <!-- Quitado botón de accesso privado
  91.                     <div id="navLogin" class="navbar-end">
  92.                         {% if is_granted('IS_AUTHENTICATED_FULLY') %}
  93.                             <div class="navbar-item has-dropdown is-hoverable">
  94.                                 <a class="navbar-link">
  95.                                     <span class="fa-solid fa-user fa-2xl"></span>
  96.                                 </a>                                
  97.                                 <div class="navbar-dropdown">                                    
  98.                                     <span class="navbar-item">
  99.                                         {{ app.user.email }}
  100.                                     </span>
  101.                                     <a class="navbar-item" href="/logout">
  102.                                         Salir
  103.                                     </a>                                    
  104.                                     {% if is_granted('ROLE_ADMIN') %}
  105.                                         <a class="navbar-item" href="/admin">
  106.                                             Panel de Administración
  107.                                         </a>
  108.                                     {% endif %}
  109.                                 </div>
  110.                             </div>                            
  111.                         {% else %}
  112.                             <div class="navbar-item">
  113.                                 <a class="navbar-item button" href="/login">Entrar</a>
  114.                             </div>
  115.                         {% endif %}
  116.                     </div>
  117.                     -->
  118.                 </div>
  119.             </nav>        
  120.             
  121.             <div id="maindata" class="main-data">      
  122.                 {% block body %}{% endblock %}
  123.             </div>
  124.             
  125.             <script>
  126.                 // Script para toggle del menú estilo Symfony toolbar
  127.                 document.addEventListener('DOMContentLoaded', function() {
  128.                     const toggleBtn = document.getElementById('toggleMenu');
  129.                     const navbar = document.getElementById('navbar');
  130.                     const icon = toggleBtn.querySelector('i');
  131.                     
  132.                     toggleBtn.addEventListener('click', function(e) {
  133.                         e.stopPropagation();
  134.                         navbar.classList.toggle('is-active');
  135.                         toggleBtn.classList.toggle('is-active');
  136.                         
  137.                         // Cambiar icono
  138.                         if (navbar.classList.contains('is-active')) {
  139.                             icon.classList.remove('fa-bars');
  140.                             icon.classList.add('fa-times');
  141.                         } else {
  142.                             icon.classList.remove('fa-times');
  143.                             icon.classList.add('fa-bars');
  144.                         }
  145.                     });
  146.                     
  147.                     // Cerrar menú al hacer clic fuera
  148.                     document.addEventListener('click', function(event) {
  149.                         if (!navbar.contains(event.target) && !toggleBtn.contains(event.target)) {
  150.                             if (navbar.classList.contains('is-active')) {
  151.                                 navbar.classList.remove('is-active');
  152.                                 toggleBtn.classList.remove('is-active');
  153.                                 icon.classList.remove('fa-times');
  154.                                 icon.classList.add('fa-bars');
  155.                             }
  156.                         }
  157.                     });
  158.                     
  159.                     // Cerrar con tecla ESC
  160.                     document.addEventListener('keydown', function(event) {
  161.                         if (event.key === 'Escape' && navbar.classList.contains('is-active')) {
  162.                             navbar.classList.remove('is-active');
  163.                             toggleBtn.classList.remove('is-active');
  164.                             icon.classList.remove('fa-times');
  165.                             icon.classList.add('fa-bars');
  166.                         }
  167.                     });
  168.                 });
  169.             </script>
  170.         </div>
  171.     </body>
  172. </html>