Настройка Витрины услуг 
-----------------------

Для настройки веб-клиента Витрины услуг используется специальный инструмент - **Конструктор приложений**. Вся кастомизация 
этого клиента выполняется в Конструкторе, доступном по адресу ``<host>:<port>/constructor``.

Авторизация в Конструкторе должна быть выполнена с логином и паролем пользователя, имеющего роль "Конструктор web-клиента" 
(см. раздел "Первоначальная настройка").

Вид клиента "Витрина услуг" в Конструкторе: 

    .. figure:: ../_static/constructor1.png

В этом разделе всюду предполагается, что действия по настройке веб-клиента выполняются в интерфейсе Конструктора. 

URL Витрины услуг
~~~~~~~~~~~~~~~~~

По умолчанию витрина доступна по адресу ``<host>:<port>/showcase``. 

Для того, чтобы изменить URL веб-клиента, нужно: 

#. в панели меню выбрать Клиент - Свойства;
#. в диалоге в поле "URL клиента" ввести нужный URL, сохранить изменения;
#. в панели меню нажать на кнопку **WAR**; на локальный компьютер будет скачан файл с именем ``<url>.war``;
#. добавить этот файл на сервер в папку ``/opt/synergy/jboss/standalone/deployments``.

    .. hint:: 

        Для копирования файла на сервер по ``ssh`` можно воспользоваться командой ``scp``: 

            .. code-block:: html

                $ scp <url>.war root@<host>:/opt/synergy/jboss/standalone/deployments

Расположение плашек на Главной странице
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

Главная страница витрины содержит настроенные услуги из Каталога услуг. Здесь отображаются только те услуги, в которых 
было выбрано значение "Отображать на сайте".  

Все опубликованные услуги отображаются в виде **плашек**, содержащих картинку услуги, ее название, ценность и кнопку 
перехода к странице услуги.

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

#. в навигаторе страниц слева открыть страницу "Список услуг", кликнув по иконке |open_page|: 

    .. figure:: ../_static/constructor2.png

#. мышкой выделить компонент плашки с кодом ``items`` (код компонента указан в блоке "Свойства" в правой части): 

    .. figure:: ../_static/constructor3.png

#. в свойстве выделенного компонента "Ширина" указать необходимую ширину **одной** плашки (в процентах или в пикселях): 

    .. figure:: ../_static/constructor4.png

    .. hint:: Свойство компонента "Ширина", указанное в процентах, означает, какую часть ширины родительской панели 
              может занять текущий компонент. Компоненты плашек располагаются горизонтально слева направо, пока очередная 
              плашка помещается в строку, далее происходит перенос на следующую строку. Таким образом, регулируя ширину 
              одной плашки, можно настроить, сколько плашек может поместиться в одну строку: например, при ширине 51-100% 
              в каждой строке будет только одна плашка, а при ширине 21-25% - по четыре плашки ряд. 

#. при необходимости изменить высоту плашек (по умолчанию внутри компонента ``items`` расположена дочерняя панель ``panel-2``, 
   где указана высота ``400px``): 

    .. figure:: ../_static/constructor5.png

#. проверить, как будет выглядеть Витрина услуг после внесенных изменений, выключив "Режим конструктора" на верхней панели: 

    .. figure:: ../_static/constructor6.png

    .. hint:: Здесь для компонента ``items`` указана ширина 80% - плашки услуг расположены по одной в строке.  

#. снова включить "Режим конструктора", далее сохранить изменения в веб-клиенте, нажав на кнопку сохранения в правом верхнем углу. 
   Внесенные изменения будут отображены в собранном приложении ``<host>:<port>/<URL>`` сразу после сохранения клиента в 
   Конструкторе, повторная сборка приложения не требуется. 

.. |open_page| image:: ../_static/open_page.png

Страница услуги 
~~~~~~~~~~~~~~~

В общем случае страница услуги состоит из следующих блоков: 

#. Название услуги
#. Ценность
#. Картинка услуги
#. Описание услуги
#. Файлы, содержащиеся в папке с документами услуги
#. Кнопка подачи заявки

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

Сделать это можно, изменяя свойства компонентов на странице "Паспорт услуги". Для этого: 

#. в навигаторе страниц слева открыть страницу "Паспорт услуги", кликнув по иконке |open_page|: 

    .. figure:: ../_static/constructor7.png

