Студент: Максим Рябов.
«Шесть городов» — сервис для путешественников, не желающих переплачивать за аренду жилья. Выбирайте один из шести популярных городов для путешествий и получайте актуальный список предложений по аренде. Подробная информация о жилье, показ объекта на карте, а также лаконичный интерфейс сервиса помогут быстро выбрать оптимальное предложение.
Приложение состоит из нескольких страниц:
- Main (/);
- Sign In (/login);
- Favorites (/favorites);
- Room (/offer).
Страница Favorites доступна только авторизованным пользователям.
Если пользователь не авторизирован, или сессия истекла, то при попытке перехода к приватной странице выполняется редирект на страницу «Sign In» (/login).
В шапке каждой страницы отображается ссылка на страницу «Sign In» (если пользователь не авторизирован) или email пользователя (если пользователь авторизирован).
Клик по email пользователя в шапке выполняет переход на страницу «Favorites» (/favorites).
На главной странице отображается список городов, для которых возможно запросить предложения по аренде.
Список городов формируется на основании данных, полученных с сервера. Всегда отображается не больше 6-ти городов.
После загрузки приложения сразу активен первый в списке город и по нему загружены предложения по аренде. На карте предложения отображаются в виде синих маркеров.
При смене города выполняется обновление области с предложениями и картой.
В заголовке списка предложений отображается количество доступных предложений. Пример корректного заголовка: 310 places to stay in Amsterdam.
Пользователь может менять сортировку списка предложений. Варианты сортировки:
- Popular. Вариант по умолчанию. Предложения отображаются в порядке, полученном с сервера.
- Price: low to high. От дорогих к дешёвым.
- Price: high to low. От дешёвых к дорогим.
- Top rated first. От высокого рейтинга к низкому.
При смене варианта сортировки список предложений перерисовывается. Карта также обновляется в соответствии с обновлённым списком предложений.
Каждая карточка в списке предложений содержит информацию:
- Изображение. Фотография жилья.
- Премиальность. Метка «Premium».
- Стоимость за ночь. Стоимость всегда отображается в евро.
- Заголовок. Краткое описание предложения. Например: «Beautiful & luxurious apartment at great location».
- Тип жилья. Одно из нескольких значений: apartment, room, house, hotel.
- Рейтинг. Оценка выводится в виде закрашенных звезд. Максимальное количество звёзд — 5.
Клик по заголовку (title) выполняет переход на страницу с подробной информацией о предложении. Адрес страницы с просмотром подробной информации выглядит следующим образом: /offer/:id, где id идентификатор предложения. Например, /offer/1704.
Клик по изображению предложения выделяет на карте маркер, который соответствует предложению оранжевым цветом.
Если предложения отсутствуют, то в списке отображается надпись «No places to stay available». См. пример соответствующей страницы макета.
Все предложения выбранного города отображаются на карте в виде синих маркеров.
При клике по изображению в карточке, карта фокусируется на маркере предложения, а сам маркер становится оранжевым.
На странице предложения (/offer) представлена расширенная информация об объекте для аренды:
- Фотографии. Выводится до 6-ти изображений.
- Заголовок. Краткое описание предложения, например: «Beautiful & luxurious studio at great location».
- Подробное описание.
- Премиальность.
- Тип жилья. Одно из предопределённых значений: apartment (Apartment), room (Private Room), house (House), hotel (Hotel).
- Рейтинг. Оценка предложения выводится в виде закрашенных звезд и среднего бала (например, 4.8). Максимальное количество звёзд — 5. Оценка пользователя округляется в большую сторону. Например, оценка 3.1 округляется до 3-х. Оценка 4.5 округляется до 5.
- Количество спален. Например, 3 Bedrooms.
- Максимальное количество гостей. Например, Max 4 adults.
- Стоимость аренды за ночь. Сумма всегда отображается в евро.
- Список бытовых предметов в квартире (Wifi, Heating, Kitcher, Cabel TV и т. д.);
- Информация о хозяине: аватарка, имя, отметка super (звёздочка возле аватарки).
Кнопка «Избранное». Клик по кнопке «Избранное» добавляет карточку в избранное. Если пользователь не авторизирован, то выполняется редирект на страницу Sign In.
Отзывы пользователей. В заголовке блока отображается общее количество отзывов. Например: Reviews 1.
Для авторизированных пользователей отображается форма отправки нового отзыва.
Под списком отзывов отображается карта с предложениями неподалёку. На карте отмечено не больше 3-х предложений. Маркеры предложений выделены синим. Маркер текущего предложения выделен оранжевым.
Карточки представленных предложений отображаются сразу под картой и содержат тот же набор информации, что и на главной странице.
Каждый отзыв содержит:
- Аватар автора.
- Имя автора.
- Рейтинг. Оценка выводится в виде закрашенных звезд. Максимальное количество звёзд — 5.
- Дата отзыва в формате: Месяц Год. Например: April 2019.
- Текст отзыва.
В заголовке блока отображается общее количество отзывов.
На страницу выводится не больше 10 отзывов.
Отзывы должны быть отсортированы от новых к старым (новые сверху).
Форма отправки отзыва отображается только для авторизованных пользователей.
Пользователь выставляет рейтинг. Рейтинг выставляется от 1 до 5. Для выбора рейтинга пользователь отмечает соответствующее количество звёзд.
Текст отзыва должен содержать от 50 символов.
Пока пользователь не выбрал оценку и не ввёл текст допустимой длины, кнопка отправки отзыва не активна.
В случае успешной отправки отзыва форма очищается.
В случае возникновения ошибки следует уведомить пользователя. Способ отображения ошибки остаётся на усмотрение разработчика.
Страница «Sign in» доступна по адресу /login. Для входа в сервис пользователь вводит логин (email) и пароль. Поскольку у сервиса отсутствует возможность регистрации, логин и пароль могут быть любыми. Поле «логин» должен вводится корректный email.
Все необходимые данные загружаются с сервера.
Сервер доступен по адресу: https://es31-server.appspot.com/six-cities.
В случае недоступности сервера отображается информационное сообщение. Дизайн сообщения остаётся на усмотрение разработчика.
Сервер принимает данные в виде JSON объекта.
Запросы должны предоставлять доступ к кукам. В случае если запросы отправляются через axios, то должен быть проставлен параметр withCredentials: true.
GET /hotels
Коды ответов:
- 200 ОК
GET /favorite
Коды ответов:
- 200 ОК
- 403 Forbidden (в случае если не пройдена авторизация)
POST /favorite/: hotel_id/: status
Параметры:
- :hotel_id — ID отеля, который нужно добавить в избранное
- :status — значения могут быть 1 или 0. 1 добавляет отель в избранное, 0 удаляет
Коды ответов:
- 200 ОК
- 403 Forbidden (в случае если не пройдена авторизация)
GET /comments/: hotel_id
Коды ответов:
- 200
- 400 Bad request
POST /comments/: hotel_id
Коды ответов:
- 200 ОК
- 400 Bad Request
- 403 Forbidden (в случае если не пройдена авторизация)
POST /login
Коды ответов:
- 200 ОК
- 400 Bad Request
GET /login
Коды ответов:
- 200 ОК
- 403 Forbidden (в случае если не пройдена авторизация)
Репозиторий создан для обучения на профессиональном онлайн‑курсе «JavaScript, уровень 3» от HTML Academy.