Stirling-PDF/src/main/resources/templates/pipeline.html

<!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}]]*/ '';
    </script>

<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">

					<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>

						<div class="center-element">
							<div class="element-margin">
								<select id="pipelineSelect" class="custom-select">
									<option
										value="{&quot;name&quot;:&quot;Custom&quot;,&quot;pipeline&quot;:[],&quot;_examples&quot;:{&quot;outputDir&quot;:&quot;{outputFolder}/{folderName}&quot;,&quot;outputFileName&quot;:&quot;{filename}-{pipelineName}-{date}-{time}&quot;},&quot;outputDir&quot;:&quot;{outputFolder}&quot;,&quot;outputFileName&quot;:&quot;{filename}&quot;}"
										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>


					<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>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>


					<h2>User Guide for Local Directory Scanning and File
						Processing</h2>

					<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>

					<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>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>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>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>
</html>
pipeline stuff 2023-07-12 01:17:44 +02:00			`<!DOCTYPE html>`
			`<html th:lang="${#locale.toString()}"`
			`th:lang-direction="#{language.direction}"`
			`xmlns:th="http://www.thymeleaf.org">`
refactor: normalize files 2024-02-11 17:47:00 +01:00
some more changes also broke pipeline a bit 2023-07-15 17:06:33 +02:00			`<th:block`
Add meta::description; pass header variable 2024-01-02 00:37:20 +01:00			`th:insert="~{fragments/common :: head(title=#{pipeline.title}, header=#{pipeline.header})}"></th:block>`
some more changes also broke pipeline a bit 2023-07-15 17:06:33 +02:00			`<style>`
			`.btn-margin {`
			`margin-right: 2px;`
			`}`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`.bordered-box {`
			`border: 1px solid #ddd;`
			`padding: 20px;`
			`margin: 20px;`
			`width: 70%;`
			`}`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`.center-element {`
			`width: 80%;`
			`text-align: center;`
			`margin: auto;`
			`}`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`.element-margin {`
			`margin: 10px 0;`
			`/* Adjust this value to increase/decrease the margin as needed */`
			`}`
some more changes also broke pipeline a bit 2023-07-15 17:06:33 +02:00			`</style>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
init lang changes 2024-01-01 15:19:22 +01:00			`<script th:inline="javascript">`
			`const saveSettings = /[[#{pipelineOptions.saveSettings}]]/ '';`
			`</script>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
pipeline stuff 2023-07-12 01:17:44 +02:00			`<body>`
			`<div id="page-container">`
			`<div id="content-wrap">`
			`<div th:insert="~{fragments/navbar.html :: navbar}"></div>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
pipeline stuff 2023-07-12 01:17:44 +02:00			`<br> <br>`
some more changes also broke pipeline a bit 2023-07-15 17:06:33 +02:00			`<div class="container">`
pipeline stuff 2023-07-12 01:17:44 +02:00			`<div class="row justify-content-center">`
refactor: normalize files 2024-02-11 17:47:00 +01:00
lang 2023-12-31 17:01:27 +01:00			`<h1 th:text="#{pipeline.header}"></h1>`
			`<h2 th:text="#{WorkInProgess}"> </h2>`
format 2023-12-31 14:28:18 +01:00			`<div class="bordered-box">`
			`<div class="text-end text-top">`
lang 2023-12-31 17:01:27 +01:00			`<button id="uploadPipelineBtn" class="btn btn-primary"`
			`th:text="#{pipeline.uploadButton}"></button>`
format 2023-12-31 14:28:18 +01:00			`<button type="button" class="btn btn-primary"`
lang 2023-12-31 17:01:27 +01:00			`data-bs-toggle="modal" data-bs-target="#pipelineSettingsModal"`
			`th:text="#{pipeline.configureButton}"></button>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`</div>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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}"}"`
lang 2023-12-31 17:01:27 +01:00			`th:text="#{pipeline.defaultOption}"></option>`
refactor: normalize files 2024-02-11 17:47:00 +01:00

format 2023-12-31 14:28:18 +01:00			`<th:block th:each="config : ${pipelineConfigsWithNames}">`
			`<option th:value="${config.json}" th:text="${config.name}"></option>`
			`</th:block>`
			`</select>`
some more changes also broke pipeline a bit 2023-07-15 17:06:33 +02:00			`</div>`
format 2023-12-31 14:28:18 +01:00			`<div class="element-margin">`
			`<div`
			`th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true)}"></div>`
			`</div>`
			`<div class="element-margin">`
lang 2023-12-31 17:01:27 +01:00			`<button class="btn btn-primary" id="submitConfigBtn"`
			`th:text="#{pipeline.submitButton}"></button>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`</div>`
			`</div>`
			`</div>`
refactor: normalize files 2024-02-11 17:47:00 +01:00

lang 2024-01-05 19:00:30 +01:00			`<p>Below info is Alpha only, will be removed and hence not translated</p>`
pipeline 2023-12-23 16:47:18 +01:00			`<h3>Current Limitations</h3>`
			`<ul>`
format 2023-12-31 14:28:18 +01:00			`<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>`
pipeline 2023-12-23 16:47:18 +01:00			`</ul>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
pipeline 2023-12-23 16:47:18 +01:00			`<h3>How it Works Notes</h3>`
			`<ul>`
