c80_map_floors 0.1.0.3 → 0.1.0.4

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

@@ -30,12 +30,13 @@ function StateController() {
             mode = _map.prev_mode;
         }
 
-        clog('<StateController.setMode> mode = ' + mode);
+        console.log('<StateController.setMode> Переводим карту в режим: mode = ' + mode);
 
         _map.prev_mode = _map.mode;
         _map.mode = mode;
 
-        // этот код коррелирует с [x9cs7]. Возможно, нужен рефакторинг.
+        //<editor-fold desc="Впишем режим в cssClass контейнера карты">
+        // NOTE: этот код коррелирует с [x9cs7]. Возможно, нужен рефакторинг
         _map.container.removeClass("viewing");
         _map.container.removeClass("editing");
         _map.container.removeClass("creating");
@@ -45,12 +46,14 @@ function StateController() {
         _map.container.removeClass("view_area");
         _map.container.removeClass("edit_area");
         _map.container.addClass(mode);
+        //</editor-fold>
 
         _this.checkMode();
     };
 
     _this.checkMode = function () {
 
+        //<editor-fold desc="Предварительно проверим, все ли участники доступны">
         if (_this.new_button.length == 0) _this.new_button = $('.mapplic-new-button');
         if (_this.remove_button.length == 0) _this.remove_button = $('.mapplic-remove-button');
         if (_this.edit_button.length == 0) _this.edit_button = $('.mapplic-edit-button');
@@ -65,12 +68,13 @@ function StateController() {
         if (_this.building_info.length == 0) _this.building_info = $('.building_info');
         if (_this.area_order_button.length == 0) _this.area_order_button = $('.area_order_button');
         if (_this.masked.length == 0) _this.masked = $("#masked");
+        //</editor-fold>
 
         switch (_map.mode) {
 
-            // перешли в состояние
-            // редактирования карты
+            // перешли в состояние редактирования карты
             case "editing":
+                //<editor-fold desc="...">
 
                 // спрячем надписи "цена за метр" и адрес с телефоном
                 _this.left_side.css("top", -300);
@@ -99,11 +103,12 @@ function StateController() {
                 // скроем подсказки - сколько свободных площадей где есть
                 _map.hide_free_areas_hint();
 
-                break;
+                //</editor-fold>
+            break;
 
-            // перешли в состояние
-            // просмотра карты, все здания с крышами
+            // перешли в состояние просмотра карты, видны все здания с крышами
             case "viewing":
+                //<editor-fold desc="...">
                 //clog("_this.left_side.data('init') = " + _this.left_side.data('init'));
 
                 // покажем надписи "цена за метр" и адрес с телефоном
@@ -158,22 +163,24 @@ function StateController() {
 
                 // покажем подсказки - сколько свободных площадей где есть
                 _map.show_free_areas_hint();
-
-                break;
+                //</editor-fold>
+            break;
 
             // перешли в состояние рисования полигона
             case "creating":
+                //<editor-fold desc="...">
                 //_this.mzoom_buttons.css('opacity', '0');
                 _this.map_creating.css('display', 'block');
                 _this.map_editing.css('display', 'none');
                 _this.map_removing.css('display', 'none');
 
                 _this.main_map.css('opacity', '1');
-
+                //</editor-fold>
             break;
 
             // перешли в состояние удаления полигона
             case "removing":
+                //<editor-fold desc="...">
                 //_this.mzoom_buttons.css('opacity', '0');
                 _this.map_creating.css('display', 'none');
                 _this.map_editing.css('display', 'none');
@@ -187,12 +194,12 @@ function StateController() {
                 OpacityButtonsUtils.hide(_this.new_button);
                 OpacityButtonsUtils.hide(_this.remove_button);
                 OpacityButtonsUtils.hide(_this.edit_button);
-
+                //</editor-fold>
             break;
 
             // вошли в здание
             case "view_building":
-
+                //<editor-fold desc="...">
                 // покажем кнопку "обратно на карту"
                 _map.back_to_map_button_klass.show();
 
@@ -221,12 +228,12 @@ function StateController() {
 
                 // скроем подсказки - сколько свободных площадей где есть
                 _map.hide_free_areas_hint();
-
+                //</editor-fold>
             break;
 
             // редактируем, находясь в здании
             case "edit_building":
-
+                //<editor-fold desc="...">
                 // спрячем кнопку "обратно на карту"
                 _map.back_to_map_button_klass.hide();
 
@@ -264,11 +271,12 @@ function StateController() {
 
                 _map.save_button_klass.show();
                 _map.save_button_klass.check_and_enable();
-
+                //</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;
@@ -288,12 +296,12 @@ function StateController() {
                 OpacityButtonsUtils.hide(_this.remove_button);
 
                 _this.mzoom_buttons.css('opacity', '1');
-
+                //</editor-fold>
             break;
 
             // начали редактировать площадь
             case 'edit_area':
-
+                //<editor-fold desc="...">
                 // спрячем кнопку "обратно на карту"
                 _map.back_to_map_button_klass.hide();
 
@@ -310,8 +318,58 @@ function StateController() {
                 OpacityButtonsUtils.show(_this.edit_button);
 
                 _map.edit_button_klass.setState('edit_area', true); // [a1x7]
+                //</editor-fold>
+            break;
+
+            // вошли на этаж
+            case "view_floor":
+                //<editor-fold desc="...">
+
+                // спрячем надписи "цена за метр" и адрес с телефоном
+                _this.left_side.css("top", -300);
+                _this.right_side.css("top", -300);
+
+                //_this.main_map.css('opacity','0.7');
+
+                // включим слой svg_overlay - а кто там живёт (запомятовал)?
+                _this.svg_overlay.css('display', 'block');
+
+                // выдвигаем инфо-панель
+                _this.building_info.css("top", _this.building_info.data("init"));
+
+                // покажем кнопку "обратно на карту"
+                _map.back_to_map_button_klass.show();
+
+                // прячем masked слой - а там что (запомятовал)?
+                _this.masked.addClass('hiddn');
+
+                // скроем кнопку "связать здание с полигоном"
+                _map.building_link_button_klass.hide();
+
+                // прячем кнопку "отправить заявку на аренду площади"
+                _this.area_order_button.css('display', 'none');
+
+                // кнопку "редактировать переводим в СООТВЕТСТВУЮЩЕЕ состояние
+                _map.edit_button_klass.setState('edit_button_view_floor', true); // [a1x7]
+
+                // сбросим z-index (пояснение "что это" см. в комментах к resetOverlayZindex)
+                //if (_map.current_building != undefined) _map.current_building.resetOverlayZindex();
+
+                // спрячем кнопку "сохранить"
+                _map.save_button_klass.hide();
+
+                // спрячем кнопки "добавить полигон" и "удалить полигон"
+                OpacityButtonsUtils.hide(_this.new_button);
+                OpacityButtonsUtils.hide(_this.remove_button);
+
+                // покажем zoom кнопки
+                _this.mzoom_buttons.css('opacity', '1');
+
+                // скроем подсказки - сколько свободных площадей где есть
+                _map.hide_free_areas_hint();
+                //</editor-fold>
+            break;
 
-                break;
         }
     };
 

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var I18n = function () {
+
+    var _dictionary = {
+        square        : 'Общая площадь',
+        square_free   : 'Свободная площадь',
+        floor_height  : 'Высота потолков',
+        communications: 'Коммуникации',
+
+        areas_count     : 'Площадей',
+        areas_free_count: 'Свободных площадей',
+        price_string    : ''
+    };
+
+    this.t = function (key) {
+        return _dictionary[key];
+    };
+
+    var _fInit = function () {
+
+    };
+
+    _fInit();
+
+}

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

@@ -15,7 +15,9 @@ function Tabs(options) {
     var _this = this;
 
     // параметры, по которым построен компонент
-    var _options;
+    var _options = {
+        info_helper: null // помогает преобразовывать json в человеческий текст
+    };
 
     // view контейнеры, в которых живут кнопки и контент
     var _$div_tabs;
@@ -25,9 +27,6 @@ function Tabs(options) {
     // массив кнопок
     var _tab_buttons = [];
 
-    // массив содержимого вкладок
-    var _tab_contents = [];
-
     // айди текущей просматриваемой вкладки
     var _current_tab_id = -1;
 
@@ -46,7 +45,7 @@ function Tabs(options) {
      * Удалить все элементы: кнопки, вкладки и данные
      */
     this.removeAll = function () {
-        console.log('<removeAll>');
+        console.log('<Tabs.removeAll> Начинаем удалять все элементы: кнопки, вкладки и данные.');
 
         // очистим данные
         _data = {};
@@ -58,37 +57,42 @@ function Tabs(options) {
         _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)
-        }
+        _this._buttonRemoveAll();
+
+        // очистим _$div_tab_content
+        _$div_tab_content.html('<i></i>');
 
     };
 
     /**
-     * Добавить именованную вкладку.
-     *
+     * Добавить именованную вкладку (вкладка = tab-button + tab-content).
      *
      * @param tab_title
-     * @param tab_id
-     * @param on_tab_show
+     * @param tab_id        ID вкладки равен ID Полигона Этажа // NOTE:fidfid
+     * @param on_tab_show   Колбэк: сигнал наверх, когда по tab-кнопке кликнули
+     * @param params        Опции: tab_data - данные для отображения в tab-content.
      *
      */
-    this.addTab = function (tab_title, tab_id, on_tab_show) {
+    this.addTab = function (tab_title, tab_id, on_tab_show, params) {
+        console.log("<Tabs.addTab> Добавить вкладку, title: " + tab_title);
 
         // создадим кнопку и контент
-        var btn = this._buttonAdd(tab_title, tab_id, on_tab_show);
-        //var cnt = this._contentAdd();
+        var btn = _this._buttonAdd(tab_title, tab_id, on_tab_show);
+        var cnt;
+
+        if (params != undefined) {
+            if (params['tab_data'] != undefined) {
+                cnt = params['tab_data'];
+            }
+        }
 
         // запишем это в структуру
-        _data[tab_id] = {
+        _data[tab_id] = { // tab_id это ID Полигона Этажа // NOTE:fidfid
             tab_button: btn,
-            tab_content: null
+            tab_content: cnt
         };
 
-        // поместим в массивы
-        //_tab_contents.push(cnt);
+        //console.log('for breakpoint');
 
     };
 
@@ -105,18 +109,20 @@ function Tabs(options) {
         //console.log(e);
         e.preventDefault();
 
+        //<editor-fold desc="//Подготовка - фиксируем переменные...">
         // фиксируем кнопку
         var $clicked_button = $(e.target);
 
         // зафиксируем id нажатой кнопки
-        var clicked_id = $clicked_button.data('id');
+        var clicked_id = $clicked_button.data('id'); // Это ID Полигона Этажа // NOTE:fidfid
         //console.log('<_onTabButtonClick> clicked_id: ' + clicked_id);
 
         // зафиксируем index нажатой кнопки
         var clicked_index = $clicked_button.data('index');
         //console.log('<_onTabButtonClick> clicked_index: ' + clicked_index);
+        //</editor-fold>
 
-        // сравним с курсором, колбэк вызовем, только если есть изменения
+        // колбэк вызовем, только тогда, когда "tab-курсор" в самом деле изменился
         if (_current_tab_id != clicked_id) {
 
             _current_tab_id = clicked_id;
@@ -129,47 +135,121 @@ function Tabs(options) {
 
         }
 
-        // сделаем эту кнопку активной
+        //<editor-fold desc="// сделаем эту кнопку активной...">
         _$div_tab_buttons
             .find('a')
             .removeClass('active');
         _$div_tab_buttons
             .find('a[data-index='+clicked_index+']')
             .addClass('active');
+        //</editor-fold>
+
+        // Отобразим во вкладке соответствующие данные
+        _this._displayContent(_data[clicked_id]['tab_content']);
 
     };
 
     //--[ private ]----------------------------------------------------------------------------------------------------------------------
 
+    /** Добавить tab-кнопку.
+     *
+     * @param tab_button_title
+     * @param button_id             Это ID Полигона Этажа // NOTE:fidfid
+     * @param on_click_callback
+     * @private
+     */
     this._buttonAdd = function (tab_button_title, button_id, on_click_callback) {
-        console.log('<_addTabButton> tab_button_title: ' + tab_button_title);
+        console.log('<Tabs._addTabButton> Добавляем одну кнопку: tab_button_title: ' + tab_button_title);
 
         // создадим кнопку
+        //noinspection JSUnresolvedFunction
         var b = $('<a href="#"></a>')
             .text(tab_button_title)
-            .attr('data-id',button_id)
+            .attr('data-id',button_id) // Это ID Полигона Этажа // NOTE:fidfid
             .attr('data-index', _tab_buttons.length)
             //.data('id', button_id)
             //.data('index', _tab_buttons.length)
             .appendTo(_$div_tab_buttons)
-            .on('click', this._onTabButtonClick);
+            .on('click', _this._onTabButtonClick);
 
         // её колбэк поместим в отдельный массив
         _callbacks[button_id] = on_click_callback;
 
         _tab_buttons.push(b);
 
-    };
+        return b;
 
-    this._contentAdd = function () {
+    };
 
+    //this._contentAdd = function () {
+    //
+    //};
+
+    // удалить все кнопки
+    this._buttonRemoveAll = function () {
+        console.log("<Tabs._buttonRemoveAll> Начинаем удалять все кнопки-вкладки:");
+
+        //var n = _tab_buttons.length;
+        //for (var i = 0; i < n; i++) {
+        //    var $ibuttn = _tab_buttons[i];
+        //    $ibuttn.remove();
+        //    $ibuttn.off('click', this._onTabButtonClick)
+        //}
+
+        var $ibuttn;
+        while (_tab_buttons.length) {
+            $ibuttn = _tab_buttons.pop();
+            _this._buttonRemove($ibuttn);
+        }
     };
 
+    // удалить одну кнопку
     this._buttonRemove = function ($a_button) {
-
+        console.log("<Tabs._buttonRemove> Удаляем одну кнопку: tab_button_title = " + $a_button.text());
+        $a_button.remove();
+        //noinspection JSUnresolvedFunction
+        $a_button.off('click', _this._onTabButtonClick);
     };
 
-    this._contentRemove = function () {
+    //this._contentRemove = function () {
+    //
+    //};
+
+    /** Отобразить во вкладке данные [об Этаже/Здании/Площади].
+     *
+     * @param json  Конкретный узел полигона Этажа/Здания/Площади
+     * @private
+     */
+    this._displayContent = function (json) {
+        console.log("<Tabs._displayContent> Отобразить во вкладке данные об Этаже/Здании/Площади, json: ");
+        console.log(json);
+
+        // если будет true - значит будет показано сообщение об ошибке
+        var mark_error_occurs = false;
+
+        if (_options['info_helper'] != undefined) {
+            if (json != undefined && json['data'] != null) {
+                if (json['class_name'] != undefined) {
+
+                    var json_as_html_text = _options['info_helper'].makeHtmlText(json);
+                    _$div_tab_content.html(json_as_html_text);
+                }
+
+                else {
+                    mark_error_occurs = true;
+                }
+            } else {
+                mark_error_occurs = true;
+            }
+        } else {
+            alert('Error, refer log for details.');
+            console.log('<_displayContent> [ERROR] info_helper не определён.');
+        }
+
+        if (mark_error_occurs) {
+            alert('data error, refer log for details.');
+            console.log('<_displayContent> [ERROR] Что-то не то с данными.');
+        }
 
     };
 
@@ -182,6 +262,9 @@ function Tabs(options) {
             _$div_tab_content = _$div_tabs.find('.tab_content');
         }
 
+        //info_helper
+        _options = $.extend(_options, options);
+
     };
 
     //--[ startup ]----------------------------------------------------------------------------------------------------------------------

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

@@ -15,11 +15,15 @@ function BuildingInfo(options) {
     // заголовок - название здания
     var _$title;
 
+    // помощник в преобразовании JSON характеристик в human-читаемые текста
+    var _mobj_info_parser = null;
+
     // компонент "вкладки"
     var _tabs = null;
 
     // привязка данных об этажах здания ко вкладкам в этом удобном хэше
-    var _tabs_floors_data = {};
+    // NOTE:: но нахуя он был добавлен - пока загадка. В комменты его. Детективная история, главная улика - слово "удобный".
+    //var _tabs_floors_data = {};
 
     //-[ public ]-----------------------------------------------------------------------------------------------------------------------
 
@@ -28,7 +32,7 @@ function BuildingInfo(options) {
      * @param map_building_json Это данные от C80MapFloors::MapBuilding
      */
     this.setData = function (map_building_json) {
-        //console.log('<BuildingInfo.setData>');
+        console.log('<BuildingInfo.setData> Получили данные для отображения - map_building_json.');
         //console.log(map_building_json);
 
         _cur_map_building_json = map_building_json;
@@ -69,8 +73,13 @@ function BuildingInfo(options) {
         // TODO:: _options extend options
         _options = $.extend(_options, options);
 
+        // кастуем помощника
+        _mobj_info_parser = new MobjInfoParser();
+
         // создаём компонент "вкладки"
-        _tabs = new Tabs();
+        _tabs = new Tabs({
+            info_helper: _mobj_info_parser
+        });
 
         // находим заголовок
         _$title = $('.building_info').find('h3');
@@ -78,7 +87,7 @@ function BuildingInfo(options) {
     };
 
     this._parseData = function () {
-        console.log('<BuildingInfo._parseData>');
+        console.log('<BuildingInfo._parseData> Парсим map_building_json, заполняем Tabs компонент:');
 
         // установим заголовок окна
         _$title.text(_cur_map_building_json["title"]);
@@ -91,12 +100,14 @@ function BuildingInfo(options) {
             //console.log(ifloor_data); // => see C80MapFloors::Floor.as_json
 
             // создадим вкладку
-            _tabs.addTab(ifloor_data["title"], ifloor_id, this._onTabShow);
+            _tabs.addTab(ifloor_data["title"], ifloor_id, this._onTabShow, {
+                tab_data: ifloor_data
+            });
 
             // свяжем её по id с даными
-            _tabs_floors_data[ifloor_id] = {
-                tab_data: ifloor_data
-            }
+            //_tabs_floors_data[ifloor_id] = {
+            //    tab_data: ifloor_data
+            //}
         }
     };
 
@@ -108,7 +119,7 @@ function BuildingInfo(options) {
     this._removeAll = function () {
 
         _$title.text('');
-        _tabs_floors_data = {};
+        //_tabs_floors_data = {};
         _tabs.removeAll();
     };
 

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

@@ -0,0 +1,57 @@
+"use strict";
+
+// в задачи этого кода входит преобразование JSON объектов в human-читаемый текст с характеристиками
+
+var MobjInfoParser = function () {
+
+    var _this = this;
+
+    // с помощью этого хелпера можно понять, например, что square это "общая площадь" (типа locales/ru.yml)
+    var _i18n = null;
+
+    /** Лабаем html текст из json-данных полигона Этажа/Здания/Площади
+     *
+     * @param json
+     */
+    this.makeHtmlText = function (json) {
+        console.log("<makeHtmlText> Лабаем html текст из json данных полигона.");
+
+        var result = "";
+
+        //#-> предполагается, что json в поряде и данные целостны (т.е. уровнем выше была проверка json на корректность)
+        switch (json["class_name"]) {
+            case "C80MapFloors::Floor":
+                result += _this._row('square', json);
+                result += _this._row('square_free', json);
+                result += _this._row('floor_height', json);
+                result += _this._row('areas_count', json);
+                result += _this._row('areas_free_count', json);
+                result += _this._row('price_string', json);
+            break;
+        }
+
+        result = "<ul>" + result + "</ul>";
+        return result;
+
+    };
+
+    this._row = function (key, json) {
+        var s = '';
+        if (key == 'price_string') {
+            s = "<li>" + json['data'][key] + "</li>";
+        } else {
+            s = "<li>" + _i18n.t(key) + ": " + "<span class='dd'>" + json['data'][key] + "</span>" + "</li>"
+        }
+        return s;
+    };
+
+    var _fInit = function () {
+
+        // кастуем locales-помощника
+        _i18n = new I18n();
+
+    };
+
+    _fInit();
+};
+

data/app/assets/stylesheets/c80_map_floors.scss

@@ -1,4 +1,5 @@
 @import "bootstrap-sprockets";
 @import "bootstrap";
 @import "map";
+@import "ui/**/*";
 @import "view/**/*";

data/app/assets/stylesheets/ui/tabs_js.scss

@@ -0,0 +1,32 @@
+div.tabs_js {
+
+  div.tab_buttons {
+
+  }
+
+  div.tab_content {
+    padding: 5px 15px 15px 20px;
+    color: #1A1A1A;
+
+    ul {
+      list-style: none;
+      margin-left: 0;
+      padding-left: 0;
+      /*@include frankRegular(15px);*/
+
+      li {
+        overflow: hidden;
+
+        -webkit-transition: all 0.3s;
+        -moz-transition: all 0.3s;
+        transition: all 0.3s;
+
+        span {
+          color: #6f6f6f;
+        }
+      }
+    }
+
+  }
+
+}