templates/default/cotizaciones.html.twig line 1

  1. {# {% extends 'default/contenido.html.twig' %} #}
  2. {% extends 'base.html.twig' %}
  4. {% block title %}{{ contenido.metaTitle|default(contenido.titulo)| replace({'| Eurochange.es':''}) }}{% endblock %}
  5. {% block metadescription %}{{ contenido.metaDescription|default(contenido.intro) }}{% endblock %}
  6. {% block metakeywords %}{{ contenido.metaKeywords }}{% endblock %}
  7. {% block metarobots %}{{ contenido.metaRobots|default(parent()) }}{% endblock %}
  8. {% block canonical %}{% if contenido.canonical %}<link rel="canonical" href="{{contenido.canonical}}" />{% endif %}{% endblock %}
  10. {% block bodyId %}cotizacion{% endblock %}
  12. {% block body %}
  13.     <div class="title container">
  14.         <h1>{{ 'Cotizaciones y tipo de cambio de divisas' | trans}}</h1>
  15.     </div>
  16.     
  17.     <div id="cotizaciones" class="container">
  18.         <p id="pri" class="d-none d-md-block">{{ 'Si vas a viajar al extranjero, en Eurochange.es podrás cambiar tus Euros a la divisa que necesites. A tu vuelta también podrás cambiar los billetes extranjeros que te sobren a Euros en cualquiera de nuestras oficinas de cambio de divisas.' | trans}}</p>
  19.         <p class="d-none d-md-block">{{ 'Consulta el tipo de cambio de las principales divisas a continuación. Busca tu oficina de cambio más cercana y comprueba los servicios disponibles, o haz tu reserva online y recóge tu dinero en cualquiera de nuestras casas de cambio, de una manera comoda en cualquier punto de España. ¡Así de sencillo!' | trans}}</p>
  20.         
  21.         {#<select id="select-ofi" class="form-select" aria-label="Default select example">
  22.             <option value="todos" selected>Para comenzar, selecciona tu oficina más cercana</option>
  23.             {% for oficina in oficinas %}
  24.                 <option value="{{ oficina.nombre }}">{{ oficina.nombre }}</option>
  25.             {% endfor %}
  26.         </select>#}
  27.         
  28.         {{ render(controller('App\\Controller\\DefaultController::oficinaAction', { select_id: 'select_ofi2' } )) }}
  29.         
  30.         {% if of != "" %}<p class="info-select">{{ 'Precios para' | trans}} {{ of.nombre }} {{ diaMax }}</p>{% endif %}
  31.         
  32.         {% if ofi_var == 0 %}
  33.             <span id="no-cot">{{ 'Porfavor selecciona una oficina para que le podamos dar las tarifas correctas' | trans}}</span>
  34.         {% endif %}
  35.         <table id="tabla-cot">
  36.             <tr>
  37.                 <th>{{ 'Divisa' | trans}}</th>
  38.                 <th>{{ 'Compramos' | trans}}<span class="info-valor1">i<p style="display:none;">{{ 'Utiliza la flecha para ver el tipo de cambio directo o indirecto.' | trans}}</p></span></th>
  39.                 <th>{{ 'Vendemos' | trans}}<span class="info-valor2">i<p style="display:none;">{{ 'Utiliza la flecha para ver el tipo de cambio directo o indirecto.' | trans}}</p></span></th>
  40.             </tr>
  41.             {% for cotizacion in cotizaciones %}
  42.                 <tr data-oficina="{{ cotizacion.oficina }}">
  43.                     <td>
  44.                         <a href="{{ path('divisas', {'nombre': cotizacion.shortName.slug}) }}"><span class="banderas">
  45.                             {% if cotizacion.shortName.imagen %}
  46.                                 {{ sonata_thumbnail(cotizacion.shortName.imagen, 'flag', {'title': cotizacion.shortName.nombre}) }}
  47.                             {% endif %}
  48.                         </span>{{ cotizacion.shortName.shortName }} - {{ cotizacion.shortName.nombre }}</a>
  49.                     </td>
  50.                     <td>
  51.                         {% if cotizacion.oficina.id == 66 %}
  52.                             -
  53.                         {% elseif cotizacion.oficina.franjas is empty %}
  54.                             -
  55.                         {% else %}
  56.                             <span class="antes">1</span>
  57.                             <label class="switch">
  58.                                 <input type="checkbox" class="toggleSwitch" autocomplete="off">
  59.                                 <span class="slider"></span>
  60.                                 <span class="label-on">{{ cotizacion.shortName }}</span>
  61.                                 <span class="label-off">EUR</span>
  62.                             </label>
  63.                             <span class="despues">{{ cotizacion.precioCompra|number_format(cotizacion.shortName.numDecimales) }}</span>
  64.                         {% endif %}
  65.                     </td>
  66.                     <td>
  67.                         {% if cotizacion.oficina.franjas is empty %}
  68.                             -
  69.                         {% elseif cotizacion.oficina.permiteCompra == 1 %}
  70.                             <span class="antes">1</span>
  71.                             <label class="switch">
  72.                                 <input type="checkbox" class="toggleSwitch" autocomplete="off">
  73.                                 <span class="slider"></span>
  74.                                 <span class="label-on">{{ cotizacion.shortName }}</span>
  75.                                 <span class="label-off">EUR</span>
  76.                             </label>
  77.                             <span class="despues">{{ cotizacion.precioVenta|number_format(cotizacion.shortName.numDecimales) }}</span>
  78.                         {% else %}
  79.                             -
  80.                         {% endif %}
  81.                     </td>
  82.                 </tr>
  83.             {% endfor %}
  84.         </table>
  85.         
  86.         <div id="tabla-cot-res">
  87.                 <ul class="nav nav-tabs" id="tabla-res" role="tablist">
  88.                     <span id="divRes">{{ 'Divisa' | trans}}</span>
  89.                     <span class="info-valor1">i<p style="display:none;">{{ 'Utiliza la flecha para ver el tipo de cambio directo o indirecto.' | trans}}</p></span>
  90.                     <li class="nav-item" role="presentation">
  91.                         <button class="nav-link active" id="comp" data-bs-toggle="tab" data-bs-target="#compramos" type="button" role="tab" aria-controls="home" aria-selected="true">{{ 'Compramos' | trans}}</button>
  92.                     </li>
  93.                     <li class="nav-item" role="presentation">
  94.                         <button class="nav-link" id="vend" data-bs-toggle="tab" data-bs-target="#vendemos" type="button" role="tab" aria-controls="profile" aria-selected="false">{{ 'Vendemos' | trans}}</button>
  95.                     </li>
  96.                 </ul>
  97.                 
  98.                 <div class="tab-content" id="tabla-res-content">
  99.                     <div class="tab-pane fade show active" id="compramos" role="tabpanel" aria-labelledby="home-tab">
  100.                         {% for cotizacion in cotizaciones %}
  101.                             <div class="row">
  102.                                 <div class="col-6 voltN">
  103.                                     <a href="{{ path('divisas', {'nombre': cotizacion.shortName}) }}"><span class="banderas">
  104.                                         {% if cotizacion.shortName.imagen %}
  105.                                             {{ sonata_thumbnail(cotizacion.shortName.imagen, 'flag', {'title': cotizacion.shortName.nombre}) }}
  106.                                         {% endif %}
  107.                                     </span>{{ cotizacion.shortName }}</a>
  108.                                 </div>
  109.                                 <div class="col-6 volt">
  110.                                     {% if cotizacion.oficina.id == 66 %}
  111.                                         -
  112.                                     {% elseif cotizacion.oficina.franjas is empty %}
  113.                                         -
  114.                                     {% else %}
  115.                                         <span class="antes">1</span>
  116.                                         <label class="switch">
  117.                                             <input type="checkbox" class="toggleSwitch" autocomplete="off">
  118.                                             <span class="slider"></span>
  119.                                             <span class="label-on">{{ cotizacion.shortName }}</span>
  120.                                             <span class="label-off">EUR</span>
  121.                                         </label>
  122.                                         <span class="despues">{{ cotizacion.precioCompra|number_format(cotizacion.shortName.numDecimales) }}</span>
  123.                                     {% endif %}
  124.                                 </div>
  125.                             </div>
  126.                         {% endfor %}
  127.                     </div>
  128.                     
  129.                     <div class="tab-pane fade" id="vendemos" role="tabpanel" aria-labelledby="profile-tab">
  130.                         {% for cotizacion in cotizaciones %}
  131.                             <div class="row">
  132.                                 <div class="col-6 voltN">
  133.                                     <a href="{{ path('divisas', {'nombre': cotizacion.shortName}) }}"><span class="banderas">
  134.                                         {% if cotizacion.shortName.imagen %}
  135.                                             {{ sonata_thumbnail(cotizacion.shortName.imagen, 'flag', {'title': cotizacion.shortName.nombre}) }}
  136.                                         {% endif %}
  137.                                     </span>{{ cotizacion.shortName }}</a>
  138.                                 </div>
  139.                                 <div class="col-6 volt">
  140.                                     {% if cotizacion.oficina.franjas is empty %}
  141.                                         -
  142.                                     {% elseif cotizacion.oficina.permiteCompra == 1 %}
  143.                                         <span class="antes">1</span>
  144.                                         <label class="switch">
  145.                                             <input type="checkbox" class="toggleSwitch" autocomplete="off">
  146.                                             <span class="slider"></span>
  147.                                             <span class="label-on">{{ cotizacion.shortName }}</span>
  148.                                             <span class="label-off">EUR</span>
  149.                                         </label>
  150.                                         <span class="despues">{{ cotizacion.precioVenta|number_format(cotizacion.shortName.numDecimales) }}</span>
  151.                                     {% else %}
  152.                                         -
  153.                                     {% endif %}
  154.                                 </div>
  155.                             </div>
  156.                         {% endfor %}
  157.                     </div>
  158.                 </div>
  159.         </div>
  160.         
  161.         <button id="ver-mas">{{ 'Ver +' | trans}}</button>
  162.     </div>
  163.     
  164.      {% block empresas %}
  165.         {{ render(controller('App\\Controller\\DefaultController::empresas' )) }}
  166.     {% endblock %}
  167.     
  168. {% endblock %}
  171. {% block funciones_eventos %}
  172.     {{ parent() }}
  173.     
  174.     <script>
  175.             // Hacer el cambio de Compramos/Vendemos
  176.             
  177.             const toggleSwitches = document.querySelectorAll('.toggleSwitch');
  178.             const spanAntes = document.querySelectorAll('.antes');
  179.             const spanDespues = document.querySelectorAll('.despues');
  181.             toggleSwitches.forEach((toggleSwitch, index) => {
  182.                 toggleSwitch.addEventListener('change', function() {
  183.                 
  184.                     const numero1 = parseFloat(spanAntes[index].innerText);
  185.                     const numero2 = parseFloat(spanDespues[index].innerText);
  186.                     
  187.                     if (toggleSwitch.checked) {
  188.                         spanAntes[index].innerText = (numero1 / numero2).toFixed(3);
  189.                         spanDespues[index].innerText = '1';
  190.                     } else {
  191.                         spanAntes[index].innerText = '1';
  192.                         spanDespues[index].innerText = (numero2 / numero1).toFixed(3);
  193.                     }
  194.                 });
  195.             });
  196.             
  197.             
  198.             // Funcionalidad del botón "Ver +"
  199.             
  200.             var tablaCuerpo = document.getElementById('tabla-cot');
  201.             var verMas = document.getElementById('ver-mas');
  203.             var filasVisibles = 16;
  204.             var aumento = 10;
  206.             function actualizarFilasVisibles() {
  207.                 var filas = tablaCuerpo.getElementsByTagName('tr');
  208.                 var filasOcultas = filas.length - filasVisibles;
  209.                 for (var i = 0; i < filas.length; i++) {
  210.                     if (i < filasVisibles) {
  211.                         filas[i].style.display = 'table-row';
  212.                     } else {
  213.                         filas[i].style.display = 'none';
  214.                     }
  215.                 }
  216.                 
  217.                 if (filasOcultas > 0) {
  218.                     verMas.style.display = 'block';
  219.                 } else {
  220.                     verMas.style.display = 'none';
  221.                 }
  222.             }
  224.             actualizarFilasVisibles();
  226.             verMas.addEventListener('click', function() {
  227.                 filasVisibles += aumento;
  228.                 actualizarFilasVisibles();
  229.             });
  230.     </script>
  231. {% endblock %}