c80_push 0.1.0.1 → 0.1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bc71bf6b52804cacd8264f3b6c11f871a0a98941
-  data.tar.gz: fda41529b939dfb82b720d781a5e809fd346a96b
+  metadata.gz: b4d991e9e1a4d40ab4a2788f801fc5bda42e61d2
+  data.tar.gz: 37d7c1a99822e278f8b2b4db16255fdd29a187a8
 SHA512:
-  metadata.gz: 1aaf65ac0642e9df24e8b7741e6f8a0f33d1d0d5c2c1ab7e9039f2af2ee132aeb546989ca1e20c6480d9323dfa171d02f7d0e260193e50b361dce565fe9adae5
-  data.tar.gz: d968c22cf4ee2de729b71fa4caf2befb8685e2b536578dfb3bdd16aa18ff4d11446398caa769f1882423a07f83ef3ce494e68f885ba7bdbe64ed57cce9a2fae7
+  metadata.gz: c88589031569da99e0158285b792473c6b0c1a580106b6830ad1ffaee861546c219a760983054d5d126da6acf185fb4bdfb8060ad8c2a6eceb171381de09d5f1
+  data.tar.gz: 9a7b1e94d5105aed752b535222df57341519ae0e7fde738650edda28ccc362185b010eea44616551fbc6b039440b050f3d2bffdb2a59b05609be3d9bd67f595c

data/README.md

@@ -56,15 +56,49 @@ Add these lines to host app's `active_admin.js.coffee`:
 Add these lines to host app's 'application.js.coffee':
 
 ```js
+#= require bootstrap
+#= require bootstrap-select
 #= require c80_push
 ```
 
 Add these lines to host app's 'application.scss':
 
 ```css
+@import "bootstrap-sprockets";
+@import "bootstrap";
+@import "bootstrap-select";
 @include "c80_push";
 ```
 
+## Процесс разработки JS функционала 
+
+Теперь пора заняться js.
+
+* [X] Прикрутить `selectpicker`: выводить туда только те регионы, в которых есть дилеры,
+у которых есть офисы.
+
+* [X] Вставить заголовок "Выберите Регион". 
+
+* [X] При первом входе на карту: должны отражаться все офисы.
+
+    - [X] Должен рассчитываться `bounding rectangle` и все точки должны быть видны
+    на рабочей области (никто не должен выходить за рамки)
+
+* [ ] При наведении/клике на точку на карте:
+ 
+    - [X] должен появляться хинт с деталями офиса
+    - [ ] слева должен подсвечиваться соответствующий `.li_office`.
+       
+* [X] При наведении/клике на `.li_office` - должна подсвечиваться соответствующая 
+точка на карте.       
+ 
+* [ ] Вставить из `psd` синий маркер.
+
+* [X] Когда меняется регион:
+
+    * [X] Должны отобразиться релевантные `.li_office`
+    * [X] Должны отобразиться релевантные точки на карте.
+
 ## Цитата из ТЗ
 
 > Данный раздел представляет собой список компаний, у которых указаны

data/app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_dealers_left_list_clicks.js

@@ -0,0 +1,50 @@
+/**
+ * Сфокусироваться на точке на карте.
+ * Если надо - открыть balloon.
+ * @param id : id офиса.
+ */
+function _item_toggle(id) {
+    //console.log('<_item_toggle> id: ' + id);
+
+    var it = dealers_map.geoObjects.getIterator(),
+        group;
+
+    while(group = it.getNext()) {
+        //console.log(group.properties);
+        if (group.properties !== undefined) {
+            for (var i = 0, len = group.getLength(); i < len; i++) {
+                var placemark = group.get(i);
+                //console.log(placemark.properties.get('id'));
+                if (placemark.properties.get('id') === id) {
+                    //console.log('+ ' + placemark.balloon.isOpen());
+                    if (placemark.balloon.isOpen()) {
+                        placemark.balloon.close();
+                    }
+                    else {
+                        dealers_map.panTo(placemark.geometry.getCoordinates(), {
+                            delay: 0
+                        }).then(function () {
+                            placemark.balloon.open();
+                        });
+                    }
+                    return;
+                }
+            }
+            break;
+        }
+    }
+}
+
+/**
+ * Начинаем слушать клики по .li_office.
+ * При клике - вызовется _item_toggle.
+ */
+function _dealers_left_list_clicks() {
+    $('.li_office').on("click", function (e) {
+        e.preventDefault();
+        var office_id = $(this).data('id');
+        _item_toggle(office_id);
+    });
+}
+
+$(document).ready(_dealers_left_list_clicks);

