c80_map_floors 0.1.0.9 → 0.1.0.10

data/app/assets/javascripts/src/state_controller.js

@@ -113,6 +113,9 @@ function StateController() {
                 //Показать все админские лейблы.
                 _map.admin_label_show_all();
 
+                // скроем форму поиска
+                _map.search_gui_klass.position_hide();
+
                 //</editor-fold>
             break;
 
@@ -182,6 +185,11 @@ function StateController() {
                 //Скрыть все админские лейблы.
                 _map.admin_label_hide_all();
 
+                // форму поиска покажем в исходном (нормальном) состоянии
+                if (_map.search_gui_klass != null) {
+                    _map.search_gui_klass.position_init();
+                }
+
                 //</editor-fold>
             break;
 
@@ -247,6 +255,10 @@ function StateController() {
 
                 // скроем подсказки - сколько свободных площадей где есть
                 _map.hide_free_areas_hint();
+
+                // сдвинем форму поиска так, чтобы её не загораживала инфо-панель
+                _map.search_gui_klass.position_inside();
+
                 //</editor-fold>
             break;
 
@@ -290,22 +302,38 @@ function StateController() {
 
                 _map.save_button_klass.show();
                 _map.save_button_klass.check_and_enable();
+
+                // скроем форму поиска
+                _map.search_gui_klass.position_hide();
+
                 //</editor-fold>
             break;
 
             // вошли в площадь
             case "view_area":
                 //<editor-fold desc="...">
+
+                // покажем кнопку "обратно на карту"
                 _map.back_to_map_button_klass.show();
+
+                //
                 _this.masked.removeClass('hiddn');
-                var t = _this.building_info.height() + _this.building_info.offset().top;
-                var tt = _this.building_info.css("left");
-                var tq = (_this.building_info.width() + 40) + "px";
-                _this.area_order_button.css("top", t + "px");
-                // _this.area_order_button.css("bottom","400px");
-                _this.area_order_button.css("left", tt);
-                _this.area_order_button.css("width", tq);
-                _this.area_order_button.css('display', 'block');
+
+                // выдвигаем инфо-панель
+                _this.building_info.css("top", _this.building_info.data("init"));
+
+                // TODO:: реализовать показ кнопки 'оставить заявку'
+                //<editor-fold desc="// спозиционируем и покажем кнопку 'оставить заявку'">
+                //var t = _this.building_info.height() + _this.building_info.offset().top;
+                //var tt = _this.building_info.css("left");
+                //var tq = (_this.building_info.width() + 40) + "px";
+                //_this.area_order_button.css("top", t + "px");
+                _this.area_order_button.css("bottom","400px");
+                //_this.area_order_button.css("left", tt);
+                //_this.area_order_button.css("width", tq);
+                //_this.area_order_button.css('display', 'block');
+                //</editor-fold>
+
                 _map.edit_button_klass.setState('view_area', true); // [a1x7]
 
                 // скроем кнопку "связать площадь с полигоном"
@@ -337,6 +365,13 @@ function StateController() {
                 OpacityButtonsUtils.show(_this.edit_button);
 
                 _map.edit_button_klass.setState('edit_area', true); // [a1x7]
+
+                // спрячем инфу о здании
+                _this.building_info.css("top", -500);
+
+                // скроем форму поиска
+                _map.search_gui_klass.position_hide();
+
                 //</editor-fold>
             break;
 
@@ -386,6 +421,10 @@ function StateController() {
 
                 // скроем подсказки - сколько свободных площадей где есть
                 _map.hide_free_areas_hint();
+
+                // сдвинем форму поиска так, чтобы её не загораживала инфо-панель
+                _map.search_gui_klass.position_inside();
+
                 //</editor-fold>
             break;
 
@@ -431,6 +470,9 @@ function StateController() {
                 _map.save_button_klass.show();
                 _map.save_button_klass.check_and_enable();
 
+                // скроем форму поиска
+                _map.search_gui_klass.position_hide();
+
                 //</editor-fold>
             break;
 

data/app/assets/javascripts/svg_elements/admin_building_label.js

@@ -2,7 +2,7 @@
 
 /**
  *
- * @param options       - Это C80MapFloors::MapBuilding.my_as_json
+ * @param options       - Это C80MapFloors::MapBuilding.my_as_json5
  * @param link_to_map   - ссылка на класс карты
  * @param params        - вспомогательные параметры для отрисовки (например, координаты центра)
  * @constructor
@@ -18,7 +18,7 @@ var AdminBuildingLabel = function (options, link_to_map, params) {
     this._text_element_ns = null;
 
     console.log('<AdminBuildingLabel> Пытаемся создать админский лейбл для Здания, options["data"] = ' + options["data"]);
-    // options["data"] - это C80MapFloors::BuildingRepresentator::InstanceMethods.my_as_json
+    // options["data"] - это C80MapFloors::BuildingRepresentator::InstanceMethods.my_as_json6
     if (options["data"] != null && typeof options["data"]["id"] != 'undefined') {
         console.log('<Building.init> Для полигона id=' + options["id"] + ' создаём админский лейбл title=' + options["data"]["title"]);
 
@@ -35,11 +35,11 @@ var AdminBuildingLabel = function (options, link_to_map, params) {
         this._text_element_ns = document.createElementNS('http://www.w3.org/2000/svg', 'text');
         this._text_element_ns.setAttribute('x', this._x);
         this._text_element_ns.setAttribute('y', this._y);
-        this._text_element_ns.setAttribute('fill', '#000000');
-        this._text_element_ns.setAttribute('style', 'font-size:12px;font-weight:bold;');
+        this._text_element_ns.setAttribute('fill', '#0000ff');
+        this._text_element_ns.setAttribute('style', 'font-size:15px;font-weight:bold;');
 
-        // помещаем текст: id=<id_привязанного_Здания>; title=<Заголовок_привязанного_здания>
-        this._text_element_ns.textContent = "id="+options["data"]["id"] + "; название='" + options["data"]["title"] + "'";
+        // помещаем текст: title=<Заголовок_привязанного_здания>, id=<id_привязанного_Здания>
+        this._text_element_ns.textContent = "'" + options["data"]["title"] + "', id=" + options["data"]["id"];
 
         // "антагонист" метода destroy()
         this._map.addNodeToSvg(this._g, false);

data/app/assets/javascripts/svg_elements/building_label.js

@@ -1,65 +1,93 @@
 "use strict";
 
 var BuildingLabel = function (options, link_to_map) {
-
-    if (    options["rent_building_hash"] != undefined &&
-            typeof options["rent_building_hash"].id != 'undefined' &&
-            options["rent_building_hash"].props.free_areas_count != 0
-    ) {
-
-        this._x = options.coords[0];
-        this._y = options.coords[1];
-        this._map = link_to_map;
-
-        var center_for_cicrle_x = this._x;
-        var center_for_cicrle_y = this._y - 100;
-
-        // создадим узел, который будет помещён в дерево и будет виден пользователю
-        this._g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-        this._g.setAttribute("class","free_areas_label");
-
-        this._bg_pulse = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        this._bg_pulse.setAttribute("cx",center_for_cicrle_x);
-        this._bg_pulse.setAttribute("cy",center_for_cicrle_y);
-        this._bg_pulse.setAttribute("r", 40);
-        this._bg_pulse.setAttribute("class","pulse");
-        
-        this._bg_pulse2 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        this._bg_pulse2.setAttribute("cx",center_for_cicrle_x);
-        this._bg_pulse2.setAttribute("cy",center_for_cicrle_y);
-        this._bg_pulse2.setAttribute("r", 40);
-        this._bg_pulse2.setAttribute("class","pulse2");
-        
-        this._bg_circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        this._bg_circle.setAttribute("cx",center_for_cicrle_x);
-        this._bg_circle.setAttribute("cy",center_for_cicrle_y);
-        this._bg_circle.setAttribute("r",40);
-        this._bg_circle.setAttribute("class","circle");
-        
-        this._text_element_ns = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        this._text_element_ns.setAttribute('x', center_for_cicrle_x);
-        this._text_element_ns.setAttribute('y', center_for_cicrle_y);
-        this._text_element_ns.setAttribute('class', 'text');
-        this._text_element_ns.textContent = options["rent_building_hash"].props.free_areas_count;
-
-        this._aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        this._aLine.setAttribute('x1', this._x);
-        this._aLine.setAttribute('y1', this._y);
-        this._aLine.setAttribute('x2', center_for_cicrle_x);
-        this._aLine.setAttribute('y2', center_for_cicrle_y);
-        this._aLine.setAttribute('stroke', '#39BD5F');
-        this._aLine.setAttribute('stroke-width', '2');
-
-
-        // цепляем НЕ в #svg_overlay (об этом нам говорит is_overlay = false аргумент)
-        this._map.addNodeToSvg(this._g, false);
-        
-        this._g.appendChild(this._aLine);
-        this._g.appendChild(this._bg_pulse);
-        this._g.appendChild(this._bg_pulse2);
-        this._g.appendChild(this._bg_circle);
-        this._g.appendChild(this._text_element_ns);
-
-    }
     
+    this._x = String(options['x']);
+    this._y = String(options['y']);
+    this._count = options['count'];
+    this._map = link_to_map;
+
+    var _this = this;
+    var center_for_circle_x = String(this._x);
+    var center_for_circle_y = String(this._y - 50);
+
+    // создадим узел, который будет помещён в дерево и будет виден пользователю
+    this._g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    this._g.setAttribute("class", "free_areas_label");
+
+    // кружок
+    this._bg_pulse = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    this._bg_pulse.setAttribute("cx", center_for_circle_x);
+    this._bg_pulse.setAttribute("cy", center_for_circle_y);
+    this._bg_pulse.setAttribute("r", '40');
+    this._bg_pulse.setAttribute("class", "pulse");
+
+    // кружок
+    this._bg_pulse2 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    this._bg_pulse2.setAttribute("cx", center_for_circle_x);
+    this._bg_pulse2.setAttribute("cy", center_for_circle_y);
+    this._bg_pulse2.setAttribute("r", '40');
+    this._bg_pulse2.setAttribute("class", "pulse2");
+
+    // кружок
+    this._bg_circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    this._bg_circle.setAttribute("cx", center_for_circle_x);
+    this._bg_circle.setAttribute("cy", center_for_circle_y);
+    this._bg_circle.setAttribute("r", '40');
+    this._bg_circle.setAttribute("class", "circle");
+
+    // текст
+    this._text_element_ns = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    this._text_element_ns.setAttribute('x', center_for_circle_x);
+    this._text_element_ns.setAttribute('y', center_for_circle_y);
+    this._text_element_ns.setAttribute('class', this._count > 9 ? 'text':'text one_digit');
+    this._text_element_ns.textContent = this._count;
+
+    // вертикальная линия
+    this._aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    this._aLine.setAttribute('x1', this._x);
+    this._aLine.setAttribute('y1', this._y);
+    this._aLine.setAttribute('x2', center_for_circle_x);
+    this._aLine.setAttribute('y2', center_for_circle_y);
+    this._aLine.setAttribute('stroke', '#39BD5F');
+    this._aLine.setAttribute('stroke-width', '2');
+
+    // цепляем НЕ в #svg_overlay (об этом нам говорит is_overlay = false аргумент)
+    this._map.addNodeToSvg(this._g, false);
+
+    // собираем
+    this._g.appendChild(this._aLine);
+    this._g.appendChild(this._bg_pulse);
+    this._g.appendChild(this._bg_pulse2);
+    this._g.appendChild(this._bg_circle);
+    this._g.appendChild(this._text_element_ns);
+
+    //--[ public ]------------------------------------------------------------------------------------------------------
+
+    this.destroy = function () {
+        if (this._map != null) {
+            console.log('<BuildingLabel.destroy> Уничтожаем метку с кол-вом магазинов.');
+
+            _this._map.removeNodeFromSvg(_this._g, false);
+
+            if (_this._g != null) {
+
+                _this._g.removeChild(_this._aLine);
+                _this._g.removeChild(_this._bg_pulse);
+                _this._g.removeChild(_this._bg_pulse2);
+                _this._g.removeChild(_this._bg_circle);
+                _this._g.removeChild(_this._text_element_ns);
+
+                delete _this._aLine;
+                delete _this._bg_pulse;
+                delete _this._bg_pulse2;
+                delete _this._bg_circle;
+                delete _this._text_element_ns;
+
+                delete _this._g;
+            }
+
+        }
+    };
+
 };

data/app/assets/javascripts/ui/tabs/tabs.js

@@ -102,6 +102,30 @@ function Tabs(options) {
             .click();
     };
 
+    /**
+     * Подсветить кнопки-табы, чей id присутствует в search_results_floors, а именно: снабдить красным кружочком с цифрой
+     *
+     * @param search_results_floors - [map_floors_ids]: айдишники полигонов этажей.
+     * @param search_results_count  - [Number]: кол-во магазинов на соответствующих этажах из search_results_floors
+     */
+    this.searchResultsShowFloors = function (search_results_floors, search_results_count) {
+        console.log('<Tabs.searchResultsShowFloors> Подсветить кнопки-табы, search_results_floors=['+search_results_floors.join(',')+']');
+
+        var $ibtn, iindex, icount;
+        for (var tab_id in _data) {
+            //noinspection JSUnfilteredForInLoop
+            $ibtn = _data[tab_id]['tab_button'];
+            iindex = search_results_floors.indexOf(Number(tab_id));
+            if (iindex != -1) { // если айдишник вкладки имеется в массиве с результатами поиска
+                icount = search_results_count[iindex];
+                _this._buttonRedCircleAdd($ibtn, icount);
+            } else {
+                _this._buttonRedCircleRemove($ibtn);
+            }
+        }
+
+    };
+
     //--[ controller ]----------------------------------------------------------------------------------------------------------------------
 
     this._onTabButtonClick = function (e) {
@@ -211,6 +235,35 @@ function Tabs(options) {
         $a_button.off('click', _this._onTabButtonClick);
     };
 
+    /**
+     * Снабдить кнопку красным кружочком с цифрой,
+     * т.е. показать, что на этом этаже имеется такое-то кол-во магазинов,
+     * удовлетворяющих поиску.
+     *
+     * @param $a_button
+     * @param count
+     * @private
+     */
+    this._buttonRedCircleAdd = function ($a_button, count) {
+
+        $a_button.addClass('red')
+                 .attr('data-search-count', count);
+
+        console.log('<Tabs._buttonRedCircleAdd> Добавляем красный индикатор на кнопку: data-id='+$a_button.attr('data-id'));
+    };
+
+    /**
+     * Удалить у кнопки красный кружок с цифрой.
+     * @param $a_button
+     * @private
+     */
+    this._buttonRedCircleRemove = function ($a_button) {
+        console.log('<Tabs._buttonRedCircleRemove> Убираем красный индикатор с кнопки.');
+
+        $a_button.removeClass('red')
+                 .attr('data-search-count', '');
+    };
+
     //this._contentRemove = function () {
     //
     //};
@@ -247,7 +300,7 @@ function Tabs(options) {
         }
 
         if (mark_error_occurs) {
-            //alert('data error, refer log for details.');
+            alert('data error, refer log for details.');
             console.log('<_displayContent> [ERROR] Что-то не то с данными.');
         }
 
@@ -271,4 +324,4 @@ function Tabs(options) {
 
     this._fInit(options);
 
-}
+}

data/app/assets/javascripts/view/building_info/building_info.js

@@ -1,10 +1,18 @@
 "use strict";
 
-// содержит компонент Tabs, пользуется им для отображения информации об этажах здания
+/**
+ *  Содержит компонент Tabs, пользуется им для отображения информации об этажах здания.
+ *  Имеется возможность подсветить результаты поиска.
+ *
+ * @param options   - { onFloorTabChange - при клике по табам вызывается этот callback }
+ * @constructor
+ */
 
 function BuildingInfo(options) {
 
-    // текуще отображаемое здание
+    var _this = this;
+
+    // текуще отображаемое здание (Это данные от C80MapFloors::MapBuilding, метод my_as_json5)
     var _cur_map_building_json;
 
     // настраиваемые параметры
@@ -21,15 +29,28 @@ function BuildingInfo(options) {
     // компонент "вкладки"
     var _tabs = null;
 
+    // todo-clear22:: необходимо сбрасывать это значение после того, как сбросили поиск
+    // текущий результат поиска - какие этажи имеют искомые магазины
+    var _search_results_floors = null;
+
+    // todo-clear22:: необходимо сбрасывать это значение после того, как сбросили поиск
+    // текущий результат поиска - кол-во магазинов на соответствющих этажах в _search_results_floors
+    var _search_results_floors_shops_count = null;
+
+    // todo-clear22:: необходимо сбрасывать это значение после того, как сбросили поиск
+    // текущий результат поиска - какие полигоны площадей соответствуют поиску и содержат искомые магазины
+    var _search_results_areas = null;
+
     // привязка данных об этажах здания ко вкладкам в этом удобном хэше
     // NOTE:: но нахуя он был добавлен - пока загадка. В комменты его. Детективная история, главная улика - слово "удобный".
     //var _tabs_floors_data = {};
 
     //-[ public ]-----------------------------------------------------------------------------------------------------------------------
 
-    /** Получить данные для отображения.
+    /**
+     * Получить данные для отображения.
      *
-     * @param map_building_json Это данные от C80MapFloors::MapBuilding
+     * @param map_building_json     - Это данные от C80MapFloors::MapBuilding, метод my_as_json5
      */
     this.setData = function (map_building_json) {
         console.log('<BuildingInfo.setData> Получили данные для отображения - map_building_json.');
@@ -44,13 +65,61 @@ function BuildingInfo(options) {
     };
 
     /**
-     * П
+     * Войти на этаж с указанным номером (др.словами: индексом).
+     * (например: у первого этажа индекс равен 0)
      * @param floor_index
      */
     this.setSelectedFloor = function (floor_index) {
         _tabs.setSelectedIndex(floor_index);
     };
 
+    /**
+     * Подсветить результаты поиска: добавить на табы красные кружки с цифрами.
+     * Вызывается как и в момент прихода результата поиска,
+     * так и после установки данных в компонент. Для 2-го случая была введена
+     * переменная _search_results_floors.
+     *
+     * @param search_results - { buildings: [map_buildings_ias], floors: [map_floors_ids], areas: [map_areas_ids] }
+     * Т.е. объект массивов айдишников элементов карты.
+     */
+    this.searchResultsShow = function (search_results) {
+
+        if (search_results['floors'] != undefined) {
+
+            _search_results_floors = search_results['floors'];
+            _search_results_floors_shops_count = search_results['floors_shops_count'];
+
+            if (_tabs != null) {
+                _tabs.searchResultsShowFloors(search_results['floors'], search_results['floors_shops_count']);
+            } else {
+                console.log('<BuildingInfo.searchResultsShow> [ERROR] Нет компонента: _tabs = null.');
+            }
+
+        }
+
+        else {
+            console.log('<BuildingInfo.searchResultsShow> [ERROR] Нет данных: search_results["floors"] = null.');
+        }
+
+        // в случае наличия данных про полигоны площадей (удовлетворяющих поиску) - отдадим эти данные парсеру
+        if (search_results['areas'] != undefined) {
+
+            _search_results_areas = search_results['areas'];
+
+            // парсер будет ориентироваться на них, и в случае их присутствия
+            // будет понимать, что поиск активен и надо при формировании HTML строки
+            // обнаружить искомое в данных и (в таком случае) отобразить только их
+            if (_mobj_info_parser != undefined) {
+                _mobj_info_parser.setSearchResultAreas(_search_results_areas);
+            }
+
+        }
+
+        else {
+            console.log('<BuildingInfo.searchResultsShow> [ERROR] Нет данных: search_results["areas"] = null.');
+        }
+    };
+
  //------------------------------------------------------------------------------------------------------------------------
 
     /**
@@ -90,14 +159,18 @@ function BuildingInfo(options) {
         console.log('<BuildingInfo._parseData> Парсим map_building_json, заполняем Tabs компонент:');
 
         // установим заголовок окна
-        _$title.text(_cur_map_building_json["title"]);
+        var titl = _cur_map_building_json["title"];
+        if (_cur_map_building_json['data'] != undefined) {
+            titl = _cur_map_building_json['data']['title'];
+        }
+        _$title.text(titl);
 
         // обойдём этажи, построим вкладки
         for (var i = 0; i < _cur_map_building_json['floors'].length; i++) {
 
             var ifloor_data = _cur_map_building_json['floors'][i];
-            var ifloor_id = ifloor_data["id"]; // NOTE:fidfid
-            //console.log(ifloor_data); // => see C80MapFloors::Floor.as_json
+            var ifloor_id = ifloor_data["id"]; // NOTE: fidfid: айди полигона этажа равен айдишнику вкладки
+            console.log(ifloor_data); // => see C80MapFloors::Floor.as_json
 
             // создадим вкладку
             _tabs.addTab(ifloor_data["title"], ifloor_id, this._onTabShow, {
@@ -113,6 +186,10 @@ function BuildingInfo(options) {
 
     this._updateView = function () {
 
+        if (_search_results_floors != null) {
+            _this.searchResultsShow(_search_results_floors);
+        }
+
     };
 
     // очистим данные и вью