Добавить поля с описанием

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

Как это выглядит

Было:

Стало:

Для вашего удобства мы подготовили код для шаблона «Мониторинг объектов в полях», в котором добавлено два новых входных поля. Используйте этот код для самопроверки. Наши вставки в этом коде вы можете найти поиском слова «кастомизация».

Готовый код
{{#if reviewMode}}
    <div class="header-review">
        <div class="header-review__title">
            {{texts.task_title}}
        </div>
        <div class="header-review__buttons">
            {{#if (equal verdict "ok")}}
                <div class="header-review__btn header-review__btn_green">
                    {{texts.btn_ok.title}}
                </div>
            {{/if}}
            {{#if (equal verdict "no_obj")}}
                <div class="header-review__btn header-review__btn_red">
                    {{texts.btn_no_obj.title}}
                </div>
            {{/if}}
            {{#if (equal verdict "no_access")}}
                <div class="header-review__btn header-review__btn_red">
                    {{texts.btn_no_access.title}}
                </div>
            {{/if}}
        </div>
    </div>
{{else}}
    <div class="header">
        {{texts.task_title}}
    </div>
{{/if}}

<div class="info">
    {{#if reviewMode}}
        <div class="info__review">
            <div class="info__review-block">
                <div class="info__title">
                    {{texts.info_name}}
                </div>
                <div class="info__content">
                    {{name}}
                </div>
            </div>
            <div class="info__review-block">
                <div class="info__title">
                    {{texts.info_address}}
                </div>
                <div class="info__content">
                    {{address}}
                </div>
            </div>
        </div>
    {{else}}
        <div class="info__block">
            <div class="info__title">
                {{texts.info_name}}
            </div>
            <div class="info__content">
                {{name}}
            </div>
        </div>
        <div class="info__block">
            <div class="info__title">
                {{texts.info_address}}
            </div>
            <div class="info__content">
                {{address}}
            </div>
        </div>
    {{/if}}
    <div class="info__block">
        <div class="info__title">
            {{texts.info_description}}
        </div>
        <div class="info__content">
            {{product}}
        </div>
    </div>

    <!-- кастомизация начало фрагмента -->
    <div class="info__block">
      <div class="info__title">
        {{texts.new_input_1__title}}
      </div>
      <div class="info__content">
        {{new_input_1}}
      </div>
    </div>
    <div class="info__block">
      <div class="info__title">
        {{texts.new_input_2__title}}
      </div>
      <div class="info__content">
        {{new_input_2}}
      </div>
    </div>
    <!-- кастомизация конец фрагмента -->

    <div class="info__block">
        <div class="info__content">
            <a href={{image}} target="_blank" class="info__link">Ссылка на изображение объекта</a>
        </div>
    </div>
</div>

{{#if reviewMode}}
    <div class="review">
        <div class="review__map">
            <div id="{{concat 'map_' id}}" style="width: 100%; height: 400px;"></div>
        </div>
        {{#if (equal verdict "ok")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_obj}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_2.title}}
                </div>
                <div class="review__comment">
                    {{field type="textarea" name="more_info.comment" width="100%" rows=5}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_2.radios.title}}
                </div>
                <div class="review__fields">
                    {{#each texts.btn_ok.question_2.radios.items}}
                        <div>{{field type="radio" name=this.name label=this.label value=this.value size="L" validation-show="top-left"}}</div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_2.checkboxes.title}}
                </div>
                <div class="review__fields">
                    {{#each texts.btn_ok.question_2.checkboxes.items}}
                        <div>{{field type="checkbox" name=this.name label=this.label size="L" validation-show="top-left"}}</div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_3.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_address}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            {{#if comment}}
                <div class="review__block">
                    <div class="review__title">
                        {{texts.btn_ok.question_4.title}}
                    </div>
                    <div class="review__comment">
                        {{field type="textarea" name="comment" width="100%" rows=5}}
                    </div>
                </div>
            {{/if}}
        {{/if}}
        {{#if (equal verdict "no_obj")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_obj.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_around_obj}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_obj.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_address}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            {{#if comment}}
                <div class="review__block">
                    <div class="review__title">
                        {{texts.btn_no_obj.question_3.title}}
                    </div>
                    <div class="review__comment">
                        {{field type="textarea" name="comment" width="100%" rows=5}}
                    </div>
                </div>
            {{/if}}
        {{/if}}
        {{#if (equal verdict "no_access")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_access.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_around_no_access}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_access.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_address}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_access.question_3.title}}
                </div>
                <div class="review__comment">
                    {{field type="textarea" name="comment" width="100%" rows=5}}
                </div>
            </div>
        {{/if}}
    </div>
{{else}}
    <div class="main">
        <div class="main__title">
            Выберите вариант выполнения задания:
        </div>
        <div class="main__container">
            <div class="main__popup main__popup_hidden">Не выбран ни один вариант ответа</div>
            <div class="main__block">
                <div class="main__btn main__btn_green">
                    {{texts.btn_ok.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_ok.question_1.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_1.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_ok.question_1.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_obj" camera=true preview=true compress=false validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_ok.question_2.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_2.description}}
                        </div>
                        <div class="main__comment">
                            {{field type="textarea" name="more_info.comment" width="100%" rows=5 validation-show="top-left"}}
                        </div>
                        <div class="main__fields">
                            <div class="main__radios-title">
                                {{texts.btn_ok.question_2.radios.title}}
                            </div>
                            <div class="main__radios-items">
                                {{#each texts.btn_ok.question_2.radios.items}}
                                    <div>{{field type="radio" name=this.name label=this.label value=this.value size="L" validation-show="top-left"}}</div>
                                {{/each}}
                            </div>
                        </div>
                        <div class="main__fields">
                            <div class="main__checkboxes-title">
                                {{texts.btn_ok.question_2.checkboxes.title}}
                            </div>
                            <div class="main__checkboxes-items">
                                {{#each texts.btn_ok.question_2.checkboxes.items}}
                                    <div>{{field type="checkbox" name=this.name label=this.label size="L" validation-show="top-left"}}</div>
                                {{/each}}
                            </div>
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_ok.question_3.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_3.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_ok.question_3.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_address" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title">
                            {{texts.btn_ok.question_4.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_4.description}}
                        </div>
                        <div class="main__comment">
                            {{field type="textarea" name="comment" width="100%" rows=5 validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main__block">
                <div class="main__btn main__btn_red">
                    {{texts.btn_no_obj.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__text main__text_req">
                            {{texts.btn_no_obj.question_1.description}}
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_around_obj" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__text main__text_req">
                            {{texts.btn_no_obj.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_obj.question_2.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_address" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title">
                            {{texts.btn_no_obj.question_3.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_obj.question_3.description}}
                        </div>
                        <div class="main__comment">
                            {{field type="textarea" name="comment" width="100%" rows=5 validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main__block">
                <div class="main__btn main__btn_red main__btn_no-access">
                    {{texts.btn_no_access.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__text main__text_req">
                            {{texts.btn_no_access.question_1.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_access.question_1.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_around_no_access" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__text main__text_req">
                            {{texts.btn_no_access.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_access.question_2.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_address" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_access.question_3.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_access.question_3.description}}
                        </div>
                        <div class="main__comment">
                            {{field type="textarea" name="comment" width="100%" rows=5 validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{/if}}

Теперь рассмотрим, как добавить эти поля вручную.

Редактирование входной спецификации

Добавьте в спецификацию входных данных две новых строки:

new_input_1 — первая строка с новыми входными данными;

new_input_2 — вторая строка с новыми входными данными.

Редактирование HTML
  1. Код HTML состоит из блоков, описывающих различные элементы интерфейса. Каждый блок может содержать внутри себя другие блоки. Таких уровней вложенности может быть несколько. Например, блок с описанием кнопки ответа содержит в себе блоки с полями для заполнения. Каждое поле тоже содержит в себе другие элементы, например, заголовок и поле для комментария.

    Каждый блок оформляется так:

    <div class="наименование_блока">
      <!-- код блока, может содержать вложенные блоки -->
      ...
    </div>
  2. Найдите блок info, который отвечает за отображение входной спецификации. В нем содержатся блоки info__block, которые описывают отдельные поля входной спецификации. Вставьте после нужного поля следующий код:

    <div class="info__block">
      <div class="info__title">
        {{texts.new_input_1__title}}
      </div>
      <div class="info__content">
        {{new_input_1}}
      </div>
    </div>
    <div class="info__block">
      <div class="info__title">
        {{texts.new_input_2__title}}
      </div>
      <div class="info__content">
        {{new_input_2}}
      </div>
    </div>

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

  3. Также есть второй вариант, когда для исполнителя два поля отображаются последовательно друг за другом, а для заказчика в одну строку.

    В блоке info найдите блок info__review, который содержит несколько блоков info__review-block. После нужного блока info__review-block вставьте блоки с новыми входными полями:

    <!-- В одну строку в режиме приемки -->
    <div class="info__review-block">
      <div class="info__title">
        {{texts.new_input_1__title}}
      </div>
      <div class="info__content">
        {{new_input_1}}
      </div>
    </div>
    <div class="info__review-block">
      <div class="info__title">
        {{texts.new_input_2__title}}
      </div>
      <div class="info__content">
        {{new_input_2}}
      </div>
    </div>

    Затем в блоке info найдите блоки info__block, которые содержатся между строками {{else}} и {{/if}}. После нужного блока info__block вставьте блоки с новыми входными полями:

    <!-- Друг за другом в обычном режиме -->
    <div class="info__block">
      <div class="info__title">
        {{texts.new_input_1__title}}
      </div>
      <div class="info__content">
        {{new_input_1}}
      </div>
    </div>
    <div class="info__block">
      <div class="info__title">
        {{texts.new_input_2__title}}
      </div>
      <div class="info__content">
        {{new_input_2}}
      </div>
    </div>
Редактирование JS
  1. Код JS состоит из блоков, описывающих различные элементы интерфейса. Эти блоки могут быть вложенными (кнопки содержат набор полей, поля содержат набор элементов и т. д.). Каждый блок заключен в фигурные скобки.

    В общем виде элементы описываются так:

    'свойство': 'значение'

    Значение тоже может состоять из нескольких свойств, в этом случае оно заключается в фигурные скобки и образует следующий уровень вложенности.

  2. В самом начале файла находится константа texts, в которой хранятся все необходимые для интерфейса тексты. Добавьте в нее заголовки для новых полей:

    'new_input_1__title': 'Входное поле 1:',
    'new_input_2__title': 'Входное поле 2:',