🔗 Интеграция фронтенда с API

✅ Реализованные функции

1. 🔐 Авторизация (AuthTab)

✅ Регистрация: POST /api/login/register
✅ Вход: POST /api/login
✅ Сохранение JWT токена в localStorage
✅ Автоматическая проверка сессии

Данные отправляются:

{
  login: string,
  password: string,
  firstName?: string,
  lastName?: string,
  phone?: string,
  email?: string
}

Ответ: JWT токен сохраняется как jwt_token

2. 📋 Каталог (CatalogTab)

✅ Загрузка всех залов: GET /api/halls
✅ Сортировка: по названию, цене (возрастание/убывание)
✅ Фильтрация: по максимальной цене
✅ Добавление в корзину с указанием даты/времени
✅ Функционал избранного: GET/POST /api/favorites
✅ Кнопка сердца для добавления в избранное (требует авторизации)

API запросы:

// Добавить в избранное
POST /api/favorites
Headers: { Authorization: "Bearer {token}" }
Body: { hall_id: number, photographer_id: null }

// Получить избранное
GET /api/favorites
Headers: { Authorization: "Bearer {token}" }

3. 🔍 Поиск (SearchTab)

✅ Клиентский поиск по названию и описанию залов
✅ Фильтрация по категориям
✅ Отображение результатов в реальном времени
✅ Загрузка всех залов при монтировании

Как работает:

При загрузке запрашиваются все залы: GET /api/halls
Поиск и фильтрация выполняются на клиенте
Результаты обновляются при вводе текста

4. 🛒 Корзина (CartTab)

✅ Добавление/удаление товаров
✅ Изменение количества часов
✅ Расчет итоговой суммы
✅ Сохранение бронирований: POST /api/booking (требует авторизации)
✅ Показ красного бэйджа с количеством товаров

Бронирование отправляется:

POST /api/booking
Headers: {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer {token}'
}
Body: {
  clientId: number,      // из JWT токена
  hallId: number,
  startTime: ISO string,
  endTime: ISO string,
  totalCost: number,
  status: 'pending'
}

5. 👤 Профиль (ProfileTab)

✅ Отображение данных пользователя из JWT
✅ Меню с функциями (в разработке)
✅ Выход из аккаунта (удаление токена)

JWT структура:

{
  id: number,        // client_id
  firstName: string
}

6. 🏠 Главная (HomeTab)

✅ Динамическое приветствие с именем пользователя
✅ Быстрые ссылки на разделы
✅ Промо-баннер со скидкой

📡 API Endpoints

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

🔑 Важные детали

JWT Token

Сохраняется в localStorage.jwt_token
Используется як Bearer ${token} в headers
Содержит id (client_id) и firstName
Может быть декодирован на клиенте: token.split('.')[1] → atob() → JSON.parse()

Обработка ошибок

При 401 (неавторизован): предложить вход
При 500 (ошибка сервера): показать сообщение об ошибке
Все ошибки логируются в console

Загрузка изображений

Путь к изображениям: /HallsImages/${studio.imageURL}
Базовый URL: http://localhost:3000
Fallback при ошибке загрузки: placeholder из via.placeholder.com

🚀 Как запустить

Frontend:

cd Site
npm install
npm run dev

Backend:

cd Api
npm install
node app.js

Backend запустится на http://localhost:3000 Frontend на http://localhost:5173 (Vite)

📝 Примечания

Поиск - работает только с загруженными на клиента залами
Избранное - требует авторизации и JWT токена
Бронирование - автоматически создаёт start_time и end_time на основе количества часов
Корзина - сохраняется в памяти браузера (обнуляется при перезагрузке)

🎯 Возможные улучшения

Локальное хранилище для корзины (localStorage/IndexedDB)
История просмотра залов
Фильтрация по категориям на сервере
Система рейтинга и отзывов
Расширенный поиск с фильтрами
Уведомления о статусе бронирования

API_INTEGRATION.md 6.3 KB Permanentný odkaz História Raw