c80_map_floors 0.1.0.1 → 0.1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 73a33b12c304c5e1f211955a1d4adca4a02eb42d
-  data.tar.gz: 03302adfec9ac74cce5e91eadec8da7339ee9240
+  metadata.gz: 6acbfc5688ec8e6b14430cc033efc22aecd3367c
+  data.tar.gz: a5e9b23bf22b43fd8ef7c1df5c6d07edad1336a0
 SHA512:
-  metadata.gz: f728f024eb6a8becab35ad28936e2f52c1610fb05daa996bf7269b3d06b085ef3484a9ad05547d303892535ee8dc6b30c1ad67610ca1d262d61f6052fc2e8ae8
-  data.tar.gz: e943feba78c61ea26a4514ca45be2a674b68639c6bca14f0fb70baa3e3d7855c1b3a8cbcb487d198e706117a4343d9954ee4c790d87d17ad2bec59ef6713c7a1
+  metadata.gz: df5dd1c8a930be07ac3078171fdb989b149f5fd9d7c7971cd1c2db4460eaccbb21d477fa4594c4efdcc231f721ce9e1c3169bbbf33e4358a8a1ae0effa5adaf8
+  data.tar.gz: 47b31d1c1d37dba45c2eee482da8fce399a9b3018b77e43bd27e8b43c0e21b5309465a97f34c8acbded1d4a147021d131f2bbdc5fa3c7e5d166919310158b216

data/app/assets/javascripts/buttons/admin_buttons/button_area_link.js

