| <!DOCTYPE html> |
| <html xmlns:th="https://www.thymeleaf.org"> |
| |
| <head> |
| </head> |
| |
| <body> |
| <div id="configurationModal" onclick="onConfigurationBackgroundClick()" class="modal" th:fragment="config"> |
| <!-- Modal content --> |
| <form id="configForm" action="#" th:action="@{/config/__${id}__}" method="post" th:object="${config}" class="modal-content"> |
| <div class="d-flex justify-content-end"> |
| <span class="modalClose" id="closeConfigModal" onclick="closeConfigModal()">×</span> |
| </div> |
| <h3 class="border-bottom mb-2">Configuration...</h3> |
| |
| <div class="scroll"> |
| <h5 th:text="${name + ' Service'}">Service</h5> |
| <div th:if="${config.serviceDescription != '' and config.serviceDescription != null}" class="d-flex flex-row mb-3 ml-3"> |
| <i class="fas fa-info-circle text-secondary my-auto"></i> |
| <p th:text="${config.serviceDescription}" class="font-italic config-desc ml-2 my-auto text-secondary">Description</p> |
| </div> |
| <div class="servicemodalgrid mb-1"> |
| <label for="parentId">Service Id:</label> |
| <input class="form-control" type="text" id="parentId" th:value="${id}" readonly> |
| </div> |
| |
| <div class="mb-3"> |
| <div th:each="parameter, parameterStatus : ${config.parameterList}"> |
| <!-- Bind all unused variables of the configuration for a complete |
| representation of the configuration in the backend. But make them |
| invisible in the front end. --> |
| <div class="d-none"> |
| <input type="text" th:field=*{parameterList[__${parameterStatus.index}__].cardinality}/> |
| <input type="text" th:field=*{parameterList[__${parameterStatus.index}__].type}/> |
| <input type="text" th:field=*{parameterList[__${parameterStatus.index}__].name}/> |
| <input type="text" th:field=*{parameterList[__${parameterStatus.index}__].key}/> |
| <input type="text" th:field=*{parameterList[__${parameterStatus.index}__].mandatory}/> |
| <input type="text" th:field=*{parameterList[__${parameterStatus.index}__].managerParameter}/> |
| <div th:each="pv, pvStatus : ${parameter.possibleValues}"> |
| <input type="text" th:field=*{parameterList[__${parameterStatus.index}__].possibleValues[__${pvStatus.index}__]}/> |
| </div> |
| </div> |
| |
| <!-- single non-boolean value --> |
| <div class="servicemodalgrid my-1" th:if="${parameter.cardinality == 'single' and parameter.type != 'boolean' and parameter.possibleValues.isEmpty()}"> |
| <label class="form-check-label" th:text="${parameter.name + ':'}">Label</label> |
| <input |
| class="form-control" |
| type="text" |
| th:field="*{parameterList[__${parameterStatus.index}__].value}" |
| th:disabled="${uuid != null}" |
| th:title="*{parameterList[__${parameterStatus.index}__].description}" |
| data-toggle="tooltip"/> |
| </div> |
| |
| <!-- single boolean value --> |
| <div th:if="${parameter.cardinality == 'single' and parameter.type == 'boolean'}" class="form-check"> |
| <input |
| class="form-check-input" |
| type="checkbox" |
| th:field="*{parameterList[__${parameterStatus.index}__].value}" |
| th:value="true" |
| th:disabled="${uuid != null}"> |
| <label |
| class="form-check-label" |
| th:text="${parameter.name}" |
| th:for="${parameter.key}" |
| th:title="*{parameterList[__${parameterStatus.index}__].description}" |
| data-toggle="tooltip">Label</label> |
| </div> |
| |
| <!-- multiple possible values + cardinality multiple = tags --> |
| <div class="servicemodalgrid my-1" th:if="${parameter.cardinality == 'multiple' and parameter.possibleValues.size() > 1}"> |
| <label |
| th:text="${parameter.name + ':'}" |
| th:title="*{parameterList[__${parameterStatus.index}__].description}" |
| data-toggle="tooltip">Label</label> |
| |
| <!-- The visible input for the multiple values. The binding to the configuration object is not done here. --> |
| <div class="dropdown w-100"> |
| <div id="configurationParameterOptions" |
| class="d-flex flex-wrap border p-2" |
| th:classappend="${uuid != null} ? 'disabled_service disabled_control' : ''" |
| onclick="displayServiceProfileOptions()"> |
| <th:block th:each="pv : ${parameter.possibleValues}"> |
| <div th:if="${parameter.value != null && parameter.value.contains(pv)}" class="d-flex bg-info px-2 py-1 mr-1 align-middle tag"> |
| <p class="mr-1 my-auto pr-1 border-right border-secondary text-light text-nowrap tagText" th:text="${pv}">Text</p> |
| <a class="my-auto text-light tagClose" |
| th:classappend="${uuid != null} ? disabled_control : ''" |
| onclick="removeConfigurationParameterOption(this)"> |
| <i class="fas fa-times-circle"></i> |
| </a> |
| </div> |
| </th:block> |
| </div> |
| <div id="dropdown-content"> |
| <div th:each="pv : ${parameter.possibleValues}"> |
| <a th:text="${pv}" onclick="addConfigurationParameterOption(this)">Text</a> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Bind the multiple values to this hidden input --> |
| <input |
| th:field="*{parameterList[__${parameterStatus.index}__].value}" |
| class="d-none" |
| id="configurationParameterOptionsSelected" |
| onchange="onConfigurationParameterOptionChanged(this)"/> |
| </div> |
| |
| <!-- multiple possible values + cardinality single = combobox --> |
| <div class="servicemodalgrid my-1" th:if="${parameter.cardinality == 'single' and parameter.possibleValues.size() > 1}"> |
| <label th:text="${parameter.name + ':'}">Label</label> |
| <select |
| class="custom-select" |
| th:field="*{parameterList[__${parameterStatus.index}__].value}" |
| th:disabled="${uuid != null}" |
| th:title="*{parameterList[__${parameterStatus.index}__].description}" |
| data-toggle="tooltip"> |
| <option value=""></option> |
| <option |
| th:each="pv : ${parameter.possibleValues}" |
| th:text="${pv}" |
| th:value="${pv}"> |
| </option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <div class="d-flex justify-content-center my-4" th:if="${uuid == null}"> |
| <a class="btn btn-secondary half-btn fm-ctrl-left" th:attr="onclick=|resetConfiguration('${id}')|">Reset</a> |
| <a class="btn btn-primary half-btn fm-ctrl-right" onclick="saveConfiguration()">Save</a> |
| </div> |
| </div> |
| </form> |
| </div> |
| </body> |
| </html> |