#. на странице выделить мышкой компонент, который нужно изменить:

    .. figure:: ../_static/constructor8.png

    .. hint:: Когда разработчик выделяет один из компонентов на странице, в правой части отображается раздел "Свойства". 
            Каждому типу компонента - например, надписи, изображению или кнопке - соответствует собственный набор свойств. 
            В примере на скрине видны свойства выделенного компонента "Надпись", в частности: 

            - стиль: выбран стиль "Подзаголовок 1"
            - начертание: курсив, подчеркнутый, зачеркнутый
            - является ли надпись многострочной, т.е. требуются ли переносы строк по словам

            Этот же раздел позволяет перемещать компонент по странице или удалить его. Для этого используются кнопки в верхней 
            части раздела. 

#. изменить свойства выделенного компонента: 

    .. figure:: ../_static/constructor9.png

        С помощью свойств компонента текст с ценностью услуги теперь отображается курсивом. 

#. если требуется переместить компонент на странице - с помощью кнопок |up| и |down| перенести выделенный компонент внутри 
   его панели (например, ниже картинки услуги): 

    .. figure:: ../_static/constructor10.png

        Теперь ценность услуги отображается после ее картинки.

    .. hint:: Если панель, на которой расположен компонент, ориентирована по горизонтали (т.е. в свойствах компонента-панели 
        указано "Горизонтальная"), то вместо кнопок |up| и |down| могут быть использованы кнопки перемещения влево и вправо. 
        Они применяются таким же образом, как и перемещение вверх и вниз. 

    .. hint:: Другой способ переместить компонент - вырезать его кнопкой |cut|, потом выделить целевую панель и вставить в нее 
        кнопкой |paste|. 

.. |up| image:: ../_static/up.png

.. |down| image:: ../_static/down.png

.. |cut| image:: ../_static/cut.png

.. |paste| image:: ../_static/paste.png

Стили Витрины услуг
~~~~~~~~~~~~~~~~~~~

При внедрении Synergy Showcase может возникнуть потребность изменить стиль приложения - в частности, цвета и шрифты - на те, 
которые используются в организации. 

Централизованно это можно сделать в **ресурсах** Конструктора, используя стандартные возможности CSS. Для этого: 

#. в свойствах компонентов, требующих доработки стиля, задать название CSS-классов для них (можно указать несколько классов через пробел): 

    .. figure:: ../_static/constructor11.png

        Например, по умолчанию для компонента плашек услуг используются классы ``card`` и ``adaptive``. 

#. в разделе "Ресурсы" (левая часть рабочей области Конструктора, ниже разделов "Страницы" и "Компоненты") открыть элемент 
   ``showCaseKmtlcKz.css``, нажав на иконку |open_page|:

    .. figure:: ../_static/style1.png

        В этом файле собраны стили всех компонентов Витрины услуг. 

#. изменить стили существующего класса или добавить описание нового класса: 

    .. figure:: ../_static/style2.png

    Выделено описание класса ``card``, указанного в свойствах компонента плашки услуги. 

    .. hint:: Пример определения классов в ресурсах CSS: 

        .. code-block:: css

            *{
                font-family: 'Lora', serif;
            }

            .text-style{
                color: #002d37;
            }

            .contur{
                background: none;
            }

            .primary{
                border: 1px solid #002d37;
                color: #002d37;
            }
            .secondary{
                border: 1px solid #037690;
                color: #037690;
            }
            .primary:hover{
                background:#002d37;
                color: #fff;
            }
            .secondary:hover{
                background:#037690;
                color: #fff;
            }

            .card {
                border: 2px solid rgb(3, 118, 144);
                margin:5px;
            }

            .auth-card {
                box-shadow: 0px 0px 15px rgba(0,0,0,.2);
                border-radius: 5px;
                overflow: hidden;
                margin-top: 20px;
                padding: 10px;
            }

#. сохранить изменения в веб-клиенте, нажав на кнопку сохранения в правом верхнем углу

#. скачать ``WAR`` приложения и разместить его на сервере (см. инструкцию в разделе "URL Витрины услуг"). 

    .. attention:: Изменения в файлах ресурсов приложения - в его стилях или скриптах ``js`` применяются только после повторной 
        сборки приложения. 

Если необходимо изменить внешний вид компонента точечно, без применения классов CSS и без пересборки приложения, можно 
добавить описание CSS в свойствах компонента, поле "Стили":

    .. figure:: ../_static/style3.png