7. Добавление меток на карту и информация о транспорте - qwsnxnjene/courier-transport GitHub Wiki

Добавление меток на карту (MapView.js)

• Компонент MapView отображает карту с помощью @pbe/react-yandex-maps.
• При монтировании отправляется запрос на http://localhost:3031/api/transport для получения списка транспорта.
• Если сервер не отвечает или база пуста, используются тестовые данные (3 объекта с координатами, типом, зарядом и ценой).
• Для каждого транспорта создаётся метка (Placemark) с координатами (latitude, longitude).
• При клике на метку вызывается отображение подробной информации о выбранном транспорте.

Информация о транспорте (ScooterDetails.js)

• Компонент ScooterDetails показывает подробности по выбранному транспорту:
  • Тип
  • Заряд батареи
  • Стоимость за минуту
• Если транспорт свободен, доступна кнопка "Забронировать".
• После бронирования появляется кнопка "Завершить поездку".
• Завершение поездки генерирует случайные данные поездки и оплаты, которые сохраняются в localStorage (история поездок и оплат).
• После завершения показывается сообщение об успешном завершении и кнопка "Забронировать снова".

Взаимодействие между компонентами

• При выборе метки на карте открывается модальное окно с подробной информацией о транспорте и возможностью начать/завершить поездку.