templates/modulo/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Módulo {{ modulo.codigo }}{% endblock %}
  5. {% block stylesheets %}
  6.     <style>
  7.         body {
  8.             background-color: transparent !important;
  9.         }
  10.     </style>
  11. {% endblock %}
  13. {% block body %}
  14. <div class="modal fade" id="nichoDetailModal" tabindex="-1" aria-labelledby="nichoDetailModalLabel" aria-hidden="true">
  15.     <div class="modal-dialog">
  16.         <div class="modal-content">
  17.             <div class="modal-header">
  18.                 <h5 class="modal-title" id="nichoDetailModalLabel"></h5>
  19.                 {% if app.user %}
  20.                     <a href="#" class="btn btn-primary" id="aNicho">Editar</a>
  21.                 {% endif %}
  22.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  23.             </div>
  24.             <div class="modal-body">
  25.                 <p id="nombreNicho"></p>
  26.                 <p id="codigoNicho"></p>
  27.                 <p id="estadoNicho"></p>
  28.                 <p id="descripcionNicho"></p>
  29.             </div>
  30.             <div class="modal-footer">
  31.                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
  32.             </div>
  33.         </div>
  34.     </div>
  35. </div>
  37. <div class="container-fluid">
  38.     <div class="row">
  39.         <div class="col-sm-12 d-flex justify-content-center">
  40.             {# <h1 class="text-center">Módulo {{ modulo.codigo }}</h1> #}
  41.             <img src="{{ asset(modulo.fullImagePath) }}" usemap="#image-map" alt="cuadros" id="moduloImage" name="moduloImage" class="img-fluid" style="max-height: 600px;">
  42.         </div>
  43.     </div>
  45.     <map name="image-map" id="map">
  46.         {% for nicho in nichos %}
  47.             <area target="" {% if nicho.estado == "VENDIDO" %}data-maphilight='{"fillColor":"7b7d7d", "fill": true, "fillOpacity":0.7, "alwaysOn": true}' {% endif %} alt="{{ nicho.codigo }}" title="{{ nicho.codigo }}" id="{{ nicho.id }}" href="#" coords="{{ nicho.coordenadas }}" nombre="{{ nicho.nombre}}" estado="{{ nicho.estado }}" descripcion="{{ nicho.descripcion }}" id="{{ nicho.id }}" shape="rect">
  48.         {% endfor %}
  49.     </map>
  51.     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  52.     <script>
  53.         document.addEventListener('DOMContentLoaded', function() {
  54.             const areas = document.querySelectorAll('area');
  56.             areas.forEach(area => {
  57.                 area.addEventListener('click', function(event) {
  58.                     event.preventDefault();
  59.                     const nichoCode = this.getAttribute('alt');
  60.                     const nichoNombre = this.getAttribute('nombre');
  61.                     const nichoEstado = this.getAttribute('estado');
  62.                     const nichoDescripcion = this.getAttribute('descripcion');
  64.                     const nombreNichoContent = document.getElementById('nombreNicho');
  65.                     nombreNichoContent.innerHTML = `<strong>Nombre:</strong> ${nichoNombre}`;
  67.                     const codigoNichoContent = document.getElementById('codigoNicho');
  68.                     codigoNichoContent.innerHTML = `<strong>Código:</strong> ${nichoCode}`;
  70.                     const estadoNichoContent = document.getElementById('estadoNicho');
  71.                     estadoNichoContent.innerHTML = `<strong>Estado:</strong> ${nichoEstado}`;
  73.                     const descripcionNichoContent = document.getElementById('descripcionNicho');
  74.                     descripcionNichoContent.innerHTML = `<strong>Descripción:</strong> ${nichoDescripcion}`;
  76.                     {% if app.user %}
  77.                         const aNichoTag = document.getElementById('aNicho');
  78.                         aNichoTag.href = `/nicho/${this.id}/edit`;
  79.                     {% endif %}
  81.                     const nichoDetailModalLabel = document.getElementById('nichoDetailModalLabel');
  82.                     nichoDetailModalLabel.textContent = `Nicho ${nichoCode}`;
  83.                     const modal = new bootstrap.Modal(document.getElementById('nichoDetailModal'));
  84.                     modal.show();
  85.                 });
  86.             });
  87.         });
  88.     </script>
  89.     <script src="{{ asset('js/image_resizer.js') }}"></script>
  90.     <script src="{{ asset('js/jquery.maphilight.min.js') }}"></script>
  91.     <script>
  92.         imageMapResize();
  93.     </script>
  94.     <script>$('#moduloImage').maphilight({fill: true, stroke: true, alwaysOn: true});</script>
  95. </div>
  96. {% endblock %}