Создать форму в несколько шагов. JS, AJAX, API, Bitrix, curl

6 000 руб. за проект
24 февраля 2020, 16:05 • 2 отклика • 49 просмотров
Работы с ajax, localStorage, API Places (Google Maps).
Для создания формы либо vue, либо vanilla, либо что-то, что может предложить битрикс. Минимальное количество доп. библиотек.
Все заполненные поля должны сохраняться в localstorage, чтобы при перезагрузке значения не пропадали.

Форма создания маршрута путешествий с описанием для каждого города.
Несколько шагов:
1. Заполнение точек маршрута.
Поле для ввода города. После ввода двух символов делаем запрос в Place Autocomplete (во всех запросах используем sessiontoken).
Пользователь может выбрать город только из подсказок.
Пример запроса:
https://maps.googleapis.com/maps/api/place/autocomplete/json?input=ГОРОД&types=(cities)&key=КЛЮЧ&sessiontoken=НОМЕРСЕССИИ

Если пользователь выбрал город, запоминаем его название и place_id в localStorage.
Показываем кнопку (+) и новое поле для ввода следующего города
В итоге должен получиться интерфейс похожий на составление маршрута в Google Maps:
https://www.google.ru/maps/dir/%D0%91%D0%B0%D1%80%D0%BD%D0%B0%D1%83%D0%BB/%D0%91%D0%B0%D0%BB%D0%B0%D1%88%D0%B8%D1%85%D0%B0,+%D0%9C%D0%BE%D1%81%D0%BA%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F+%D0%BE%D0%B1%D0%BB./%D0%A1%D1%83%D1%80%D0%B3%D1%83%D1%82/@57.1016211,51.9167449,5z/data=!3m1!4b1!4m20!4m19!1m5!1m1!1s0x42dda1e8c72eeeab:0xb0e7bbef8d87b503!2m2!1d83.7697833!2d53.3547792!1m5!1m1!1s0x414acc71afc70c31:0x26a24d6ca774c494!2m2!1d37.9679867!2d55.7981904!1m5!1m1!1s0x43739773194f954d:0x231da0789201f147!2m2!1d73.3845471!2d61.2559503!3e0?hl=ru&authuser=0

После ввода первого города также должна появиться кнопка создать маршрут.
ajax создаем новый раздел в инфоблоке, для каждого города через API получаем информацию, название на английском, регион, страну, координаты. Сохраняем в highload блоки. Чтобы в будущем не запрашивать эту информацию.
Создаем Элементы инфоблока для каждого точки в маршруте (города). Переход на второй шаг

2. Данные маршрута
Название, краткое описание, дата поездки (месяц и год)
Кнопка перейти к описанию первого города. При переходе между шагами вся информация сохраняется в ИБ

Описание городов
Показываются поля: сколько провели времени в городе — ввод числа и выпадающий список (часы, дни), транспорт (множественная привязка к другому инфоблоку) и поле*, кафе/еда*, магазины*, время работы заведений (множественное поле), общее описание*, магазины*.
Поля отвеченные (*) это WYSIWYG поля, с возможностью сделать текст жирным, курсив, подчеркивание и загрузить изображение. Изображения должны сохраняться через CFile.
На выбор можно взять один редактор из списка trix или tiptap. Другие обсуждаются.

После полей города, кнопка перейти к следующему городу, в последнем городе должна быть кнопка завершить создание.

Бэкенд код может быть не оптимизированным, не оформленным в модуль или компонент, но рабочим и с комментариями.
JS код же, напротив, максимально аккуратным. Стили можно никакие не писать, если события, то вешаться на классы с префиксом "js-". Всё может быть страшным, но работать.