Navikey Wiki Pages

Look beyond the horizon...

Инструменты пользователя

Инструменты сайта

Вы посетили: • descriptionformat
ru:airlay:descriptionformat

Содержание

Описание формата

Описание

В основе формата описания лежит шаблонизатор https://mustache.github.io/mustache.5.html. В описание можно добавлять:

  • HTML разметку.
  • Значение атрибутов объекта слоя.
  • Вызов встроенных функций.
  • Возможность копирования текстового содержимого HTML элементов в буфер обмена.
  • Конвертацию unixtime времени.

Добавление значений атрибутов объекта слоя

За добавление значений атрибутов объекта слоя отвечает шаблонизатор 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]
}

Доступные функции:

  • addToPreparedData - добавить элемент в список «Подготовленные данные».
  • loadTrack - функция получения трека, для мобильных объектов имеющих deviceId.
  • hideTrack - функция скрытия трека.
  • runSearchInRadius - функция показа информации об объекте слоя в SideBar. HTML тег, с вызовом этой функции, автоматически удаляется, если в настройках портала включен SideBar.
  • setCategory - функция изменения категории объекта.
  • editProperties - редактировать свойства объекта.
  • createObject - создать объект в другом наборе данных, аргументы:
    1. Идентификатор набора данных, в котором нужно создать объект.
    2. Идентификатор категории, которую нужно присвоить объекту (необязательный аргумент).
  • MrskModule::getSap - функция перехода в SAP (при подключённом плагине SAP-connector), аргументы:
    1. Идентификатор объекта (необязательный аргумент, по умолчанию берется значение уникального поля объекта).
    2. Имя системы (необязательный аргумент).
    3. Команда (необязательный аргумент).
  • enableLineRunner - функция открытия инструмента «расстояние на линии» (для объектов типа «Линия»).
  • createNewMilestone - функция создания мероприятия (объект с которого производился вызов, будет добавлен в список объектов Мероприятия), аргументы:
    1. Идентификатор шаблона мероприятия.
  • PluginBinderModule::showPluginBinder - функция открытия плагина связывания.
  • OporyRelationPickerModule::showOporyPicker - функция открытия плагина редактора пролётов.
  • sendUrlRequest - функция для отправки объекта по указанному url (параметр url должен содержаться в передаваемом объекте). Также может быть добавлено поле `filter` в котором может быть передан фильтр.
  • createReport - функция для получения(скачивания) отчета. В случае успеха отчет будет добавлен в очередь скачивания. Требуется ид отчета, второй опциональный параметр true/false(делать/не делать скриншот), третий опциональный параметр это формат (blob, image, base64).

Пример описания: 

<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>

Функция отправки сообщения с карты

  • sendMessages - функция отправки push сообщения из окна с описанием.

Для этой функции помимо кнопки необходимо добавить пустой textarea. Пример описания: 

<textarea id=send_{{deviceId}}></textarea>
<button data-createFunctionCall='[{"name": "sendMessages", "arguments": ["{{deviceId}}"]}]'>Отправка сообщения</button>

Копирование текстового содержимого HTML элемента

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

Пример описания: 

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

Конвертация unixtime времени

Если текстовое содержимое 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. Значение атрибута - это стратегия округления:

  • math - округление по математическим правилам (по умолчанию).
  • up - округление вверх.
  • down - округление вниз.

Пример атрибутов объекта: 

{
  "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.90 и выше)

Для того что бы унаследовать описание слоя от вышестоящего элемента дерева (папки/дерева) необходимо: 

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}}

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

{{#document}}
   <a target='_blank' href="{{url}}"> Скачать документ</a>
{{/document}}
{{#imagesLinks}}
   <a target='_blank' href="{{.}}"> 
      <img src="{{.}}" width="250" height="190" > 
   </a>
{{/imagesLinks}}
ru/airlay/descriptionformat.txt · Последнее изменение: 2024/10/21 17:42 — Георгий

Инструменты страницы

Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki