2023-07-12 00:17:44 +01:00
<!DOCTYPE html>
< html th:lang = "${#locale.toString()}"
th:lang-direction = "#{language.direction}"
xmlns:th = "http://www.thymeleaf.org" >
2023-07-15 16:06:33 +01:00
< th:block
th:insert = "~{fragments/common :: head(title=#{pipeline.title})}" ></ th:block >
< style >
2023-07-12 00:17:44 +01:00
. btn-margin {
margin-right : 2 px ;
}
2023-07-15 16:06:33 +01:00
. bordered-box {
border : 1 px solid #ddd ;
padding : 20 px ;
margin : 20 px ;
width : 70 % ;
}
. center-element {
width : 80 % ;
text-align : center ;
margin : auto ;
}
. element-margin {
margin : 10 px 0 ; /* Adjust this value to increase/decrease the margin as needed */
}
2023-07-12 00:17:44 +01:00
</ style >
2023-07-15 16:06:33 +01:00
< body >
< div id = "page-container" >
< div id = "content-wrap" >
< div th:insert = "~{fragments/navbar.html :: navbar}" ></ div >
< br > < br >
< div class = "container" >
< div class = "row justify-content-center" >
2023-12-23 12:29:32 +00:00
2023-12-23 15:47:18 +00:00
< h1 > (Alpha) Pipeline Menu (Huge work in progress, very buggy!)</ h1 >
2023-07-15 16:06:33 +01:00
< div class = "bordered-box" >
2023-08-20 21:57:19 +01:00
< div class = "text-end text-top" >
2023-07-15 16:06:33 +01:00
< button id = "uploadPipelineBtn" class = "btn btn-primary" > Upload
Custom</ button >
2023-08-20 21:57:19 +01:00
< button type = "button" class = "btn btn-primary" data-bs-toggle = "modal"
data-bs-target = "#pipelineSettingsModal" > Configure</ button >
2023-07-15 16:06:33 +01:00
</ div >
< div class = "center-element" >
< div class = "element-margin" >
< select id = "pipelineSelect" class = "custom-select" >
< th:block th:each = "config : ${pipelineConfigsWithNames}" >
< option th:value = "${config.json}" th:text = "${config.name}" ></ option >
</ th:block >
</ select >
</ div >
< div class = "element-margin" >
< div th:replace = "~{fragments/common :: fileSelector(name='fileInput', multiple=true)}" ></ div >
</ div >
< div class = "element-margin" >
< button class = "btn btn-primary" id = "submitConfigBtn" > Submit</ button >
</ div >
</ div >
</ div >
2023-12-23 15:47:18 +00:00
< h3 > Current Limitations</ h3 >
< ul >
< li > Cannot have more than one of the same operation</ li >
< li > Cannot input additional files via UI</ li >
< li > Does not work with multi-input functions yet (like merges)</ li >
</ ul >
2023-12-23 12:29:32 +00:00
2023-12-23 15:47:18 +00:00
< h3 > How it Works Notes</ h3 >
< ul >
< li > Configure the pipeline config file and input files to run files against it</ li >
< li > For reuse, download the config file and re-upload it when needed, or place it in /pipeline/defaultWebUIConfigs/ to auto-load in the web UI for all users</ li >
</ ul >
2023-12-23 12:29:32 +00:00
2023-07-15 16:06:33 +01:00
<!-- The Modal -->
< div class = "modal" id = "pipelineSettingsModal" >
< div class = "modal-dialog" >
2023-12-20 19:29:13 +00:00
< div class = "modal-content dark-card" >
2023-07-15 16:06:33 +01:00
<!-- Modal Header -->
< div class = "modal-header" >
< h2 class = "modal-title" > Pipeline Configuration</ h2 >
2023-08-20 21:57:19 +01:00
< button type = "button" class = "close" data-bs-dismiss = "modal" > × </ button >
2023-07-15 16:06:33 +01:00
</ div >
<!-- Modal body -->
< div class = "modal-body" >
< div class = "mb-3" >
< label for = "pipelineName" class = "form-label" > Pipeline
Name</ label > < input type = "text" id = "pipelineName"
class = "form-control" placeholder = "Enter pipeline name here" >
</ div >
< div class = "mb-3" >
< select id = "operationsDropdown" class = "form-select" >
<!-- Options will be dynamically populated here -->
</ select >
</ div >
< div class = "mb-3" >
< button id = "addOperationBtn" class = "btn btn-primary" > Add
operation</ button >
</ div >
< h3 > Pipeline:</ h3 >
< ol id = "pipelineList" class = "list-group" >
<!-- Pipeline operations will be dynamically populated here -->
</ ol >
< div id = "pipelineSettingsContent" >
<!-- pipelineSettings will be dynamically populated here -->
</ div >
</ div >
<!-- Modal footer -->
< div class = "modal-footer" >
< button id = "savePipelineBtn" class = "btn btn-success" > Download</ button >
< button id = "validateButton" class = "btn btn-success" > Validate</ button >
< div class = "btn-group" >
< input type = "file" id = "uploadPipelineInput" accept = ".json"
style = "display: none;" >
</ div >
</ div >
</ div >
</ div >
</ div >
< script src = "js/pipeline.js" ></ script >
</ div >
</ div >
</ div >
2023-07-12 00:17:44 +01:00
< div th:insert = "~{fragments/footer.html :: footer}" ></ div >
</ div >
</ body >
2023-06-13 00:32:15 +01:00
</ html >