# Управляющее приложение для Telegram бота

Веб-интерфейс для управления тестами Telegram бота.

## Возможности

- ✅ Управление тестами (создание, редактирование, удаление)
- ✅ Управление категориями тестов
- ✅ Управление вопросами и вариантами ответов
- ✅ Загрузка изображений к вопросам
- ✅ Фильтрация и поиск
- ✅ Современный адаптивный интерфейс

## Структура проекта

```
app.control-bot/
├── main.py              # Основное приложение с веб-сервером
├── web/                 # Веб-интерфейс
│   ├── index.html       # Главная страница
│   └── static/
│       ├── css/
│       │   └── style.css    # Стили
│       └── js/
│           ├── api.js       # Работа с API
│           └── app.js       # Основная логика приложения
├── pyproject.toml       # Конфигурация проекта
└── README.md           # Документация
```

## Запуск

### Предварительные требования

1. **Запущенный API сервер** на `http://localhost:8000`
   ```bash
   cd ../api
   python run_api.py
   ```

2. **Python 3.12+** (базовые библиотеки)

### Запуск веб-интерфейса

```bash
cd app.control-bot
python main.py
```

Веб-интерфейс будет доступен по адресу: `http://localhost:3000`

Браузер откроется автоматически через 2 секунды после запуска.

## Использование

### Управление тестами

1. **Создание теста:**
   - Нажмите "Добавить тест"
   - Заполните название и описание
   - Выберите категорию (опционально)
   - Установите лимит времени (опционально)
   - Выберите статус (активный/неактивный)

2. **Редактирование теста:**
   - Нажмите кнопку "Редактировать" в строке теста
   - Измените необходимые поля
   - Сохраните изменения

3. **Удаление теста:**
   - Нажмите кнопку "Удалить" в строке теста
   - Подтвердите удаление

### Управление категориями

1. Перейдите на вкладку "Категории"
2. Используйте кнопку "Добавить категорию" для создания новой
3. Редактируйте или удаляйте существующие категории

### Управление вопросами

1. Перейдите на вкладку "Вопросы"
2. Выберите тест из выпадающего списка
3. Добавляйте вопросы с помощью кнопки "Добавать вопрос"

#### Типы вопросов:

- **Один ответ** - радиокнопки, один правильный ответ
- **Несколько ответов** - чекбоксы, может быть несколько правильных
- **Текстовый ввод** - пользователь вводит ответ текстом

#### Работа с изображениями:

- Загружайте изображения к вопросам
- Поддерживаются форматы: JPG, PNG, GIF, WebP
- Изображения сохраняются в базе данных

## API Integration

Веб-интерфейс работает с API по адресу `http://localhost:8000/api/v1`

### Используемые эндпоинты:

- `GET/POST /tests` - Управление тестами
- `GET/POST /test-categories` - Управление категориями
- `GET/POST /questions` - Управление вопросами
- `GET/POST /answer-options` - Управление вариантами ответов
- `POST /images/upload` - Загрузка изображений
- `GET /images/{id}` - Получение изображений

## Технологии

- **Backend**: Python (http.server для статических файлов)
- **Frontend**: HTML5, CSS3, JavaScript (ES6+)
- **UI Framework**: Bootstrap 5.3
- **Icons**: Bootstrap Icons
- **API**: RESTful API с JSON

## Особенности

- Полностью адаптивный дизайн
- Валидация форм на клиентской стороне
- Уведомления об операциях
- Загрузка с индикаторами прогресса
- Подтверждение удаления
- Автоматическое обновление данных
- Поддержка изображений
- Фильтрация и поиск

## Устранение неполадок

### API сервер не запущен
```
❌ Ошибка: Cannot connect to API server
```
**Решение**: Запустите API сервер в папке `../api`

### Порт уже используется
```
❌ Ошибка: Порт 3000 уже используется
```
**Решение**: Остановите процесс на порту 3000 или измените порт в `main.py`

### Проблемы с CORS
Если возникают ошибки CORS, убедитесь, что в конфигурации API разрешены запросы с `http://localhost:3000`

## Разработка

Для изменения порта веб-сервера отредактируйте `main.py`:

```python
web_interface = WebInterface(port=3001)  # Изменить порт
```

Для изменения адреса API отредактируйте `web/static/js/api.js`:

```javascript
const API_BASE_URL = 'http://localhost:8001/api/v1';  // Изменить адрес
```