# 🎯 Полная интеграция Adel Site с API

## ✅ Завершенные функции

### 🔐 **Аутентификация (AuthTab)**
```
✅ Регистрация новых пользователей
✅ Вход за существующий аккаунт
✅ Сохранение JWT токена
✅ Обработка ошибок и валидация
```

**Endpoints:**
- `POST /api/login` - Вход
- `POST /api/login/register` - Регистрация

---

### 🏠 **Главная страница (HomeTab)**
```
✅ Привет, [Имя пользователя]!
✅ Быстрые ссылки на разделы
✅ Промо-баннер со скидками
✅ Категории поиска
```

---

### 📋 **Каталог (CatalogTab)**
```
✅ Загрузка всех залов с API
✅ Сортировка: по названию, цене ↑/↓
✅ Фильтрация по макс. цене (range slider)
✅ Добавление в корзину с дата/временем
✅ Функция избранного (❤️ кнопка)
✅ Загрузка избранного при входе
```

**Endpoints:**
- `GET /api/halls` - Получить все залы
- `GET /api/favorites` - Получить избранное пользователя (JWT)
- `POST /api/favorites` - Добавить в избранное (JWT)

**Функция избранного:**
```javascript
// Требует авторизации
Headers: { Authorization: "Bearer {token}" }
Body: { hall_id: number, photographer_id: null }
```

---

### 🔍 **Поиск (SearchTab)**
```
✅ Поиск по названию и описанию
✅ Фильтрация по категориям
✅ Клиентский поиск (быстрый)
✅ Отображение результатов в реальном времени
```

**Как работает:**
1. Загружает все залы при монтировании
2. Фильтрует по названию/описанию как пользователь печатает
3. Фильтрует по выбранной категории

---

### 🛒 **Корзина (CartTab)**
```
✅ Добавление/удаление товаров
✅ Увеличение/снижение количества часов
✅ Автоматический расчет суммы
✅ Сохранение бронирования через API
✅ Красный бэйдж с количеством товаров
✅ Проверка авторизации перед оплатой
```

**Процесс оформления:**
1. Нажимает "💳 Перейти к оплате"
2. Система проверяет наличие JWT токена
3. Для каждого товара в корзине создается бронирование
4. Вызывает `POST /api/booking` для каждого товара
5. При успехе очищает корзину

**API запрос:**
```javascript
POST /api/booking
Headers: {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer {token}'
}
Body: {
  clientId: number,
  hallId: number,
  startTime: ISO string,
  endTime: ISO string,
  totalCost: number,
  status: 'pending'
}
```

---

### 👤 **Профиль (ProfileTab)**
```
✅ Отображение имени пользователя
✅ Вкладка "Профиль" с меню
✅ Вкладка "Мои бронирования" со списком
✅ Статусы бронирований
✅ Форматирование дат
✅ Выход из аккаунта
```

**Вкладка "Профиль":**
- Мои бронирования
- Способы оплаты
- Настройки
- Выход

**Вкладка "Мои бронирования":**
- Список всех бронирований пользователя
- Статус каждого (⏳ Ожидание, ✅ Подтверждено и т.д.)
- Дата начала и конца
- Общая стоимость

**Endpoints:**
- `GET /api/booking` - Получить все бронирования

---

### 🧭 **Основное приложение (App.vue)**
```
✅ Нижняя навигация для мобилей (5 вкладок)
✅ Боковая навигация для ПК
✅ Переключение между вкладками
✅ Красный бэйдж на иконке корзины
✅ Проверка авторизации при загрузке
✅ Загрузка списка залов
```

---

## 📡 Полный список API endpoints

| Метод | Endpoint | Auth | Описание |
|-------|----------|------|----------|
| `POST` | `/api/login` | ❌ | Вход пользователя |
| `POST` | `/api/login/register` | ❌ | Регистрация |
| `GET` | `/api/halls` | ❌ | Все залы |
| `GET` | `/api/services` | ❌ | Все услуги |
| `GET` | `/api/booking` | ❌ | Все бронирования |
| `POST` | `/api/booking` | ✅ | Создать бронирование |
| `PATCH` | `/api/booking/:id` | ✅ | Обновить бронирование |
| `DELETE` | `/api/booking/:id` | ✅ | Удалить бронирование |
| `GET` | `/api/favorites` | ✅ | Получить избранное |
| `POST` | `/api/favorites` | ✅ | Добавить в избранное |

---

## 🔑 Токен JWT

**Где сохраняется:** `localStorage.jwt_token`

**Структура:** `{id: number, firstName: string}`

**Как использовать:**
```javascript
// Отправка
Headers: { Authorization: `Bearer ${token}` }

// Декодирование на клиенте
const payload = JSON.parse(atob(token.split('.')[1]));
```

---

## 🚀 Как запустить и тестировать

### 1. Запустить API сервер
```bash
cd Api
npm install
node app.js
```
✅ Сервер на `http://localhost:3000`

### 2. Запустить фронтенд
```bash
cd Site
npm install
npm run dev
```
✅ Фронтенд на `http://localhost:5173` (или другой порт)

### 3. Тестировать функции

**Регистрация:**
1. Откройте приложение
2. Перейдите на вкладку "👤 Профиль"
3. Нажмите "Нет аккаунта? Регистрация"
4. Заполните форму и создайте аккаунт

**Просмотр залов:**
1. Перейдите на вкладку "📋 Каталог"
2. Используйте фильтры и сортировку
3. Нажмите ❤️ для добавления в избранное
4. Нажмите "🛒 Добавить" для добавления в корзину

**Поиск:**
1. Перейдите на вкладку "🔍 Поиск"
2. Введите название или описание
3. Выбирайте категории
4. Смотрите результаты в реальном времени

**Оформление заказа:**
1. Добавьте несколько залов в корзину
2. Перейдите на вкладку "🛒 Корзина"
3. Нажмите "💳 Перейти к оплате"
4. Проверьте консоль браузера (F12) для результата API вызова

**Профиль:**
1. Авторизуйтесь
2. Перейдите на вкладку "👤 Профиль"
3. Смотрите список ваших бронирований
4. Нажмите "Выход" для выхода

---

## ⚙️ Конфигурация

**API URL:** `http://localhost:3000`
(Может быть изменен в каждом компоненте)

**Порт фронтенда:** автоматически определяется Vite

---

## 🎨 Дизайн

- **Основной цвет:** #2BD84C (зеленый)
- **Фон:** #FFFFFF (белый)
- **Вторичный фон:** #F5F5F5 (серый)
- **Текст:** #000000 (черный)
- **Ошибки:** #FF4B4B (красный)

---

## 📝 Важные примечания

1. **Корзина** хранится в памяти браузера - очищается при перезагрузке страницы
2. **Поиск** использует клиентскую фильтрацию для быстроты
3. **Избранное** требует авторизации и регулярно загружается
4. **Image fallback** использует placeholder при ошибке загрузки
5. **Даты** в бронированиях форматируруются в локали ru-RU

---

## 🐛 Отладка

Откройте DevTools (F12) для:
- Просмотра сетевых запросов (Network)
- Проверки консоли (Console)
- Просмотра localStorage (Application → Storage)
- Анализа ошибок

---

## ✨ Будущие улучшения

- [ ] Локальное хранилище для корзины
- [ ] Система прогрессивной загрузки
- [ ] WebSocket для обновления в реальном времени
- [ ] Загрузка фото профиля
- [ ] Расширенная фильтрация
- [ ] Система оценок и отзывов
- [ ] Уведомления о статусе бронирования
- [ ] Интеграция платежей (Stripe, Yandex.Kassa)