templates/blog/_testFilter.html.twig line 1

  1. <div class="test-filter-box">
  2.     <h3>Hledat v testech</h3>
  3.     
  4.     <form method="GET" action="#" class="test-filter-form" onsubmit="return submitFilter()">
  5.         <div class="filter-row">
  6.             <div class="filter-field">
  7.                 <label for="manufacturer">Značka</label>
  8.                 <select id="manufacturer" name="manufacturer" onchange="updateModels()">
  9.                     <option value="">Vyberte značku</option>
  10.                     {% for manufacturer in manufacturers %}
  11.                         <option value="{{ manufacturer.url }}" data-id="{{ manufacturer.id }}"
  12.                                 {% if activeManufacturer and activeManufacturer.url == manufacturer.url %}selected{% endif %}>
  13.                             {{ manufacturer.name }}
  14.                         </option>
  15.                     {% endfor %}
  16.                 </select>
  17.             </div>
  18.             
  19.             <div class="filter-field">
  20.                 <label for="model">Model</label>
  21.                 <select id="model" name="model">
  22.                     <option value="">Vyberte model</option>
  23.                     {% if models %}
  24.                         {% for model in models %}
  25.                             <option value="{{ model.url }}" 
  26.                                     {% if activeModel and activeModel.url == model.url %}selected{% endif %}>
  27.                                 {{ model.name }}
  28.                             </option>
  29.                         {% endfor %}
  30.                     {% endif %}
  31.                 </select>
  32.             </div>
  33.             
  34.             <div class="filter-field">
  35.                 <button type="submit" class="filter-button">Vyhledat</button>
  36.             </div>
  37.         </div>
  38.     </form>
  39. </div>
  41. <script>
  42. function updateModels() {
  43.     const manufacturerSelect = document.getElementById('manufacturer');
  44.     const modelSelect = document.getElementById('model');
  45.     const selectedOption = manufacturerSelect.options[manufacturerSelect.selectedIndex];
  46.     const manufacturerId = selectedOption ? selectedOption.getAttribute('data-id') : null;
  47.     
  48.     // Clear model options
  49.     modelSelect.innerHTML = '<option value="">Vyberte model</option>';
  50.     
  51.     if (!manufacturerId) {
  52.         return;
  53.     }
  55.     fetch('/models?idManufacturer=' + encodeURIComponent(manufacturerId))
  56.         .then(response => response.json())
  57.         .then(data => {
  58.             if (data.models) {
  59.                 data.models.forEach(model => {
  60.                     const option = document.createElement('option');
  61.                     option.value = model.url;
  62.                     option.textContent = model.name;
  63.                     modelSelect.appendChild(option);
  64.                 });
  65.             }
  66.         })
  67.         .catch(error => {
  68.             console.error('Error fetching models:', error);
  69.         });
  70. }
  72. function submitFilter() {
  73.     const manufacturerSelect = document.getElementById('manufacturer');
  74.     const modelSelect = document.getElementById('model');
  75.     const manufacturerUrl = manufacturerSelect.value;
  76.     const modelUrl = modelSelect.value;
  78.     hideErrorMessage();
  79.     
  80.     if (!manufacturerUrl) {
  81.         alert('Vyberte prosím značku');
  82.         return false;
  83.     }
  84.     
  85.     let url = '/clanky/testy-aut/';
  86.     
  87.     if (manufacturerUrl && modelUrl) {
  88.         url += manufacturerUrl + '-' + modelUrl;
  89.     } else if (manufacturerUrl) {
  90.         url += manufacturerUrl;
  91.     }
  92.     
  93.     window.location.href = url;
  94.     return false;
  95. }
  97. function hideErrorMessage() {
  98.     const errorMessage = document.getElementById('filter-error-message');
  99.     if (errorMessage) {
  100.         errorMessage.style.display = 'none';
  101.     }
  102. }
  103. </script>