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