2023-07-30 22:56:09 +02:00
|
|
|
<!DOCTYPE html>
|
2023-08-06 00:03:49 +02:00
|
|
|
<html th:lang="${#locale.toString()}"
|
|
|
|
|
th:lang-direction="#{language.direction}"
|
|
|
|
|
xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
<th:block
|
|
|
|
|
th:insert="~{fragments/common :: head(title=#{getPdfInfo.title})}"></th:block>
|
2023-07-30 22:56:09 +02:00
|
|
|
<body>
|
2023-08-06 00:03:49 +02:00
|
|
|
<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">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h2 th:text="#{getPdfInfo.header}"></h2>
|
|
|
|
|
<form id="pdfInfoForm" method="post" enctype="multipart/form-data"
|
|
|
|
|
th:action="@{get-info-on-pdf}">
|
|
|
|
|
<div
|
|
|
|
|
th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, remoteCall='false')}"></div>
|
|
|
|
|
<br>
|
|
|
|
|
<button type="submit" id="submitBtn" class="btn btn-primary"
|
|
|
|
|
th:text="#{getPdfInfo.submit}"></button>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
<div class="container mt-5">
|
|
|
|
|
<!-- Iterate over each main section in the JSON -->
|
|
|
|
|
<div id="json-content">
|
|
|
|
|
<!-- JavaScript will populate this section -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Button to download the JSON -->
|
|
|
|
|
<a href="#" id="downloadJson" class="btn btn-primary mt-3"
|
|
|
|
|
style="display: none;" th:text="#{getPdfInfo.downloadJson}">Download
|
|
|
|
|
JSON</a>
|
2023-08-02 23:49:43 +02:00
|
|
|
</div>
|
2023-08-06 00:03:49 +02:00
|
|
|
<script>
|
2023-07-30 22:56:09 +02:00
|
|
|
|
2023-08-02 23:49:43 +02:00
|
|
|
|
|
|
|
|
// Prevent the form from submitting the traditional way
|
|
|
|
|
document.getElementById("pdfInfoForm").addEventListener("submit", function(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
// Fetch the formData
|
|
|
|
|
const formData = new FormData(event.target);
|
|
|
|
|
|
|
|
|
|
fetch('get-info-on-pdf', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: formData
|
|
|
|
|
})
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
displayJsonData(data); // Display the data
|
|
|
|
|
setDownloadLink(data); // Set download link
|
2023-08-06 00:03:49 +02:00
|
|
|
document.getElementById("downloadJson").style.display = "block";
|
2023-08-02 23:49:43 +02:00
|
|
|
})
|
|
|
|
|
.catch(error => console.error('Error:', error));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function displayJsonData(jsonData) {
|
|
|
|
|
let content = '';
|
|
|
|
|
for (const key in jsonData) {
|
|
|
|
|
content += renderJsonSection(key, jsonData[key]);
|
|
|
|
|
}
|
|
|
|
|
document.getElementById('json-content').innerHTML = content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setDownloadLink(jsonData) {
|
|
|
|
|
const downloadLink = document.getElementById('downloadJson');
|
|
|
|
|
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonData, null, 4));
|
|
|
|
|
downloadLink.setAttribute("href", dataStr);
|
|
|
|
|
downloadLink.setAttribute("download", "data.json");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function renderJsonSection(key, value, depth = 0) {
|
2023-08-03 00:03:35 +02:00
|
|
|
let safeKey = (typeof key === "string") ? key.replace(/[^a-zA-Z0-9]/g, '_') : key;
|
|
|
|
|
|
2023-08-02 23:49:43 +02:00
|
|
|
let output = `<div class="card mb-3">
|
2023-08-03 00:03:35 +02:00
|
|
|
<div class="card-header" id="${safeKey}-heading-${depth}">
|
2023-08-02 23:49:43 +02:00
|
|
|
<h5 class="mb-0">`;
|
|
|
|
|
|
2023-08-06 22:56:02 +02:00
|
|
|
if (key === 'XMPMetadata' && typeof value === "string") {
|
|
|
|
|
output += `<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#${safeKey}-content-${depth}" aria-expanded="true" aria-controls="${safeKey}-content-${depth}">
|
|
|
|
|
${key}
|
|
|
|
|
</button>`;
|
|
|
|
|
} else if (value && typeof value === 'object') {
|
|
|
|
|
if (Array.isArray(value) && value.length === 0) {
|
|
|
|
|
output += `${key}: Empty array`;
|
|
|
|
|
} else if (!Array.isArray(value) && Object.keys(value).length === 0) {
|
|
|
|
|
output += `${key}: Empty object`;
|
|
|
|
|
} else {
|
|
|
|
|
output += `<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#${safeKey}-content-${depth}" aria-expanded="true" aria-controls="${safeKey}-content-${depth}">
|
|
|
|
|
${key}
|
|
|
|
|
</button>`;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
output += `${key}: ${value}`;
|
|
|
|
|
}
|
2023-08-02 23:49:43 +02:00
|
|
|
|
|
|
|
|
output += `
|
2023-08-06 22:56:02 +02:00
|
|
|
</h5>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="${safeKey}-content-${depth}" class="collapse" aria-labelledby="${safeKey}-heading-${depth}">`;
|
2023-08-02 23:49:43 +02:00
|
|
|
|
2023-08-06 22:56:02 +02:00
|
|
|
if (key === 'XMPMetadata' && typeof value === "string") {
|
|
|
|
|
output += `<div class="card-body"><pre>${escapeHTML(value)}</pre></div>`;
|
|
|
|
|
} else if (value && typeof value === 'object' && !Array.isArray(value)) {
|
2023-08-02 23:49:43 +02:00
|
|
|
output += '<div class="card-body">';
|
2023-08-06 00:03:49 +02:00
|
|
|
if (Object.keys(value).length) {
|
|
|
|
|
for (const subKey in value) {
|
|
|
|
|
output += renderJsonSection(subKey, value[subKey], depth + 1);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
2023-08-06 22:56:02 +02:00
|
|
|
output += '<p class="text-muted">Empty</p>';
|
2023-08-02 23:49:43 +02:00
|
|
|
}
|
|
|
|
|
output += '</div>';
|
2023-08-06 00:03:49 +02:00
|
|
|
} else if (value && typeof value === 'object' && Array.isArray(value)) {
|
2023-08-03 00:03:35 +02:00
|
|
|
output += '<div class="card-body">';
|
2023-08-06 00:03:49 +02:00
|
|
|
if (value.length) {
|
|
|
|
|
value.forEach((val, index) => {
|
|
|
|
|
const arrayKey = `${key}[${index}]`;
|
|
|
|
|
output += renderJsonSection(arrayKey, val, depth + 1);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
2023-08-06 22:56:02 +02:00
|
|
|
output += '<p class="text-muted">Empty</p>';
|
2023-08-06 00:03:49 +02:00
|
|
|
}
|
2023-08-03 00:03:35 +02:00
|
|
|
output += '</div>';
|
2023-08-02 23:49:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
output += '</div></div>';
|
|
|
|
|
|
|
|
|
|
return output;
|
|
|
|
|
}
|
2023-08-06 22:56:02 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
function escapeHTML(s) {
|
|
|
|
|
if(s)
|
|
|
|
|
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
|
|
|
|
|
|
|
|
return null;
|
|
|
|
|
}
|
2023-08-02 23:49:43 +02:00
|
|
|
</script>
|
2023-08-06 00:03:49 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-07-30 22:56:09 +02:00
|
|
|
|
2023-08-06 00:03:49 +02:00
|
|
|
</div>
|
|
|
|
|
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
|
|
|
|
</div>
|
2023-07-30 22:56:09 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
