add toast for succes and failed upload

add icons to download buttons
fix typo
2024-03-11 10:56:29 +01:00 · 2024-03-08 11:20:04 +01:00 · 2024-03-08 09:43:48 +01:00 · 2024-03-07 16:57:06 +01:00 · 2024-03-07 15:36:27 +00:00
11 changed files with 88 additions and 8 deletions
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # PDF Web Toolkit

-A Web-Application allowing you to splitt and merge PDF-Files.
+A Web-Application allowing you to split and merge PDF-Files.

 ## Deploy

--- a/app.py
+++ b/app.py
@ -37,7 +37,7 @@ def project():


@app.route('/split')
-def splitt():
+def split():
    return render_template('base.html', page='split', settings='set', error=False)


--- a/static/css/main.css
+++ b/static/css/main.css
@ -2,6 +2,11 @@
    clear: both;
 }

+.download-button-icons {
+    margin-left: 0.2em;
+}
+
+
 /* The snackbar - position it at the bottom and in the middle of the screen */
 #snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
--- a/static/img/check-square.svg
+++ b/static/img/check-square.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square" viewBox="0 0 16 16">
+  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+  <path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
+</svg>
--- a/static/img/x-square.svg
+++ b/static/img/x-square.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square" viewBox="0 0 16 16">
+  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+</svg>
--- a/static/js/merge.js
+++ b/static/js/merge.js
@ -75,9 +75,17 @@ const vueInstance = new Vue({
      });

      // eslint-disable-next-line no-unused-vars
-      dropzone.on('complete', (file, xhr, formData) => {
+      dropzone.on('success', (file, xhr, formData) => {
        pdf_uploaded = true;
        document.getElementById('btn-group-download').style.display = 'flex';
+        // eslint-disable-next-line no-undef
+        bootstrap.Toast.getOrCreateInstance(document.getElementById('success-upload-toast')).show();
+      });
+
+      // eslint-disable-next-line no-unused-vars
+      dropzone.on('error', (file, xhr, formData) => {
+        // eslint-disable-next-line no-undef
+        bootstrap.Toast.getOrCreateInstance(document.getElementById('warn-upload-toast')).show();
      });
    },
  },
--- a/static/js/project.js
+++ b/static/js/project.js
@ -56,6 +56,7 @@ const vueInstance = new Vue({
      }
      console.debug('page_overview_margin_bottom: ', page_overview_margin_bottom);
      page_overview.style['margin-bottom'] = page_overview_margin_bottom;
+      document.getElementById('overview-wrapper').style['border-bottom'] = '1px solid #fff';
    },
    display_pages() {
      const div_overview = document.getElementById('page_overview');
@ -150,6 +151,14 @@ const vueInstance = new Vue({
        pdf_uploaded = true;
        document.getElementById('btn-group-download').style.display = 'flex';
        this.display_pages();
+        // eslint-disable-next-line no-undef
+        bootstrap.Toast.getOrCreateInstance(document.getElementById('success-upload-toast')).show();
+      });
+
+      // eslint-disable-next-line no-unused-vars
+      dropzone.on('error', (file, xhr, formData) => {
+        // eslint-disable-next-line no-undef
+        bootstrap.Toast.getOrCreateInstance(document.getElementById('warn-upload-toast')).show();
      });
    },
  },
--- a/static/js/split.js
+++ b/static/js/split.js
@ -75,9 +75,17 @@ const vueInstance = new Vue({
      });

      // eslint-disable-next-line no-unused-vars
-      dropzone.on('complete', (file, xhr, formData) => {
+      dropzone.on('success', (file, xhr, formData) => {
        pdf_uploaded = true;
        document.getElementById('btn-group-download').style.display = 'flex';
+        // eslint-disable-next-line no-undef
+        bootstrap.Toast.getOrCreateInstance(document.getElementById('success-upload-toast')).show();
+      });
+
+      // eslint-disable-next-line no-unused-vars
+      dropzone.on('error', (file, xhr, formData) => {
+        // eslint-disable-next-line no-undef
+        bootstrap.Toast.getOrCreateInstance(document.getElementById('warn-upload-toast')).show();
      });
    },
  },
--- a/templates/base.html
+++ b/templates/base.html
@ -62,10 +62,40 @@
    <!-- 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>
+        <p class="text-center text-body-secondary fw-light text-muted">Developed with ♥ by <a href="https://github.com/tidoni/pdf-web-toolkit" target="_blank">Tidoni</a></p>
      </div>
    </footer>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
+    <!-- Toasts -->
+    <div class="toast-container position-fixed top-0 end-0 p-3">
+      <!-- Success uploading PDF -->
+      <div id="success-upload-toast" class="toast text-bg-success" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+          <img src="{{ url_for('static', filename='img/check-square.svg') }}" class="rounded me-2" alt="Success">
+          <strong class="me-auto">Upload Success</strong>
+          <small></small>
+          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body">
+          The File was successfully uploaded.
+        </div>
+      </div>
+      <!-- Warning uploading PDF -->
+      <div id="warn-upload-toast" class="toast text-bg-warning" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+          <img src="{{ url_for('static', filename='img/x-square.svg') }}" class="rounded me-2" alt="Success">
+          <strong class="me-auto">Upload Failed</strong>
+          <small></small>
+          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body">
+          There was a problem uploading the file. Please reload the page and try again.
+        </div>
+      </div>
+    </div>
+
+    <div class="toast-container position-fixed top-0 end-0 p-3">
+    </div>
  </body>
 </html>
--- a/templates/partials/merge.html
+++ b/templates/partials/merge.html
@ -12,5 +12,11 @@
 <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>
+    <button type="button" class="btn btn-outline-dark" id="btn_download_complete">
+        Download merged PDFs&nbsp;
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download download-button-icons" viewBox="0 0 16 16">
+            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
+            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
+        </svg>
+    </button>
 </div>
--- a/templates/partials/split.html
+++ b/templates/partials/split.html
@ -1,6 +1,6 @@
 <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.
+        Upload a PDF that you want to be split into seperate pages.
    </p>
 </div>

@ -12,5 +12,11 @@
 <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>    
+    <button type="button" class="btn btn-outline-dark" id="btn_download_singel_pages">
+        Download split PDF
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download download-button-icons" viewBox="0 0 16 16">
+            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
+            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
+        </svg>
+    </button>
 </div>
Author	SHA1	Message	Date
Niklas Müller	8f7008c910	add toast for succes and failed upload	2024-03-11 10:56:29 +01:00
Niklas Müller	10456d984e	add icons to download buttons	2024-03-08 11:20:04 +01:00
Niklas Müller	de03e29cd8	fix typo	2024-03-08 09:43:48 +01:00
Niklas Müller	91a18bd70a	fix to long scrolling of overview-wrapper	2024-03-07 16:57:06 +01:00
tidoni	15c0a75732	Merge pull request 'Created Frontend with Bootstrap' (#2 ) from dev into main Reviewed-on: #2	2024-03-07 15:36:27 +00:00