Add Error Toast (#33)

* Add Error Toast

* Cleanup

* Add Mouseover to Close after 1s

Author: smashedr

src/css/popup.css

@@ -13,3 +13,7 @@ body {
     max-height: 44vh;
     background-color: #303030;
 }
+
+#toast-container {
+    z-index: 4;
+}

src/html/popup.html

@@ -23,7 +23,6 @@
 </div>
 
 <div class="container-fluid p-2">
-
     <div class=" mb-1">
         <div class="form-check form-switch float-start form-select-lg me-2" style="padding-top: 1px; padding-bottom: 0;"
              data-bs-title="Disable/Enable Mouseover Preview." data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-trigger="hover">
@@ -70,6 +69,19 @@ <h3 class="my-0">Django Files</h3>
     </table>
 </div>
 
+<div aria-live="polite" aria-atomic="true" class="">
+    <div id="toast-container" class="toast-container bottom-0 end-0 p-3"></div>
+</div>
+
+<div class="d-none">
+    <div class="toast align-items-center border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
+        <div class="d-flex">
+            <div class="toast-body small"></div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+    </div>
+</div>
+
 <div class="modal fade" id="delete-modal" tabindex="-1" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered">
 <div class="modal-content">

src/js/popup.js

@@ -349,7 +349,7 @@ function updateTable(data) {
  */
 async function deleteClick(event) {
     console.log('deleteClick:', event)
-    const closest = event.target?.closest('tr').querySelector('.file-link')
+    const closest = event.target?.closest('tr')?.querySelector('.file-link')
     const name = closest.dataset?.name
     console.log('name:', name)
     if (!name) {
@@ -373,16 +373,17 @@ async function deleteConfirm(event) {
     console.log('deleteConfirm:', event)
     const name = deleteName.textContent
     console.log(`Deleting File: ${name}`)
-    // TODO: Catch Error...
+    // TODO: Catch Error? Throw should happen during init...
     const response = await deleteFile(name)
     console.log('response:', response)
     if (response.ok) {
         mediaOuter.classList.add('d-none')
         deleteModal.hide()
         await initPopup()
     } else {
-        // TODO: Handle Error...
-        console.error('Error Deleting File: name, response:', name, response)
+        console.error(`Error Deleting File: "${name}", response:`, response)
+        showToast(`Error Deleting: <strong>${name}</strong>`, 'danger')
+        deleteModal.hide()
     }
 }
 
@@ -395,16 +396,34 @@ async function deleteConfirm(event) {
 async function deleteFile(name) {
     console.log(`deleteFile: ${name}`)
     const { options } = await chrome.storage.sync.get(['options'])
-    console.log('options:', options)
+    // console.log('options:', options)
     const headers = { Authorization: options.authToken }
     const opts = {
         method: 'DELETE',
         headers: headers,
     }
     const apiUrl = `${options.siteUrl}/api/delete/${name}`
-    const response = await fetch(apiUrl, opts)
-    console.log('response:', response)
-    return response
+    return await fetch(apiUrl, opts)
+}
+
+/**
+ * Show Bootstrap Toast
+ * @function showToast
+ * @param {String} message
+ * @param {String} type
+ */
+function showToast(message, type = 'success') {
+    console.log(`showToast: ${type}:`, message)
+    const element = document.querySelector('.d-none .toast').cloneNode(true)
+    element.classList.add(`text-bg-${type}`)
+    element.querySelector('.toast-body').innerHTML = message
+    document.getElementById('toast-container').appendChild(element)
+    const toast = new bootstrap.Toast(element)
+    toast.show()
+    const callback = () => {
+        element.addEventListener('mouseover', () => toast.hide())
+    }
+    setTimeout(callback, 1000)
 }
 
 /**
@@ -466,8 +485,8 @@ function initPopupMouseover() {
             clearTimeout(timeoutID)
         }
     })
-    mediaImage.addEventListener('error', (event) => {
-        console.log('mediaError:', event)
+    mediaImage.addEventListener('error', () => {
+        // console.log('mediaError:', event)
         mediaImage.classList.add('d-none')
         mediaError.classList.remove('d-none')
         mediaImage.src = '../media/loading.gif'