146 lines
6.7 KiB
HTML
146 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Dashboard</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div class="container mt-4">
|
||
<h1 class="mb-4">Панель управления</h1>
|
||
<!-- Таблица пользователей -->
|
||
<h2>Пользователи</h2>
|
||
<table id="users-table" class="table table-bordered table-striped">
|
||
<thead class="thead-dark">
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Имя</th>
|
||
<th>Email</th>
|
||
<th>Подписки</th>
|
||
<th>Режим</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- Данные загружаются через JS -->
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Контейнер пагинации -->
|
||
<nav aria-label="Page navigation example">
|
||
<ul class="pagination" id="pagination">
|
||
<!-- Кнопка предыдущей страницы -->
|
||
<li class="page-item">
|
||
<a class="page-link" href="#" aria-label="Previous" onclick="loadUsers(currentPage - 1)">
|
||
<span aria-hidden="true">«</span>
|
||
<span class="sr-only">Previous</span>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Номера страниц (будет динамически генерироваться) -->
|
||
<!-- Пример -->
|
||
<!-- <li class="page-item"><a class="page-link" href="#">1</a></li> -->
|
||
|
||
<!-- Кнопка следующей страницы -->
|
||
<li class="page-item">
|
||
<a class="page-link" href="#" aria-label="Next" onclick="loadUsers(currentPage + 1)">
|
||
<span aria-hidden="true">»</span>
|
||
<span class="sr-only">Next</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
|
||
{#<script src="{{ url_for('static', filename='js/regions.js') }}"></script>#}
|
||
<script>
|
||
let currentPage = 1; // Переменная для текущей страницы
|
||
let totalPages = 1; // Переменная для общего количества страниц (инициализируем значением 1 по умолчанию)
|
||
const perPage = 20; // Количество элементов на странице
|
||
|
||
// Функция для загрузки данных
|
||
function loadUsers(page) {
|
||
if (page < 1 || page > totalPages) return; // Проверка на допустимые страницы
|
||
currentPage = page; // Обновляем текущую страницу
|
||
|
||
// Получаем данные с сервера
|
||
fetch(`/telezab/dashboard/users?page=${currentPage}&per_page=${perPage}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
totalPages = data.total_pages; // Обновляем totalPages из ответа сервера
|
||
updateUsersTable(data.users); // Обновляем таблицу пользователей
|
||
updatePagination(data.current_page, data.total_pages); // Обновляем пагинацию
|
||
})
|
||
.catch(error => {
|
||
console.error('Error fetching users:', error);
|
||
});
|
||
}
|
||
|
||
// Функция для обновления таблицы пользователей
|
||
function updateUsersTable(users) {
|
||
const tableBody = document.getElementById('users-table').querySelector('tbody');
|
||
tableBody.innerHTML = ''; // Очищаем таблицу
|
||
|
||
users.forEach(user => {
|
||
const row = document.createElement('tr');
|
||
row.innerHTML = `
|
||
<td>${user.id}</td>
|
||
<td>${user.username}</td>
|
||
<td>${user.email}</td>
|
||
<td>${user.subscriptions.join(', ') || 'Нет подписок'}</td>
|
||
<td>${user.disaster_only}</td>
|
||
`;
|
||
tableBody.appendChild(row);
|
||
});
|
||
}
|
||
|
||
// Функция для обновления пагинации
|
||
function updatePagination(currentPage, totalPages) {
|
||
const paginationContainer = document.getElementById('pagination');
|
||
paginationContainer.innerHTML = ''; // Очищаем пагинацию
|
||
|
||
// Кнопка "Предыдущая" (слева)
|
||
const prevButton = document.createElement('li');
|
||
prevButton.classList.add('page-item');
|
||
prevButton.classList.toggle('disabled', currentPage === 1); // Отключить кнопку если текущая страница - 1
|
||
prevButton.innerHTML = `<a class="page-link" href="#" aria-label="Previous" onclick="loadUsers(${currentPage - 1})">
|
||
<span aria-hidden="true">«</span>
|
||
<span class="sr-only">Previous</span>
|
||
</a>`;
|
||
paginationContainer.appendChild(prevButton);
|
||
|
||
// Генерация кнопок с номерами страниц
|
||
for (let page = 1; page <= totalPages; page++) {
|
||
const pageItem = document.createElement('li');
|
||
pageItem.classList.add('page-item');
|
||
pageItem.classList.toggle('active', page === currentPage); // Выделяем текущую страницу
|
||
|
||
const pageLink = document.createElement('a');
|
||
pageLink.classList.add('page-link');
|
||
pageLink.href = "#";
|
||
pageLink.textContent = page;
|
||
pageLink.onclick = () => loadUsers(page);
|
||
|
||
pageItem.appendChild(pageLink);
|
||
paginationContainer.appendChild(pageItem);
|
||
}
|
||
|
||
// Кнопка "Следующая" (справа)
|
||
const nextButton = document.createElement('li');
|
||
nextButton.classList.add('page-item');
|
||
nextButton.classList.toggle('disabled', currentPage === totalPages); // Отключить кнопку если текущая страница - последняя
|
||
nextButton.innerHTML = `<a class="page-link" href="#" aria-label="Next" onclick="loadUsers(${currentPage + 1})">
|
||
<span aria-hidden="true">»</span>
|
||
<span class="sr-only">Next</span>
|
||
</a>`;
|
||
paginationContainer.appendChild(nextButton);
|
||
}
|
||
|
||
// Инициализация загрузки пользователей на первой странице
|
||
loadUsers(currentPage);
|
||
</script>
|
||
</body>
|
||
</html>
|