HTML, CSS, JS and JAVA corrections (#810)
* CSS corrections * HTML corrections * JS corrections * JAVA corrections * remove tab * CSS corrections 2 * JS corrections 2 * back to the roots * max-linie 127 * add slash hr|br * return bootstrap-icons.css * return bootstrap-icons.min.css * return bootstrap.min.css * Update bootstrap-icons.css * Update bootstrap-icons.min.css * Update bootstrap-icons.min.css * Update bootstrap.min.css * CSS corrections * HTML corrections * JS corrections * JAVA corrections * remove tab * CSS corrections 2 * JS corrections 2 * back to the roots * max-linie 127 * add slash hr|br * return bootstrap-icons.css * Update bootstrap-icons.css * Bootstrap CSS * Update prism.css
This commit is contained in:
Ludy
@@ -1,254 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html th:lang="${#locale.toString()}"
|
||||
th:lang-direction="#{language.direction}"
|
||||
xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<th:block
|
||||
th:insert="~{fragments/common :: head(title=#{pipeline.title}, header=#{pipeline.header})}"></th:block>
|
||||
<style>
|
||||
.btn-margin {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.bordered-box {
|
||||
border: 1px solid #ddd;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.center-element {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.element-margin {
|
||||
margin: 10px 0;
|
||||
/* Adjust this value to increase/decrease the margin as needed */
|
||||
}
|
||||
</style>
|
||||
|
||||
<script th:inline="javascript">
|
||||
const saveSettings = /*[[#{pipelineOptions.saveSettings}]]*/ '';
|
||||
<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<th:block th:insert="~{fragments/common :: head(title=#{pipeline.title}, header=#{pipeline.header})}"></th:block>
|
||||
<link rel="stylesheet" href="css/pipeline.css" th:if="${currentPage == 'pipeline'}">
|
||||
<script th:inline="javascript">
|
||||
const saveSettings = /*[[#{pipelineOptions.saveSettings}]]*/ '';
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page-container">
|
||||
<div id="content-wrap">
|
||||
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
||||
<body>
|
||||
<div id="page-container">
|
||||
<div id="content-wrap">
|
||||
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
|
||||
<br /><br />
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<h1 th:text="#{pipeline.header}"></h1>
|
||||
<h2 th:text="#{WorkInProgess}"></h2>
|
||||
<div class="bordered-box">
|
||||
<div class="text-end text-top">
|
||||
<button id="uploadPipelineBtn" class="btn btn-primary" th:text="#{pipeline.uploadButton}"></button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pipelineSettingsModal" th:text="#{pipeline.configureButton}"></button>
|
||||
</div>
|
||||
|
||||
<br> <br>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="center-element">
|
||||
<div class="element-margin">
|
||||
<select id="pipelineSelect" class="custom-select">
|
||||
<option value="{"name":"Custom","pipeline":[],"_examples":{"outputDir":"{outputFolder}/{folderName}","outputFileName":"{filename}-{pipelineName}-{date}-{time}"},"outputDir":"{outputFolder}","outputFileName":"{filename}"}" th:text="#{pipeline.defaultOption}"></option>
|
||||
<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" th:text="#{pipeline.submitButton}"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 th:text="#{pipeline.header}"></h1>
|
||||
<h2 th:text="#{WorkInProgess}"> </h2>
|
||||
<div class="bordered-box">
|
||||
<div class="text-end text-top">
|
||||
<button id="uploadPipelineBtn" class="btn btn-primary"
|
||||
th:text="#{pipeline.uploadButton}"></button>
|
||||
<button type="button" class="btn btn-primary"
|
||||
data-bs-toggle="modal" data-bs-target="#pipelineSettingsModal"
|
||||
th:text="#{pipeline.configureButton}"></button>
|
||||
<p>Below info is Alpha only, will be removed and hence not translated</p>
|
||||
|
||||
</div>
|
||||
<h3>Current Limitations</h3>
|
||||
|
||||
<div class="center-element">
|
||||
<div class="element-margin">
|
||||
<select id="pipelineSelect" class="custom-select">
|
||||
<option
|
||||
value="{"name":"Custom","pipeline":[],"_examples":{"outputDir":"{outputFolder}/{folderName}","outputFileName":"{filename}-{pipelineName}-{date}-{time}"},"outputDir":"{outputFolder}","outputFileName":"{filename}"}"
|
||||
th:text="#{pipeline.defaultOption}"></option>
|
||||
<ul>
|
||||
<li>Cannot have more than one of the same operation</li>
|
||||
<li>Cannot input additional files via UI</li>
|
||||
<li>All files and operations run in serial mode</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>How to use pre-load configs in web UI</h3>
|
||||
<ul>
|
||||
<li>Download config files</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>
|
||||
|
||||
<h3>Todo</h3>
|
||||
<ul>
|
||||
<li>Save to browser/Account</li>
|
||||
<li>offline folder scan mode checks and testing for unique usecases</li>
|
||||
<li>Improve operation config settings UI</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<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"
|
||||
th:text="#{pipeline.submitButton}"></button>
|
||||
<h2>User Guide for Local Directory Scanning and File Processing</h2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Setting Up Watched Folders:</h3>
|
||||
<p>Create a folder where you want your files to be monitored. This is your 'watched folder'.</p>
|
||||
<p>The default directory for this is <code>./pipeline/watchedFolders/</code></p>
|
||||
<p>Place any directories you want to be scanned into this folder, this folder should contain multiple folders each for their own tasks and pipelines.</p>
|
||||
|
||||
<h3>Configuring Processing with JSON Files:</h3>
|
||||
<p>In each directory you want processed (e.g. <code>./pipeline/watchedFolders/officePrinter</code>), include a JSON configuration file.</p>
|
||||
<p>This JSON file should specify how you want the files in the directory to be handled (e.g., what operations to perform on them) which can be made, configured and downloaded from Stirling-PDF Pipeline interface.</p>
|
||||
|
||||
<p>Below info is Alpha only, will be removed and hence not translated</p>
|
||||
<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>All files and operations run in serial mode</li>
|
||||
</ul>
|
||||
<h3>Automatic Scanning and Processing:</h3>
|
||||
<p>The system automatically checks the watched folder every minute for new directories and files to process.</p>
|
||||
<p>When a directory with a valid JSON configuration file is found, it begins processing the files inside as per the configuration.</p>
|
||||
|
||||
<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>
|
||||
<h3>Processing Steps:</h3>
|
||||
<p>Files in each directory are processed according to the instructions in the JSON file.</p>
|
||||
<p>This might involve file conversions, data filtering, renaming files, etc. If the output of a step is a zip, this zip will be automatically unzipped as it passes to next process.</p>
|
||||
|
||||
<h3>How to use pre-load configs in web UI</h3>
|
||||
<ul>
|
||||
<li>Download config files</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>
|
||||
<h3>Results and Output:</h3>
|
||||
<p>After processing, the results are saved in a specified output location. This could be a different folder or location as defined in the JSON file or the default location <code>./pipeline/finishedFolders/</code>.</p>
|
||||
<p>Each processed file is named and organized according to the rules set in the JSON configuration.</p>
|
||||
|
||||
<h3>Todo</h3>
|
||||
<ul>
|
||||
<li>Save to browser/Account</li>
|
||||
<li>offline folder scan mode checks and testing for unique usecases</li>
|
||||
<li>Improve operation config settings UI</li>
|
||||
</ul>
|
||||
<h3>Completion and Cleanup:</h3>
|
||||
<p>Once processing is complete, the original files in the watched folder's directory are removed.</p>
|
||||
<p>You can find the processed files in the designated output location.</p>
|
||||
|
||||
<h3>Error Handling:</h3>
|
||||
<p>If there's an error during processing, the system will not delete the original files, allowing you to check and retry if necessary.</p>
|
||||
|
||||
<h2>User Guide for Local Directory Scanning and File
|
||||
Processing</h2>
|
||||
<h3>User Interaction:</h3>
|
||||
<p>As a user, your main tasks are to set up the watched folders, place directories with files for processing, and create the corresponding JSON configuration files.</p>
|
||||
<p>The system handles the rest, including scanning, processing, and outputting results.</p>
|
||||
|
||||
<h3>Setting Up Watched Folders:</h3>
|
||||
<p>Create a folder where you want your files to be monitored.
|
||||
This is your 'watched folder'.</p>
|
||||
<p>
|
||||
The default directory for this is
|
||||
<code>./pipeline/watchedFolders/</code>
|
||||
</p>
|
||||
<p>Place any directories you want to be scanned into this
|
||||
folder, this folder should contain multiple folders each for their
|
||||
own tasks and pipelines.</p>
|
||||
<!-- The Modal -->
|
||||
<div class="modal" id="pipelineSettingsModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content dark-card">
|
||||
|
||||
<h3>Configuring Processing with JSON Files:</h3>
|
||||
<p>
|
||||
In each directory you want processed (e.g
|
||||
<code>./pipeline/watchedFolders/officePrinter</code>
|
||||
), include a JSON configuration file.
|
||||
</p>
|
||||
<p>This JSON file should specify how you want the files in the
|
||||
directory to be handled (e.g., what operations to perform on them)
|
||||
which can be made, configured and downloaded from Stirling-PDF
|
||||
Pipeline interface.</p>
|
||||
<!-- Modal Header -->
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" th:text="#{pipelineOptions.header}"></h2>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<h3>Automatic Scanning and Processing:</h3>
|
||||
<p>The system automatically checks the watched folder every
|
||||
minute for new directories and files to process.</p>
|
||||
<p>When a directory with a valid JSON configuration file is
|
||||
found, it begins processing the files inside as per the
|
||||
configuration.</p>
|
||||
<!-- Modal body -->
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="pipelineName" class="form-label" th:text="#{pipelineOptions.pipelineNameLabel}"></label>
|
||||
<input type="text" id="pipelineName" class="form-control" th:placeholder="#{pipelineOptions.pipelineNamePrompt}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="operationsDropdown" th:text="#{pipelineOptions.selectOperation}"></label>
|
||||
<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" th:text="#{pipelineOptions.addOperationButton}"></button>
|
||||
</div>
|
||||
<h3 id="pipelineHeader" style="display: none;" th:text="#{pipelineOptions.pipelineHeader}"></h3>
|
||||
|
||||
<h3>Processing Steps:</h3>
|
||||
<p>Files in each directory are processed according to the
|
||||
instructions in the JSON file.</p>
|
||||
<p>This might involve file conversions, data filtering,
|
||||
renaming files, etc. If the output of a step is a zip, this zip
|
||||
will be automatically unzipped as it passes to next process.</p>
|
||||
<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>
|
||||
|
||||
<h3>Results and Output:</h3>
|
||||
<p>
|
||||
After processing, the results are saved in a specified output
|
||||
location. This could be a different folder or location as defined
|
||||
in the JSON file or the default location
|
||||
<code>./pipeline/finishedFolders/</code>
|
||||
.
|
||||
</p>
|
||||
<p>Each processed file is named and organized according to the
|
||||
rules set in the JSON configuration.</p>
|
||||
<!-- Modal footer -->
|
||||
<div class="modal-footer">
|
||||
<button id="savePipelineBtn" class="btn btn-success" th:text="#{pipelineOptions.saveButton}"></button>
|
||||
<button id="validateButton" class="btn btn-success" th:text="#{pipelineOptions.validateButton}"></button>
|
||||
|
||||
<h3>Completion and Cleanup:</h3>
|
||||
<p>Once processing is complete, the original files in the
|
||||
watched folder's directory are removed.</p>
|
||||
<p>You can find the processed files in the designated output
|
||||
location.</p>
|
||||
|
||||
<h3>Error Handling:</h3>
|
||||
<p>If there's an error during processing, the system will not
|
||||
delete the original files, allowing you to check and retry if
|
||||
necessary.</p>
|
||||
|
||||
<h3>User Interaction:</h3>
|
||||
<p>As a user, your main tasks are to set up the watched
|
||||
folders, place directories with files for processing, and create
|
||||
the corresponding JSON configuration files.</p>
|
||||
<p>The system handles the rest, including scanning, processing,
|
||||
and outputting results.</p>
|
||||
|
||||
|
||||
<!-- The Modal -->
|
||||
<div class="modal" id="pipelineSettingsModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content dark-card">
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" th:text="#{pipelineOptions.header}"></h2>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<!-- Modal body -->
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="pipelineName" class="form-label"
|
||||
th:text="#{pipelineOptions.pipelineNameLabel}"></label> <input
|
||||
type="text" id="pipelineName" class="form-control"
|
||||
th:placeholder="#{pipelineOptions.pipelineNamePrompt}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="operationsDropdown" th:text="#{pipelineOptions.selectOperation}"></label>
|
||||
<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"
|
||||
th:text="#{pipelineOptions.addOperationButton}"></button>
|
||||
|
||||
</div>
|
||||
<h3 id="pipelineHeader" style="display: none;"
|
||||
th:text="#{pipelineOptions.pipelineHeader}"></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"
|
||||
th:text="#{pipelineOptions.saveButton}"></button>
|
||||
<button id="validateButton" class="btn btn-success"
|
||||
th:text="#{pipelineOptions.validateButton}"></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>
|
||||
|
||||
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<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>
|
||||
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user