C80Push

Добавляет функционал дилеров и офисов продаж. Это ActiveAdmin plugin. Использует Bootstrap и Bootstrap Select: как во frontend, так и в backend.

Содержит модели:

  • Регион (habtm Dealers)
  • Дилер (has_many Offices)
  • Офис (belongs_to Dealer)

Добавляет пункт меню:

  • Дилеры
    • Список дилеров
    • Регионы

Usage

Available helpers:

  • c80_push_render_page_dealers: отрисует js-компонент с yandex картой и фильтруемым, кликабельным списком офисов слева.

Installation

Add this line to your application's Gemfile:

gem 'c80_push'

And then execute:

$ bundle
$ rake db:migrate
$ rails generate c80_push:install
$ rake db:seed:c80_push_02_fill_presets

Add this line to host app's application_controller.rb:

   helper C80Push::Engine.helpers

Add these lines to host app's active_admin.js.coffee:

#= require bootstrap
#= require bootstrap-select
#= require c80_push_backend

Add these lines to host app's 'application.js.coffee':

#= require bootstrap
#= require bootstrap-select
#= require c80_push

Add these lines to host app's 'application.scss':

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-select";
@import "c80_push";

Customization

Т.к. исходя из ТЗ было не ясно, есть ли у Офисов такие поля, как сайт, email и регион, они были добавлены (на всякий случай), и поля сделаны необязательными. И их можно "отключить", добавив в host app такой файл app/assets/stylesheets/custom/backend/c80_push/dealers.scss:

/* у Офисов скроем неиспользуемые поля */
body.admin_dealers {
  &.edit, &.new {

    li[id*='dealer_offices_attributes_'] {
      &[id*='site_input'] {
        display: none;
      }
      &[id*='email_input'] {
        display: none;
      }
      &[id*='regions_input'] {
        display: none;
      }
    }
  }
}

А сам файл подключить в active_admin.scss:

@import "custom/backend/**/*";

TODO

  • [X] Добавить валидацию поля gps модели Office.

    • [ ] Попробовать подключить к backend client side validation.
  • [X] Реализовать функционал цветных маркеров.

  • [ ] ymaps: реализовать кластеризацию (пример из документации).

  • [ ] Вынести *.rb файлы, подлежащие кастомизации в templates (предварительно определив, что может еще быть кастомизировано), наваять инсталлятор, отметить это в README.

    • [X] seeds
  • [ ] BUG: safari не дружит с css calc: найти другое решение. См. стили.

Процесс разработки JS функционала

Теперь пора заняться js.

  • [X] Прикрутить selectpicker: выводить туда только те регионы, в которых есть дилеры, у которых есть офисы.

  • [X] Вставить заголовок "Выберите Регион".

  • [X] При первом входе на карту: должны отражаться все офисы.

    • [X] Должен рассчитываться bounding rectangle и все точки должны быть видны на рабочей области (никто не должен выходить за рамки)
  • [ ] При наведении/клике на точку на карте:

    • [X] должен появляться хинт с деталями офиса
    • [ ] слева должен подсвечиваться соответствующий .li_office.
  • [X] При наведении/клике на .li_office - должна подсвечиваться соответствующая точка на карте.

  • [X] Реализовать функционал цветных маркеров.

  • [X] Когда меняется регион:

    • [X] Должны отобразиться релевантные .li_office
    • [X] Должны отобразиться релевантные точки на карте.

Процесс добавления функционала "Цвет маркеров дилеров"

  • [X] добавляем таблицу Presets с полями preset_name и color, причём color я должен забить руками с помощью color picker со страницы докуметации Яндекс.карты (color используется только в админке для иллюстрации "что такое preset").

  • [X] Таблица Presets должна быть habtm-связана с таблицей :dealers

  • [X] Таблицу заполнить содержимым с помощью seed файла, пункт в админке не делать.

  • [X] при сборке хеша для Яндекс.карт - собираем в него свойства меток

    • [X] Если цвет не задан - по-умолчанию добавляем голубой
  • в админке:

    • [ ] в форме редактирования/создания: у каждого дилера должен быть селект, в котором видно как и название preset-а, так и его цвет
    • [X] на индексной странице: должен быть столбец, в котором выводится название preset-a и его цвет

Цитата из ТЗ

Данный раздел представляет собой список компаний, у которых указаны адреса офисов продаж и другие контактные данные.

Эти данные пользователь видит на интерактивной карте (от GoogleMaps или Яндекс. Карты - на выбор).

Попадая на данную страницу, пользователь сначала видит интерактивную карту (на которой отмечены все адреса офисов продаж и дилеров) и селект, с помощью которого можно выбрать один из регионов.

Выбрав тот или иной регион, пользователь видит слева от интерактивной карты список компаний, а также адреса их офисов продаж.

Офисы продаж компании и копании-дилеры (и адреса их офисов продаж) разграничены на интерактивной карте маркерами разного цвета.

В списке слева от интерактивной карты сначала отображаются офисы продаж компании, а затем список компаний-дилеров (и адресов их офисов продаж).

С помощью инструментов панели управления сайтом можно создавать редактировать и удалять компании, задавать/изменять/удалять адреса офисов продаж и другие характеристики характеристики:

  • Название*
  • Офисы продаж (как минимум один):
    • Название*
    • Адрес*
    • gps*
    • Телефон*
    • Сайт
    • Принадлежность к региону (офиса)
  • Принадлежность к региону (дилера)

По клику на один из пунктов в списке слева пользователю на карте демонстрируется только один маркер, который соответствует данному пункту.

На странице присутсвует возможность фильтрации по региону. Выбрав регион пользователь видит в списке слева и на интерактивной карте только те офисы продаж/склады и дилеров, которые соответствую данному региону. Каждая компания имеет заранее предопределенное свойство "id".