first commit

frontend/workshop.js

@@ -0,0 +1,144 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const sortButton = document.querySelector('.sort-button');
+    const modal = document.getElementById('sortModal');
+    const closeButton = document.querySelector('.close-btn');
+    const cancelButton = document.querySelector('.cancel-button');
+    const okButton = document.querySelector('.ok-button');
+    const startDateInput = document.querySelector('.first-rectangle .date-input');
+    const endDateInput = document.querySelector('.second-rectangle .date-input');
+    const checkboxes = document.querySelectorAll('.game-mode-checkbox');
+    const params = new URLSearchParams(window.location.search);
+
+    // Устанавливаем состояние чекбоксов при загрузке страницы
+    checkboxes.forEach(checkbox => {
+        checkbox.checked = params.getAll('game_modes').includes(checkbox.value);
+    });
+
+    // Открыть модальное окно при нажатии на кнопку
+    sortButton.addEventListener('click', function () {
+        modal.style.display = 'block';
+    });
+
+    // Закрыть модальное окно при нажатии на крестик
+    closeButton.addEventListener('click', function () {
+        modal.style.display = 'none';
+    });
+
+    // Закрыть модальное окно при нажатии на кнопку "Отмена"
+    cancelButton.addEventListener('click', function () {
+        modal.style.display = 'none';
+    });
+
+    // Применить фильтры по дате и режимам игры при нажатии на кнопку "OK"
+    okButton.addEventListener('click', function () {
+        const startDate = startDateInput.value;
+        const endDate = endDateInput.value;
+
+        // Фильтры по датам
+        if (startDate) params.set('start_date', startDate);
+        else params.delete('start_date');
+
+        if (endDate) params.set('end_date', endDate);
+        else params.delete('end_date');
+
+        // Фильтры по режимам игры
+        const selectedGameModes = Array.from(checkboxes)
+            .filter(checkbox => checkbox.checked)
+            .map(checkbox => checkbox.value);
+
+        // Обновляем параметры для выбранных режимов
+        params.delete('game_modes'); // Удаляем старые значения
+        selectedGameModes.forEach(mode => params.append('game_modes', mode));
+
+        params.set('page', 1); // Сбрасываем на первую страницу
+        modal.style.display = 'none'; // Закрываем модальное окно
+        window.location.search = params.toString(); // Перезагружаем страницу с новыми параметрами
+    });
+
+    // Обновление параметров при изменении чекбоксов
+    checkboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', function () {
+            const selectedGameModes = Array.from(checkboxes)
+                .filter(checkbox => checkbox.checked)
+                .map(checkbox => checkbox.value);
+
+            // Обновляем параметры URL
+            params.delete('game_modes'); // Удаляем старые значения
+            selectedGameModes.forEach(mode => params.append('game_modes', mode));
+
+            params.set('page', 1); // Сбрасываем на первую страницу
+            window.location.search = params.toString(); // Перезагружаем страницу с новыми параметрами
+        });
+    });
+});
+
+
+document.addEventListener('DOMContentLoaded', function () {
+    const searchInput = document.querySelector('.search-input');
+
+    // Функция для обработки поиска
+    function performSearch() {
+        const query = searchInput.value.toLowerCase();
+        const cards = document.querySelectorAll('.card');
+
+        cards.forEach(card => {
+            const title = card.querySelector('.card-title').textContent.toLowerCase();
+            if (title.includes(query)) {
+                card.style.display = 'block';  // Показываем карточку, если название соответствует запросу
+            } else {
+                card.style.display = 'none';  // Скрываем карточку, если название не соответствует запросу
+            }
+        });
+    }
+
+    // Поиск по нажатию клавиши Enter
+    searchInput.addEventListener('keydown', function (event) {
+        if (event.key === 'Enter') {
+            performSearch();
+        }
+    });
+
+    // Поиск по клику на лупу (если такая кнопка добавлена)
+    const searchButton = document.querySelector('.search-button');
+    if (searchButton) {
+        searchButton.addEventListener('click', performSearch);
+    }
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+    const starsCheckboxes = document.querySelectorAll('input[name="stars"]');
+    const params = new URLSearchParams(window.location.search);
+
+    // Устанавливаем состояние чекбоксов при загрузке страницы
+    const selectedStars = params.get('stars');
+    if (selectedStars) {
+        starsCheckboxes.forEach(checkbox => {
+            if (checkbox.value === selectedStars) {
+                checkbox.checked = true;
+            }
+        });
+    }
+
+    // Обновление параметров при изменении чекбоксов для звезд
+    starsCheckboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', function () {
+            // Снимаем отметки с других чекбоксов
+            starsCheckboxes.forEach(otherCheckbox => {
+                if (otherCheckbox !== checkbox) {
+                    otherCheckbox.checked = false;
+                }
+            });
+
+            const selectedStar = checkbox.checked ? checkbox.value : null;
+
+            // Обновляем параметры URL
+            params.delete('stars');
+            if (selectedStar) {
+                params.set('stars', selectedStar); // Устанавливаем выбранную звезду
+            }
+
+            params.set('page', 1); // Сбрасываем на первую страницу
+            window.location.search = params.toString(); // Перезагружаем страницу с новыми параметрами
+        });
+    });
+});