Форма создания ДТП с привязкой к адресу
Работая над проектом, задался вопросом, а какой должна быть форма фиксации происшествия на дороге, какие поля, расстановка и как пользователю быстро выбрать место?
Итак, давайте обо всем по порядку. В посте еще будут рассуждения о проекте.
Как оно все бывает в жизни, вы едете на машине и увидели происшествие, сфотографировали или просто проехали мимо, а потом, в лучшем случае, выложили фото у себя в соц. сети или группе города. Но эта информация может быть очень полезна другим жителям твоего региона. Возможно, кто-то ищет свидетелей происшествия, а кто-то хочет заранее знать какие места объезжать по пути домой.
Было решено разработать форму с минимальным набором реквизитов: дата происшествия, адрес происшествия, описание, тип ДТП (планирую убрать это поле, практика показала, что оно не несет особой пользы), фото- и видеоматериалы. Дополнительно были еще добавлены 3 поля: ссылка на видео, теги (чтобы пользователи сами могли вести классификацию) и ссылка на первоисточник.
С заполнением даты все просто: открывается форма с текущей датой, если нужно, меняем. Одна из непростых задач — это выбор места происшествия. За основу была взята Яндекс.Карты, и привязал к ним скрипт геолокации. Когда пользователь открывает форму, определяется местоположение двумя способами: по IP-адресу и вычисленное средствами браузера, затем максимально приближенное попадает в результат. Как показала практика, для 9 из 10 запросов местоположение определяется верно. Если место определено, то автоматом заполняется заголовок и адрес. Благодаря такому функционалу мы смогли упростить задачу ввода адреса.
Следующим этапом нужно было привязать удобную форму загрузки материалов, простые input`ы вешать и пост запросом отправлять на сервер не очень удобно. Пробовал использовать стандартный компонент от Битрикс — main.file.input. Но он не адаптивный и не выводит превью для изображений.
Было решено использовать модуль dropzone в связке с API Битрикс, т.к. проект разрабатывается на этой платформе. В итоге dropzone закрыл 2 проблемы: пользователь видит, что загружает, и может управлять контентом, и мы ускоряем форму создания, т.к кликнув по кнопке "Добавить ДТП" мы не будем все медиа отправлять на сервер, а передаем только идентификаторы загруженных файлов.
Благодаря автоматическому определению местоположения и удобной формы загрузки, пользователь быстро может добавить информацию на сайт. По сути, нужно только открыть форму и загрузить материалы.
Для разработчиков на гите выложил компоненты: форма создания и dropzone + API Bitrix
Социальная карта происшествий на дорогах — https://dtpmap.ru/
На этом все, всем спасибо за внимание. Заранее извиняюсь, если текст получился "сухой", больше привык с компиляторами разговаривать на их языке.
