Untitled
unknown
plain_text
a year ago
7.2 kB
9
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>