document.addEventListener("DOMContentLoaded", function () {
// Ваш JavaScript код сюда
// Функция для создания строк таблицы из данных 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 для каждого чекбокса
new Switchery(checkbox, {
size: "small"
});
// Обработчик события изменения состояния чекбокса
checkbox.addEventListener("change", function () {
const isChecked = checkbox.checked;
console.log("Switch state changed: " + (isChecked ? "active" : "inactive"));
// Отправляем состояние чекбокса на сервер
sendToggleStatus(item.id, isChecked);
});
});
}
// Функция для отправки состояния чекбокса на сервер
function sendToggleStatus(categoryId, status) {
console.log('sendToggleStatus called with categoryId:', categoryId, 'and status:', status);
const url = 'http://127.0.0.1:8000/api/categories'; // Замените на ваш URL-адрес API
fetch(url, {
method: 'POST', // Может быть и 'GET', 'PUT', 'DELETE', и т. д., в зависимости от вашего API
body: JSON.stringify({ categoryId: categoryId, status: status }), // Тело запроса в формате JSON
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
})
.then((response) => {
console.log('Response received with status:', response.status);
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);
});
}
// Загрузка данных JSON с использованием fetch
fetch("http://127.0.0.1:8000/api/categories")
.then(function (response) {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(function (data) {
// Вызываем функцию для создания строк таблицы из данных JSON
createTableRows(data.data);
})
.catch(function (error) {
console.error("Произошла ошибка при загрузке JSON: " + error.message);
});
});