format 2023-12-31 14:28:18 +01:00			`<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>`
pipeline 2023-12-23 16:47:18 +01:00			`</ul>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
changes 2023-12-27 16:18:26 +01:00			`<h3>How to use pre-load configs in web UI</h3>`
setup 2023-12-27 01:53:31 +01:00			`<ul>`
format 2023-12-31 14:28:18 +01:00			`<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>`
setup 2023-12-27 01:53:31 +01:00			`</ul>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
todos 2023-12-25 19:52:11 +01:00			`<h3>Todo</h3>`
			`<ul>`
todo 2023-12-31 15:56:08 +01:00			`<li>Save to browser/Account</li>`
lang 2024-01-05 19:00:30 +01:00			`<li>offline folder scan mode checks and testing for unique usecases</li>`
format 2023-12-31 14:28:18 +01:00			`<li>Improve operation config settings UI</li>`
todos 2023-12-25 19:52:11 +01:00			`</ul>`
refactor: normalize files 2024-02-11 17:47:00 +01:00

format 2023-12-31 14:28:18 +01:00			`<h2>User Guide for Local Directory Scanning and File`
			`Processing</h2>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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>`
refactor: normalize files 2024-02-11 17:47:00 +01:00

format 2023-12-31 14:28:18 +01:00			`<!-- The Modal -->`
			`<div class="modal" id="pipelineSettingsModal">`
			`<div class="modal-dialog">`
			`<div class="modal-content dark-card">`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<!-- Modal Header -->`
			`<div class="modal-header">`
lang 2023-12-31 17:01:27 +01:00			`<h2 class="modal-title" th:text="#{pipelineOptions.header}"></h2>`
format 2023-12-31 14:28:18 +01:00			`<button type="button" class="btn-close" data-bs-dismiss="modal"`
			`aria-label="Close"></button>`
			`</div>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<!-- Modal body -->`
			`<div class="modal-body">`
			`<div class="mb-3">`
lang 2023-12-31 17:01:27 +01:00			`<label for="pipelineName" class="form-label"`
			`th:text="#{pipelineOptions.pipelineNameLabel}"></label> <input`
			`type="text" id="pipelineName" class="form-control"`
init lang changes 2024-01-01 15:19:22 +01:00			`th:placeholder="#{pipelineOptions.pipelineNamePrompt}">`
format 2023-12-31 14:28:18 +01:00			`</div>`
			`<div class="mb-3">`
lang 2024-01-05 19:00:30 +01:00			`<label for="operationsDropdown" th:text="#{pipelineOptions.selectOperation}"></label>`
format 2023-12-31 14:28:18 +01:00			`<select id="operationsDropdown" class="form-select">`
			`<!-- Options will be dynamically populated here -->`
			`</select>`
some more changes also broke pipeline a bit 2023-07-15 17:06:33 +02:00			`</div>`
format 2023-12-31 14:28:18 +01:00			`<div class="mb-3">`
lang 2023-12-31 17:01:27 +01:00			`<button id="addOperationBtn" class="btn btn-primary"`
			`th:text="#{pipelineOptions.addOperationButton}"></button>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`</div>`
lang 2023-12-31 17:01:27 +01:00			`<h3 id="pipelineHeader" style="display: none;"`
			`th:text="#{pipelineOptions.pipelineHeader}"></h3>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<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>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<!-- Modal footer -->`
			`<div class="modal-footer">`
lang 2023-12-31 17:01:27 +01:00			`<button id="savePipelineBtn" class="btn btn-success"`
			`th:text="#{pipelineOptions.saveButton}"></button>`
			`<button id="validateButton" class="btn btn-success"`
			`th:text="#{pipelineOptions.validateButton}"></button>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<div class="btn-group">`
			`<input type="file" id="uploadPipelineInput" accept=".json"`
			`style="display: none;">`
			`</div>`
some more changes also broke pipeline a bit 2023-07-15 17:06:33 +02:00			`</div>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
some more changes also broke pipeline a bit 2023-07-15 17:06:33 +02:00			`</div>`
			`</div>`
format 2023-12-31 14:28:18 +01:00			`</div>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`<script src="js/pipeline.js"></script>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
format 2023-12-31 14:28:18 +01:00			`</div>`
pipeline stuff 2023-07-12 01:17:44 +02:00			`</div>`
			`</div>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
pipeline stuff 2023-07-12 01:17:44 +02:00			`<div th:insert="~{fragments/footer.html :: footer}"></div>`
			`</div>`
refactor: normalize files 2024-02-11 17:47:00 +01:00
pipeline stuff 2023-07-12 01:17:44 +02:00			`</body>`
refactor: normalize files that contained both CRLF and LF 2024-02-11 18:14:21 +01:00			`</html>`