В основе формата описания лежит шаблонизатор https://mustache.github.io/mustache.5.html. В описание можно добавлять:
За добавление значений атрибутов объекта слоя отвечает шаблонизатор Mustache. Справочную информацию по синтаксису Mustache можно найти здесь. Также можно использовать операторы сравнения (=,!=,>,<), по следующему принципу:
{{!#obj.field="value"}}...{{/obj.field}}
Пример атрибутов объекта слоя:
{
"color": "Красный",
"workers": [
{"name": "Василий", "age": 20},
{"name": "Пётр", "age": 23},
{"name": "Мария", "age": 25}
],
"count": 25
}
Пример описания:
Цвет: {{color}}
{{#workers}}
Имя: {{name}}
Возраст: {{age}}
{{/workers}}
{{#count}}
Количество: {{count}}
{{/count}}
{{#flag}}
Этот текст никогда не будет выведен, так как атрибута flag нет.
{{/flag}}
{{!#color="Красный"}}
тут будет показа {{color}}
{{/color}}
{{!#color="синий"}}
это текст не будет показан так как color != Красный
{{/color}}
Итоговое описание объекта:
Цвет: Красный Имя: Василий Возраст: 20 Имя: Пётр Возраст: 23 Имя: Мария Возраст: 25 Количество: 25
Для вызова встроенных функций необходимо добавить к HTML элементу атрибут data-createFunctionCall. Значение атрибута - это список имён функций, которые будут вызваны при клике на HTML элемент и/или json объекты в формате:
{
"name": "Имя функции",
"agruments": ["первый аргумент", 1, "третий аргумент", false]
}
Доступные функции:
Пример описания:
<button data-createFunctionCall='["addToPreparedData"]'>Подготовить данные для печати</button> <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>
Для этой функции помимо кнопки необходимо добавить пустой textarea. Пример описания:
<textarea id=send_{{deviceId}}></textarea> <button data-createFunctionCall='[{"name": "sendMessages", "arguments": ["{{deviceId}}"]}]'>Отправка сообщения</button>
Для копирования текстового содержимого HTML элемента в буфер обмена необходимо добавить к элементу атрибут data-canBeCopied. При клике на данный элемент его текстовое содержимое будет скопировано в буфер обмена.
Пример описания:
Копируемое значение атрибута: <b data-canBeCopied>{{attribute}}</b>
Если текстовое содержимое HTML элемента это время в формате unixtime, то его можно преобразовать в удобочитаемый вид. Для этого необходимо добавить к HTML элементу атрибут data-convertUnixTime. Значение атрибута - это формат вывода времени. Форматирование времени осуществляется с помощью библиотеки momentjs описание форматов можно найти здесь.
Пример атрибутов объекта:
{
"time": "1325412001"
}
Пример описания:
Формат №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>
Итоговое описание объекта:
Формат №1: 01-01-2012 18:00:01 Формат №2: 1-1-2012 18:0:1 Формат №3: 1-янв.-2012 18:00:01 Unixtime: 1325412001
Если содержимое HTML элемента это число или строка, содержащая только число, то его можно округлить. Для этого необходимо добавить к HTML элементу атрибут data-roundingNumber. Значение атрибута - это стратегия округления:
Пример атрибутов объекта:
{
"value": 0.616
}
Пример описания:
Формат №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>
Итоговое описание объекта:
Формат №1: 1 Формат №2: 1 Формат №3: 1 Формат №4: 0 Формат №5: 0.61 Значение: 0.6
Если требуется показывать часть описания только пользователям с определенными правами доступа к набору данных, то необходимо воспользоваться атрибутом data-showOnlyByAccess. Значение атрибута - маска доступа пользователя к набору данных (целое число от 0 до 7). В маске:
Пример описания:
<span data-showOnlyByAccess="1">Этот текст увидят пользователи с правами на чтение</span> <span data-showOnlyByAccess="2">Этот текст увидят пользователи с правами на запись</span> <span data-showOnlyByAccess="3">Этот текст увидят пользователи с правами на чтение и запись</span> <span data-showOnlyByAccess="4">Этот текст увидят пользователи с правами на изменение категории</span>
Для того, чтобы вставить в описание иконку слоя необходимо воспользоваться тегом description-layer-icon. По умолчанию иконка будет не больше 24 пикселей по высоте и ширине, если необходимо изменить это ограничение, то задайте встроенные css стиль с опциями height и width у тэга description-layer-icon на требуемые.
P.S. Тег layer-icon отображается как inline-block.
Пример описания:
<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> Большая иконка
Имя пользователя: {{userInfo.name}}
Номер телефона: {{userInfo.number}}
Для того, чтобы вставить в описание координаты точечного объекта необходимо воспользоваться тегом point-lng-lat.
Пример описания:
Координаты объекта: <point-lng-lat></point-lng-lat>
Для того что бы унаследовать описание слоя от вышестоящего элемента дерева (папки/дерева) необходимо:
1. Оставить описание слоя пустым (Слой полностью унаследует описание вышестоящего элемента)
2. Использовать тэг {{@include name}}(на место тэга будет вставлен родительский тэг с заданным именем)
Примеры наследования:
**Описание**
{
"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>"
}
**Описание**
{
"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>"
}
Пример не правильного наследования:
**Описание**
{
"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}} "
}
В данном варианте тэг tree-header не унаследуется так как его нет в папке.
**Изображение в атрибуте 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}}