Редактирование шаблонов подтверждения доставки и путевого листа водителя

В системе представлены разновидности печатных форм, каждая из них имеет свое предназначение, а также имеет определенный шаблон представления данных. Мы предлагаем по два шаблона для каждой формы. Однако, также в системе предусмотрена функциональность редактирования таких форм. Редактор печатных форм доступен для администраторов системы, при этом редактор должен быть включен в Настройках аккаунта (для включения редактора печатных форм необходимо обратиться в службу технической поддержки Maxoptra)

После того, как редактор шаблонов стал доступным для работы, на странице редактирования документа необходимо выбрать нужный шаблон, создать копию шаблона (Создать из примера или Клонировать).

Открыть созданный шаблон.
Перейти в режим редактирования:

Важно! Шаблоны печатных форм представлены с использованием HTML-разметки. Для настройки необходимого Вам шаблона можете обратиться к менеджеру продаж для обсуждения вопроса настройки необходимой формы силами технической поддержки Maxoptra. Принцип редактирования формы валиден как для путевого листа водителя, так и для формы подтверждения доставки.

На странице справа представлен список параметров объектов системы, которые могут быть добавлены в структуру шаблона. Список - это кнопки, которые используются для добавления параметра. Написание параметра соответствует названию параметра в базе данных, используется для облегчения ввода значения и избежания ошибок ввода.

Динамические атрибуты - параметры, уникальные для отдельных аккаунтов, при создании будут также добавлены в список доступных для добавления в шаблон.

Подробное описание возможных стилей и функций можно найти по ссылке http://htmlbook.ru/

https://colorscheme.ru/html-colors.html - ТАБЛИЦА ЦВЕТОВ HTML

https://developer.mozilla.org/en-US/docs/Web/HTML/Element - примеры блоков применения стилей в CSS

Структура

Заголовок таблицы - <h1> значение <h1>

Для того, чтобы заменить значения, необходимо заменить значение routingReport на необходимое наименование. Сюда подтягивается наименование атрибута, который существует в системе. Он автоматически локализуется. Если вписать руками наименование, оно будет отображаться как указано.

Пример: translate('Список точек объезда') = Список точек объезда

Описание таблицы с начальной и конечной точкой рейса

Таблица <table class="main-info"> содержит параметры рейса.

<tr> - описание строки таблицы

<td> - описание ячейки строки

<td>{{translate('date')}}</td> - в ячейку необходимо подставить параметр Дата. Для выбора другого параметра вместо 'date' вписать необходимое наименование. Если параметр существует в системе, выйдет подсказка.
<td>{{format(startTime, 'DD/MM/YYYY')}}</td> - указываем формат, в котором необходимо выводить дату. Если необходимо вставить параметр, отличный от даты, строчку нужно удалить.
<td class="divider"></td> - разделитель, в таблице представлен как пустая ячейка.
<td>{{translate('onTimeReportLoading')}}</td>
<td>{{format(loadingStartTime, 'HH:mm')}} - {{format(loadingEndTime, 'HH:mm')}}</td>

Таблица <table class="orders-info"> содержит список заказов.

<tr> - описание строки таблицы

<td> - описание ячейки строки

<th> - заголовок

В первой части описания таблицы описываются заголовки и названия столбцов.

<th>#</th> - описано, что должно содержаться в заголовке. В данном случае знак #

<th style="width: 10%">{{translate('name')}}</th> - значение, которое будет выводиться в заголовке

<th style="width: 15%">{{translate('clientName')}}</th> - значение, которое будет выводиться в заголовке

<th style="width: 30%">{{translate('address')}}</th> - значение, которое будет выводиться в заголовке

<th style="width: 15%">{{translate('postcode')}}</th> - значение, которое будет выводиться в заголовке

...

в части, заключенной в теги </td> - </td>, описываются параметры, значения которых должны выводиться в ячейке.

<td>{{clientName}}</td> - значение, которое будет выводиться в ячейке
<td>{{address}}</td> -значение, которое будет выводиться в ячейке
<td>{{postcode}}</td> - значение, которое будет выводиться в ячейке
<td>{{this.capacity}}</td> - значение, которое будет выводиться в ячейке

