Кексобукинг

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

Ссылки

• Деплой
• Репозиторий

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

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

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

1. Состояния страницы

• Неактивное состояние. При открытии страница находится в неактивном состоянии:
  • На месте карты отображается серый прямоугольник.
  • Форма и все ее интерактивные элементы заблокированы.
• Активное состояние. Загрузка и успешная инициализация карты (карта реализуется сторонней библиотекой Leaflet) переводит страницу в активное состояние. В активном состоянии страница позволяет:
  • Вносить изменения в форму и отправлять её на сервер.
  • После загрузки данных с сервера просматривать похожие объявления на карте, фильтровать их и уточнять подробную информацию о них, показывая для каждого из объявлений карточку.

2. Заполнение информации

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

3. Выбор адреса на карте

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

4. Сравнение с похожими объявлениями

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

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

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

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

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

---

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