templates/public/events/_filters.html.twig line 1

  1. <aside class="filters-panel">
  2.     <div class="filters-panel__header">
  3.         <h3>Búsqueda</h3>
  4.     </div>
  6.     <form method="get" class="filters-form">
  7.         <input type="hidden" name="view" value="{{ view|default('list') }}">
  9.         <div class="filter-field filter-field--text">
  10.             <label class="filter-label" for="filter-query">Nombre del curso</label>
  11.             <input class="filter-control filter-control--text" id="filter-query" type="text" name="q" value="{{ search }}">
  12.         </div>
  14.         <div class="filter-field filter-field--select">
  15.             <label class="filter-label" for="filter-modalidad">Modalidad</label>
  16.             <select class="filter-control filter-control--select" id="filter-modalidad" name="modalidad">
  17.                 <option value="">Todas</option>
  18.                 {% for m in modalidades %}
  19.                     <option value="{{ m.id }}"
  20.                         {{ modalidad and modalidad.id == m.id ? 'selected' : '' }}>
  21.                         {{ m.label }}
  22.                     </option>
  23.                 {% endfor %}
  24.             </select>
  25.         </div>
  27.         <div class="filter-field filter-field--select">
  28.             <label class="filter-label" for="filter-area-tematica">Área Temática</label>
  29.             <select class="filter-control filter-control--select" id="filter-area-tematica" name="areaTematica">
  30.                 <option value="">Todas</option>
  31.                 {% for a in areasTematicas %}
  32.                     <option value="{{ a.id }}"
  33.                         {{ areaTematica and areaTematica.id == a.id ? 'selected' : '' }}>
  34.                         {{ a.label }}
  35.                     </option>
  36.                 {% endfor %}
  37.             </select>
  38.         </div>
  40.         <div class="filter-field filter-field--text">
  41.             <label class="filter-label" for="filter-code">Código</label>
  42.             <input class="filter-control filter-control--text" id="filter-code" type="text" name="code" value="{{ code }}">
  43.         </div>
  45.         <div class="filter-field filter-field--dates">
  46.             <label class="filter-label" for="filter-start-from">Fecha de inicio</label>
  47.             <div class="double-field">
  48.                 <input class="filter-control filter-control--date" id="filter-start-from" type="date" name="start_from" value="{{ start_from }}" aria-label="Fecha de inicio desde">
  49.                 <input class="filter-control filter-control--date" id="filter-start-to" type="date" name="start_to" value="{{ start_to }}" aria-label="Fecha de inicio hasta">
  50.             </div>
  51.         </div>
  53.         <div class="filter-field filter-field--range">
  54.             <label class="filter-label" for="rangeMin">Duración (horas)</label>
  56.             <div class="range-values">
  57.                 <span id="minVal"></span>
  58.                 <span>–</span>
  59.                 <span id="maxVal"></span>
  60.             </div>
  62.             <div class="range-slider">
  63.                 <div class="range-track"></div>
  65.                 <input type="range"
  66.                     id="rangeMin"
  67.                     name="durationFrom"
  68.                     min="{{ hoursRange.minHours }}"
  69.                     max="{{ hoursRange.maxHours }}"
  70.                     value="{{ app.request.get('durationFrom') ?? hoursRange.minHours }}"
  71.                     aria-label="Duración mínima">
  73.                 <input type="range"
  74.                     id="rangeMax"
  75.                     name="durationTo"
  76.                     min="{{ hoursRange.minHours }}"
  77.                     max="{{ hoursRange.maxHours }}"
  78.                     value="{{ app.request.get('durationTo') ?? hoursRange.maxHours }}"
  79.                     aria-label="Duración máxima">
  80.             </div>
  81.         </div>
  83.         <div class="filter-field filter-field--checkbox">
  84.             <div class="checkbox-filter">
  85.                 <input class="filter-checkbox"
  86.                     id="filter-open-inscription"
  87.                     type="checkbox"
  88.                     name="open_inscription"
  89.                     value="1"
  90.                     {{ app.request.get('open_inscription') ? 'checked' : '' }}>
  91.                 <label class="checkbox-filter__text" for="filter-open-inscription">Solo cursos con inscripción abierta</label>
  92.             </div>
  93.         </div>
  95.         <div class="filter-buttons filter-actions">
  96.             <button type="submit" class="btn-apply filter-button filter-button--primary">Buscar</button>
  97.             <a href="{{ path('public_events') }}" class="btn-clear filter-button filter-button--secondary">Limpiar</a>
  98.         </div>
  99.     </form>
  100. </aside>
  102. <script>
  103.     const rangeMin = document.getElementById("rangeMin");
  104.     const rangeMax = document.getElementById("rangeMax");
  105.     const rangeTrack = document.querySelector(".range-track");
  106.     const minVal = document.getElementById("minVal");
  107.     const maxVal = document.getElementById("maxVal");
  109.     const minGap = 0;
  110.     const sliderMin = parseInt(rangeMin.min);
  111.     const sliderMax = parseInt(rangeMin.max);
  113.     function updateRange() {
  114.         let minValue = parseInt(rangeMin.value);
  115.         let maxValue = parseInt(rangeMax.value);
  117.         if (maxValue - minValue <= minGap) {
  118.             if (event?.target === rangeMin) {
  119.                 rangeMin.value = maxValue - minGap;
  120.                 minValue = rangeMin.value;
  121.             } else {
  122.                 rangeMax.value = minValue + minGap;
  123.                 maxValue = rangeMax.value;
  124.             }
  125.         }
  127.         minVal.textContent = minValue + ' h';
  128.         maxVal.textContent = maxValue + ' h';
  130.         const percent1 = ((minValue - sliderMin) / (sliderMax - sliderMin)) * 100;
  131.         const percent2 = ((maxValue - sliderMin) / (sliderMax - sliderMin)) * 100;
  133.         rangeTrack.style.background =
  134.             `linear-gradient(to right,
  135.             #dbe3e9 ${percent1}%,
  136.             var(--color-primary) ${percent1}%,
  137.             var(--color-primary) ${percent2}%,
  138.             #dbe3e9 ${percent2}%)`;
  139.     }
  141.     rangeMin.addEventListener("input", updateRange);
  142.     rangeMax.addEventListener("input", updateRange);
  144.     updateRange();
  145. </script>