cursach/AdelApp-master/Site/COMPLETE_API_GUIDE.md

🎯 Полная интеграция 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)

Функция избранного:

// Требует авторизации
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 запрос:

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}

Как использовать:

// Отправка
Headers: { Authorization: `Bearer ${token}` }

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

---

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

1. Запустить API сервер

cd Api
npm install
node app.js

✅ Сервер на http://localhost:3000

2. Запустить фронтенд

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)