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

Важно! Шаблоны печатных форм представлены с использованием 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%;
}

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

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

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

Пример: 

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

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

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

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

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

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

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

<table class="vehicle">

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

<thead>
<tr>

Наименования, перечисленные ниже, будут проставляться из базы
<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 в указанное место:

“<!-- Main info -->”

<th style="width: 218px; text-align: justify;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<img src="data:image/jpeg;base64,***ВСТАВЛЯТЬ СЮДА***" width="804" height="244" /></th>

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

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

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

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

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

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

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

Пример 1. sum

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

• Войдите в режим Редактирования и найдите раздел, где вы собираетесь применить функцию (например, раздел Order info);
• Вставьте пустую строку в выбранном месте;
• В перечне атрибутов справа выберите функцию sum. Внутри скобок укажите тип данных (orderItems) и название поля ('quantity'). Название поля также выбирается из списка параметров справа. Также укажите 'true' после названия поля. Это требуется для того, чтобы система не выдавала ошибку, если выбранный тип данных не содержит указанный параметр (или параметры).
• Затем снова выберите функцию sum и укажите тот же тип данных (orderItems), но другое название поля ('actualQuantity'). Также укажите 'true' после названия поля.
• Необязательно. Разделите две эти функции наклонной чертой для более удобного визуального восприятия. 
• Необязательно. Можно воспользоваться функцией translate, чтобы написать заголовок для данных (Плановое/Фактическое количество товаров)

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

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

Пример 2. avg

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

• Войдите в режим Редактирования и найдите раздел, где вы собираетесь применить функцию (например, раздел Order info);
• Вставьте пустую строку в выбранном месте;
• В перечне атрибутов справа выберите функцию avg. Внутри скобок укажите тип данных (orderItems) и название поля ('quantity'). Название поля также выбирается из списка параметров справа. Также укажите 'true' после названия поля. Это требуется для того, чтобы система не выдавала ошибку, если выбранный тип данных не содержит указанный параметр (или параметры).
• Необязательно. Можно воспользоваться функцией translate, чтобы написать заголовок для данных (Среднее количество товаров).

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

Пример 3. count

Данная функция показывает общее количество элементов в любом списке (товары, рейсы и т.д.). 

Для того, чтобы задать пересчет элементов, выберите из списка атрибутов функцию count и вставьте в нужное место в шаблоне. Затем укажите тип данных (orderItems). 

Также можно воспользоваться функцией translate, чтобы написать заголовок для данных (Количество товаров). 

Переключитесь в режим Просмотра, чтобы посмотреть результат:

Пример 4. range

Данная функция применяется, если нужно повторить некоторые данные несколько раз (текст, цифры и т.д.).  

Функция range для текста

Например, нам нужно, чтобы вверху шаблона шла повторяющаяся надпись "Подтверждение доставки". Для этого:

• Войдите в режим Редактирования и найдите раздел, где вы собираетесь применить функцию. В нашем случае это область перед блоком Main info;
• Вставьте пустую строку в выбранном месте;
• Впишите следующий синтаксис (см. в примере ниже), где Подтверждение доставки___ - фраза для повторения, а range (10) - количество повторений.

• Переключитесь в режим Просмотра, чтобы посмотреть результат:

Функция range для чисел

Функция range может принимать до трех значений: от, до, шаг (from, to, step). Это может понадобиться, если требуется показать диапазон чисел или определенные числа . 

Например, нужно показать номера товаров от первого до последнегою Для этого:

• Войдите в режим Редактирования и найдите раздел, где вы собираетесь применить функцию;
• Вставьте пустую строку в выбранном месте;
• В перечне атрибутов справа выберите функцию range и заполните параметры from, to, step как 0, 5, 1 соответственно (см. пример ниже). Данный синтаксис означает, что товары с номерами от 0 до 5 будут отображаться с шагом 1, т.е., каждый товар. 

• Переключитесь в режим Просмотра, чтобы посмотреть результат:

Если заменить шаг на 2, будет отображаться каждый второй номер товара.

Пример 5. format

Данная функция настраивает формат времени-даты. 

Например, если нужно задать фактическую дату прибытия как 'DD.MM.YYYY', а время как 'HH:mm'. Впишите следующий синтаксис (см в примере ниже) и посмотрите результат:

Или, например, нужно задать фактическую дату прибытия как 'MM.DD.YYYY', а время как 'HH:mm:ss'. Результат будет следующим:

См. также

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

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