Описание стиля таблиц

Раздел начинается с тега <style>

Нас интересует описание существующих таблиц. Проще делать по примеру имеющихся.

Прописываем класс таблицы table.main-info

{ Способ отображения границы таблицы

border-collapse: collapse;
width: 100%;
margin-bottom: 10px;
}

table.main-info td {
border: 1px solid #222B35; - Рамка вокруг таблицы
padding: 2px 5px; - Поля вокруг текста
white-space: nowrap; - устанавливает, как отображать пробелы между словами. Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.
text-align: left; - выравнивание текста
}

table.main-info td:nth-child(1), - Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
table.main-info td:nth-child(4) {
width: 8%;
font-weight: bold; - устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100.
}

table.main-info td.divider {
border: none;
width: 5%;
}

Добавление столбца с параметром

Для того, чтобы добавить столбец в таблицу необходимо:

Найти описание таблицы, в которую необходимо добавить столбец
В части описания заголовка добавить строку с описанием заголовка столбца. !Столбец будет добавлен в соответствии с местом его расположения в списке!
В части описания параметра добавить строку с описанием параметра !Должно соответствовать порядку расположения наименования столбца!

Пример:

В таблицу перечня заказов добавим столбец Номер телефона. Столбец добавим между столбцами Клиент и Адрес

В разделе описания заголовков добавим наименование параметра для нужного нам столбца:

<tr>
<th>#</th>
<th style="width: 10%">{{translate('name')}}</th>
<th style="width: 15%">{{translate('clientName')}}</th>

<th>{{translate('clientPhone')}}</th>

<th style="width: 30%">{{translate('address')}}</th>
<th style="width: 15%">{{translate('postcode')}}</th>
<th>{{translate('weight')}}</th>
<th style="width: 5%">{{translate('distance')}}</th>
<th>{{translate('stopTimes')}}</th>
<th>{{translate('jobType')}}</th>
</tr>

width: 30% - процент ширины столбца от общей ширины таблицы

В разделе описания значений параметров добавим название параметра:

</td>
<td>{{clientName}}</td>

