Page Comparison

Table of Contents

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

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

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

Image Removed

Важно! Шаблоны печатных форм представлены с использованием 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('Список точек объезда') = Список точек объезда

Image Removed

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

Image Removed

Таблица <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>

Image Removed

Таблица <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> - значение, которое будет выводиться в ячейке

Image Removed

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

Раздел начинается с тега <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>

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

Image Removed

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

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

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

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

...

Table of Contents

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

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

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

Image Added

Важно! Шаблоны печатных форм представлены с использованием 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('Список точек объезда') = Список точек объезда

Image Added

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

Image Added

Таблица <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>

Image Added

Таблица <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> - значение, которое будет выводиться в ячейке

Image Added

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

Раздел начинается с тега <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('resourceNumbername')}}</th>
<th style="width: 15%">{{translate('driverNameclientName')}}</th>

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

<th><th style="width: 30%">{{translate('Температура в машине на момент отъездаaddress')}}</th>
<th><th style="width: 15%">{{translate('Температура в машине на момент приездаpostcode')}}</th>
<th>{{translate('weight')}}</tr>
</thead>

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

<tr>

Также берутся из базы
<td>{{resourceNumberth>
<th style="width: 5%">{{translate('distance')}}</td>th>
<td><th>{{driverNametranslate('stopTimes')}}</td>th>
<td><th>{{capacitytranslate('jobType')}}</td>

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

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

Image Removed

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

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

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

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

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

Смотрим:

Image Removed

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

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

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

Image Removed

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

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

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

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

Смотрим:

Image Removed

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

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

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

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

Image Removed

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

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

Image Removed

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.

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

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:

Image Removed

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

Image Removedth>
</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>

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

Image Added

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

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

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

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

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

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

Image Added