templates/default/divisas.html.twig line 1

  1. {# {% extends 'default/contenido.html.twig' %} #}
  2. {% extends 'base.html.twig' %}
  5. {% block title %}{% if divisa %}{{ divisa.metaTitle| replace({'| Eurochange.es':''}) }}{%else%}{{ conversion.metaTitle| replace({'| Eurochange.es':''}) }}{%endif%}{% endblock %}
  6. {% block metadescription %}{% if divisa %}{{ divisa.metaDescription }}{%else%}{{ conversion.metaDescription }}{%endif%}{% endblock %}
  7. {% block metakeywords %}{% if divisa %}{{ divisa.metaKeywords }}{%else%}{{ conversion.metaKeywords }}{%endif%}{% endblock %}
  9. {% block idiomas %}
  10.     {% for k,idioma in locales %}
  11.         {% if k == app.request.locale %}    
  12.             <option selected value="{{ path(app.request.get('_route', 'index'), app.request.get('_route_params', [])|merge({_locale: k})) }}" title="{{ idioma }}">{{ k | upper}}</option>
  13.         {% elseif divisa != null %}
  14.             <option value="{{ path(app.request.get('_route', 'index'), app.request.get('_route_params', [])|merge({_locale: k, nombre: divisa.translate(k).slug })) }}" title="{{ idioma }}">{{ k | upper}}</option>
  15.         {% elseif conversion != null %}
  16.             <option value="{{ path(app.request.get('_route', 'index'), app.request.get('_route_params', [])|merge({_locale: k, nombre: conversion.translate(k).slug })) }}" title="{{ idioma }}">{{ k | upper}}</option>
  17.         {% endif %}
  18.     {% endfor %}
  19. {% endblock %}
  21. {% block bodyId %}divisas{% endblock %}
  23. {% block body %}
  24.     <div class="title container">
  25.         {% if divisa != null %}
  26.             <h1>{{ divisa.altBanner }}</h1>
  27.         {% elseif conversion != null %}
  28.             <h1>{{ conversion.metaTitle| replace({'| Eurochange.es':''}) }}</h1>
  29.         {% endif %}
  30.     </div>
  31.     
  32.     <div id="cab-divisa" class="container">
  33.         <div class="row">
  34.             <div class="col-12 col-lg-7 cambio">
  35.                     {#{% if ofi_var != 0 %}
  36.                         {% set currentDate = date() | date("Y-m-d") %}
  37.                         <p id="precio">{{ 'Precios para' | trans}} {{ oficina.nombre }} {{ currentDate }}</p>
  38.                     {% endif %}#}
  39.                     <div class="sticky-top">
  40.                     
  41.                     <div id="cont_camb">
  42.                         <ul class="nav nav-tabs" id="myTab" role="tablist">
  43.                             <li class="nav-item" id="calc" role="presentation">
  44.                                 <button class="nav-link active" id="calcular-tab" data-bs-toggle="tab" data-bs-target="#calcular_cambio" type="button" role="tab" aria-controls="profile" aria-selected="true"><i class="fa-solid fa-calculator"></i></button>
  45.                             </li>
  46.                             <li class="nav-item" role="presentation">
  47.                                 <button class="nav-link" id="comprar-tab" data-bs-toggle="tab" data-bs-target="#calcular_cambio" type="button" role="tab" aria-controls="profile" aria-selected="false">{{ 'Comprar_online' | trans}}</button>
  48.                             </li>
  49.                         </ul>
  50.                         
  51.                         <div class="tab-content" id="myTabContent">
  52.                             <div class="tab-pane fade show active" id="calcular_cambio" role="tabpanel" aria-labelledby="profile-tab">
  53.                                 {{ render(controller('App\\Controller\\DefaultController::oficinaAction', { select_id: 'select_ofi2' } )) }}
  54.                                 
  55.                                 {#<p class="info-select">{{ '* La tienda online solo permite la compra de divisas extranjeras (no Euros)' | trans}}</p>#}
  56.                             
  57.                             </div>
  58.                         </div>
  59.                     </div>
  60.                     
  61.                     {{ render(controller('App\\Controller\\CotizacionesController::alerta' )) }}
  62.                     </div>
  63.             </div>
  64.             <div class="col-12 col-lg-5 colum-der">
  65.                 <div id="cotizacionesJsonG" style="display:none">{{cotizacionesJsonG}}</div>
  66.                 <script src="https://cdn.amcharts.com/lib/3/amcharts.js"></script>
  67.                 <script src="https://cdn.amcharts.com/lib/3/serial.js"></script>
  68.                 <script src="https://cdn.amcharts.com/lib/3/themes/light.js"></script>
  69.                 <script src="https://cdn.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
  70.                 <script src="https://cdn.amcharts.com/lib/3/maps/js/worldLow.js"></script>
  71.                 
  72.                 {% if divisa != null %}
  73.                     <p style="font-weight: bold;">{{ 'EVOLUCIÓN DEL PRECIO DE VENTA DE' | trans}} {{ divisa.nombre|upper }}</p>
  74.                     
  75.                     <div id="" class="chartcontainer p5" style="width:100%; height:300px; margin-bottom:30px;">
  76.                         <div id="chartdiv-precioVenta" style="width:100%;height:100%;"></div>
  77.                     </div>
  78.                     
  79.                     
  80.                     <p style="font-weight: bold;">{{ 'EVOLUCIÓN DEL PRECIO DE COMPRA DE' | trans}} {{ divisa.nombre|upper }}</p>
  81.                     <div id="" class="chartcontainer p5" style="width:100%; height:300px; margin-bottom:30px;">
  82.                         <div id="chartdiv-precioCompra" style="width:100%;height:100%;"></div>
  83.                     </div>
  84.                     {{ divisa.texto2|raw }}
  85.                     {{ render(controller('App\\Controller\\DefaultController::principalesCambios' )) }}
  86.                 {% elseif conversion != null %}
  87.                     <p style="font-weight: bold;">{{ 'EVOLUCIÓN DEL PRECIO DE COMPRA DE' | trans}} {% if conversion.divisaOrigen.id == 10 %}{{ conversion.divisaDestino.nombre|upper }}{% else %}{{ conversion.divisaOrigen.nombre|upper }}{% endif %}</p>
  88.                     <div id="" class="chartcontainer p5" style="width:100%; height:300px; margin-bottom:30px;">
  89.                         <div id="chartdiv-precioCompra" style="width:100%;height:100%;"></div>
  90.                     </div>
  91.                     {% if conversion.divisaOrigen.id == 10 %}{{ conversion.divisaOrigen.texto2|raw }}{% else %}{{ conversion.divisaDestino.texto2|raw }}{% endif %}
  92.                     {{ render(controller('App\\Controller\\DefaultController::principalesCambios' )) }}
  93.                 {% endif %}
  94.                 {% if divisa != null %}
  95.                     {{ divisa.texto1|raw }}
  96.                     <a id="bus" href="/oficinas">{{ 'Busca tu oficina de cambio mas cercana' | trans}}</a>
  97.                 {% endif %}
  98.             </div>
  99.         </div>
  100.     </div>
  101.     
  102. {% endblock %}
  107. {% block funciones_eventos %}
  109.         {{ parent() }}
  110.         <script>
  111.             
  112.             $(document).ready(function() {
  113.                 var contenido = $('#contenedorInv #contenedorMover').clone();
  114.                 if ($('#calcular_cambio .parte-repetida').length === 0) {
  115.                     $('#calcular_cambio').append(contenido);
  116.                     $('#contenedorInv #contenedorMover').remove();
  117.                 }
  118.            
  119.             
  120.                 {% if divisa != null %}
  121.                         $('#selectQuieres').val({{ divisa.id }}).change();
  122.                         $('#inputQuieres').trigger('change');
  123.                 {% endif %}
  124.                 
  125.                 {% if conversion != null %}
  126.                 
  127.                     {% if conversion.divisaOrigen.id != 10 %}    
  128.                         $('#selectTienes').val({{conversion.divisaOrigen.id}}).change();
  129.                         $('#inputTienes').trigger('change');
  130.                     {% else %}
  131.                         $('#selectQuieres').val({{conversion.divisaDestino.id}}).change();
  132.                         $('#inputQuieres').trigger('change');
  133.                     {% endif %}
  134.                         
  135.                 {% endif %}
  136.             
  137.              });
  138.             
  139.             
  140.             $(document).ready(function() {
  142.                 console.log("JS_JSN");
  144.                 var idioma = $('html').attr('lang');
  147.                 function loadCurrencies(jSONCurrencies,tipo) {
  148.                     var chartData = [];
  149.                     var cotizacion = $.parseJSON(jSONCurrencies);
  151.                     for(var i in cotizacion)
  152.                     {
  153.                         var newDate = new Date(cotizacion[i].dia);
  154.                         if(tipo=='precioVenta'){
  155.                             var precio = cotizacion[i].precioVenta;
  156.                         }
  157.                         else{
  158.                             var precio = cotizacion[i].precioCompra;
  159.                         }
  161.                         chartData.push({
  162.                             date: newDate,
  163.                             cotizaciones: precio
  164.                         });
  165.                     }
  166.                 
  167.                     return chartData;
  168.                 }
  169.                 
  170.                 
  171.                 
  172.                 var chart = AmCharts.makeChart("chartdiv-precioVenta", {
  173.                     "type": "serial",
  174.                     "dataProvider": [
  175.                         { "country": "USA", "visits": 3025 },
  176.                         { "country": "China", "visits": 1882 },
  177.                         { "country": "Japan", "visits": 1809 },
  178.                         { "country": "Germany", "visits": 1322 },
  179.                         { "country": "UK", "visits": 1122 },
  180.                         { "country": "France", "visits": 1114 },
  181.                         { "country": "India", "visits": 984 },
  182.                         { "country": "Spain", "visits": 711 },
  183.                         { "country": "Netherlands", "visits": 665 },
  184.                         { "country": "Russia", "visits": 580 }
  185.                     ],
  186.                     "valueAxes": [{
  187.                         "title": "Visits"
  188.                     }],
  189.                     "graphs": [{
  190.                         "balloonText": "[[category]]: <b>[[value]]</b>",
  191.                         "fillColorsField": "color",
  192.                         "fillAlphas": 0.9,
  193.                         "lineAlpha": 0.2,
  194.                         "type": "column",
  195.                         "valueField": "visits"
  196.                     }],
  197.                     "categoryField": "country",
  198.                     "categoryAxis": {
  199.                         "gridPosition": "start",
  200.                         "labelRotation": 45
  201.                     }
  202.                 });
  203.                 
  204.                 
  205.                 
  207.                 function loadChart(chartData,tipo){
  208.                     if(idioma == "es"){
  209.                         decimalSeparator=",",
  210.                         text="Cotizacion"
  211.                     }else{
  212.                         decimalSeparator=".",
  213.                         text="Exchange rate"
  214.                     }
  215.                     var chart = AmCharts.makeChart("chartdiv-"+tipo, {
  216.                         "language": idioma,
  217.                         "type": "serial",
  218.                         "theme": "light",
  219.                         "labelsEnabled": false,
  220.                         "autoMargins": true,
  221.                         "marginTop": 5,
  222.                         "dataProvider": chartData,
  223.                         "valueAxes": [{
  224.                             "position": "left",
  225.                             "title": ""
  226.                         }],
  227.                         "graphs": [{
  228.                             "id": "g1",
  229.                             "fillAlphas": 0.4,
  230.                             "valueField": "cotizaciones",
  231.                             "balloonText": "<div style='margin:5px; font-size:19px;'>"+text+":<b>[[value]]</b></div>"
  232.                         }],
  233.                         "chartScrollbar": {
  234.                             "graph": "g1",
  235.                             "scrollbarHeight": 40,
  236.                             "backgroundAlpha": 0,
  237.                             "selectedBackgroundAlpha": 0.1,
  238.                             "selectedBackgroundColor": "#888888",
  239.                             "graphFillAlpha": 0,
  240.                             "graphLineAlpha": 0.5,
  241.                             "selectedGraphFillAlpha": 0,
  242.                             "selectedGraphLineAlpha": 1,
  243.                             "autoGridCount": true,
  244.                             "color": "#AAAAAA",
  245.                             "offset": 5,
  246.                             "autoHide": true
  247.                         },
  248.                         "chartCursor": {
  249.                             "categoryBalloonDateFormat": "DD/MM",
  250.                             "cursorPosition": "mouse"
  251.                         },
  252.                         "categoryField": "date",
  253.                         "categoryAxis": {
  254.                             "minPeriod": "mm",
  255.                             "parseDates": true
  256.                         },
  257.                         "export": {
  258.                             "enabled": true,
  259.                             "dateFormat": "YYYY-MM-DD"
  260.                         },
  261.                         "numberFormatter": {
  262.                         "decimalSeparator": decimalSeparator,
  263.                         },
  264.                         "responsive": {
  265.                             "enabled": true
  266.                         }
  267.                     });
  269.                     chart.addListener("dataUpdated", zoomChart);
  270.                     // when we apply theme, the dataUpdated event is fired even before we add listener, so
  271.                     // we need to call zoomChart here
  272.                     zoomChart();
  273.                     // this method is called when chart is first inited as we listen for "dataUpdated" event
  274.                     function zoomChart() {
  275.                         // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
  276.                         chart.zoomToIndexes(chartData.length - 30, chartData.length);
  277.                     }
  279.                     AmCharts.addInitHandler(function(chart) {
  280.                     
  281.                     // check if scrollbar auto-hide is enabled
  282.                     if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
  283.                         return;
  284.                     
  285.                     // add zoomed events
  286.                     chart.addListener("zoomed", function(event) {
  287.                         
  288.                         // check if the chart is completely zoomed out
  289.                         var enabled = true;
  290.                         if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
  291.                         enabled = false;
  292.                         
  293.                         // show or hide the scrollbar
  294.                         if (event.chart.chartScrollbar.enabled === enabled)
  295.                         return;
  296.                         event.chart.chartScrollbar.enabled = enabled
  297.                         event.chart.validateNow(false, true);
  298.                         
  299.                     });
  300.                     
  301.                     }, ["serial"]);
  302.                 }
  304.                 $('body').on('change','.ticker-item .cambio_divisa_check', function () {
  305.                     var parent = $(this).closest('.ticker-item');
  306.                     parent.find('.pVenta').toggle();
  307.                     parent.find('.pCompra').toggle();
  308.                 });
  310.                 $('body').on('change','#widget-change .cambio_divisa_check', function () {
  311.                     var parent = $(this).closest('#widget-change');
  312.                     parent.find('.pVenta').toggle();
  313.                     parent.find('.pCompra').toggle();
  314.                     $('.chart-box').toggle();
  315.                 });
  317.                 if($(".chartcontainer").length != 0) {
  318.                     var jSONCurrencies = $("#cotizacionesJsonG").html();
  319.                     var chartData = loadCurrencies(jSONCurrencies,'precioVenta');
  320.                     loadChart(chartData,'precioVenta');
  322.                     var chartData = loadCurrencies(jSONCurrencies,'precioCompra');
  323.                     loadChart(chartData,'precioCompra');
  324.                 }
  326.             });
  327.         </script>
  328. {% endblock %}