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

В системе представлены разновидности печатных форм, каждая из них имеет свое предназначение, а также имеет определенный шаблон представления данных. Мы предлагаем по два шаблона для каждой формы. Однако, также в системе предусмотрена функциональность редактирования таких форм. Редактор печатных форм доступен для администраторов системы, при этом редактор должен быть включен в Настройках аккаунта (для включения редактора печатных форм необходимо обратиться в службу технической поддержки 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

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

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

Helpers are special attributes that help to aggregate different functions in POD or Manifest templates to show additional parameters. The Helpers block is located at the bottom of the parameters section on the template edit screen.

The list of helpers is the same for both POD and Manifest templates. It includes the following parameters:

sum - shows the specific quantity of any listed elements (items, runs etc.). Here you need to specify the summed element (array) and the specific quantity. For instance, the planned/actual quantity of order items.
avg - shows the average quantity of any listed elements (items, runs etc.)
count - shows the total quantity of any listed elements (items, runs etc.)
range - use this helper, if you need some data to be repeated several times (text, numbers etc.). It accepts up to three parameters: from, to, step.
format - customises the date and time format. For instance, if you want to set the time in hours and minutes 'HH:mm' or in hours, minutes and seconds 'HH:mm:ss'.
translate - shows the specified parameter in its proper localisation.

How Helpers work

For example, we want the planned and actual quantity of order items to be displayed on our POD. To do it:

Go to the Edit form and find the section, where you want the helpers to be inserted (for instance, Order info section)
Insert a blank line in the desired place
Select the sum helper. Inside the parentheses, please indicate the data array (order items) and the required field name (quantity).
Then select the sum helper again and indicate the same data array (order items), but another field name (actualQuantity).
Optional. Separate the two helpers with a slash for proper reading

This is how the whole line should look like:

Then click Preview to see the result. The planned vs actual quantity of items is displayed in its selected place separated with slash.

См. также

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

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