315 lines
16 KiB
HTML
315 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Управление тестами бота</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
||
<link href="static/css/style.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand" href="#">
|
||
<i class="bi bi-robot"></i>
|
||
Управление тестами бота
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#" id="nav-tests">Тесты</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#" id="nav-categories">Категории</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#" id="nav-questions">Вопросы</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container-fluid mt-3">
|
||
<!-- Уведомления -->
|
||
<div id="notifications"></div>
|
||
|
||
<!-- Панель управления тестами -->
|
||
<div id="tests-panel" class="content-panel">
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<h2><i class="bi bi-list-check"></i> Управление тестами</h2>
|
||
<button class="btn btn-success" id="add-test-btn">
|
||
<i class="bi bi-plus-circle"></i> Добавить тест
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Фильтры -->
|
||
<div class="row mb-3">
|
||
<div class="col-md-4">
|
||
<select class="form-select" id="category-filter">
|
||
<option value="">Все категории</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<select class="form-select" id="status-filter">
|
||
<option value="">Все статусы</option>
|
||
<option value="true">Активные</option>
|
||
<option value="false">Неактивные</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<input type="text" class="form-control" id="search-input" placeholder="Поиск по названию...">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Таблица тестов -->
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-hover">
|
||
<thead class="table-dark">
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Название</th>
|
||
<th>Категория</th>
|
||
<th>Статус</th>
|
||
<th>Время (мин)</th>
|
||
<th>Вопросов</th>
|
||
<th>Создан</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tests-table-body">
|
||
<!-- Данные загружаются через JavaScript -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Панель управления категориями -->
|
||
<div id="categories-panel" class="content-panel" style="display: none;">
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<h2><i class="bi bi-tags"></i> Управление категориями</h2>
|
||
<button class="btn btn-success" id="add-category-btn">
|
||
<i class="bi bi-plus-circle"></i> Добавить категорию
|
||
</button>
|
||
</div>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-hover">
|
||
<thead class="table-dark">
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Название</th>
|
||
<th>Описание</th>
|
||
<th>Тестов</th>
|
||
<th>Создана</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="categories-table-body">
|
||
<!-- Данные загружаются через JavaScript -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Панель управления вопросами -->
|
||
<div id="questions-panel" class="content-panel" style="display: none;">
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<h2><i class="bi bi-question-circle"></i> Управление вопросами</h2>
|
||
<div>
|
||
<select class="form-select d-inline-block me-2" id="test-select" style="width: auto;">
|
||
<option value="">Выберите тест</option>
|
||
</select>
|
||
<button class="btn btn-success" id="add-question-btn" disabled>
|
||
<i class="bi bi-plus-circle"></i> Добавить вопрос
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="questions-content">
|
||
<div class="alert alert-info">
|
||
<i class="bi bi-info-circle"></i>
|
||
Выберите тест для просмотра и редактирования вопросов
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальные окна -->
|
||
|
||
<!-- Модальное окно для теста -->
|
||
<div class="modal fade" id="testModal" tabindex="-1">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="testModalTitle">Добавить тест</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="testForm">
|
||
<input type="hidden" id="testId">
|
||
<div class="mb-3">
|
||
<label for="testTitle" class="form-label">Название теста *</label>
|
||
<input type="text" class="form-control" id="testTitle" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="testDescription" class="form-label">Описание</label>
|
||
<textarea class="form-control" id="testDescription" rows="3"></textarea>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<label for="testCategory" class="form-label">Категория</label>
|
||
<select class="form-select" id="testCategory">
|
||
<option value="">Без категории</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="testTimeLimit" class="form-label">Время (минуты)</label>
|
||
<input type="number" class="form-control" id="testTimeLimit" min="1">
|
||
</div>
|
||
</div>
|
||
<div class="mb-3 form-check">
|
||
<input type="checkbox" class="form-check-input" id="testIsActive" checked>
|
||
<label class="form-check-label" for="testIsActive">Активный</label>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||
<button type="button" class="btn btn-primary" id="saveTestBtn">Сохранить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно для категории -->
|
||
<div class="modal fade" id="categoryModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="categoryModalTitle">Добавить категорию</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="categoryForm">
|
||
<input type="hidden" id="categoryId">
|
||
<div class="mb-3">
|
||
<label for="categoryName" class="form-label">Название категории *</label>
|
||
<input type="text" class="form-control" id="categoryName" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="categoryDescription" class="form-label">Описание</label>
|
||
<textarea class="form-control" id="categoryDescription" rows="3"></textarea>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||
<button type="button" class="btn btn-primary" id="saveCategoryBtn">Сохранить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно для вопроса -->
|
||
<div class="modal fade" id="questionModal" tabindex="-1">
|
||
<div class="modal-dialog modal-xl">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="questionModalTitle">Добавить вопрос</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="questionForm">
|
||
<input type="hidden" id="questionId">
|
||
<input type="hidden" id="questionTestId">
|
||
|
||
<div class="mb-3">
|
||
<label for="questionText" class="form-label">Текст вопроса *</label>
|
||
<textarea class="form-control" id="questionText" rows="3" required></textarea>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<label for="questionType" class="form-label">Тип вопроса</label>
|
||
<select class="form-select" id="questionType">
|
||
<option value="single_choice">Один ответ</option>
|
||
<option value="multiple_choice">Несколько ответов</option>
|
||
<option value="text_input">Текстовый ввод</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label for="questionOrder" class="form-label">Порядок *</label>
|
||
<input type="number" class="form-control" id="questionOrder" min="1" required>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label for="questionPoints" class="form-label">Баллы</label>
|
||
<input type="number" class="form-control" id="questionPoints" min="0" value="1">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="questionImage" class="form-label">Изображение</label>
|
||
<input type="file" class="form-control" id="questionImage" accept="image/*">
|
||
<div id="currentImage" style="display: none;" class="mt-2">
|
||
<img id="imagePreview" src="" alt="Текущее изображение" style="max-width: 200px;">
|
||
<button type="button" class="btn btn-sm btn-danger ms-2" id="removeImageBtn">
|
||
<i class="bi bi-trash"></i> Удалить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="answerOptions">
|
||
<h6>Варианты ответов</h6>
|
||
<div id="optionsList">
|
||
<!-- Варианты ответов добавляются динамически -->
|
||
</div>
|
||
<button type="button" class="btn btn-sm btn-outline-primary" id="addOptionBtn">
|
||
<i class="bi bi-plus"></i> Добавить вариант
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||
<button type="button" class="btn btn-primary" id="saveQuestionBtn">Сохранить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно подтверждения удаления -->
|
||
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Подтверждение удаления</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="deleteConfirmText">Вы уверены, что хотите удалить этот элемент?</p>
|
||
</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="confirmDeleteBtn">Удалить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Загрузка -->
|
||
<div id="loadingSpinner" class="text-center" style="display: none;">
|
||
<div class="spinner-border text-primary" role="status">
|
||
<span class="visually-hidden">Загрузка...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="static/js/api.js"></script>
|
||
<script src="static/js/app.js"></script>
|
||
</body>
|
||
</html> |