From 8f7008c9102c5cbdd4183dff3142de617d4fa34a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20M=C3=BCller?= <n.mueller@ffh.de>
Date: Mon, 11 Mar 2024 10:56:29 +0100
Subject: [PATCH] add toast for succes and failed upload

---
 static/img/check-square.svg |  4 ++++
 static/img/x-square.svg     |  4 ++++
 static/js/merge.js          | 10 +++++++++-
 static/js/project.js        |  8 ++++++++
 static/js/split.js          | 10 +++++++++-
 templates/base.html         | 30 ++++++++++++++++++++++++++++++
 6 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 static/img/check-square.svg
 create mode 100644 static/img/x-square.svg

diff --git a/static/img/check-square.svg b/static/img/check-square.svg
new file mode 100644
index 0000000..b7d1116
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/static/img/x-square.svg b/static/img/x-square.svg
new file mode 100644
index 0000000..eb62b61
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/static/js/merge.js b/static/js/merge.js
index 676f371..a445bf2 100644
--- 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();
       });
     },
   },
diff --git a/static/js/project.js b/static/js/project.js
index 39486db..c74bf4c 100644
--- a/static/js/project.js
+++ b/static/js/project.js
@@ -151,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();
       });
     },
   },
diff --git a/static/js/split.js b/static/js/split.js
index 4e7ae89..c0142f4 100644
--- 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();
       });
     },
   },
diff --git a/templates/base.html b/templates/base.html
index 85edf79..c5fb62b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -67,5 +67,35 @@
     </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>