data/app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_dealers_left_list_filter.js

@@ -0,0 +1,14 @@
+/**
+ * В списке дилеров слева от карты оставить только тех,
+ * кто принадлежит указанному региону.
+ *
+ * @param region_id
+ */
+function dealers_left_list_filter(region_id) {
+    if (region_id === 'all') {
+        $('.li_region').css('display', 'block');
+    } else {
+        $('.li_region').css('display', 'none');
+        $('.li_region#region_' + region_id).css('display','block');
+    }
+}

data/app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_map_init.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var dealers_map;
+
+$(document).ready(function() {
+
+    if ($('#dealers_map_container').length) {
+        //noinspection JSUnresolvedVariable
+        ymaps.ready(function() {
+
+            //noinspection JSUnresolvedVariable,JSUnresolvedFunction
+            dealers_map = new ymaps.Map('dealers_map_container', {
+                center: [55, 37],
+                zoom: 10,
+                controls: ['zoomControl']
+            });
+
+            map_set_objects('all');
+
+        });
+    }
+
+});

data/app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_map_set_objects.js

@@ -0,0 +1,26 @@
+// нарисовать на карте объекты из указанного
+// хэша offices[region_id]
+
+function map_set_objects(region_id) {
+
+    var arr = offices[region_id];
+    // console.log(arr);
+    var n = arr['count'];
+
+    // соберём коллекцию точек
+    var c = new ymaps.GeoObjectCollection();
+    var icoords, iprops; // loop vars
+    for (var i = 0; i < n; i++) {
+        icoords = arr['coords'][i];
+        iprops = arr['props'][i];
+        c.add(new ymaps.Placemark(icoords, iprops));
+    }
+
+    // сначала уберём все точки
+    dealers_map.geoObjects.each(function(o) {
+        dealers_map.geoObjects.remove(o)
+    });
+
+    dealers_map.geoObjects.add(c);
+    dealers_map.setBounds(c.getBounds());
+}

data/app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_select_region_init.js

@@ -0,0 +1,20 @@
+var $select_region;
+
+/**
+ * Когда меняется регион:
+ *      - Должны отобразиться релевантные `.li_office`
+ *      - Должны отобразиться релевантные точки на карте.
+ */
+var _select_region_on_change = function() {
+    var region_id = $(this).val();
+    // console.log('<_select_region_on_change> region_id = ' + region_id);
+    map_set_objects(region_id);
+    dealers_left_list_filter(region_id);
+};
+
+var select_region_init = function() {
+    //noinspection JSUnresolvedFunction
+    $select_region = $('#select_region').selectpicker();
+    $select_region.change(_select_region_on_change);
+};
+$(document).ready(select_region_init);

data/app/assets/stylesheets/c80_push/c80_push_page_dealers/_layout.scss

