UdoChudo
52e31864b3
- Implemented the initial version of the web interface. refactor: Begin Telegram bot refactoring - Started restructuring the bot’s code for better maintainability. chore: Migrate to Flask project structure - Reorganized the application to follow Flask's project structure. cleanup: Extensive code cleanup - Removed redundant code and improved readability. Signed-off-by: UdoChudo <stream@udochudo.ru>
183 lines
9.6 KiB
HTML
183 lines
9.6 KiB
HTML
{% extends 'base.html' %}
|
||
|
||
{% block content %}
|
||
<head>
|
||
<title>Пользователи</title>
|
||
</head>
|
||
<div class="container">
|
||
<h1>Пользователи</h1>
|
||
|
||
<button class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#addUserModal">Добавить пользователя</button>
|
||
<button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#searchUsersModal">Поиск</button>
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped" id="users-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 8%;">Chat ID</th>
|
||
<th style="width: 15%;">Telegram ID</th>
|
||
<th style="width: 20%;">Email</th>
|
||
<th style="width: 20%;">Подписки</th>
|
||
<th style="width: 15%;">Тип уведомлений</th>
|
||
<th style="width: 10%;">Статус</th>
|
||
<th style="width: 12%;">Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<nav>
|
||
<ul class="pagination" id="pagination">
|
||
</ul>
|
||
</nav>
|
||
|
||
{# Модальное окно карточки пользователя #}
|
||
<div id="userModal" class="modal fade" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-xl">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="userModalLabel">Редактирование пользователя</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Chat ID: <span id="userId"></span></p>
|
||
<p>Telegram ID: <span id="telegram_id"></span></p>
|
||
<p>Email: <span id="userEmail"></span></p>
|
||
|
||
<div class="mt-3">
|
||
<h6>События пользователя:</h6>
|
||
<div class="overflow-auto" style="max-height: 300px;">
|
||
<table class="table table-bordered table-striped" id="userEventsTable">
|
||
<thead>
|
||
<tr>
|
||
<th class="text-nowrap">Действие</th>
|
||
<th class="text-nowrap">Время</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="toggleBlockUser" class="btn btn-warning">Заблокировать</button>
|
||
<button id="deleteUser" class="btn btn-danger">Удалить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="addUserModal" class="modal fade" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="addUserModalLabel">Добавить пользователя</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="mb-3">
|
||
<label for="newUserId" class="form-label">Chat ID</label>
|
||
<input type="number" class="form-control" id="newUserId" min="1" maxlength="32" title="Введите числовое значение (максимум 32 символа)">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="newUsername" class="form-label">Telegram ID</label>
|
||
<input type="text" class="form-control" id="newUsername" pattern="@.*" title="Начните с символа @">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="newUserEmail" class="form-label">Email</label>
|
||
<input type="email" class="form-control" id="newUserEmail" pattern=".*@rtmis\.ru$" title="Должен содержать домен @rtmis.ru">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="addNewUser" class="btn btn-success">Добавить</button>
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="userEventsModal" tabindex="-1" role="dialog" aria-labelledby="userEventsModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="userEventsModalLabel">Действия пользователя</h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body" id="userEventsModalBody" style="max-height: 400px; overflow-y: auto;">
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{# Модальное окно для удаления пользователя #}
|
||
<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="deleteConfirmationModalLabel">Подтверждение удаления</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Для подтверждения удаления пользователя введите слово "УДАЛИТЬ" в поле ниже:</p>
|
||
<label for="confirmationText"></label><input type="text" id="confirmationText" class="form-control" placeholder="УДАЛИТЬ">
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||
<button type="button" class="btn btn-danger" id="confirmDeleteButton">Удалить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{# Модальное окно поиска#}
|
||
<div class="modal fade" id="searchUsersModal" tabindex="-1" aria-labelledby="searchUsersModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="searchUsersModalLabel">Поиск пользователей</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="mb-3">
|
||
<label for="searchTelegramId" class="form-label">Telegram ID</label>
|
||
<input type="text" class="form-control" id="searchTelegramId">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="searchEmail" class="form-label">Email</label>
|
||
<input type="email" class="form-control" id="searchEmail">
|
||
</div>
|
||
{# Поле ФИО будет добавлено позже #}
|
||
<div id="searchResults" style="display: none;">
|
||
<h3>Результаты поиска:</h3>
|
||
<table class="table table-bordered table-striped" id="searchResultsTableModal">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 8%;">Chat ID</th>
|
||
<th style="width: 15%;">Telegram ID</th>
|
||
<th style="width: 20%;">Email</th>
|
||
<th style="width: 12%;">Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="searchUsersButton" class="btn btn-primary">Поиск</button>
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
{% block scripts %}
|
||
{{ super() }}
|
||
<script src="{{ url_for('static', filename='js/users.js') }}"></script>
|
||
{% endblock %} |