# 🎨 Фронтенд для тестирования API

Простой, но функциональный веб-интерфейс для тестирования всех ендпоинтов Women's Safety App API.

## 🚀 Запуск

### Способ 1: Использование скрипта
```bash
bash run_frontend.sh
```

### Способ 2: Прямой запуск Python сервера
```bash
cd /home/trevor/dev/chat
python3 -m http.server 8888 --bind 127.0.0.1
```

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

1. **Откройте браузер** и перейдите на: http://localhost:8888/frontend_test.html

2. **Зарегистрируйтесь или войдите**:
   - Используйте вкладку "Регистрация" для создания новой учётной записи
   - Используйте вкладку "Вход" для входа с существующей учётной записью
   - После входа вы получите JWT токен

3. **Протестируйте API**:
   - **👤 Пользователи**: управление профилем и просмотр пользователей
   - **🚨 Алерты**: создание и просмотр экстренных алертов
   - **📅 Календарь**: добавление и просмотр событий календаря
   - **🔔 Уведомления**: отправка уведомлений
   - **❤️ Health**: проверка статуса всех сервисов

## 🎯 Основные возможности

### 🔐 Аутентификация
- ✅ Регистрация новых пользователей
- ✅ Вход в систему с получением JWT токена
- ✅ Сохранение токена в локальном хранилище
- ✅ Копирование токена в буфер обмена

### 👤 Управление пользователями
- ✅ Получение профиля текущего пользователя
- ✅ Просмотр всех пользователей
- ✅ Обновление информации профиля

### 🚨 Emergency System
- ✅ Создание экстренных алертов
- ✅ Просмотр существующих алертов
- ✅ Указание местоположения (широта/долгота)
- ✅ Выбор типа экстренного события

### 📅 Календарь здоровья
- ✅ Просмотр записей календаря
- ✅ Добавление новых записей
- ✅ Отслеживание цикла, настроения и энергии
- ✅ Указание даты и типа события

### 🔔 Уведомления
- ✅ Отправка уведомлений
- ✅ Установка приоритета
- ✅ Кастомизация заголовка и текста

### ❤️ Здоровье сервиса
- ✅ Проверка статуса всех микросервисов
- ✅ Мониторинг API Gateway
- ✅ Проверка доступности каждого сервиса

## 🎨 Интерфейс

### Левая панель
- Аутентификация и навигация
- Вход и регистрация
- Список всех ендпоинтов

### Правая панель
- Тестирование API
- 5 основных категорий функций
- Просмотр результатов в JSON формате

## 📱 Функции браузера

- **Адаптивный дизайн**: работает на мобильных устройствах
- **Красивый UI**: градиентный фон и современный дизайн
- **Подсветка кода**: JSON результаты отображаются в читаемом формате
- **Сохранение токена**: автоматическое сохранение в localStorage
- **Копирование**: быстрое копирование токена в буфер обмена

## 🔧 Примеры использования

### Регистрация
1. Откройте вкладку "Регистрация"
2. Заполните Email, имя пользователя, пароль
3. Нажмите "✍️ Зарегистрироваться"
4. После успешной регистрации используйте эти учётные данные для входа

### Создание алерта
1. Откройте вкладку "🚨 Алерты"
2. Установите координаты (по умолчанию Нью-Йорк)
3. Выберите тип алерта
4. Нажмите "🚨 Создать алерт"

### Проверка здоровья системы
1. Откройте вкладку "❤️ Health"
2. Нажмите "🔍 Проверить все сервисы"
3. Посмотрите статус всех 5 микросервисов

## 🌐 API URLs

По умолчанию фронтенд подключается к:
- **API Gateway**: http://localhost:8000
- **User Service**: http://localhost:8001
- **Emergency Service**: http://localhost:8002
- **Calendar Service**: http://localhost:8004
- **Notification Service**: http://localhost:8005

Для изменения IP адреса, отредактируйте переменную `API_BASE` в `frontend_test.html`

## 🚨 CORS

Убедитесь, что все микросервисы имеют правильно настроенный CORS для работы с фронтенда:
```python
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
```

## 📊 Технические детали

- **Язык**: HTML5 + CSS3 + Vanilla JavaScript
- **Размер**: ~15KB (один файл)
- **Зависимости**: нет (чистый JavaScript)
- **Браузер**: все современные браузеры (Chrome, Firefox, Safari, Edge)

## ✅ Протестировано

- ✅ Регистрация и вход
- ✅ Управление профилем
- ✅ Создание и просмотр алертов
- ✅ Управление календарём
- ✅ Отправка уведомлений
- ✅ Проверка здоровья сервисов
- ✅ Сохранение токена
- ✅ CORS запросы

## 🎓 Образовательная ценность

Этот фронтенд показывает:
- Как работать с REST API
- Как использовать JWT токены
- Как обрабатывать асинхронные операции (fetch API)
- Как управлять состоянием браузера (localStorage)
- Как создавать адаптивный UI без фреймворков

## 📝 Лицензия

MIT License - свободен для использования и модификации

---

**Создано**: 2025-12-13  
**Версия**: 1.0.0  
**Статус**: Полностью функционален ✅