164 lines
5.5 KiB
HTML
164 lines
5.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="shortcut icon" href="/static/icons/filetype-pdf.svg" type="image/x-icon">
|
||
|
|
<link rel="stylesheet" href="/static/css/styles.css">
|
||
|
|
<link rel="stylesheet" href="/static/css/styles_forms.css">
|
||
|
|
|
||
|
|
<!-- Dropzone -->
|
||
|
|
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
|
||
|
|
|
||
|
|
<!-- Bootstrap -->
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
|
||
|
|
|
||
|
|
<title>PDF Web Toolkit</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="app">
|
||
|
|
<div id="div_content">
|
||
|
|
<div id="div_website_title">
|
||
|
|
<h1>PDF Web Toolkit</h1>
|
||
|
|
</div>
|
||
|
|
<div id="div_project_title">
|
||
|
|
<div class="form__group field">
|
||
|
|
<input id="project_title" class="form__field" type="text" @change="handleProjectTitleChange($event, 'project_title')" placeholder="Project Title" onfocus="document.getElementById('project_title').classList.remove('form__field_bad_input');"><br>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="div_float_clear"></div>
|
||
|
|
<div id="div_dropzone">
|
||
|
|
<div class="my-dropzone" id="pdf-dropzone">Drop pdf here or click to upload...</div>
|
||
|
|
<div class="dz-preview dz-file-preview well" id="preview-template"></div>
|
||
|
|
</div>
|
||
|
|
<div class="div_float_clear"></div>
|
||
|
|
<div id="page_overview">
|
||
|
|
<!-- Filled by dynamically loaded content -->
|
||
|
|
</div>
|
||
|
|
<div id="div_select_buttons">
|
||
|
|
<button class="button_export" id="button_download_complete_pdf" @click="download_pdf()">Download complete PDF</button>
|
||
|
|
<button class="button_export" id="button_download_individual_pages" @click="download_split_pdf()">Split PDF into individual pages</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var uuid;
|
||
|
|
|
||
|
|
new Vue({
|
||
|
|
el: '#app',
|
||
|
|
data: {
|
||
|
|
pdf_file: null,
|
||
|
|
project_uuid: null
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
window.addEventListener("load", () => this.side_loaded());
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
downloadURI(uri, name) {
|
||
|
|
const link = document.createElement("a");
|
||
|
|
link.download = name;
|
||
|
|
link.href = uri;
|
||
|
|
document.body.appendChild(link);
|
||
|
|
link.click();
|
||
|
|
document.body.removeChild(link);
|
||
|
|
delete link;
|
||
|
|
},
|
||
|
|
download_pdf() {
|
||
|
|
this.downloadURI("/projects/" + this.project_uuid + "/complete.pdf", "complete_project.pdf");
|
||
|
|
},
|
||
|
|
download_split_pdf() {
|
||
|
|
fetch('/get_single_pages_archive/' + this.project_uuid + '/', {
|
||
|
|
method: 'GET'
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
console.debug("data from Backend: ", data);
|
||
|
|
if (data["status"] == 200) {
|
||
|
|
this.downloadURI("/projects/" + this.project_uuid + "/pdf_splitted.zip", "splitted_pdfs.zip");
|
||
|
|
console.info("Archive with single Pages-PDFs created");
|
||
|
|
} else {
|
||
|
|
console.error("Project could not be created");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => console.error(error));
|
||
|
|
},
|
||
|
|
side_loaded() {
|
||
|
|
fetch('/init_project/', {
|
||
|
|
method: 'GET'
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
console.debug("data from Backend: ", data);
|
||
|
|
if (data["status"] == 200) {
|
||
|
|
this.project_uuid = data["project_uuid"];
|
||
|
|
uuid = data["project_uuid"];
|
||
|
|
} else {
|
||
|
|
this.project_uuid = null;
|
||
|
|
console.error("Project could not be created");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => console.error(error));
|
||
|
|
|
||
|
|
// Dropzone has been added as a global variable.
|
||
|
|
const dropzone = new Dropzone("div#pdf-dropzone", {
|
||
|
|
url: "/add_pdf_to_project/",
|
||
|
|
paramName: "pdf"
|
||
|
|
});
|
||
|
|
|
||
|
|
dropzone.on("addedfile", file => {
|
||
|
|
// console.debug("on addedfile this...", this)
|
||
|
|
console.log("A file has been added");
|
||
|
|
file.previewElement.innerHTML = "";
|
||
|
|
console.debug("Suppress file.previewElement");
|
||
|
|
console.debug("PDF Project UUID: ", this.project_uuid);
|
||
|
|
});
|
||
|
|
|
||
|
|
dropzone.on("sending", function(file, xhr, formData) {
|
||
|
|
// console.debug("on sending this...", this)
|
||
|
|
// formData.append("uuid", this.project_uuid);
|
||
|
|
formData.append("uuid", uuid);
|
||
|
|
});
|
||
|
|
|
||
|
|
dropzone.on("complete", function(file, xhr, formData) {
|
||
|
|
div_overview = document.getElementById("page_overview");
|
||
|
|
div_overview.innerHTML = ""
|
||
|
|
console.debug("div_overview", div_overview);
|
||
|
|
|
||
|
|
fetch('/get_single_pages_info/' + uuid + '/', {
|
||
|
|
method: 'GET'
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
console.debug("data from Backend: ", data);
|
||
|
|
if (data["status"] == 200) {
|
||
|
|
for (page in data["pages"]) {
|
||
|
|
console.debug(page);
|
||
|
|
// <embed src="" width="500" height="375" type="application/pdf">
|
||
|
|
node = document.createElement("embed");
|
||
|
|
node.width = "300";
|
||
|
|
node.height = "300";
|
||
|
|
node.type = "application/pdf";
|
||
|
|
node.src = data["pages"][page]
|
||
|
|
div_overview.appendChild(node)
|
||
|
|
}
|
||
|
|
console.debug(data["status"]);
|
||
|
|
} else {
|
||
|
|
console.debug(data["status"]);
|
||
|
|
console.error("Project could not be created");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => console.error(error));
|
||
|
|
console.debug("div_overview", div_overview);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|