Skip to content

Программирование сервиса размещения объявлений о сдаче в аренду недвижимости в центре Токио "Keksobooking"

Notifications You must be signed in to change notification settings

daridubnik/keksobooking

 
 

Repository files navigation

Кексобукинг

Кексобукинг — сервис размещения объявлений о сдаче в аренду недвижимости в центре Токио. Пользователям предоставляется возможность размещать объявления о своей недвижимости или просматривать уже размещённые объявления.

Ссылки

Используемые технологии

  • Vanilla JavaScript
  • модули ECMAScript 2015
  • библиотека PristineJs (валидация формы)
  • библиотека noUiSlider (слайдер выбора цены жилья)
  • библиотеки Leaflet (отображение карты)
  • работа с сетью (протокол HTTP, формат данных JSON, Fetch API)
  • Node.js

Функциональность

  1. Состояния страницы
  • Неактивное состояние. При открытии страница находится в неактивном состоянии:
    • На месте карты отображается серый прямоугольник.
    • Форма и все ее интерактивные элементы заблокированы.
  • Активное состояние. Загрузка и успешная инициализация карты (карта реализуется сторонней библиотекой Leaflet) переводит страницу в активное состояние. В активном состоянии страница позволяет:
    • Вносить изменения в форму и отправлять её на сервер.
    • После загрузки данных с сервера просматривать похожие объявления на карте, фильтровать их и уточнять подробную информацию о них, показывая для каждого из объявлений карточку.
  1. Заполнение информации
  • Заполнение всей информации производится на одной странице без промежуточных переходов. Порядок заполнения информации не важен.
  • После заполнения всех данных, при нажатии на кнопку Опубликовать, все данные из формы, включая изображения, с помощью AJAX-запроса отправляются на сервер методом POST. На время выполнения запроса к серверу кнопка Опубликовать блокируется.
  • Страница реагирует на неправильно введённые значения в форму. Если данные, введённые в форму, не соответствуют ограничениям, форму невозможно отправить на сервер. При попытке отправить форму с неправильными данными, отправки не происходит, пользователю показываются ошибки для неверно заполненных полей.
  • При успешной отправке формы или её очистке страница, не перезагружаясь, переходит в состояние, когда:
    • все заполненные поля возвращаются в изначальное состояние;
    • фильтрация (состояние фильтров и отфильтрованные метки) сбрасывается;
    • метка адреса возвращается в исходное положение;
    • значение поля адреса корректируется соответственно исходному положению метки;
    • если на карте был показан балун, то он должен быть скрыт.
  • Если отправка данных прошла успешно, показывается соответствующее сообщение. Сообщение должно исчезать по нажатию на клавишу Esc и по клику на произвольную область экрана.
  • Если при отправке данных произошла ошибка запроса, показывается соответствующее сообщение, вся введённая пользователем информация сохраняется.
  1. Выбор адреса на карте
  • Приблизительный адрес квартиры указывается перемещением специальной метки по карте Токио. Содержимое поля адреса должно всегда соответствовать координатам метки.
  1. Сравнение с похожими объявлениями
  • Полный список похожих объявлений загружается после перехода страницы в активное состояние.
  • Если при загрузке данных с сервера произошла ошибка запроса, нужно показать соответствующее сообщение.
  • Каждое из объявлений показывается на карте в виде метки.
  • При нажатии на метку похожего объявления, показывается балун (предоставляется API карт) с подробной информацией об объявлении (далее — карточка). Разметка карточки должна создаваться на основе шаблонного элемента. Если данных для заполнения не хватает, потому что в объявлении отсутствует часть информации, соответствующий блок в карточке скрывается.
  • Нажатие на специальную метку выбора адреса не приводит к показу балуна.
  • В каждый момент времени может быть показан только один балун, то есть нажатие на метку другого похожего объявления должно скрывать текущий балун, если он показан, и показывать балун, соответствующий другому объявлению.
  • Открытую карточку с подробной информацией можно закрыть нажатием на крестик в углу балуна.
  • Объекты, расположенные неподалёку, можно фильтровать. Фильтрация производится при изменении значений соответствующих полей формы.
  • Как до изменения фильтров, так и при изменении фильтра, на карте должны показываться все подходящие варианты, но не более 10 меток (не считая специальной), независимо от выбранного фильтра. Показанные метки должны удовлетворять всем выбранным фильтрам.
  • Форма, с помощью которой производится фильтрация похожих объявлений, на момент открытия страницы заблокирована и становится доступной только после окончания загрузки всех похожих объявлений, которые, в свою очередь, начинают загружаться только после загрузки и успешной инициализации карты. Если при загрузке данных с сервера произошла ошибка запроса, то форма остаётся недоступной.
  • Отрисовка соответствующих выбранным фильтрам меток должна происходить не чаще, чем раз в полсекунды (устранение дребезга).
  • При изменении фильтров открытый балун (при наличии) должен быть скрыт.

Краткая инструкция по работе

Для начала работы у вас должент быть установлен Node.js

Основные команды для работы

  • Установка зависимостей - npm install
  • Сборка проекта - npm run build
  • Запуск локального сервера - npm start

HTML Academy

Репозиторий создан для обучения на интенсивном онлайн‑курсе «JavaScript. Профессиональная разработка веб-интерфейсов» от HTML Academy.

About

Программирование сервиса размещения объявлений о сдаче в аренду недвижимости в центре Токио "Keksobooking"

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 39.7%
  • CSS 33.0%
  • HTML 27.3%