@@ -8,7 +8,12 @@ div.c80_push_page_dealers {
 
   div.select_region_row {
     height: 53px;
-    margin-bottom: 25px;
+    margin-bottom: 15px;
+    padding: 9px;
+
+    div.select_wrapper {
+      float: right;
+    }
   }
 
   div.bottom_row {

data/app/assets/stylesheets/c80_push/c80_push_page_dealers/_style.scss

@@ -5,9 +5,22 @@ div.c80_push_page_dealers {
 
   div.select_region_row {
     background-color: #E0001A;
+    div.select_wrapper {
+
+    }
   }
 
-  div#dealers_map_container {
+  div.bottom_row {
+
+    > div {
+    }
+
+    div.dealers_list {
+      background-color: #f5f5f5;
+    }
+
+    div#dealers_map_container {
+    }
 
   }
 

data/app/assets/stylesheets/c80_push/c80_push_page_dealers/map_dealers_list.scss

@@ -2,6 +2,8 @@
   margin: 0;
   padding: 0;
   list-style: none;
+  border-top: 1px #B2B2B2 solid;
+  background-color: #ffffff;
 
   .li_region {
 
@@ -16,6 +18,8 @@
       padding: 0; //5px 5px 10px 15px;
       list-style: none;
       border: 1px #B2B2B2 solid;
+      border-bottom: none;
+      border-top: none;
 
       .li_dealer {
         padding: 15px;
@@ -74,6 +78,7 @@
 
             &:hover {
               border-bottom: 1px transparent solid;
+              z-index: 1;
               &:after {
                 display: block;
                 background-color: #e8e8e8;
@@ -84,6 +89,7 @@
               border-bottom: 1px transparent solid;
               color: #e4e0e0;
               position: relative;
+              z-index: 1;
 
               &:after {
                 display: block;

data/app/helpers/c80_push/application_helper.rb

@@ -6,10 +6,103 @@ module C80Push
   module ApplicationHelper
 
     def c80_push_render_page_dealers
+
+      # список регионов, включая дилеры и офисы
+      region_dealer_office_list = Region.includes(dealers: :offices)
+
+      # хэш для построения точек на Yandex карте
+      ymap_hash = prepare_ymap_hash(region_dealer_office_list)
+
+      # список регионов для select-а "Выберите регион"
+      r = prepare_regions_hash(region_dealer_office_list)
+
       render partial: 'c80_push/shared/page_dealers',
              locals: {
+                 rdo_list: region_dealer_office_list,
+                 regions_list: r,
+                 ymap_hash: ymap_hash
              }
     end
 
+    private
+
+    # специально для яваскрипта, работающего с yandex картой,
+    # на основе +rdo+ собираем координаты всех офисов
+    # в хеше вида:
+    #
+    # {
+    #   all: {          - здесь собираем все офисы всех регионов (для лаконичности js)
+    #       coords: [],
+    #       props: []
+    #   }
+    #   <region_id>: [  - данные офисов разложены по регионам
+    #       coords: [],
+    #       props: []
+    #   ]
+    # }
+    #
+    # noinspection RubyResolve
+    def prepare_ymap_hash(rdo)
+      res = {
+          all: {
+              coords: [],
+              props: []
+          }
+      }
+
+      rdo.each do |region|
+        region.dealers.each do |dealer|
+          dealer.offices.each do |office|
+            res[region.id] = { coords:[], props:[] } if res[region.id].nil?
+
+            # координаты точки (это массив двух точек)
+            gps = office.gps_arr
+
+            # соберём свойства офиса для балуна
+            props = {
+                balloonContentHeader: t = "#{office.title} (#{dealer.title})",
+                balloonContentBody:   b = "#{office.addr}<br>#{office.tel}<br>GPS: #{office.gps}",
+                hintContent:          "#{t}<br>#{b}",
+                id:                   office.id
+            }
+
+            # фиксируем в хэше региона
+            res[region.id][:coords] << gps
+            res[region.id][:props] << props
+
+            # фиксируем в all-хэше
+            res[:all][:coords] << gps
+            res[:all][:props] << props
+
+          end
+        # для удобства в js: зафиксируем кол-во офисов региона
+        res[region.id][:count] = res[region.id][:coords].size
+        end
+      end
+
+      # для удобства в js: зафиксируем кол-во всех офисов
+      res[:all][:count] = res[:all][:coords].size
+
+      res
+    end
+
+    # соберёт хэш только тех регионов, в которых есть офисы
+    # например: {4=>{:id=>4, :title=>"Санкт-Петербург"}}
+    def prepare_regions_hash(rdo)
+      res = {}
+      rdo.each do |region|
+        region.dealers.each do |dealer|
+          dealer.offices.each do |office|
+            if res[region.id].nil?
+              res[region.id] = { id:region.id, title:region.title }
+            else
+              break
+            end
+          end
+        end
+      end
+      res
+    end
+
   end
 end

data/app/helpers/c80_push/page_dealers/{page_dealers_helper.rb → dealers_left_list_helper.rb}

@@ -1,12 +1,14 @@
 module C80Push
   module PageDealers
-    module PageDealersHelper
+    module DealersLeftListHelper
 
-      # Выдать список Дилеров (включая Офисы),
-      # разложенный по Регионам.
+      # Выдать html unordered nested list Дилеров (включая Офисы),
+      # разложенный по Регионам, построенный
+      # на основе данных +rdo+ - Regions-Dealers-Offices.
       # Список выводится слева от карты.
       # (**) Не выводим регионы, у которых нет дилеров.
       #
+      # Структура списка:
       # * Регион
       #     * Дилер
       #         * Офис 1
@@ -18,11 +20,11 @@ module C80Push
       #         * сайт дилера
       #         * email дилера
       #
-      def render_ul_dealers_list
+      def render_ul_dealers_list(rdo)
 
         res = ''
 
-        Region.includes(dealers: :offices).each do |region|
+        rdo.each do |region|
           r = "<h2 class='region_title'>#{region.title}</h2>"
           ds = ul_region_dealers(region)
           next if ds.blank? # (**)
@@ -57,7 +59,7 @@ module C80Push
         dealer.offices.each_with_index do |office|
           o = "<h4 class='office_title'>#{office.title}</h4>"
           o += ul_office_props(office)
-          res += "<li class='li_office' id='office_#{office.id}'>#{o}</li>"
+          res += "<li class='li_office' id='office_#{office.id}' data-id='#{office.id}'>#{o}</li>"
         end
         res += "<li class='dealer_email'>#{dealer.email}</li>"
         res += "<li class='dealer_site'>#{dealer.site}</li>"

data/app/models/c80_push/office.rb

@@ -19,5 +19,9 @@ module C80Push
 
     validates :tel,
               :presence => true
+
+    def gps_arr
+      self.gps.split(',').map! { |c| c.to_f }
+    end
   end
 end

data/app/views/c80_push/shared/_page_dealers.html.erb

@@ -1,13 +1,15 @@
 <div class="c80_push_page_dealers">
 
   <div class="select_region_row">
-
+    <div class="select_wrapper">
+      <%= render 'c80_push/shared/select_region', regions: regions_list %>
+    </div>
   </div>
 
   <div class="bottom_row">
 
     <div class="dealers_list">
-      <%= render_ul_dealers_list %>
+      <%= render_ul_dealers_list(rdo_list) %>
     </div>
 
     <div id="dealers_map_container">
@@ -18,4 +20,8 @@
 
 </div>
 
+<script>
+  var offices = <%= ymap_hash.to_json.html_safe %>;
+</script>
+
 <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

data/app/views/c80_push/shared/_select_region.html.erb

@@ -0,0 +1,7 @@
+<select id='select_region' class="selectpicker" data-width="400px" data-size="10">
+  <option value="all">Выберите регион</option>
+  <% regions.each_key do |k| %>
+      <% region = regions[k] %>
+      <option value="<%= region[:id] %>"><%= region[:title] %></option>
+  <% end %>
+</select>

data/lib/c80_push/version.rb

@@ -1,3 +1,3 @@
 module C80Push
-  VERSION = '0.1.0.1'
+  VERSION = '0.1.0.2'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: c80_push
 version: !ruby/object:Gem::Version
-  version: 0.1.0.1
+  version: 0.1.0.2
 platform: ruby
 authors:
 - C80609A
@@ -40,7 +40,11 @@ files:
 - app/assets/config/c80_push_manifest.js
 - app/assets/javascripts/c80_push.js.coffee
 - app/assets/javascripts/c80_push/backend/dealers.js
-- app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/init_yandex_map.js
+- app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_dealers_left_list_clicks.js
+- app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_dealers_left_list_filter.js
+- app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_map_init.js
+- app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_map_set_objects.js
+- app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/_select_region_init.js
 - app/assets/javascripts/c80_push/lib_backend/init.js
 - app/assets/javascripts/c80_push/lib_backend/init_select_picker.js
 - app/assets/javascripts/c80_push_backend.js.coffee
@@ -51,12 +55,13 @@ files:
 - app/assets/stylesheets/c80_push_backend.scss
 - app/helpers/c80_push/admin_helper.rb
 - app/helpers/c80_push/application_helper.rb
-- app/helpers/c80_push/page_dealers/page_dealers_helper.rb
+- app/helpers/c80_push/page_dealers/dealers_left_list_helper.rb
 - app/models/c80_push/application_record.rb
 - app/models/c80_push/dealer.rb
 - app/models/c80_push/office.rb
 - app/models/c80_push/region.rb
 - app/views/c80_push/shared/_page_dealers.html.erb
+- app/views/c80_push/shared/_select_region.html.erb
 - config/locales/dealer/ru.yml
 - config/locales/office/ru.yml
 - config/locales/region/ru.yml

data/app/assets/javascripts/c80_push/frontend/c80_push_page_dealers/init_yandex_map.js

@@ -1,13 +0,0 @@
-$(document).ready(function() {
-
-    var dealers_map;
-
-    ymaps.ready(function() {
-        dealers_map = new ymaps.Map('dealers_map_container', {
-            center: [55, 37],
-            zoom: 10,
-            controls: ['zoomControl']
-        });
-    });
-
-});