2023-01-27 19:23:40 +01:00
|
|
|
<!DOCTYPE html>
|
2023-04-03 00:59:22 +02:00
|
|
|
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
|
2023-01-27 19:23:40 +01:00
|
|
|
|
2023-02-05 13:54:48 +01:00
|
|
|
<th:block th:insert="~{fragments/common :: head(title=#{merge.title})}"></th:block>
|
2023-01-28 11:00:32 +01:00
|
|
|
|
2023-01-27 19:23:40 +01:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<body>
|
|
|
|
|
<div id="page-container">
|
|
|
|
|
<div id="content-wrap">
|
|
|
|
|
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
|
|
|
|
<br> <br>
|
|
|
|
|
<div class="container" id="dropContainer">
|
|
|
|
|
<div class="row justify-content-center">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h2 th:text="#{merge.header}"></h2>
|
|
|
|
|
<form action="merge-pdfs" method="post" enctype="multipart/form-data">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label th:text="#{multiPdfDropPrompt}"></label>
|
2023-03-28 00:24:48 +02:00
|
|
|
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true, accept='application/pdf')}"></div>
|
|
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<ul id="selectedFiles" class="list-group"></ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group text-center">
|
2023-04-02 12:51:07 +02:00
|
|
|
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
|
2023-02-11 15:27:15 +01:00
|
|
|
</div>
|
|
|
|
|
</form>
|
2023-03-20 22:55:11 +01:00
|
|
|
<style>
|
2023-04-03 00:59:22 +02:00
|
|
|
|
2023-03-20 22:55:11 +01:00
|
|
|
.list-group-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
2023-01-30 21:50:47 +01:00
|
|
|
|
2023-03-20 22:55:11 +01:00
|
|
|
.filename {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrows {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.move-up span,
|
|
|
|
|
.move-down span {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 1.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
2023-02-11 15:27:15 +01:00
|
|
|
<script>
|
2023-03-28 00:24:48 +02:00
|
|
|
document.getElementById("fileInput-input").addEventListener("change", function() {
|
2023-03-20 22:55:11 +01:00
|
|
|
var files = this.files;
|
|
|
|
|
var list = document.getElementById("selectedFiles");
|
|
|
|
|
list.innerHTML = "";
|
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
|
|
|
var item = document.createElement("li");
|
|
|
|
|
item.className = "list-group-item";
|
|
|
|
|
item.innerHTML = `
|
|
|
|
|
<div class="d-flex justify-content-between align-items-center w-100">
|
|
|
|
|
<div class="filename">${files[i].name}</div>
|
|
|
|
|
<div class="arrows d-flex">
|
|
|
|
|
<button class="btn btn-secondary move-up"><span>↑</span></button>
|
|
|
|
|
<button class="btn btn-secondary move-down"><span>↓</span></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
list.appendChild(item);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var moveUpButtons = document.querySelectorAll(".move-up");
|
|
|
|
|
for (var i = 0; i < moveUpButtons.length; i++) {
|
|
|
|
|
moveUpButtons[i].addEventListener("click", function(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
var parent = this.closest(".list-group-item");
|
|
|
|
|
var grandParent = parent.parentNode;
|
|
|
|
|
if (parent.previousElementSibling) {
|
|
|
|
|
grandParent.insertBefore(parent, parent.previousElementSibling);
|
|
|
|
|
updateFiles();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var moveDownButtons = document.querySelectorAll(".move-down");
|
|
|
|
|
for (var i = 0; i < moveDownButtons.length; i++) {
|
|
|
|
|
moveDownButtons[i].addEventListener("click", function(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
var parent = this.closest(".list-group-item");
|
|
|
|
|
var grandParent = parent.parentNode;
|
|
|
|
|
if (parent.nextElementSibling) {
|
|
|
|
|
grandParent.insertBefore(parent.nextElementSibling, parent);
|
|
|
|
|
updateFiles();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateFiles() {
|
|
|
|
|
var dataTransfer = new DataTransfer();
|
|
|
|
|
var liElements = document.querySelectorAll("#selectedFiles li");
|
2023-01-27 19:23:40 +01:00
|
|
|
|
2023-03-20 22:55:11 +01:00
|
|
|
for (var i = 0; i < liElements.length; i++) {
|
|
|
|
|
var fileNameFromList = liElements[i].querySelector(".filename").innerText;
|
|
|
|
|
var fileFromFiles;
|
|
|
|
|
for (var j = 0; j < files.length; j++) {
|
|
|
|
|
var file = files[j];
|
|
|
|
|
if (file.name === fileNameFromList) {
|
|
|
|
|
dataTransfer.items.add(file);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-03-28 00:24:48 +02:00
|
|
|
document.getElementById("fileInput-input").files = dataTransfer.files;
|
2023-03-20 22:55:11 +01:00
|
|
|
}
|
|
|
|
|
});
|
2023-01-27 19:23:40 +01:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
|
|
|
|
</div>
|
2023-01-27 19:23:40 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
