Untitled

unknown
plain_text
a year ago
7.2 kB
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Список категорий</title>
    <!-- Подключение библиотеки Switchery -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css" rel="stylesheet">
    <!-- Подключение библиотеки SortableJS и инициализация -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
</head>
<body>
    <table id="sortableTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Название</th>
                <th>Порядок</th>
                <th>Обновлено</th>
                <th>Создано</th>
                <th>Активен</th>
            </tr>
        </thead>
        <tbody id="dataTableBody">
            <!-- Здесь будут добавляться строки из JavaScript -->
        </tbody>
    </table>

    <!-- Подключение библиотеки Switchery и JavaScript-кода -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Функция для создания случайных данных
            function generateRandomData() {
                var data = [];
                for (var i = 1; i <= 10; i++) {
                    var item = {
                        id: i,
                        name: "Category " + i,
                        order: Math.floor(Math.random() * 100) + 1,
                        updated_at: new Date().toISOString(),
                        created_at: new Date().toISOString(),
                        active: Math.random() < 0.5 ? 1 : 0
                    };
                    data.push(item);
                }
                return data;
            }

            // Функция для создания строк таблицы из данных JSON
            function createTableRows(data) {
                var tbody = document.getElementById("dataTableBody");

                data.forEach(function (item) {
                    var row = document.createElement("tr");

                    // Создание ячейки для ID
                    var idCell = document.createElement("td");
                    idCell.textContent = item.id;
                    row.appendChild(idCell);

                    // Создание ячейки для Названия
                    var nameCell = document.createElement("td");
                    nameCell.textContent = item.name;
                    row.appendChild(nameCell);

                    // Создание ячейки для Порядка
                    var orderCell = document.createElement("td");
                    orderCell.textContent = item.order;
                    row.appendChild(orderCell);

                    // Создание ячейки для Обновлено
                    var updatedCell = document.createElement("td");
                    updatedCell.textContent = item.updated_at;
                    row.appendChild(updatedCell);

                    // Создание ячейки для Создано
                    var createdCell = document.createElement("td");
                    createdCell.textContent = item.created_at;
                    row.appendChild(createdCell);

                    // Создание ячейки для чекбокса
                    var checkboxCell = document.createElement("td");
                    var checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.checked = item.active === 1;
                    checkbox.className = "js-switch";
                    checkbox.setAttribute("data-size", "small");
                    checkboxCell.appendChild(checkbox);
                    row.appendChild(checkboxCell);

                    tbody.appendChild(row);

                    // Инициализация Switchery для каждого чекбокса
                    var switchery = new Switchery(checkbox, {
                        size: "small"
                    });

                    // Обработчик события изменения состояния чекбокса
                    checkbox.addEventListener("change", function () {
                        const isChecked = checkbox.checked;
                        console.log("Switch state changed: " + (isChecked ? "active" : "inactive"));

                        // Отправляем состояние чекбокса и name на сервер
                        sendToggleStatus(item.id, isChecked, item.name);

                        // Добавляем сообщение
                        if (isChecked) {
                            console.log("Чекбокс включен!");
                        } else {
                            console.log("Чекбокс выключен!");
                        }
                    });
                });

                // Инициализация сортировки таблицы с помощью SortableJS
                new Sortable(document.getElementById("sortableTable").getElementsByTagName("tbody")[0], {
                    animation: 150, // анимация перемещения
                    handle: 'th', // элемент, который будет использоваться для перетаскивания строки
                });
            }

            // Функция для отправки состояния чекбокса и name на сервер
            function sendToggleStatus(categoryId, status, name) {
                const url = 'http://127.0.0.1:8000/api/categories/' + categoryId;

                fetch(url, {
                    method: 'POST',
                    body: JSON.stringify({ _method: "PUT", active: status, name: name }),
                    headers: {
                        'Content-Type': 'application/json; charset=UTF-8',
                    },
                })
                    .then((response) => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then((data) => {
                        console.log('Server response:', data);
                    })
                    .catch((error) => {
                        console.error('Произошла ошибка при отправке запроса на сервер:', error);
                    });
            }

            // Генерация случайных данных и создание таблицы
            var randomData = generateRandomData();
            createTableRows(randomData);
        });
    </script>
</body>
</html>