working base project
This commit is contained in:
Niklas Müller
parent
2535006f02
commit
fad9f38422
22 changed files with 461 additions and 278 deletions
76
templates/base.html
Normal file
76
templates/base.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" data-bs-theme="light">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='img/filetype-pdf.svg') }}" type="image/x-icon">
|
||||
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/base_styles.css') }}" rel="stylesheet">
|
||||
<title>PDF-Web-Toolkit{% if page == 'project' %} | Project{% endif %}{% if page == 'splitt' %} | Splitt{% endif %}{% if page == 'merge' %} | Merge{% endif %}{% if page == 'ocr' %} | OCR{% endif %}</title>
|
||||
</head>
|
||||
|
||||
|
||||
<!--<body class="d-flex flex-column h-80">-->
|
||||
<div class="col-lg-8 mx-auto py-md-5">
|
||||
|
||||
<header class="">
|
||||
<nav class="navbar navbar-expand-lg border-bottom">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/" hidden>
|
||||
<picture>
|
||||
<source srcset="{{ url_for('static', filename='img/filetype-pdf.svg') }}" media="(prefers-color-scheme: dark)">
|
||||
<img src="{{ url_for('static', filename='img/filetype-pdf.svg') }}" alt="PDF-Web-Toolkit" height="40">
|
||||
</picture>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav mr-auto flex-fill">
|
||||
<li class="nav-item {%if page == 'project'%}active{%endif%}"><a class="nav-link" href="/">Project</a></li>
|
||||
<li class="nav-item {%if page == 'splitt'%}active{%endif%}" hidden><a class="nav-link" href="/splitt">Simple Splitt</a></li>
|
||||
<li class="nav-item {%if page == 'merge'%}active{%endif%}" hidden><a class="nav-link" href="/merge">Simple Merge</a></li>
|
||||
<li class="nav-item {%if page == 'ocr'%}active{%endif%}" hidden><a class="nav-link" href="/ocr">Simple OCR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="py-3">
|
||||
<div class="container py-3">
|
||||
{% if page == 'project' %}
|
||||
{% include 'partials/project.html' %}
|
||||
{% endif %}
|
||||
|
||||
{% if page == 'splitt' %}
|
||||
{% include 'partials/splitt.html' %}
|
||||
{% endif %}
|
||||
|
||||
{% if page == 'merge' %}
|
||||
{% include 'partials/merge.html' %}
|
||||
{% endif %}
|
||||
|
||||
{% if page == 'ocr' %}
|
||||
{% include 'partials/ocr.html' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- https://getbootstrap.com/docs/5.3/examples/footers/# -->
|
||||
<footer class="py-3 my-4 border-top">
|
||||
<div class="container py-3">
|
||||
<p class="text-center text-body-secondary text-muted">Developed with ♥ by <a href="https://github.com/tidoni/pdf-web-toolkit" target="_blank">Tidoni</a> (Niklas Müller)</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
|
||||
<!-- <script src="{{ url_for('static', filename='js/main.js') }}"></script> -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<!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">
|
||||
<title>PDF Tools</title>
|
||||
<meta http-equiv="Refresh" content="0; url='/app/'" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<h1>PDF Splitter</h1>
|
||||
<input type="file" @change="handleFileSelect($event, 'split_pdfFile')" accept=".pdf"><br>
|
||||
<button @click="uploadPDF('split_pdfFile')">Split PDF into individual pages</button>
|
||||
|
||||
<h1>PDF Merger</h1>
|
||||
<input type="file" @change="handleFileSelect($event, 'merge_pdfFile_1')" accept=".pdf"><br>
|
||||
<input type="file" @change="handleFileSelect($event, 'merge_pdfFile_2')" accept=".pdf"><br>
|
||||
<button @click="uploadPDF('merge_pdfFile_1', 'merge_pdfFile_2')">Merge the two selected PDFs</button>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
split_pdfFile: null,
|
||||
merge_pdfFile_1: null,
|
||||
merge_pdfFile_2: null
|
||||
},
|
||||
methods: {
|
||||
handleFileSelect(event, inputId) {
|
||||
const fileInput = event.target;
|
||||
this[inputId] = fileInput.files[0];
|
||||
console.debug("fileInput", fileInput);
|
||||
console.debug("this[inputId]", this[inputId]);
|
||||
},
|
||||
uploadPDF(fileInputId1, fileInputId2) {
|
||||
const file1 = this[fileInputId1];
|
||||
const file2 = fileInputId2 ? this[fileInputId2] : null;
|
||||
|
||||
console.debug("file1", file1)
|
||||
console.debug("file2", file2)
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('pdf_1', file1);
|
||||
|
||||
if (file2) {
|
||||
formData.append('pdf_2', file2);
|
||||
}
|
||||
|
||||
console.debug("formData", formData)
|
||||
|
||||
const backendURL = file2 ? '/merge_to_pdf' : '/split_to_zip';
|
||||
|
||||
fetch(backendURL, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.debug("data from Backend: ", data);
|
||||
this.downloadURI(data["url"], data["name"]);
|
||||
})
|
||||
.catch(error => console.error(error));
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
11
templates/partials/dropzone.html
Normal file
11
templates/partials/dropzone.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!-- 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" />
|
||||
|
||||
<!-- <script src="{{ url_for('static', filename='js/dropzone_functions.js') }}"></script> -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/dropzone_styles.css') }}">
|
||||
|
||||
<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>
|
||||
7
templates/partials/merge.html
Normal file
7
templates/partials/merge.html
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<div class="page_description_div" id="merge_description_div">
|
||||
<p class="page_description_p" id="merge_description_p">Upload your PDF-Files that you want to be merged.</p>
|
||||
</div>
|
||||
|
||||
{% include 'partials/dropzone.html' %}
|
||||
|
||||
From merge.html
|
||||
3
templates/partials/ocr.html
Normal file
3
templates/partials/ocr.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{% include 'partials/dropzone.html' %}
|
||||
|
||||
From ocr.html
|
||||
29
templates/partials/project.html
Normal file
29
templates/partials/project.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<div class="page_description_div" id="project_description_div">
|
||||
<p class="page_description_p" id="project_description_p">
|
||||
Here you can create a Project out of multiple PDFs, move pages around and download the adapted File.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include 'partials/dropzone.html' %}
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<div style="height: 2em;"></div>
|
||||
<div id="overview-wrapper">
|
||||
<div id="page_overview">
|
||||
<!-- Filled by dynamically loaded content -->
|
||||
<!--
|
||||
<div class="single_page_div">PDF_1</div>
|
||||
<div class="single_page_div">PDF_2</div>
|
||||
<div class="single_page_div">PDF_3</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||||
<script src="{{ url_for('static', filename='js/project_functions.js') }}"></script>
|
||||
<link href="{{ url_for('static', filename='css/project_styles.css') }}" rel="stylesheet">
|
||||
|
||||
<div id="btn-group-download" class="btn-group" role="group" aria-label="Download outlined buttons">
|
||||
<button type="button" class="btn btn-outline-dark" id="btn_download_complete">Download whole Project</button>
|
||||
<button type="button" class="btn btn-outline-dark" id="btn_download_singel_pages">Download Project as single Pages</button>
|
||||
</div>
|
||||
7
templates/partials/splitt.html
Normal file
7
templates/partials/splitt.html
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<div class="page_description_div" id="splitt_description_div">
|
||||
<p class="page_description_p" id="splitt_description_p">Upload a PDF that you want to be splitt into seperate pages.</p>
|
||||
</div>
|
||||
|
||||
{% include 'partials/dropzone.html' %}
|
||||
|
||||
From splitt.html
|
||||
Loading…
Add table
Add a link
Reference in a new issue