app.py

@@ -28,12 +28,17 @@ app.config['UPLOAD_FOLDER'] = 'uploads'
 
 @app.route('/')
 def index():
+    return redirect("/split", code=302)
+
+
+@app.route('/project')
+def project():
     return render_template('base.html', page='project', settings='set', error=False)
 
 
-@app.route('/splitt')
+@app.route('/split')
 def splitt():
-    return render_template('base.html', page='splitt', settings='set', error=False)
+    return render_template('base.html', page='split', settings='set', error=False)
 
 
 @app.route('/merge')
@@ -46,11 +51,6 @@ def ocr():
     return render_template('base.html', page='ocr', settings='set', error=False)
 
 
-@app.route('/app/')
-def pdf_app():
-    return render_template('app.html')
-
-
 @app.route('/split/<path:path>')
 def send_report(path):
     return send_from_directory('split', path)

static/css/base_styles.css

@@ -1,36 +0,0 @@
-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;
-    */
-}

static/css/main.css

@@ -0,0 +1,36 @@
+.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;
+    */
+}
+
+@media (min-width: 992px) {
+    .nav-item.active {
+        border-bottom: 1px solid var(--bs-nav-link-color);
+    }
+}

static/css/merge.css

@@ -0,0 +1,9 @@
+
+#btn-group-download {
+    width: 100%;
+    margin-top: 1em;
+    display: none;
+}
+#btn_download_complete {
+    width: 100%;
+}

static/css/project.css

@@ -17,9 +17,6 @@
     width: 500px;
     text-align: center;
 }
-.pdf-interact-buttons {
-    padding-left: 1em;
-}
 
 #btn-group-download {
     width: 100%;

static/css/split.css

@@ -0,0 +1,9 @@
+
+#btn-group-download {
+    width: 100%;
+    margin-top: 1em;
+    display: none;
+}
+#btn_download_singel_pages {
+    width: 100%;
+}

static/js/merge.js

@@ -0,0 +1,84 @@
+/* eslint-disable new-cap */
+/* eslint-disable camelcase */
+/* eslint-disable no-console */
+
+let uuid;
+let pdf_uploaded = false;
+import('./pdf_api_wrapper.js');
+
+// 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());
+  },
+  methods: {
+    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));
+    },
+    side_loaded() {
+      document.getElementById('btn_download_complete').addEventListener('click', () => new pdf_api_wrapper(`${uuid}`).download_pdf());
+
+      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';
+      });
+    },
+  },
+});

static/js/project.js

@@ -4,7 +4,7 @@
 
 let uuid;
 let pdf_uploaded = false;
-import('./pdf_api_wrapper');
+import('./pdf_api_wrapper.js');
 
 // eslint-disable-next-line no-undef, no-unused-vars
 const vueInstance = new Vue({

static/js/split.js

@@ -0,0 +1,84 @@
+/* eslint-disable new-cap */
+/* eslint-disable camelcase */
+/* eslint-disable no-console */
+
+let uuid;
+let pdf_uploaded = false;
+import('./pdf_api_wrapper.js');
+
+// 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());
+  },
+  methods: {
+    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));
+    },
+    side_loaded() {
+      document.getElementById('btn_download_singel_pages').addEventListener('click', () => new pdf_api_wrapper(`${uuid}`).download_split_pdf());
+
+      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';
+      });
+    },
+  },
+});

templates/app.html

@@ -1,164 +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">
-  <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>

templates/base.html

@@ -8,18 +8,15 @@
     <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 == 'split' %} | Split{% endif %}{% if page == 'merge' %} | Merge{% endif %}{% if page == 'ocr' %} | OCR{% endif %}</title>
-    <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>
+          <a class="navbar-brand" href="/">
             <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">
@@ -32,10 +29,10 @@
           
           <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 == 'split'%}active{%endif%}"><a class="nav-link" href="/split">Simple Split</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%}"><a class="nav-link" href="/merge">Simple Merge</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>
+              <li class="nav-item {%if page == 'project'%}active{%endif%}"><a class="nav-link" href="/project">Project</a></li>
             </ul>
           </div>
         </div>
@@ -48,8 +45,8 @@
           {% include 'partials/project.html' %}
         {% endif %}
 
-        {% if page == 'splitt' %}
+        {% if page == 'split' %}
-          {% include 'partials/splitt.html' %}
+          {% include 'partials/split.html' %}
         {% endif %}
 
         {% if page == 'merge' %}
@@ -70,7 +67,5 @@
     </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>

templates/partials/merge.html

@@ -1,7 +1,16 @@
 <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>
+    <p class="page_description_p" id="merge_description_p">
+        Upload PDFs that you want to merge.
+    </p>
 </div>
 
 {% include 'partials/dropzone.html' %}
 
-From merge.html
+<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+<script src="{{ url_for('static', filename='js/pdf_api_wrapper.js') }}"></script>
+<script src="{{ url_for('static', filename='js/merge.js') }}"></script>
+<link href="{{ url_for('static', filename='css/merge.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 merged PDFs</button>
+</div>

templates/partials/split.html

@@ -0,0 +1,16 @@
+<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' %}
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+<script src="{{ url_for('static', filename='js/pdf_api_wrapper.js') }}"></script>
+<script src="{{ url_for('static', filename='js/split.js') }}"></script>
+<link href="{{ url_for('static', filename='css/split.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_singel_pages">Download Project as single Pages</button>    
+</div>

templates/partials/splitt.html

@@ -1,7 +0,0 @@
-<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