templates/tickets/tickets.html.twig line 1

Open in your IDE?
  1. {% extends 'main.html.twig' %}
  3. {% block head %}
  5.     <link rel="stylesheet" href="{{ asset('assets/css/tickets.css') }}?v={{ random() }}" />
  6.     <link rel="stylesheet" href="{{ asset('assets/plugins/range-slider/jquery-ui.css') }}?v={{ random() }}" type="text/css" media="all" />
  7.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/range-slider/price_range_style.css') }}?v={{ random() }}" />
  9. {% endblock %}
  11. {% block body %}
  13.     <!-- HEADING -->
  14.     <div class="loading hidden">
  15.         <div class="loader"></div>
  16.     </div>
  17.     <div class="container" id="heading">
  18.         <div class="row d-flex justify-content-start marketplace-header-content ">
  19.             <div class="col-xl-6 col-12 py-5">
  20.                 <p class="ttl-heading">Marketplace</p>
  21.                 <p class="txt-heading">Explora NFT tickets históricos y en venta</p>
  23.                 <div class="row d-flex justify-content-xl-start justify-content-center pt-5 px-xl-0 px-5 tickets-header-buttons">
  24.                     <a href="#tickets" class="btn-md me-3 mt-3 btn-marketplace">Collections</a>
  25.                    {# <a href="#keys" class="btn-md outline-white me-3 mt-3">masqueentradas keys</a>#}
  26.                 </div>
  27.             </div>
  28.         </div>
  29.     </div>
  31.     <!-- COLLECTIONS -->
  32.     <div class="container-fluid bg-tickets-cards" id="tickets">
  33.         <div class="container py-xl-5 py-0">
  34.             <div class="row pb-xl-5 pb-3">
  35.                 <p class="ttl-section">MQE Collections</p>
  36.             </div>
  38.             <!-- FILTERS -->
  39.             <form id="form-filters" action="{{ path('tickets') }}#tickets" method="get">
  40.                 <div class="cnt-filter">
  41.                     <div class="filter-text align-items-center justify-content-center cnt-filter-extra float-start">
  42.                         <p><b>Filtrar</b></p>
  43.                     </div>
  44.                     <div class="filter-type align-items-center justify-content-start cnt-filter-tab float-start">
  45.                         <select class="tab-filter mx-2 filters_change"  name="type" id="filter_type">
  46.                             <optgroup label="Tipo">
  47.                                 <option value="1" {{filters.type is defined and filters.type == "1" ? 'selected="selected"' : ''}}>Todos</option>
  48.                                 {#<option value="2" {{filters.type is defined and filters.type == "2" ? 'selected="selected"' : ''}}>Collection</option>#}
  49.                                 {# <option value="3" {{filters.type is defined and filters.type == "3" ? 'selected="selected"' : ''}}>Packs</option> #}
  50.                                {# <option value="4" {{filters.type is defined and filters.type == "4" ? 'selected="selected"' : ''}}>Keys</option>#}
  51.                             </optgroup>
  52.                             <optgroup label="Eventos">
  53.                                 {% for event in events %}
  54.                                     {% if ("now"|date("Y-m-d") < event.dateEvent) %}
  55.                                         {% if (filters.eventId is defined and filters.eventId == event.id) %}
  56.                                             <option selected>
  57.                                                 {{ event.name|title|raw }}
  58.                                             </option>
  59.                                         {% endif %}
  60.                                         <option value="5" data-event="{{ event.id }}" {{filters.type is defined and filters.type == event.id ? 'selected="selected"' : ''}}>
  61.                                             {{ event.name|title|raw }}
  62.                                         </option>
  63.                                     {% endif %}
  64.                                 {% endfor %}
  65.                             </optgroup>
  66.                            {# <optgroup label="Colección">
  67.                             {% for event in events %}
  68.                                 {% if ("now"|date("Y-m-d") > event.dateEvent) %}
  69.                                     <option value="5" data-event="{{ event.id }}" {{filters.type is defined and filters.type == event.id ? 'selected="selected"' : ''}}>
  70.                                         {{ event.name|title }}
  71.                                     </option>
  72.                                 {% endif %}
  73.                             {% endfor %}
  74.                             </optgroup>#}
  75.                         </select>
  76.                     </div>
  78.                     {# Price range #}
  79.                     <div class="price-range-block float-start" >
  80.                         <div class="sliderText">Rango de precios</div>
  81.                         <div id="slider-range" class="price-filter-range" name="rangeInput"></div>
  82.                         <div class="slider-range-buttons">
  83.                             <button class="price-range-search" id="price-range-submit">Aplicar</button>
  84.                             <button class="price-range-reset" id="price-range-reset">Restablecer</button>
  85.                         </div>
  86.                         <div class="slider-range-inputs">
  87.                             <input type="number" min=0 max="9900" oninput="validity.valid||(value='0');" id="min_price" class="price-range-field" />
  88.                             <input type="number" min=0 max="10000" oninput="validity.valid||(value='1000');" id="max_price" class="price-range-field" />
  89.                         </div>
  90.                         {#<div id="searchResults" class="search-results-block"></div>#}
  91.                     </div>
  93.                     <div class="filter-order align-items-end justify-content-center cnt-filter-extra float-end">
  94.                         <select class="filters_change text-truncate" style="width: 250px;" name="order" id="filter_order">
  95.                             <option class="select-item" selected disabled>Ordenar por</option>
  96.                             <option class="select-item text-dark" value="1" {{filters.order is defined and filters.order == "1" ? 'selected="selected"' : ''}}>Precio: Menor a mayor</option>
  97.                             <option class="select-item text-dark" value="2" {{filters.order is defined and filters.order == "2" ? 'selected="selected"' : ''}}>Precio: Mayor a menor</option>
  98.                         </select>
  99.                     </div>
  100.                 </div>
  101.             </form>
  103.             <input type="hidden" id="page_next" value="">
  104.             <input type="hidden" id="page_total" value="">
  106.             <!-- TICKETS -->
  107.             <div class="row d-flex justify-content-center py-lg-5 py-2" id="box_tickets">
  108.                 {% if filters.type is not defined or filters.type != 3 %}
  109.                     {{ render(controller('App\\Controller\\TicketController::includeTickets',{request: app.request})) }}
  110.                 {% else %}
  111.                     {{ render(controller('App\\Controller\\PackController::includePacks',{request: app.request})) }}
  112.                 {% endif %}
  113.             </div>
  115.             <div class="row py-4 d-flex align-items-center justify-content-center">
  116.                 {#<div class="col-xl-1 col-6 d-flex justify-content-xl-start justify-content-center">
  117.                     <p>Mostrando:</p>
  118.                 </div>
  119.                 <div class="col-xl-2 col-6 ms-xl-5 ms-2 py-xl-0 pb-4 d-flex justify-content-xl-start justify-content-center">
  120.                     <p class="blue">12
  121.                         <span>
  122.                             <img class="ms-2 arrow-blue" src="{{ asset('assets/images/icons/icn-arrow-down.svg') }}">
  123.                         </span>
  124.                     </p>
  125.                 </div>#}
  126.                 <div class="col-xl-2 col-12 d-flex justify-content-center">
  127.                     <button class="btn-xl outline-dark" id="btn_load_more">cargar más</button>
  128.                     <img id="loading_more" src="{{ asset('assets/images/icons/loading.gif') }}" style="display:none; height: 80px;">
  129.                 </div>
  130.             </div>
  131.         </div>
  132.     </div>
  134.     {% block javascripts %}
  135.         <script src="{{ asset('assets/plugins/range-slider/jquery-ui.min.js') }}" type="text/javascript"></script>
  136.         <script type="text/javascript" src="{{ asset('assets/plugins/range-slider/jquery.ui.touch-punch.min.js') }}"></script>
  137.         <script src="{{ asset('assets/plugins/range-slider/price_range_script.js') }}?v={{ random() }}" type="text/javascript"></script>
  138.         <script src="{{ asset('assets/js/top-moments.js') }}?v={{ random() }}" type="text/javascript"></script>
  139.         <script>
  140.             // Collections scripts
  141.             $( document ).ready(function() {
  142.                 const spinner = $('.loading');
  144.                 {% if filters.eventId is defined %}
  145.                     {% set url = path('include_tickets') %}
  146.                     spinner.toggleClass('hidden');
  147.                     fetch("{{ url }}?" + new URLSearchParams({
  148.                         type: 5,
  149.                         order: $("#filter_order").val(),
  150.                         event: '{{ filters.eventId }}',
  151.                         minPrice: $("#min_price").val(),
  152.                         maxPrice: $("#max_price").val(),
  153.                         saleuser: 1,
  154.                     }), {
  155.                         method: 'GET',
  156.                         headers: {'Content-Type':'application/x-www-form-urlencoded'}
  157.                     })
  158.                         .then(function(response) {
  159.                             return response.text();
  160.                         })
  161.                         .then(function(result) {
  162.                             $("#box_tickets").html(result);
  163.                             spinner.toggleClass('hidden');
  164.                         })
  165.                         .catch(function(error) {
  166.                             console.error('Error:', error);
  167.                             spinner.toggleClass('hidden');
  168.                             swal({
  169.                                 title: "Error!",
  170.                                 text: "Ocurrió un error al intentar cargar más tickets",
  171.                                 type: "error"
  172.                             });
  173.                         });
  174.                 {% endif %}
  175.                 // Filters change
  176.                 $(document).on('change', '.filters_change', function() {
  177.                     // Loader
  178.                     spinner.toggleClass('hidden');
  179.                     {% if filters.type is not defined or filters.type != 3 %}
  180.                         {% set url = path('include_tickets') %}
  181.                     {% else %}
  182.                         {% set url = path('include_packs') %}
  183.                     {% endif %}
  185.                     let $event = '';
  186.                     if ($("#filter_type").val() == 5 || $("#filter_type").val() == 7) {
  187.                         $event = $('option:selected', $("#filter_type")).attr('data-event');
  188.                     }
  190.                     changeSliderSettings(parseInt($("#filter_type").val()), $("#min_price"), $("#max_price"))
  192.                     fetch("{{ url }}?" + new URLSearchParams({
  193.                         type: $("#filter_type").val(),
  194.                         order: $("#filter_order").val(),
  195.                         event: $event,
  196.                         minPrice: $("#min_price").val(),
  197.                         maxPrice: $("#max_price").val(),
  198.                         saleuser: 1,
  199.                     }), {
  200.                         method: 'GET',
  201.                         headers: {'Content-Type':'application/x-www-form-urlencoded'}
  202.                     })
  203.                         .then(function(response) {
  204.                             return response.text();
  205.                         })
  206.                         .then(function(result) {
  207.                             $("#box_tickets").html(result);
  208.                             spinner.toggleClass('hidden');
  209.                         })
  210.                         .catch(function(error) {
  211.                             console.error('Error:', error);
  212.                             spinner.toggleClass('hidden');
  213.                             swal({
  214.                                 title: "Error!",
  215.                                 text: "Ocurrió un error al intentar cargar más tickets",
  216.                                 type: "error"
  217.                             });
  218.                         });
  219.                 });
  221.                 // Price Range apply
  222.                 $(document).on('click', '.price-range-search', function(e) {
  223.                     e.preventDefault();
  224.                     // Loader
  225.                     const spinner = $('.loading');
  226.                     spinner.toggleClass('hidden');
  227.                     {% if filters.type is not defined or filters.type != 3 %}
  228.                     {% set url = path('include_tickets') %}
  229.                     {% else %}
  230.                     {% set url = path('include_packs') %}
  231.                     {% endif %}
  233.                     let $event = '';
  234.                     if ($("#filter_type").val() == 5 || $("#filter_type").val() == 7) {
  235.                         $event = $('option:selected', $("#filter_type")).attr('data-event');
  236.                     }
  238.                     fetch("{{ url }}?" + new URLSearchParams({
  239.                         type: $("#filter_type").val(),
  240.                         order: $("#filter_order").val(),
  241.                         event: $event,
  242.                         minPrice: $("#min_price").val(),
  243.                         maxPrice: $("#max_price").val(),
  244.                         saleuser: 1,
  245.                     }), {
  246.                         method: 'GET',
  247.                         headers: {'Content-Type':'application/x-www-form-urlencoded'}
  248.                     })
  249.                         .then(function(response) {
  250.                             return response.text();
  251.                         })
  252.                         .then(function(result) {
  253.                             $("#box_tickets").html(result);
  254.                             spinner.toggleClass('hidden');
  255.                         })
  256.                         .catch(function(error) {
  257.                             console.error('Error:', error);
  258.                             spinner.toggleClass('hidden');
  259.                             swal({
  260.                                 title: "Error!",
  261.                                 text: "Ocurrió un error al intentar cargar más tickets",
  262.                                 type: "error"
  263.                             });
  264.                         });
  265.                 });
  267.                 // Price range reset
  268.                 $(document).on('click', '.price-range-reset', function(e) {
  269.                     e.preventDefault();
  270.                     changeSliderSettings(0, $("#min_price"), $("#max_price"));
  271.                 });
  273.                 // Space top moments button
  274.                 $('#space-top-moments-button').on('click', function(){
  275.                     // Loader
  276.                     const spinner = $('.loading');
  277.                     spinner.toggleClass('hidden');
  278.                     {% if filters.type is not defined or filters.type != 3 %}
  279.                         {% set url = path('include_tickets') %}
  280.                     {% else %}
  281.                         {% set url = path('include_packs') %}
  282.                     {% endif %}
  284.                     changeSliderSettings(parseInt($("#filter_type").val()), $("#min_price"), $("#max_price"))
  286.                     fetch("{{ url }}?" + new URLSearchParams({
  287.                         type: 6,
  288.                         order: $("#filter_order").val(),
  289.                         minPrice: $("#min_price").val(),
  290.                         maxPrice: $("#max_price").val(),
  291.                         saleuser: 1,
  292.                     }), {
  293.                         method: 'GET',
  294.                         headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  295.                     })
  296.                         .then(function (response) {
  297.                             return response.text();
  298.                         })
  299.                         .then(function (result) {
  300.                             $("#box_tickets").html(result);
  301.                             $('#filter_type option[value="6"]').attr("selected",true);
  302.                             spinner.toggleClass('hidden');
  303.                         })
  304.                         .catch(function (error) {
  305.                             console.error('Error:', error);
  306.                             spinner.toggleClass('hidden');
  307.                             swal({
  308.                                 title: "Error!",
  309.                                 text: "Ocurrió un error al intentar cargar más tickets",
  310.                                 type: "error"
  311.                             });
  312.                         });
  313.                 })
  314.             });
  316.             var load_more = document.getElementById('btn_load_more');
  317.             
  318.             load_more.addEventListener('click', function() {
  320.                 $("#btn_load_more").hide();
  321.                 $("#loading_more").show();
  323.                 {% if filters.type is not defined or filters.type != 3 %}
  324.                     {% set url = path('include_tickets') %}
  325.                 {% else %}
  326.                     {% set url = path('include_packs') %}
  327.                 {% endif %}
  329.                 let $event = '';
  330.                 if ($("#filter_type").val() == 5 || $("#filter_type").val() == 7) {
  331.                     $event = $('option:selected', $("#filter_type")).attr('data-event');
  332.                 }
  334.                 fetch("{{ url }}?" + new URLSearchParams({
  335.                     offset: $("#page_next").val(),
  336.                     type: $("#filter_type").val(),
  337.                     order: $("#filter_order").val(),
  338.                     event: $event,
  339.                     saleuser: 1,
  340.                 }), {
  341.                     method: 'GET',
  342.                     headers: {'Content-Type':'application/x-www-form-urlencoded'}
  343.                 })
  344.                 .then(function(response) {
  345.                     return response.text();
  346.                 })
  347.                 .then(function(result) {
  348.                     $("#box_tickets").append(result);
  349.                     $("#loading_more").hide();
  350.                     $("#btn_load_more").show();
  351.                 })
  352.                 .catch(function(error) {
  353.                     console.error('Error:', error);
  355.                     swal({
  356.                         title: "Error!",
  357.                         text: "Ocurrió un error al intentar cargar más tickets",
  358.                         type: "error"
  359.                     });
  360.                     
  361.                     $("#btn_load_more").show();
  362.                     
  363.                     $("#loading_more").hide();
  364.                 });
  366.             });
  367.         </script>
  369.         <script>
  370.             var acc = document.getElementsByClassName("accordion");
  371.             var i;
  372.  
  373.             for (i = 0; i < acc.length; i++) {
  374.                 acc[i].addEventListener("click", function() {
  375.  
  376.                     var panel = this.nextElementSibling;
  377.                     var tab = this.parentNode;
  378.  
  379.                     if (panel.style.display === "none") {
  380.                         panel.style.display = "block";
  381.                         tab.style.boxShadow = "none";
  382.                     } else {
  383.                         panel.style.display = "none";
  384.                     }
  385.                 });
  386.             }
  387.         </script>
  388.     {% endblock %}
  390. {% endblock %}