@@ -59,7 +59,7 @@ function AreaLinkButton() {
         if (_this.el.hasClass('disabled')) return;
         e.preventDefault();
 
-        console.log("<AreaLinkButton.click>");
+        //console.log("<AreaLinkButton.click>");
 
         _map.save_preloader_klass.show();
 
@@ -84,7 +84,7 @@ function AreaLinkButton() {
     };
 
     _this.show = function () {
-        console.log("<AreaLinkButton.show>");
+        //console.log("<AreaLinkButton.show>");
         _this.el.css('display','block');
     };
 

data/app/assets/javascripts/buttons/admin_buttons/button_building_link.js

@@ -59,7 +59,7 @@ function BuildingLinkButton() {
         if (_this.el.hasClass('disabled')) return;
         e.preventDefault();
 
-        console.log("<BuildingLinkButton.click>");
+        //console.log("<BuildingLinkButton.click>");
 
         _map.save_preloader_klass.show();
 
@@ -84,7 +84,7 @@ function BuildingLinkButton() {
     };
 
     _this.show = function () {
-        console.log("<BuildingLinkButton.show>");
+        //console.log("<BuildingLinkButton.show>");
         _this.el.css('display','block');
     };
 

data/app/assets/javascripts/buttons/admin_buttons/button_cancel_create.js

@@ -7,7 +7,7 @@ function CancelCreatingButton() {
     _this.el = null;
 
     this.onClick = function (e) {
-        console.log("<CancelCreatingButton.onClick>");
+        //console.log("<CancelCreatingButton.onClick>");
         e.preventDefault();
         _map.setMode("editing");
     };

data/app/assets/javascripts/buttons/admin_buttons/button_cancel_remove.js

@@ -10,7 +10,7 @@ function CancelRemoveButton() {
         if (_this.el.hasClass('disabled')) return;
         e.preventDefault();
 
-        console.log("<CancelRemoveButton.onClick> Выходим из режима удаления полигона.");
+        //console.log("<CancelRemoveButton.onClick> Выходим из режима удаления полигона.");
         _map.setMode('editing');
 
     };

data/app/assets/javascripts/buttons/admin_buttons/button_complete_create.js

@@ -7,7 +7,7 @@ function CompleteCreatingButton() {
     _this.el = null;
 
     _this.onClick = function (e) {
-        console.log("<CompleteCreatingButton.onClick>");
+        //console.log("<CompleteCreatingButton.onClick>");
         if (e != null) e.preventDefault();
         _map.onDrawStop();
     };

data/app/assets/javascripts/buttons/admin_buttons/button_edit.js

@@ -19,7 +19,7 @@ function EditButton() {
         if (mark_change_only_inner_state == undefined) {
             mark_change_only_inner_state = false;
         }
-        console.log("<EditButton.setState> state = " + state);
+        //console.log("<EditButton.setState> state = " + state);
 
         // этот код коррелирует с [x9cs7]
         _this.state = state;

data/app/assets/javascripts/buttons/admin_buttons/button_new.js

@@ -32,7 +32,7 @@ function NewButton() {
         if (_this.state == 'creating') {
             _this.setState('editing');
         } else {
-            console.log("<NewButton.onClick> Переходим в режим создания полигона.");
+            //console.log("<NewButton.onClick> Переходим в режим создания полигона.");
             _this.setState('creating');
         }
     };

data/app/assets/javascripts/buttons/admin_buttons/button_remove.js

@@ -10,7 +10,7 @@ function RemoveButton() {
         if (_this.el.hasClass('disabled')) return;
         e.preventDefault();
 
-        console.log("<RemoveButton.onClick> Переходим в режим удаления полигона.");
+        //console.log("<RemoveButton.onClick> Переходим в режим удаления полигона.");
         _map.setMode('removing');
 
     };

data/app/assets/javascripts/c80_map_floors.js.coffee

@@ -13,8 +13,9 @@
 
 #= require_directory ./events
 #= require_directory ./map_objects
-#= require_directory ./view
+#= require_tree ./view
 #= require_tree ./buttons
+#= require_tree ./ui
 
 #= require ./src/utils/utils.js
 #= require ./src/utils/opacity_buttons_utils.js

data/app/assets/javascripts/events/app_event.js

@@ -1,7 +1,7 @@
 
 /* AppEvent constructor */
 function AppEvent(target, eventType, func) {
-    console.log("<AppEvent.new> target = " + target);
+    //console.log("<AppEvent.new> target = " + target);
 
     this.target = target;
     this.eventType = eventType;

data/app/assets/javascripts/map_objects/area.js

@@ -107,7 +107,7 @@ function Area() {
     };
 
     _this.enter = function () {
-        console.log("<Area.enter>");
+        //console.log("<Area.enter>");
         //clog(_this._options);
 
         /* рассчитаем масштаб, при котором можно вписать прямоугольник дома в прямоугольник рабочей области */
@@ -159,7 +159,7 @@ function Area() {
     };
 
     _this.exit = function () {
-        console.log('<Area.exit>');
+        //console.log('<Area.exit>');
     };
 
     this.invalidateAnimationMask = function () {

data/app/assets/javascripts/map_objects/building.js

@@ -7,6 +7,8 @@ function Building() {
     var _options = null;
     var _polygon = null;
 
+    // хэш с данными об этажах
+    var _data_floors = {};
 
     // экранные координаты левой верхней точки, куда надо вписать полигон здания
     //var _left_page_x = 342;
@@ -100,7 +102,7 @@ function Building() {
     ]
     }*/
     var _draw_floor = function (the_floor) {
-        console.log('<Building._draw_floor>');
+        //console.log('<Building._draw_floor>');
 
         // это тот самый код, который остался без изменений с версии c80_map (прошлой версии)
         if (the_floor["img_overlay"]["url"] != "null") {
@@ -108,21 +110,37 @@ function Building() {
         }
         if (the_floor["img_bg"]["url"] != "null") {
 
-            // картинку этажа рисуем не по bounding box здания, а по значениям из базы
+            // NOTE::картинку этажа рисуем не по bounding box здания, а по значениям из базы
+
+            // сначала возьём координаты coords_img здания
             var tmp = _options["coords_img"].split(",");
-            var xx = tmp[0];
-            var yy = tmp[1];
+            var xx = parseFloat(tmp[0]);
+            var yy = parseFloat(tmp[1]);
+
+            // и сложим их с корректирующими координатами coords этажа
+            var xx2 = 0;
+            var yy2 = 0;
+            if (the_floor["coords"].length) {
+                var tmp2 = the_floor["coords"].split(',');
+                xx2 = parseInt(tmp2[0]);
+                yy2 = parseInt(tmp2[1]);
+            }
+
+            // сначала попросим карту очистить слой с img_bg картинками
+            _map.clear_all_map_object_image_bg();
 
             // просим карту нарисовать картинку с данными характеристиками
             _image_bg = _map.draw_map_object_image_bg(the_floor["img_bg"]["url"], {
                 //x: _bbox.xmin,
                 //y: _bbox.ymin,
-                x: xx,
-                y: yy,
+                x: xx + xx2,
+                y: yy + yy2,
                 width: the_floor["img_bg_width"],
                 height: the_floor["img_bg_height"]
             }/*, 'building'*/);
 
+        } else {
+            alert('[ERROR] У этажа нет картинки.');
         }
 
         // просим карту нарисовать площади
@@ -133,10 +151,13 @@ function Building() {
     // options_floors - as_json массива этажей модели C80MapFloors::Floor
     var _parse_floors = function (options_floors) {
 
-        // NOTE:: тестово возьмем 1й этаж
-        var the_first_floor = options_floors[0];
-
-        _draw_floor(the_first_floor);
+        // соберём в удобный хэш
+        var i, ifloor_json, ifloor_id;
+        for (i = 0; i < options_floors.length; i++) {
+            ifloor_json = options_floors[i];
+            ifloor_id = ifloor_json["id"];
+            _data_floors[ ifloor_id ] = ifloor_json;
+        }
 
     };
 
@@ -188,32 +209,50 @@ function Building() {
         //console.log("<Building.enter>");
         //console.log(_options);
 
-        _zoomToMe();
+        // отдадим информацию о C80MapFloors::MapBuilding в панель
+        _map.building_info_klass.setData(_options);
 
+        _zoomToMe();
 
-        setTimeout(function () {
+        //setTimeout(function () {
 
             // попросим изменить состояние окружающей среды
             _map.setMode('view_building');
 
-            // попросим показать информацию о Rent::Building здании (привязанному к данному C80MapFloors::MapBuilding)
-            //_map.showBuildingInfo(_options["rent_building_hash"]);
-
             // запустим внутренний механизм парсинга этажей и их отрисовки
             _proccess_floors_data();
 
-        }, 400);
+        //}, 400);
 
         _map.svgRemoveAllNodes();
 
-        _map.current_building = _this;
         //console.log("<Building.enter> id: " + _this.id);
         _map.mark_virgin = false;
 
+        //
+        _map.building_info_klass.setSelectedFloor(0);
+
     };
 
+    /**
+     * Войти на этаж здания.
+     * @param floor_id
+     */
+    _this.enterFloor = function (floor_id) {
+        console.log('<Building.enterFloor> floor_id: ' + floor_id);
+
+        var flr = _data_floors[floor_id];
+        if (flr != undefined) {
+            _draw_floor(flr);
+        } else {
+            alert('[Buidling.EnterFloor] error: Нет данных об этаже floor_id='+floor_id+'.');
+        }
+
+
+    }
+
     _this.exit = function () {
-        _image_bg.remove();
+        if (_image_bg != null) _image_bg.remove();
         if (_image_overlay != null) {
             _image_overlay.remove();
         }
@@ -267,7 +306,7 @@ function Building() {
             //xmin + "," + ymin + "; " + xmax + "," + ymax +
         //"; center logical: " + _cx + "," + _cy + ", center screen: " + _map.rightX(_cx) + ", " + _map.rightY(_cy));
 
-        console.log('<Building._calcBBox> ' + xmin + ', ' + ymin);
+        //console.log('<Building._calcBBox> ' + xmin + ', ' + ymin);
     };
 
     // при редактировании здания (т.е. изменении полигонов и holer-ов площадей)

data/app/assets/javascripts/map_objects/dot.js

@@ -6,7 +6,7 @@ function Dot() {
     var _polygon = null;
 
     _this.init = function (options,pself) {
-        console.log('<Dot.init>');
+        //console.log('<Dot.init>');
         _options = options;
         _polygon = Polygon.createFromSaved(options, false, pself);
     }

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

@@ -90,6 +90,7 @@ var clog = function () {
         self.save_preloader_klass = null;
         self.last_clicked_g = null; // начали просматривать area\building (запустили сессию), и здесь храним ссылку на последний кликнутый полигон из svg_overlay в течение сессии
         self.dnd_enable = null; // если да, то можно карту dnd мышкой
+        self.building_info_klass = null; // класс, занимающися отображением данных об этаже\здании\площади
 
         // во время анимации каждый шаг рассчитывается мгновенный scale
         self.scale_during_animation = null;
@@ -264,14 +265,23 @@ var clog = function () {
 
             });
 
-            // Controls
+            // драг энд дроп и прочая мышь
             initAddControls();
 
+            // NOTE:: запускаем данные в карту
             self.draw_childs(data["buildings"]);
 
+            // проверим, всё ли уместилось
             self.ivalidateViewArea();
 
-            // Browser resize
+            // инициализиуем класс, занимающийся отображением данных о здании\этаже\площади
+            self.building_info_klass = new BuildingInfo({
+                onFloorTabChange: function (floor_id) {
+                    self.current_building.enterFloor(floor_id);
+                }
+            });
+
+            // начнём слушать окно браузера
             $(window).resize(function () {
 
                 // Mobile
@@ -363,6 +373,7 @@ var clog = function () {
 
         };
 
+        // драг энд дроп и прочая мышь
         var initAddControls = function () {
             var map = self.map,
                 mapbody = $('.mmap-image', self.map);
@@ -511,6 +522,7 @@ var clog = function () {
                                 if (p.obj && p.obj.building) {
                                     var building = p.obj.building;
                                     clog("<mouseup> Входим в здание.");
+                                    self.current_building = building;
                                     building.enter();
                                 }
 
@@ -829,7 +841,7 @@ var clog = function () {
          *
          */
         self.draw_map_object_image_bg = function (img_src, params) {
-            console.log('<draw_map_object_image_bg>');
+            //console.log('<draw_map_object_image_bg>');
 
             // породим DOM
             var $div_map_object_image_bg = $('<div></div>')
@@ -859,6 +871,10 @@ var clog = function () {
 
         };
 
+        self.clear_all_map_object_image_bg = function () {
+            $('.map_object_image_bg').parent().remove();
+        };
+
         /**
          * Задача этой служебной функции:
          *      - рассчёт актуальных (для данного масштаба) размеров и координат местонах указанного объекта (вместо объекта подаётся хэш описывающий его, с x,y,width,height)
@@ -891,7 +907,7 @@ var clog = function () {
             style += "height:";
             style += height + 'px;';
 
-            console.log("> scale: " + self.scale + "; style: " + style);
+            //console.log("> scale: " + self.scale + "; style: " + style);
             $i.attr('style',style);
 
         };
@@ -1102,7 +1118,7 @@ var clog = function () {
          * @private
          */
         var __moveToComplete = function (x,y,scale) {
-            console.log("<__moveToComplete> x = " + x + "; y = " + y + "; scale = " + scale);
+            //console.log("<__moveToComplete> x = " + x + "; y = " + y + "; scale = " + scale);
 
             /* NOTE:: CORE */
 
@@ -1217,8 +1233,8 @@ var clog = function () {
         };
 
         // показать инфо о здании
-        self.showBuildingInfo = function (rent_building_hash) {
-            console.log("<main.showBuildingInfo> Показать информацию о Rent-здании с id = " + rent_building_hash.id);
+        self.showBuildingInfo_old = function (rent_building_hash) {
+            //console.log("<main.showBuildingInfo> Показать информацию о Rent-здании с id = " + rent_building_hash.id);
 
             //"rent_building_hash": {
             //    "id": 2,
@@ -1329,7 +1345,7 @@ var clog = function () {
             // извлекаем значения
             var rent_area_id = $s.val();
             var map_area_id = self.current_area.id;
-            console.log("<Map.link_area> rent_area_id = " + rent_area_id + "; map_area_id = " + map_area_id);
+            //console.log("<Map.link_area> rent_area_id = " + rent_area_id + "; map_area_id = " + map_area_id);
 
             // нажимаем кнопку "закрыть"
             $b.click();
@@ -1357,7 +1373,7 @@ var clog = function () {
         // взять C80MapFloors::current_building и назначить ему Rent::building.id,
         // выбранный в окне _modal_window.html.erb
         self.link_building = function () {
-            console.log('<Map.link_building> ');
+            //console.log('<Map.link_building> ');
 
             // фиксируем компоненты модального окна
             var $m = $('#modal_window');
@@ -1367,7 +1383,7 @@ var clog = function () {
             // извлекаем значения
             var rent_building_id = $s.val();
             var map_building_id = self.current_building.id;
-            console.log("<Map.link_area> rent_building_id = " + rent_building_id + "; map_building_id = " + map_building_id);
+            //console.log("<Map.link_area> rent_building_id = " + rent_building_id + "; map_building_id = " + map_building_id);
 
             // нажимаем кнопку "закрыть"
             $b.click();

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

@@ -139,7 +139,7 @@ function StateController() {
                 if (_this.building_info.data("init") == undefined) {
                     _this.building_info.data('init', _this.building_info.css("top"));
                 }
-                _this.building_info.css("top", -300);
+                _this.building_info.css("top", -400);
                 _this.building_info.css("display", "block");
 
                 // скроем кнопку "забронировать площадь"

data/app/assets/javascripts/src/utils/map_utils.js

@@ -2,7 +2,7 @@ var MapUtils = {
 
     svgOverlayHideAllExcept: function ($g) {
         if ($g != null) {
-            console.log("<MapUtils.svgOverlayHideAllExcept>");
+            //console.log("<MapUtils.svgOverlayHideAllExcept>");
 
             // убираем у всех g из svg_overlay класс viewing_area
             $g.parent().find('g').css('display','none');
@@ -15,7 +15,7 @@ var MapUtils = {
 
     svgOverlayRestore: function ($g) {
         if ($g != null) {
-            console.log("<MapUtils.svgOverlayRestore>");
+            //console.log("<MapUtils.svgOverlayRestore>");
             $g.parent().find('g').css('display','block');
         }
     }

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

@@ -0,0 +1,191 @@
+"use strict";
+
+// Знает о том, что где-то на странице живет контейнер .tabs_js
+//  <div class="tabs_js">
+//      <div class="tab_buttons clearfix"></div>
+//      <div class="tab_content clearfix"></div>
+//  </div>
+//
+// NOTE-q:: невнятно подвешен вопрос касательно количества подобных компонентов на странице
+// NOTE-q:: код написан с условием, что на странице живет один tabs_js, сейчас пока нет времени думать о нём
+//
+
+function Tabs(options) {
+
+    var _this = this;
+
+    // параметры, по которым построен компонент
+    var _options;
+
+    // view контейнеры, в которых живут кнопки и контент
+    var _$div_tabs;
+    var _$div_tab_buttons;
+    var _$div_tab_content;
+
+    // массив кнопок
+    var _tab_buttons = [];
+
+    // массив содержимого вкладок
+    var _tab_contents = [];
+
+    // айди текущей просматриваемой вкладки
+    var _current_tab_id = -1;
+
+    // zero-based индекс текущей просматриваемой вкладки
+    var _selected_index = -1;
+
+    // структура данных, которая описывает текущее содержимое копонента: кнопки и контент
+    var _data = {};
+
+    // хэш колбеков: при клике по кнопке с id=ID будет вызван соответствующий колбэк
+    var _callbacks = {};
+
+    //--[ public ]----------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Удалить все элементы: кнопки, вкладки и данные
+     */
+    this.removeAll = function () {
+        console.log('<removeAll>');
+
+        // очистим данные
+        _data = {};
+
+        // очистим массив колбэков
+        _callbacks = {};
+
+        // сбросим курсор
+        _current_tab_id = -1;
+
+        // удалим все кнопки и слушатели
+        for (var i = 0; i < _tab_buttons.length; i++) {
+            var $ibuttn = _tab_buttons[i];
+            $ibuttn.remove();
+            $ibuttn.off('click', this._onTabButtonClick)
+        }
+
+    };
+
+    /**
+     * Добавить именованную вкладку.
+     *
+     *
+     * @param tab_title
+     * @param tab_id
+     * @param on_tab_show
+     *
+     */
+    this.addTab = function (tab_title, tab_id, on_tab_show) {
+
+        // создадим кнопку и контент
+        var btn = this._buttonAdd(tab_title, tab_id, on_tab_show);
+        //var cnt = this._contentAdd();
+
+        // запишем это в структуру
+        _data[tab_id] = {
+            tab_button: btn,
+            tab_content: null
+        };
+
+        // поместим в массивы
+        //_tab_contents.push(cnt);
+
+    };
+
+    this.setSelectedIndex = function (index) {
+        console.log('<setSelectedIndex> index: ' + index);
+        _$div_tab_buttons.find('a[data-index='+index+']')
+            .click();
+    };
+
+    //--[ controller ]----------------------------------------------------------------------------------------------------------------------
+
+    this._onTabButtonClick = function (e) {
+        //console.log('<_onTabButtonClick>');
+        //console.log(e);
+        e.preventDefault();
+
+        // фиксируем кнопку
+        var $clicked_button = $(e.target);
+
+        // зафиксируем id нажатой кнопки
+        var clicked_id = $clicked_button.data('id');
+        //console.log('<_onTabButtonClick> clicked_id: ' + clicked_id);
+
+        // зафиксируем index нажатой кнопки
+        var clicked_index = $clicked_button.data('index');
+        //console.log('<_onTabButtonClick> clicked_index: ' + clicked_index);
+
+        // сравним с курсором, колбэк вызовем, только если есть изменения
+        if (_current_tab_id != clicked_id) {
+
+            _current_tab_id = clicked_id;
+            _selected_index = clicked_index;
+
+            var fun = _callbacks[clicked_id];
+            if (fun != undefined) {
+                fun(clicked_id);
+            }
+
+        }
+
+        // сделаем эту кнопку активной
+        _$div_tab_buttons
+            .find('a')
+            .removeClass('active');
+        _$div_tab_buttons
+            .find('a[data-index='+clicked_index+']')
+            .addClass('active');
+
+    };
+
+    //--[ private ]----------------------------------------------------------------------------------------------------------------------
+
+    this._buttonAdd = function (tab_button_title, button_id, on_click_callback) {
+        console.log('<_addTabButton> tab_button_title: ' + tab_button_title);
+
+        // создадим кнопку
+        var b = $('<a href="#"></a>')
+            .text(tab_button_title)
+            .attr('data-id',button_id)
+            .attr('data-index', _tab_buttons.length)
+            //.data('id', button_id)
+            //.data('index', _tab_buttons.length)
+            .appendTo(_$div_tab_buttons)
+            .on('click', this._onTabButtonClick);
+
+        // её колбэк поместим в отдельный массив
+        _callbacks[button_id] = on_click_callback;
+
+        _tab_buttons.push(b);
+
+    };
+
+    this._contentAdd = function () {
+
+    };
+
+    this._buttonRemove = function ($a_button) {
+
+    };
+
+    this._contentRemove = function () {
+
+    };
+
+    this._fInit = function (options) {
+
+        // найдем нужную DOM структуру
+        _$div_tabs = $('.tabs_js');
+        if (_$div_tabs.length) { /*NOTE-q*/
+            _$div_tab_buttons = _$div_tabs.find('.tab_buttons');
+            _$div_tab_content = _$div_tabs.find('.tab_content');
+        }
+
+    };
+
+    //--[ startup ]----------------------------------------------------------------------------------------------------------------------
+
+    this._fInit(options);
+
+}

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

@@ -0,0 +1,117 @@
+"use strict";
+
+// содержит компонент Tabs, пользуется им для отображения информации об этажах здания
+
+function BuildingInfo(options) {
+
+    // текуще отображаемое здание
+    var _cur_map_building_json;
+
+    // настраиваемые параметры
+    var _options = {
+        onFloorTabChange: undefined
+    };
+
+    // заголовок - название здания
+    var _$title;
+
+    // компонент "вкладки"
+    var _tabs = null;
+
+    // привязка данных об этажах здания ко вкладкам в этом удобном хэше
+    var _tabs_floors_data = {};
+
+    //-[ public ]-----------------------------------------------------------------------------------------------------------------------
+
+    /** Получить данные для отображения.
+     *
+     * @param map_building_json Это данные от C80MapFloors::MapBuilding
+     */
+    this.setData = function (map_building_json) {
+        //console.log('<BuildingInfo.setData>');
+        //console.log(map_building_json);
+
+        _cur_map_building_json = map_building_json;
+
+        this._removeAll();
+        this._parseData();
+        this._updateView();
+
+    };
+
+    /**
+     * П
+     * @param floor_index
+     */
+    this.setSelectedFloor = function (floor_index) {
+        _tabs.setSelectedIndex(floor_index);
+    };
+
+ //------------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * слушает клики по табам, отправляет команды выше.
+     *
+     * @param shown_tab_id - айди текуще отображённой вкладки, это floor id NOTE:fidfid
+     * @private
+     */
+    this._onTabShow = function (shown_tab_id) {
+        console.log('<_onTabShow> shown_tab_id = ' + shown_tab_id);
+
+        if (_options['onFloorTabChange'] != undefined) {
+            _options['onFloorTabChange'](shown_tab_id);
+        }
+    };
+
+    //---[ dsd ]---------------------------------------------------------------------------------------------------------------------
+
+    this._fInit = function (options) {
+        // TODO:: _options extend options
+        _options = $.extend(_options, options);
+
+        // создаём компонент "вкладки"
+        _tabs = new Tabs();
+
+        // находим заголовок
+        _$title = $('.building_info').find('h3');
+
+    };
+
+    this._parseData = function () {
+        console.log('<BuildingInfo._parseData>');
+
+        // установим заголовок окна
+        _$title.text(_cur_map_building_json["title"]);
+
+        // обойдём этажи, построим вкладки
+        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
+
+            // создадим вкладку
+            _tabs.addTab(ifloor_data["title"], ifloor_id, this._onTabShow);
+
+            // свяжем её по id с даными
+            _tabs_floors_data[ifloor_id] = {
+                tab_data: ifloor_data
+            }
+        }
+    };
+
+    this._updateView = function () {
+
+    };
+
+    // очистим данные и вью
+    this._removeAll = function () {
+
+        _$title.text('');
+        _tabs_floors_data = {};
+        _tabs.removeAll();
+    };
+
+
+    this._fInit(options);
+}

data/app/models/c80_map_floors/floor.rb

@@ -8,7 +8,7 @@ module C80MapFloors
     acts_as_base_map_object
 
     # validates :coords, uniqueness: true
-    # after_save :update_json
+    after_save :update_json
 
     mount_uploader :img_bg, C80MapFloors::FloorImageUploader   # TODO:: FloorImageUploader класс должен использоваться только для загрузки img_bg [потому что 78aasq]
     mount_uploader :img_overlay, C80MapFloors::FloorImageUploader
@@ -16,18 +16,27 @@ module C80MapFloors
     # NOTE:: Т.к. для этажей используются картинки в два раза детальнее (в два раза больше, чем оригинал карты), то делим попалам
     # размеры картинки уйдут в js - они помогут её css-абсолютно правильно масштабировать и позиционировать
     def img_bg_width
-      img = MiniMagick::Image.open(img_bg.path)
-      img["width"]/2
+      res = nil
+      if img_bg.present?
+        img = MiniMagick::Image.open(img_bg.path)
+        res = img["width"]/2
+      end
+      res
     end
 
     def img_bg_height
-      img = MiniMagick::Image.open(img_bg.path)
-      img["height"]/2
+      res = nil
+      if img_bg.present?
+        img = MiniMagick::Image.open(img_bg.path)
+        res = img["height"]/2
+      end
+      res
     end
 
     # private
 
     # TODO:: после того, как апдейтим этаж, не обновляются данные в JSON - изза ебучей ошибки с путями в CarrierWave
+    # Т.е. нужно руками, после того, как в базу лягут актуальные данные, вызвать save! какого-нибудь building
     def update_json
       Rails.logger.debug "[TRACE] <update_json> nope"
       # MapJson.update_json

data/app/views/c80_map_floors/shared/map_row/_building_info.html.erb

@@ -1,17 +1,7 @@
 <div class="building_info">
-  <h2></h2>
-  <ul> <%# idишники элементов списка - имена полей таблицы Rent::Building %>
-    <li id="square">Общая площадь: <span></span> м кв.</li>
-    <li id="free_square">Свободная площадь: <span></span> м кв.</li>
-    <li id="floor_height">Высота потолка: <span></span></li>
-    <li id="column_step">Шаг колонн: <span></span></li>
-    <li id="gate_type">Тип ворот: <span></span></li>
-    <li id="communications">Коммуникации: <span></span></li>
-  </ul>
-  <h5 id="price"><span></span></h5>
-  <%= link_to "Оставить заявку",
-              "#",
-              :class => 'ebutton c80_order_invoking_btn',
-              :data => { :comment_text => "этот будет заменён ajax Ответом, заполняющим инфо о площади", :subj_id => 'Это число будет подставлено ajax Ответом' },
-              :id => 'area_order_button' %>
-</div>
+    <h3 class="title"></h3>
+    <div class="tabs_js">
+      <div class="tab_buttons clearfix"></div>
+      <div class="tab_content clearfix"></div>
+    </div>
+</div>

data/app/views/c80_map_floors/shared/map_row/_building_info_old.html.erb

@@ -0,0 +1,17 @@
+<div class="building_info">
+  <h2></h2>
+  <ul> <%# idишники элементов списка - имена полей таблицы Rent::Building %>
+    <li id="square">Общая площадь: <span></span> м кв.</li>
+    <li id="free_square">Свободная площадь: <span></span> м кв.</li>
+    <li id="floor_height">Высота потолка: <span></span></li>
+    <li id="column_step">Шаг колонн: <span></span></li>
+    <li id="gate_type">Тип ворот: <span></span></li>
+    <li id="communications">Коммуникации: <span></span></li>
+  </ul>
+  <h5 id="price"><span></span></h5>
+  <%= link_to "Оставить заявку",
+              "#",
+              :class => 'ebutton c80_order_invoking_btn',
+              :data => { :comment_text => "этот будет заменён ajax Ответом, заполняющим инфо о площади", :subj_id => 'Это число будет подставлено ajax Ответом' },
+              :id => 'area_order_button' %>
+</div>

data/lib/c80_map_floors/version.rb

@@ -1,3 +1,3 @@
 module C80MapFloors
-  VERSION = "0.1.0.1"
+  VERSION = "0.1.0.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: c80_map_floors
 version: !ruby/object:Gem::Version
-  version: 0.1.0.1
+  version: 0.1.0.2
 platform: ruby
 authors:
 - C80609A
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-10-20 00:00:00.000000000 Z
+date: 2016-10-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -137,6 +137,8 @@ files:
 - app/assets/javascripts/svg_elements/building_label.js
 - app/assets/javascripts/svg_elements/helper.js
 - app/assets/javascripts/svg_elements/polygon.js
+- app/assets/javascripts/ui/tabs/tabs.js
+- app/assets/javascripts/view/building_info/building_info.js
 - app/assets/javascripts/view/save_preloader.js
 - app/assets/stylesheets/c80_map_floors.scss
 - app/assets/stylesheets/map.scss
@@ -175,6 +177,7 @@ files:
 - app/views/c80_map_floors/shared/_save_preloader.html.erb
 - app/views/c80_map_floors/shared/map_row/_area_order_button.html.erb
 - app/views/c80_map_floors/shared/map_row/_building_info.html.erb
+- app/views/c80_map_floors/shared/map_row/_building_info_old.html.erb
 - bin/console
 - bin/setup
 - c80_map_floors.gemspec