Created Frontend with Bootstrap #2
36
app.py
36
app.py
|
@ -22,13 +22,28 @@ logging.basicConfig(
|
|||
)
|
||||
|
||||
|
||||
app = Flask(__name__)
|
||||
app = Flask(__name__, static_folder=os.path.abspath('/app/static'))
|
||||
app.config['UPLOAD_FOLDER'] = 'uploads'
|
||||
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
return render_template('index.html')
|
||||
return render_template('base.html', page='project', settings='set', error=False)
|
||||
|
||||
|
||||
@app.route('/splitt')
|
||||
def splitt():
|
||||
return render_template('base.html', page='splitt', settings='set', error=False)
|
||||
|
||||
|
||||
@app.route('/merge')
|
||||
def merge():
|
||||
return render_template('base.html', page='merge', settings='set', error=False)
|
||||
|
||||
|
||||
@app.route('/ocr')
|
||||
def ocr():
|
||||
return render_template('base.html', page='ocr', settings='set', error=False)
|
||||
|
||||
|
||||
@app.route('/app/')
|
||||
|
@ -87,6 +102,23 @@ def get_single_pages_info(uuid):
|
|||
return response
|
||||
|
||||
|
||||
@app.route('/move_page/<uuid>/<from_page>/<to_page>')
|
||||
def move_page(uuid, from_page, to_page):
|
||||
try:
|
||||
pdf_project = pdf_project_manager(uuid4=uuid)
|
||||
logging.debug("int(from_page): ")
|
||||
logging.debug(int(from_page))
|
||||
logging.debug("int(to_page): ")
|
||||
logging.debug(int(to_page))
|
||||
pdf_project.move_page(from_location=int(from_page), to_location=int(to_page))
|
||||
response = jsonify({'status': 200, 'message': 'page moved successfully'})
|
||||
except Exception as e:
|
||||
logging.debug("There was an error: " + str(e))
|
||||
logging.debug("Stacktrace: " + str(traceback.format_exc()))
|
||||
response = jsonify({"status": 500, "error_message": e})
|
||||
return response
|
||||
|
||||
|
||||
@app.route('/split_to_zip', methods=['POST'])
|
||||
def split_to_zip():
|
||||
if 'pdf_1' not in request.files:
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
div {
|
||||
/* border: 2px solid yellowgreen; */
|
||||
}
|
||||
|
||||
|
||||
.div_float_clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
/* The snackbar - position it at the bottom and in the middle of the screen */
|
||||
#snackbar {
|
||||
visibility: hidden; /* Hidden by default. Visible on click */
|
||||
min-width: 800px; /* Set a default minimum width */
|
||||
margin-left: -400px; /* Divide value of min-width by 2 */
|
||||
background-color: #333; /* Black background color */
|
||||
color: #fff; /* White text color */
|
||||
text-align: center; /* Centered text */
|
||||
border-radius: 2px; /* Rounded borders */
|
||||
padding: 16px; /* Padding */
|
||||
position: fixed; /* Sit on top of the screen */
|
||||
z-index: 1; /* Add a z-index if needed */
|
||||
left: 50%; /* Center the snackbar */
|
||||
bottom: 30px; /* 30px from the bottom */
|
||||
}
|
||||
|
||||
/* Show the snackbar when clicking on a button (class added with JavaScript) */
|
||||
#snackbar.show {
|
||||
visibility: visible; /* Show the snackbar */
|
||||
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
|
||||
However, delay the fade out process for 2.5 seconds */
|
||||
/*
|
||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
*/
|
||||
}
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,13 @@
|
|||
#pdf-dropzone {
|
||||
min-height: 50px;
|
||||
max-height: 150px;
|
||||
height: 150px;
|
||||
border: 0.1em solid darkgray;
|
||||
border-radius: 1em;
|
||||
padding-top:60px;
|
||||
text-align: center;
|
||||
}
|
||||
#pdf-dropzone:hover {
|
||||
cursor: pointer;
|
||||
border: 0.2em solid darkslategray;
|
||||
}
|
|
@ -0,0 +1,47 @@
|
|||
/*
|
||||
https://css-tricks.com/pure-css-horizontal-scrolling/
|
||||
*/
|
||||
.single_page_embed {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.single_page_div {
|
||||
display: block;
|
||||
padding: 1px;
|
||||
transform: rotate(90deg) translateX(500px); /* translateY(-2px) */
|
||||
transform-origin: right top;
|
||||
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
}
|
||||
.pdf-interact-buttons {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
#btn-group-download {
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
display: none;
|
||||
}
|
||||
#btn_download_complete, #btn_download_singel_pages {
|
||||
width: 50%;
|
||||
}
|
||||
#overview-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
#page_overview {
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 500px;
|
||||
margin: 0;
|
||||
padding-top: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
transform: rotate(-90deg) translateY(-500px);
|
||||
transform-origin: right top;
|
||||
/* border: 0.1em solid darkcyan; */
|
||||
}
|
|
@ -1,141 +0,0 @@
|
|||
div {
|
||||
/* border: 2px solid yellowgreen; */
|
||||
}
|
||||
|
||||
#app {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#div_content {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#div_website_title {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
#div_project_title {
|
||||
/* border: 2px solid darkorchid; */
|
||||
float: left;
|
||||
}
|
||||
|
||||
#div_dropzone {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.div_float_clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26pt;
|
||||
color: greenyellow;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.button_export {
|
||||
width: 50%;
|
||||
margin-left: 0%;
|
||||
margin-right: 0%;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 2em;
|
||||
border-width: 0px;
|
||||
padding: 1em;
|
||||
background-image: linear-gradient(to right, #d1d1d1, #dddddd);
|
||||
}
|
||||
|
||||
.button_export:hover {
|
||||
background-image: linear-gradient(to right, #c1c1c1, #cccccc);
|
||||
}
|
||||
|
||||
#button_download_individual_pages {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#button_download_complete_pdf {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
#pdf-dropzone {
|
||||
min-height: 50px;
|
||||
max-height: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid black;
|
||||
padding-top:60px
|
||||
}
|
||||
|
||||
#pdf-dropzone:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#preview-template {
|
||||
border: 2px solid yellowgreen;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
#page_overview {
|
||||
border: 2px solid yellowgreen;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
#control-div {
|
||||
width: 40%;
|
||||
float: left;
|
||||
/* padding: 1em; */
|
||||
overflow: hidden; /* Makes the container actually "contain" the floated divs */
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
#history-div {
|
||||
width: 60%;
|
||||
float: left;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#comment-label, #comment-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* The snackbar - position it at the bottom and in the middle of the screen */
|
||||
#snackbar {
|
||||
visibility: hidden; /* Hidden by default. Visible on click */
|
||||
min-width: 800px; /* Set a default minimum width */
|
||||
margin-left: -400px; /* Divide value of min-width by 2 */
|
||||
background-color: #333; /* Black background color */
|
||||
color: #fff; /* White text color */
|
||||
text-align: center; /* Centered text */
|
||||
border-radius: 2px; /* Rounded borders */
|
||||
padding: 16px; /* Padding */
|
||||
position: fixed; /* Sit on top of the screen */
|
||||
z-index: 1; /* Add a z-index if needed */
|
||||
left: 50%; /* Center the snackbar */
|
||||
bottom: 30px; /* 30px from the bottom */
|
||||
}
|
||||
|
||||
/* Show the snackbar when clicking on a button (class added with JavaScript) */
|
||||
#snackbar.show {
|
||||
visibility: visible; /* Show the snackbar */
|
||||
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
|
||||
However, delay the fade out process for 2.5 seconds */
|
||||
/*
|
||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
*/
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
After Width: | Height: | Size: 10 MiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
@ -1,53 +0,0 @@
|
|||
function downloadURI(uri, name) {
|
||||
var link = document.createElement("a");
|
||||
link.download = name;
|
||||
link.href = uri;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
delete link;
|
||||
}
|
||||
|
||||
function uploadPDF_split() {
|
||||
const fileInput = document.getElementById('split_pdfFile');
|
||||
const file = fileInput.files[0];
|
||||
const formData = new FormData();
|
||||
formData.append('pdf', file);
|
||||
|
||||
const backendURL = '/split_to_zip';
|
||||
|
||||
fetch(backendURL, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.debug("data from Backend: ", data)
|
||||
downloadURI(data["url"], data["name"]);
|
||||
})
|
||||
.catch(error => console.error(error));
|
||||
}
|
||||
|
||||
|
||||
function uploadPDF_merge() {
|
||||
const fileInput_1 = document.getElementById('merge_pdfFile_1');
|
||||
const file_1 = fileInput_1.files[0];
|
||||
const fileInput_2 = document.getElementById('merge_pdfFile_2');
|
||||
const file_2 = fileInput_2.files[0];
|
||||
const formData = new FormData();
|
||||
formData.append('pdf_1', file_1);
|
||||
formData.append('pdf_2', file_2);
|
||||
|
||||
const backendURL = '/merge_to_pdf';
|
||||
|
||||
fetch(backendURL, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.debug("data from Backend: ", data)
|
||||
downloadURI(data["url"], data["name"]);
|
||||
})
|
||||
.catch(error => console.error(error));
|
||||
}
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,183 @@
|
|||
/* eslint-disable camelcase */
|
||||
/* eslint-disable no-console */
|
||||
let uuid;
|
||||
let pdf_uploaded = false;
|
||||
|
||||
// eslint-disable-next-line no-undef, no-unused-vars
|
||||
const vueInstance = new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
pdf_file: null,
|
||||
project_uuid: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('load', () => this.side_loaded());
|
||||
window.addEventListener('resize', () => this.scale_page_view());
|
||||
},
|
||||
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() {
|
||||
console.debug('download_pdf triggered');
|
||||
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));
|
||||
},
|
||||
move_page(from_page, to_page) {
|
||||
console.debug('trying to move page: ', from_page, to_page);
|
||||
fetch(`/move_page/${this.project_uuid}/${from_page}/${to_page}`, {
|
||||
method: 'GET',
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.debug('data from Backend: ', data);
|
||||
if (data.status === 200) {
|
||||
this.display_pages();
|
||||
console.info('Page was moved');
|
||||
} else {
|
||||
console.error('Page could not be moved');
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error(error));
|
||||
},
|
||||
scale_page_view() {
|
||||
const overview_wrapper_width = document.getElementById('overview-wrapper').offsetWidth;
|
||||
// console.debug('width: ', overview_wrapper_width)
|
||||
|
||||
const page_overview = document.getElementById('page_overview');
|
||||
|
||||
const page_overview_height = `${overview_wrapper_width}px`;
|
||||
page_overview.style.height = page_overview_height;
|
||||
|
||||
let page_overview_margin_bottom = '';
|
||||
if (!pdf_uploaded) {
|
||||
page_overview_margin_bottom = `${-1 * (overview_wrapper_width)}px`;
|
||||
page_overview.style.width = '0px';
|
||||
} else {
|
||||
page_overview_margin_bottom = `${-1 * (overview_wrapper_width - 500)}px`;
|
||||
page_overview.style.width = '500px';
|
||||
}
|
||||
console.debug('page_overview_margin_bottom: ', page_overview_margin_bottom);
|
||||
page_overview.style['margin-bottom'] = page_overview_margin_bottom;
|
||||
},
|
||||
display_pages() {
|
||||
const 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) {
|
||||
document.getElementById('page_overview').style.width = '500px'; // Set initial width...
|
||||
this.scale_page_view();
|
||||
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const page in data.pages) {
|
||||
if (data.pages[page] !== undefined) {
|
||||
console.debug(page);
|
||||
|
||||
const node = document.createElement('embed');
|
||||
node.type = 'application/pdf';
|
||||
node.src = data.pages[page];
|
||||
node.classList.add('single_page_embed');
|
||||
|
||||
const div_page = document.createElement('div');
|
||||
div_page.classList.add('single_page_div');
|
||||
div_page.appendChild(node);
|
||||
|
||||
div_page.innerHTML += '<div class="btn-group pdf-interact-buttons" role="group" aria-label="page interact buttons" style="display: flex;">';
|
||||
div_page.innerHTML += `<button type="button" class="btn btn-outline-secondary" onclick="vueInstance.move_page(${Number(page) + 1}, ${Number(page)})"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z"/><path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708z"/></svg></button>`;
|
||||
div_page.innerHTML += '<button hidden type="button" class="btn btn-outline-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/></svg></button>';
|
||||
div_page.innerHTML += `<button type="button" class="btn btn-outline-secondary" onclick="vueInstance.move_page(${Number(page) + 1}, ${Number(page) + 2})"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z"></path><path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"></path></svg></button>`;
|
||||
div_page.innerHTML += '</div>';
|
||||
|
||||
// node.display = 'inline-block'
|
||||
div_overview.appendChild(div_page);
|
||||
}
|
||||
}
|
||||
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);
|
||||
},
|
||||
side_loaded() {
|
||||
document.getElementById('btn_download_complete').addEventListener('click', () => this.download_pdf());
|
||||
document.getElementById('btn_download_singel_pages').addEventListener('click', () => this.download_split_pdf());
|
||||
const self = this;
|
||||
this.scale_page_view();
|
||||
|
||||
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.
|
||||
// eslint-disable-next-line no-undef
|
||||
const dropzone = new Dropzone('div#pdf-dropzone', {
|
||||
url: '/add_pdf_to_project/',
|
||||
paramName: 'pdf',
|
||||
});
|
||||
|
||||
dropzone.on('addedfile', (file) => {
|
||||
console.log('A file has been added');
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
file.previewElement.innerHTML = '';
|
||||
console.debug('Suppress file.previewElement');
|
||||
console.debug('PDF Project UUID: ', this.project_uuid);
|
||||
});
|
||||
|
||||
dropzone.on('sending', (file, xhr, formData) => {
|
||||
formData.append('uuid', uuid);
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
dropzone.on('complete', (file, xhr, formData) => {
|
||||
pdf_uploaded = true;
|
||||
document.getElementById('btn-group-download').style.display = 'flex';
|
||||
this.display_pages();
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
|
@ -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>
|
|
@ -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>
|
|
@ -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
|
|
@ -0,0 +1,3 @@
|
|||
{% include 'partials/dropzone.html' %}
|
||||
|
||||
From ocr.html
|
|
@ -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>
|
|
@ -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…
Reference in New Issue