<td>{{clientPhone}}</td>
<td>{{address}}</td>
<td>{{postcode}}</td>
<td>{{this.capacity}}</td>
<td>{{#if distance}}{{Math.round(distance * 10) / 10}}{{/if}}</td>
<td><span class="nowrap">{{format(startTime, 'HH:mm')}} - {{format(endTime, 'HH:mm')}}</span></td>
<td class="camelcase">
<span class="nowrap">
{{#if jobType == "BEGIN"}}
{{translate('startAddress')}}
{{elseif jobType == "END"}}
{{translate('endAddress')}}
{{elseif jobType == "BREAK"}}
{{translate('break')}} ({{format(endTime - startTime, 'HH:mm', true)}})
{{else}}
{{translate(jobType)}}
{{/if}}
</span>
</td>

Смотрим, что получилось:

Добавление новой таблицы

Для добавления новой таблицы необходимо создать класс таблицы.
Описать заголовки таблицы, т.е. обозначить параметры, которые будут содержаться в столбце
Описать значения параметров для столбцов.

Пример: создадим таблицу описания ТС

Далее описать заголовки таблицы

Наименования, перечисленные ниже, будут проставляться из базы
<th style="width: 10%">{{translate('resourceNumber')}}</th>
<th style="width: 15%">{{translate('driverName')}}</th>
<th>{{translate('capacity')}}</th>

Также можно создать незаполняемые столбцы, в примере мы добавили наименования столбцов не из базы.
<th>{{translate('Температура в машине на момент отъезда')}}</th>
<th>{{translate('Температура в машине на момент приезда')}}</th>
</tr>
</thead>

Прописываем параметры, значения которых будут проставляться в таблице

<tr>

Также берутся из базы
<td>{{resourceNumber}}</td>
<td>{{driverName}}</td>
<td>{{capacity}}</td>

Столбцы, которые не должны заполняться системой, прописываются с пустым значением
<td></td>
<td></td>
</tr>
<tfoot></tfoot>
</table>

Смотрим что получилось:

Задание стиля таблицы

В таблице со списком заказов строки через одну имеют серый цвет. Сейчас на примере рассмотрим, как поменять цвет и убрать выделение.

Меняем цвет (заливку) строк

Находим описание таблицы с классом orders-info. Находим строчки с описанием псевдокласса. Меняем значение background. В таблице HTML цветов https://colorscheme.ru/html-colors.html выбираем цвет значение HEX - к примеру, #C71585

table.orders-info tr:nth-child(odd) td{
background: #C71585;

Смотрим:

Меняем заливку шапки

Находим описание шапки таблицы, должен быть тег th

table.orders-info th {
background: #F0E68C; -указываем цвет заливки
color: #4B0082; - цвет шрифта в заголовке

Границы/рамки таблицы

После создания таблицы нужно обозначить ее границы, то есть добавить сетку.

Описываем класс таблицы

table.vehicle { размер таблицы и стиль обводки
width: 100%;
margin: 10px 0;
border-collapse: collapse;
border: 1px solid #000000;

}

table.vehicle th { заливка заголовка
background: #F0E68C;
color: #4B0082; - цвет шрифта заголовка

}

table.vehicle th,
table.vehicle td {
padding: 2px 5px; Поля вокруг текста

} ниже описаны границы таблицы

table.vehicle tr {
border-top: 1px solid #222B35;
}
table.vehicle td {
border-right: 1px solid #222B35;
}

table.vehicle tfoot {
border-top: 1px solid #222B35;
}

Смотрим:

Добавление логотипа компании

Для того, чтобы добавить логотип компании к шаблону подтверждения доставки, прежде всего нужно совершить несколько подготовительх шагов.

1. Сжать картику в размере (ок. 50k). Для этого воспользуйтесь любым из удобных для вас сервисов, например: https://www.imgonline.com.ua/eng/compress-image-size.php

2. Затем необходимо преобразовать картинку в code64. Для этого воспользуйтесь любым из удобных для вас сервисов-преобразователей изображений, например: https://www.browserling.com/tools/image-to-base64

3. Вставьте получившийся код в поле "Main Info" редактора, а затем вставьте code64 в указанное место:

“”

Пример полного описания подтверждения доставки с логотипом компании можно посмотреть здесь: POD HTML .txt

Так выглядит результат:

Работа с функциями

Функции - это специальные атрибуты, помогающие аггрегировать данные по различным параметрам. Блок Функции находится внизу списка параметров на экране редактирования шаблона.

Перечень функций одинаков для шаблона подтверждения доставки и для шаблона путевого листа водителя. Он включает следующие функции:

sum - суммирует элементов в любом списке (товары, рейсы и т.д.). Здесь необходимо указать суммируемый элемент (array) и его количество (quantity). С помощью этой функции можно, например, показывать плановое/фактическое количество товаров в заказе.
avg - показывает среднее количество элементов в любом списке (товары, рейсы и т.д.).
count - показывает общее количество элементов в любом списке (товары, рейсы и т.д.).
range - данная функция применяется, если нужно повторить некие данные несколько раз (текст, цифры и т.д.). Можно задать до трех значений: от, до, шаг (from, to, step).
format - данная функция настраивает формат времени-даты. Например, если нужно задать время в часах и минутах 'HH:mm', либо в часах, минутах и секундах 'HH:mm:ss'.
translate - показывает указанный параметр в его правильной локализации.

Пример применения функций

К примеру, необходимо указать в шаблоне подтверждения заказа плановое и фактическое количество товаров. Для этого:

Войдите в режим Редактирования и найдите раздел, где вы собираетесь применить функцию (например, раздел Order info);
Вставьте пустую строку в выбранном месте;
В перечне атрибутов выберите функцию sum. Внутри скобок укажите тип данных (orderItems) и название поля (quantity);
Затем снова выберите функцию sum и укажите тот же тип данных (order items), но другое название поля (actualQuantity);
Необязательно. Разделите две эти функции наклонной чертой для более удобного визуального восприятия.

Вот как должна выглядеть созданная строка:

Переключитесь в режим Просмотра, чтобы посмотреть результат. Плановое/фактическое количество товаров расположено в указанном месте, разделенные наклонной чертой.

См. также

Шаблон подтверждения доставки

Шаблоны путевого листа