====== Описание формата ======
==== Navigation ====
  * [[ru:first|Главная]]
  * [[ru:airlay|Информация о системе]]
==== Описание ====

В основе формата описания лежит шаблонизатор [[https://mustache.github.io/mustache.5.html]]. В описание можно добавлять:
  * HTML разметку.
  * Значение атрибутов объекта слоя.
  * Вызов встроенных функций.
  * Возможность копирования текстового содержимого HTML элементов в буфер обмена.
  * Конвертацию **unixtime** времени.

==== Добавление значений атрибутов объекта слоя ====
За добавление значений атрибутов объекта слоя отвечает шаблонизатор Mustache. Справочную информацию по синтаксису Mustache можно найти [[http://websketches.ru/plugins/mustache|здесь]]

**Пример атрибутов объекта слоя:**
<code json>
{
  "color": "Красный",
  "workers": [
      {"name": "Василий", "age": 20},
      {"name": "Пётр", "age": 23},
      {"name": "Мария", "age": 25}
  ],
  "count": 25
}
</code>

**Пример описания:**
<code html>
Цвет: {{color}}

{{#workers}}
  Имя: {{name}}
  Возраст: {{age}}
{{/workers}}

{{#count}}
  Количество: {{count}}
{{/count}}

{{#flag}}
  Этот текст никогда не будет выведен, так как атрибута flag нет.
{{/flag}}

</code>

**Итоговое описание объекта:**
<code html>
Цвет: Красный

Имя: Василий
Возраст: 20
Имя: Пётр
Возраст: 23
Имя: Мария
Возраст: 25

Количество: 25
</code>

==== Вызов встроенных функций ====
Для вызова встроенных функций необходимо добавить к HTML элементу атрибут **data-createFunctionCall**. Значение атрибута - это список имён функций, которые будут вызваны при клике на HTML элемент и/или **json** объекты в формате:
<code>
{
	"name": "Имя функции",
	"agruments": ["первый аргумент", 1, "третий аргумент", false]
}
</code>

Доступные функции:
  * **addToPreparedData** - добавить элемент в список "Подготовленные данные".
  * **loadTrack** - функция получения трека, для мобильных объектов имеющих deviceId.
  * **hideTrack** - функция скрытия трека.
  * **runSearchInRadius** - функция показа информации об объекте слоя в SideBar. HTML тег, с вызовом этой функции, автоматически удаляется, если в настройках портала включен SideBar.
  * **setCategory** - функция изменения категории объекта.
  * **editProperties** - редактировать свойства объекта.
  * **createObject** - создать объект в другом наборе данных, аргументы:
    - Идентификатор набора данных, в котором нужно создать объект.
    - Идентификатор категории, которую нужно присвоить объекту (необязательный аргумент).
  * **MrskModule::getSap** - функция перехода в SAP (при подключённом плагине SAP-connector), аргументы:
    - Идентификатор объекта (необязательный аргумент, по умолчанию берется значение уникального поля объекта).
    - Имя системы (необязательный аргумент).
    - Команда (необязательный аргумент).
  * **enableLineRunner** - функция открытия инструмента "расстояние на линии" (для объектов типа "Линия").
  * **createNewMilestone** - функция создания мероприятия (объект с которого производился вызов, будет добавлен в список объектов Мероприятия), аргументы:
    - Идентификатор шаблона мероприятия.
  * **PluginBinderModule::showPluginBinder** - функция открытия плагина связывания.
  * **OporyRelationPickerModule::showOporyPicker** - функция открытия плагина редактора пролётов.
  * **sendUrlRequest** - функция для отправки объекта по указанному url (параметр url должен содержаться в передаваемом объекте). Также может быть добавлено поле `filter` в котором может быть передан фильтр.
  * **createReport** - функция для получения(скачивания) отчета. В случае успеха отчет будет добавлен в очередь скачивания. Требуется ид отчета, второй опциональный параметр true/false(делать/не делать скриншот), третий опциональный параметр это формат (blob, image, base64).
**Пример описания:**
<code html>
<button data-createFunctionCall='["runSearchInRadius"]'>Больше...</button>
<button data-createfunctioncall='["loadTrack"]' class='btn btn-primary btn-md'>Показать трэк</button> 
<button data-createfunctioncall='["hideTrack"]' class='btn btn-primary btn-md'>Скрыть Трек</button>
<button data-createFunctionCall='["MrskModule::getSap"]'>Показать трэк и перейти в SAP</button>
<button data-createfunctioncall='[{"name": "setCategory", "arguments": ["5e4e3bda9ae89212cd1f2782"]}]'>Штатный режим</button>
<button data-createfunctioncall='[{"name": "createObject", "arguments": ["608788a86db2a069937bf792"]}]'>Создать объект</button>
<button data-createfunctioncall='[{"name": "createObject", "arguments": ["608788a86db2a069937bf792", "6099d8740398ec5040647613"]}]'>Создать объект с категорией</button>
<button data-createFunctionCall='["enableLineRunner"]'>Расстояние на линии</button>
<button data-createFunctionCall='[{"name": "createNewMilestone", "arguments": ["619e0ff794779c32113745f9"]}]'>Создать мероприятие</button>
<button data-createFunctionCall='[{"name": "PluginBinderModule::showPluginBinder", "arguments": ["5e6f9b55525c1b12437eeadb"]}]'>Привязать</button>
<button data-createFunctionCall='[{"name": "OporyRelationPickerModule::showOporyPicker", "arguments": ["5e6f9b55525c1b12437eeadb"]}]'>Пролёты</button>
<button data-createfunctioncall='[{"name": "sendUrlRequest", "arguments": [{ "url" : "test.com", "tplnr" : "{{tplnr}}", "systemname" : "ER2", "command" : "33", "filter": "(<f>voltage</f> = 10 || <f>voltage</f> = 35) && (<f>type</f> = \"33\" && <f>type</f> = \"TP\")"}]}]'>Отправить объект</button>
<button data-createFunctionCall='[{"name": "createReport", "arguments": ["647095d90083c945a20ceef2", true]}]' >сделать отчет со скриншотом</button>
</code>

==== Функция отправки сообщения с карты====
  * **sendMessages** - функция отправки push сообщения из окна с описанием.
Для этой функции помимо кнопки необходимо добавить пустой textarea.
**Пример описания:**
<code html>
<textarea id=send_{{deviceId}}></textarea>
<button data-createFunctionCall='[{"name": "sendMessages", "arguments": ["{{deviceId}}"]}]'>Отправка сообщения</button>
</code>

==== Копирование текстового содержимого HTML элемента====
Для копирования текстового содержимого HTML элемента в буфер обмена необходимо добавить к элементу атрибут **data-canBeCopied**. При клике на данный элемент его текстовое содержимое будет скопировано в буфер обмена.

**Пример описания:**
<code html>
Копируемое значение атрибута: <b data-canBeCopied>{{attribute}}</b>
</code>

==== Конвертация unixtime времени ====
Если текстовое содержимое HTML элемента это время в формате [[https://ru.wikipedia.org/wiki/Unix-%D0%B2%D1%80%D0%B5%D0%BC%D1%8F|unixtime]], то его можно преобразовать в удобочитаемый вид. Для этого необходимо добавить к HTML элементу атрибут **data-convertUnixTime**. Значение атрибута - это формат вывода времени. Форматирование времени осуществляется с помощью библиотеки [[https://momentjs.com/|momentjs]] описание форматов можно найти [[https://momentjs.com/docs/#/displaying/format/|здесь]].

**Пример атрибутов объекта:**
<code json>
{
  "time": "1325412001"
}
</code>

**Пример описания:**
<code html>
Формат №1: <b data-convertUnixTime="DD-MM-YYYY HH:mm:ss">{{time}}</b>
Формат №2: <b data-convertUnixTime="D-M-YYYY H:m:s">{{time}}</b>
Формат №3: <b data-convertUnixTime="DDD-MMM-YYYY HH:mm:ss">{{time}}</b>

Unixtime: <b>{{time}}</b>
</code>

**Итоговое описание объекта:**
<code html>
Формат №1: 01-01-2012 18:00:01
Формат №2: 1-1-2012 18:0:1
Формат №3: 1-янв.-2012 18:00:01

Unixtime: 1325412001
</code>

==== Округление чисел ====
Если содержимое HTML элемента это число или строка, содержащая только число, то его можно округлить. Для этого необходимо добавить к HTML элементу атрибут **data-roundingNumber**. Значение атрибута - это стратегия округления:
  * **math** - округление по математическим правилам (по умолчанию).
  * **up** - округление вверх.
  * **down** - округление вниз.

**Пример атрибутов объекта:**
<code json>
{
  "value": 0.616
}
</code>

**Пример описания:**
<code html>
Формат №1: <b data-roundingNumber>{{value}}</b>
Формат №2: <b data-roundingNumber="math">{{value}}</b>
Формат №3: <b data-roundingNumber="up">{{value}}</b>
Формат №4: <b data-roundingNumber="down">{{value}}</b>
Формат №5: <b data-roundingNumber="2">{{value}}</b>

Значение: <b>{{value}}</b>
</code>

**Итоговое описание объекта:**
<code html>
Формат №1: 1
Формат №2: 1
Формат №3: 1
Формат №4: 0
Формат №5: 0.61

Значение: 0.6
</code>

==== Фильтрация описания по правам доступа ====
Если требуется показывать часть описания только пользователям с определенными правами доступа к набору данных, то необходимо воспользоваться атрибутом **data-showOnlyByAccess**. Значение атрибута - маска доступа пользователя к набору данных (целое число от 0 до 7). 
В маске:
  * Первый бит - чтение.
  * Второй бит - запись.
  * Третий бит - изменение категории.

**Пример описания:**
<code html>
<span data-showOnlyByAccess="1">Этот текст увидят пользователи с правами на чтение</span>
<span data-showOnlyByAccess="2">Этот текст увидят пользователи с правами на запись</span>
<span data-showOnlyByAccess="3">Этот текст увидят пользователи с правами на чтение и запись</span>
<span data-showOnlyByAccess="4">Этот текст увидят пользователи с правами на изменение категории</span>
</code>

==== Вставка иконки слоя в описание ====
Для того, чтобы вставить в описание иконку слоя необходимо воспользоваться тегом **description-layer-icon**. По умолчанию иконка будет не больше 24 пикселей по высоте и ширине, если необходимо изменить это ограничение, то задайте встроенные css стиль с опциями **height** и **width** у тэга **description-layer-icon** на требуемые.

P.S. Тег **layer-icon** отображается как **inline-block**.

**Пример описания:**
<code html>
<description-layer-icon></description-layer-icon> Стандартная иконка
<description-layer-icon style="width: 12px; height: 12px"></description-layer-icon> Маленькая иконка
<description-layer-icon style="width: 36px; height: 36px"></description-layer-icon> Большая иконка
</code>


<code html>
Имя пользователя: {{userInfo.name}}
Номер телефона: {{userInfo.number}}
</code>


==== Вставка координат точечного объекта в описание ====
Для того, чтобы вставить в описание координаты точечного объекта необходимо воспользоваться тегом **point-lng-lat**.

**Пример описания:**
<code html>
Координаты объекта: <point-lng-lat></point-lng-lat> 
</code>

==== Наследование описания (доступно в версии 1.90 и выше) ====
Для того что бы унаследовать описание слоя от вышестоящего элемента дерева (папки/дерева) необходимо:
<code>
1. Оставить описание слоя пустым (Слой полностью унаследует описание вышестоящего элемента)
2. Использовать тэг {{@include name}}(на место тэга будет вставлен родительский тэг с заданным именем)
</code>

**Примеры наследования:**
<code html>
**Описание**
{
    "name" : "Дерево 1"
    "description" : "<div id=\"tree-header\">tree-header</div> <div id=\"tree-footer\">tree-footer</div>"
}

{
    "name" : "Папка 1 дерева 1",
    "description" : "{{@include tree-header}} <div id=\"dir-header\">dir-header</div> name = {{name}} <div id=\"dir-footer\">dir-footer</div> {{@include tree-footer}}"
}

{
    "name" : "Слой 1 папки 1 дерева 1",
    "description" : "{{@include dir-footer}} name = {{name}} {{@include tree-header}}"
}

{
    "name" : "Слой 2 папки 1 дерева 1",
    "description" : "{{@include dir-header}} text {{@include tree-footer}}\n{{@include dir-footer}}"
}

{
    "type" : "Папка 2 дерева 1",
    "description" : ""
}

{
    "type" : "Слой 1 папки 2 дерева 1",
    "description" : ""
}

**Полученное описание для слоев**
{

    "name" : "Слой 1 папки 1 дерева 1",
    "description" : "<div id=\"dir-footer\">dir-footer</div> name = {{name}} <div id=\"tree-header\">tree-header</div>"
}
{
    "name" : "Слой 2 папки 1 дерева 1",
    "description" : "<div id=\"dir-header\">dir-header</div> text <div id=\"tree-footer\">tree-footer</div>\n<div id=\"dir-footer\">dir-footer</div>"
}
{
    "type" : "Слой 1 папки 2 дерева 1",
    "description" : "<div id=\"tree-header\">tree-header</div> <div id=\"tree-footer\">tree-footer</div>"
}
</code>

<code html>
**Описание**
{
    "name" : "Дерево 2",
    "description" : "<h1 id=h1t> this h1 <h2 id=h2t> this h2 <h3 id=h3t> this h3 </h1></h2></h3>  <div id=div1> this div1 <div id=div2> this div2 </div></div>"
}

{
    "name" : "Слой 1 дерева 2",
    "description" : "{{@include h1t}}\n\n{{@include h2t}}\n\n{{@include h3t}}\n\n{{@include div1}}\n\n{{@include div2}}",
}

**Полученное описание для слоя**
{
    "type" : "Слой 1 дерева 2",
    "description" : "<h1 id=\"h1t\"> this h1 <h2 id=\"h2t\"> this h2 <h3 id=\"h3t\"> this h3 </h3></h2></h1>\n\n<h2 id=\"h2t\"> this h2 <h3 id=\"h3t\"> this h3 </h3></h2>\n\n<h3 id=\"h3t\"> this h3 </h3>\n\n<div id=\"div1\"> this div1 <div id=\"div2\"> this div2 </div></div>\n\n<div id=\"div2\"> this div2 </div>"
}
</code>

**Пример не правильного наследования:**
<code html>
**Описание**
{
    "name" : "Дерево 3",
    "description" : "<div id=\"tree-header\">tree-header</div>"
}

{
    "name" : "Папка 1 дерева 3",
    "description" : "<div id=\"dir-footer\">dir-footer</div>"
}

{
    "name" : "Слой 1 папки 1 дерева 3",
    "description" : "{{@include dir-footer}} name = {{name}} {{@include tree-header}}"
}

**Полученное описание**
{ 
    "type" : "layerEntity"
    "description" : "<div id=\"dir-footer\">dir-footer</div> name = {{name}} "
}
</code>
В данном варианте тэг tree-header не унаследуется так как его нет в папке.

==== Отображение изображения в слое ====

<code html>
**Изображение в атрибуте img**
{{#media}}
   <a target='_blank' href="{{url}}"> 
      <img src="{{preview}}" width="250" height="190" > 
   </a>
{{/media}}

**Медиа и изображение**
{{#media}}
<video width="250" height="190" autoplay="autoplay" poster="{{url}}">
   <source src="{{url}}" type='video/ogg; codecs="theora, vorbis"'>
   <a target='_blank' href="{{media.url}}"> 
      <img src="{{preview}}" width="250" height="190" > 
   </a>
</video>
{{/media}}
</code>


==== Отображение документа в слое ====

<code html>
{{#document}}
   <a target='_blank' href="{{url}}"> Скачать документ</a>
{{/document}}
</code>

==== Для массива ссылок (Например imagesLinks) ====
<code html>
{{#imagesLinks}}
   <a target='_blank' href="{{.}}"> 
      <img src="{{.}}" width="250" height="190" > 
   </a>
{{/imagesLinks}}
</code>