templates/infoauto/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Infoauto - Precios{% endblock %}
  5. {% block body %}
  6.     <h1>Infoauto - Precios</h1>
  8.     <div class="row mt-3 border border-1 container-options">
  9.         <div class="col-12 col-lg-2 border-end container-brands">
  10.             <h4 class="text-center">Marca</h4>
  12.             <div class="list-group">
  13.                 {% for key, item in brands %}
  14.                     <button type="button" class="list-group-item list-group-item-action border-0 btn-brand" data-key="{{ key }}" data-id="{{ item.brandId }}" data-name="{{ item.brandName }}">
  15.                         {{ item.brandName }}
  16.                     </button>
  17.                 {% endfor %}
  18.             </div>
  19.         </div>
  21.         <div class="col-12 col-lg-2 border-end container-models">
  22.             <h4 class="text-center">Modelo</h4>
  23.             <div class="list-group"></div>
  24.         </div>
  26.         <div class="col-12 col-lg-2 border-end container-years">
  27.             <h4 class="text-center">Fabricación</h4>
  28.             <div class="list-group"></div>
  29.         </div>
  31.         <div class="col-12 col-lg-4 border-end container-versions">
  32.             <h4 class="text-center">Versión</h4>
  33.             <div class="list-group"></div>
  34.         </div>
  36.         <div class="col-12 col-lg-2 container-prices">
  37.             <h4 class="text-center">Precio</h4>
  38.             <div class="list-group"></div>
  39.         </div>
  40.     </div>
  42.     <style>
  43.         .container-options {
  44.             height: calc(100vh - 230px);
  45.         }
  47.         .container-brands, .container-models, .container-years, .container-versions, .container-prices {
  48.             overflow-y: auto;
  49.             height: 100%;
  50.         }
  51.     </style>
  52. {% endblock %}
  54. {% block javascripts %}
  55.     {{ parent() }}
  57.     <script src="{{ asset('js/jquery.tmpl.min.js') }}"></script>
  59.     <script type="text/javascript">
  60.         var brands = {{ brands|json_encode|raw }};
  61.         var brandSelected = 0;
  62.         var modelSelected = 0;
  63.         var yearSelected = 0;
  64.         var versionSelected = 0;
  65.         console.log(brands);
  67.         $('.btn-brand').click(function() {
  68.             $('.container-brands .list-group button').removeClass('active');
  69.             $(this).addClass('active');
  70.             $('.container-models .list-group button').remove();
  72.             brands[$(this).data('key')].brandGroups.sort((a, b) => a.name.localeCompare(b.name));
  73.             brandSelected = $(this).data('id');
  75.             $.each(brands[$(this).data('key')].brandGroups, function(index, item) {
  76.                 $('.container-models .list-group').append( $('#button-model-template').tmpl({ type: 'model', key: index, id: item.id, name: item.name, list_price: item.list_price, groups: JSON.stringify(item) }) );
  77.             });
  78.         });
  80.         $(document).off('click', '.btn-model').on('click', '.btn-model',  function() {
  81.             $('.container-models .list-group button').removeClass('active');
  82.             $(this).addClass('active');
  83.             $('.container-years .list-group button').remove();
  84.             $('.container-versions .list-group button').remove();
  85.             $('.container-prices .list-group button').remove();
  87.             modelSelected = $(this).data('id');
  89.             if ($(this).data('list-price')) {
  90.                 $('.container-years .list-group').append($('#button-year-template').tmpl({type: 'year', year: '0km'}));
  91.             }
  93.             let groups = JSON.parse( $(this).attr('data-groups') );
  95.             for (var i = groups.prices_to; i >= groups.prices_from; i--) {
  96.                 $('.container-years .list-group').append( $('#button-year-template').tmpl({ type: 'year', year: i }) );
  97.             }
  98.         });
  100.         $(document).off('click', '.btn-year').on('click', '.btn-year',  function() {
  101.             $('.container-years .list-group button').removeClass('active');
  102.             $(this).addClass('active');
  103.             $('.container-versions .list-group button').remove();
  104.             $('.container-prices .list-group button').remove();
  106.             yearSelected = $(this).data('year');
  107.             $('.spinner-' + yearSelected + ' div').removeClass('spinner-hide');
  109.             $.get('{{ path('infoauto_get_versions') }}', {brandId:brandSelected, modelId:modelSelected, modelYear:yearSelected }, function(data) {
  110.                 $.each(data, function(index, item) {
  111.                     $('.container-versions .list-group').append( $('#button-version-template').tmpl({ type: 'version', name: item.name, price: item.price, codia: item.codia }) );
  112.                 });
  114.                 $('.spinner-' + yearSelected + ' > div').addClass('spinner-hide');
  115.             });
  116.         });
  118.         $(document).off('click', '.btn-version').on('click', '.btn-version',  function() {
  119.             $('.container-versions .list-group button').removeClass('active');
  120.             $(this).addClass('active');
  121.             $('.container-prices .list-group button').remove();
  123.             $('.container-prices .list-group').append( $('#button-price-template').tmpl({ type: 'price', price: $(this).data('price'), codia: $(this).data('codia') }) );
  124.         });
  126.         function formatNumber(num) {
  127.             return new Intl.NumberFormat('es-ES', { minimumFractionDigits: 0 }).format(num);
  128.         }
  129.     </script>
  131.     <script id="button-model-template" type="text/x-jquery-tmpl">
  132.         <button type="button" class="list-group-item list-group-item-action border-0 btn-${type}" data-key="${key}" data-id="${id}" data-name="${name}" data-list-price="${list_price}" data-groups='${groups}'>
  133.             ${name}
  134.         </button>
  135.     </script>
  137.     <script id="button-year-template" type="text/x-jquery-tmpl">
  138.         <button type="button" class="list-group-item list-group-item-action border-0 btn-${type} spinner-${year}" data-year="${year}">
  139.             ${year}
  140.             <div class="spinner-border text-white float-end spinner-hide" role="status">
  141.                 <span class="visually-hidden"></span>
  142.             </div>
  143.         </button>
  144.     </script>
  146.     <script id="button-version-template" type="text/x-jquery-tmpl">
  147.         <button type="button" class="list-group-item list-group-item-action border-0 btn-${type}" data-price="${price}" data-codia="${codia}">
  148.             ${name}
  149.         </button>
  150.     </script>
  152.     <script id="button-price-template" type="text/x-jquery-tmpl">
  153.         <button type="button" class="list-group-item list-group-item-action border-0 btn-${type}" data-price="${price}" data-codia="${codia}">
  154.             $  ${price}.000
  155.         </button>
  156.     </script>
  157. {% endblock %}