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

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

Смотрим: