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

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


ru:airlay:descriptionformat

Это старая версия документа!


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

Описание

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

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

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

За добавление значений атрибутов объекта слоя отвечает шаблонизатор Mustache. Справочную информацию по синтаксису Mustache можно найти здесь

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

{
  "color": "Красный",
  "workers": [
      {"name": "Василий", "age": 20},
      {"name": "Пётр", "age": 23},
      {"name": "Мария", "age": 25}
  ],
  "count": 25
}

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

Цвет: {{color}}
 
{{#workers}}
  Имя: {{name}}
  Возраст: {{age}}
{{/workers}}
 
{{#count}}
  Количество: {{count}}
{{/count}}
 
{{#flag}}
  Этот текст никогда не будет выведен, так как атрибута flag нет.
{{/flag}}

Итоговое описание объекта:

Цвет: Красный
 
Имя: Василий
Возраст: 20
Имя: Пётр
Возраст: 23
Имя: Мария
Возраст: 25
 
Количество: 25

Вызов встроенных функций

Для вызова встроенных функций необходимо добавить к HTML элементу атрибут data-createFunctionCall. Значение атрибута - это список имён функций, которые будут вызваны при клике на HTML элемент и/или json объекты в формате:

{
	"name": "Имя функции",
	"agruments": ["первый аргумент", 1, "третий аргумент", false]
}

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

  • addToPreparedData - добавить элемент в список «Подготовленные данные».
  • loadTrack - функция получения трека, для мобильных объектов имеющих deviceId.
  • hideTrack - функция скрытия трека.
  • runSearchInRadius - функция показа информации об объекте слоя в SideBar. HTML тег, с вызовом этой функции, автоматически удаляется, если в настройках портала включен SideBar.
  • setCategory - функция изменения категории объекта.
  • MrskModule::getSap - функция перехода в SAP(при подключённом плагине SAP-connector).

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

<button data-createFunctionCall='["runSearchInRadius"]'>Больше...</button>
<button data-createFunctionCall='["TrackModule::loadTrack"]'>Показать трэк</button>
<button data-createFunctionCall='["TrackModule::loadTrack", "MrskModule::getSap"]'>Показать трэк и перейти в SAP</button>
<button data-createfunctioncall='[{"name": "setCategory", "arguments": ["5e4e3bda9ae89212cd1f2782"]}]'>Штатный режим</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.6
}

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

Формат №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>
 
Значение: <b>{{value}}</b>

Итоговое описание объекта:

Формат №1: 1
Формат №2: 1
Формат №3: 1
Формат №4: 0
 
Значение: 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> 
ru/airlay/descriptionformat.1616039089.txt.gz · Последнее изменение: 2021/03/18 10:44 — Дмитрий Ситкевич