| <!DOCTYPE html> |
| <html xmlns:th="https://www.thymeleaf.org"> |
| |
| <head> |
| </head> |
| |
| <body> |
| <div th:fragment="servicesList" id="selectedServices" th:object="${workflowStatus}"> |
| <ul class="list-group"> |
| <li th:each="selected : *{selectedServices}" class="list-group-item d-flex justify-content-between" th:classappend="*{uuid != null} ? disabled_service : ''"> |
| <p |
| class="p-0 flex-grow-1 plist" |
| th:text="${selected.service.name}" |
| th:title="${selected.service.description}" |
| data-toggle="tooltip" |
| th:classappend="*{uuid != null} ? disabled_service : ''">Service</p> |
| <a |
| th:if="*{uuid == null}" |
| th:attr="onclick=|removeSelectedServices('${selected.service.key}')|" |
| class="btn btn-primary btn-sm btn-rmv"> |
| <i class="fas fa-times"></i> |
| </a> |
| </li> |
| </ul> |
| <select |
| name="services" |
| id="services" |
| onchange="updateSelectedServices(this.value)" |
| class="form-control" |
| th:if="*{uuid == null}"> |
| <option></option> |
| <option |
| th:each="service : ${cloudServiceDefinitions}" |
| th:text="${service.name}" |
| th:value="${service.key}"> |
| </option> |
| </select><br> |
| |
| <div th:if="not *{selectedServices.isEmpty()}"> |
| <div th:each="node, nodeStatus : *{selectedServices}" class="mb-3"> |
| <h4 th:text="${node.service.name + ' Configuration'}">Config</h4> |
| <div th:each="parameter, parameterStatus : ${node.serviceConfiguration.parameterList}"> |
| <!-- single non-boolean value --> |
| <div 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="*{selectedServices[__${nodeStatus.index}__].serviceConfiguration.parameterList[__${parameterStatus.index}__].value}" |
| th:disabled="*{uuid != null}"/> |
| </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="*{selectedServices[__${nodeStatus.index}__].serviceConfiguration.parameterList[__${parameterStatus.index}__].value}" |
| th:value="true" |
| th:disabled="*{uuid != null}"> |
| <label class="form-check-label" th:text="${parameter.name}" th:for="${parameter.key}">Label</label> |
| </div> |
| <!-- multiple possible values + cardinality multiple = checkboxes --> |
| <div th:if="${parameter.cardinality == 'multiple' and parameter.possibleValues.size() > 1}"> |
| <label th:text="${parameter.name}">Label</label> |
| <div th:each="pv : ${parameter.possibleValues}" class="form-check"> |
| <input |
| type="checkbox" |
| th:field="*{selectedServices[__${nodeStatus.index}__].serviceConfiguration.parameterList[__${parameterStatus.index}__].value}" |
| th:value="${pv}" |
| th:disabled="*{uuid != null}"> |
| <label class="form-check-label" th:text="${pv}">Value</label> |
| </div> |
| </div> |
| <!-- multiple possible values + cardinality single = combobox --> |
| <div th:if="${parameter.cardinality == 'single' and parameter.possibleValues.size() > 1}"> |
| <label th:text="${parameter.name}">Label</label> |
| <select |
| class="custom-select" |
| th:field="*{selectedServices[__${nodeStatus.index}__].serviceConfiguration.parameterList[__${parameterStatus.index}__].value}" |
| th:disabled="*{uuid != null}"> |
| <option value=""></option> |
| <option |
| th:each="pv : ${parameter.possibleValues}" |
| th:text="${pv}" |
| th:value="${pv}"> |
| </option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </body> |
| </html> |
