| <!DOCTYPE html> |
| <html xmlns:th="https://www.thymeleaf.org"> |
| |
| <head> |
| </head> |
| |
| <body> |
| <div th:fragment="servicesList" id="selectedServices" th:object="${workflowStatus}"> |
| <div class="tree"> |
| <span class="stem">Input</span> |
| <i class="fas fa-plus-circle text-primary action-lg" |
| onclick="openSelectModal('--', '--')" |
| title="Add service" |
| th:if="*{uuid == null}"></i> |
| <i class="fas fa-times-circle fa-2x text-black action-lg" |
| title="Delete All Services" |
| onclick="openRemoveAllServiceModal()" |
| th:if="not *{selectedServices.isEmpty()} and *{uuid == null}"></i> |
| <ul> |
| <li th:each="selected : *{selectedServices}" th:classappend="*{uuid != null} ? disabled_service : ''"> |
| <span |
| th:class="${selected.children.isEmpty()}? space : caret-down" |
| th:text="${selected.isStructuralNode()? '' : selected.service.name}" |
| th:title="${selected.isStructuralNode()? '' : selected.service.description}" |
| onclick="toggleBranch(this)" |
| data-toggle="tooltip" |
| th:classappend="*{uuid != null} ? disabled_service : ''">Service 1</span> |
| <i class="fas fa-plus-circle text-primary action" |
| th:attr="onclick=|openSelectModal('${selected.isStructuralNode()? '' : selected.service.key}', '${selected.getQualifiedId()}')|" |
| title="Add Child Service" |
| th:if="*{uuid == null}"></i> |
| <i class="fas fa-times-circle text-black action" |
| th:attr="onclick=|openRemoveServiceModal('--', '${selected.isStructuralNode()? '' : selected.service.key}')|" |
| title="Delete Service" |
| th:if="*{uuid == null}"></i> |
| <i class="fas fa-cogs text-secondary action" |
| th:attr="onclick=|openConfigModal('${selected.getQualifiedId()}')|" |
| title="Service Configuration"></i> |
| |
| <section th:include="serviceChildren :: children" th:with="children=${selected.children}, parent=${selected}"></section> |
| </li> |
| </ul> |
| </div> |
| |
| <!-- The modal view for selecting child services --> |
| <div id="serviceModal" class="modal"> |
| <!-- Modal content --> |
| <div class="modal-content"> |
| <div class="d-flex justify-content-end"> |
| <span class="modalClose" id="closemodal" onclick="closeServiceModal()">×</span> |
| </div> |
| <h3 class="border-bottom">Add service...</h3> |
| <div class="scroll"> |
| <div class="servicemodalgrid"> |
| <label for="pservice">Parent Service:</label> |
| <input class="form-control" type="text" id="pservice" readonly> |
| <label for="pserviceId">Parent Service Id:</label> |
| <input class="form-control" type="text" id="pserviceId" readonly> |
| <label for="serviceSelect">Service:</label> |
| <select id="serviceSelect" |
| class="form-control" |
| th:attr="onchange=|updateSelectedServicesWithParent(this.value)|"> |
| <option></option> |
| <option |
| th:each="service : ${cloudServiceDefinitions}" |
| th:text="${service.name}" |
| th:value="${service.key}"> |
| </option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Remove Service Modal --> |
| <div id="removeserviceModal" class="modal"> |
| <!-- Modal content --> |
| <div class="modal-content"> |
| <div class="d-flex justify-content-end"> |
| <span class="modalClose" id="closeRemoveModal" onclick="closeRemoveServiceModal()">×</span> |
| </div> |
| <h3 id="removeServiceHeader" class="border-bottom mb-2">Delete a service...</h3> |
| <div class="scroll"> |
| <p id="removeServiceTxt">Are you sure you want to delete this service and all its children?</p> |
| <div class="servicemodalgrid" id="removeModalGrid"> |
| <label for="parentId">Parent Service Id:</label> |
| <input class="form-control" type="text" id="parentId" readonly> |
| <label for="serviceKey">Service Key:</label> |
| <input class="form-control" type="text" id="serviceKey" readonly> |
| </div> |
| <div class="d-flex justify-content-center my-4"> |
| <a class="btn btn-primary fm-ctrl-left half-btn" onclick="removeService()">Yes</a> |
| <a class="btn btn-secondary fm-ctrl-right half-btn" onclick="closeRemoveServiceModal()">No</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </body> |
| </html> |
