diff --git a/src/main/resources/static/js/pipeline.js b/src/main/resources/static/js/pipeline.js index 7633a6bbd..c44779c1f 100644 --- a/src/main/resources/static/js/pipeline.js +++ b/src/main/resources/static/js/pipeline.js @@ -299,21 +299,42 @@ document.getElementById("addOperationBtn").addEventListener("click", function () } } - listItem.innerHTML = ` -
-
${selectedOperation}
-
- - - - -
-
- `; + let containerDiv = document.createElement("div"); + containerDiv.className = "d-flex justify-content-between align-items-center w-100"; + + let operationNameDiv = document.createElement("div"); + operationNameDiv.className = "operationName"; + operationNameDiv.textContent = selectedOperation; + containerDiv.appendChild(operationNameDiv); + + let arrowsDiv = document.createElement("div"); + arrowsDiv.className = "arrows d-flex"; + + let moveUpButton = document.createElement("button"); + moveUpButton.className = "btn btn-secondary move-up ms-1"; + moveUpButton.innerHTML = 'arrow_upward'; + arrowsDiv.appendChild(moveUpButton); + + let moveDownButton = document.createElement("button"); + moveDownButton.className = "btn btn-secondary move-down ms-1"; + moveDownButton.innerHTML = 'arrow_downward'; + arrowsDiv.appendChild(moveDownButton); + + let settingsButton = document.createElement("button"); + settingsButton.className = `btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1`; + if (!hasSettings) { + settingsButton.disabled = true; + } + settingsButton.innerHTML = 'settings'; + arrowsDiv.appendChild(settingsButton); + + let removeButton = document.createElement("button"); + removeButton.className = "btn btn-danger remove ms-1"; + removeButton.innerHTML = 'close'; + arrowsDiv.appendChild(removeButton); + + containerDiv.appendChild(arrowsDiv); + listItem.appendChild(containerDiv); pipelineList.appendChild(listItem);