Change alerts to toasts (#25)

- Upgrade to Bootstrap 5.1.3
- Move RSS settings and tag mappings to web log settings (#25)
- Fix parameters in 2 SQLite queries

src/admin-theme/wwwroot/admin.css

@@ -29,7 +29,6 @@ header nav {
 footer {
   background-color: #808080;
   border-top: solid 1px black;
-  color: white;
 }
 .messages {
   max-width: 60rem;
@@ -93,24 +92,26 @@ a.text-danger:link:hover, a.text-danger:visited:hover {
   padding: .5rem;
 }
 .load-overlay {
-  position: fixed;
-  background-color: rgba(0, 0, 0, .25);
-  color: white;
-  z-index: 100;
   display: none;
+  position: fixed;
   top: 55px;
   left: 0;
+  z-index: 100;
   width: 100%;
   height: 100%;
+  background-color: rgba(0, 0, 0, .1);
   transition: ease-in-out .5s;
 }
 .load-overlay h1 {
-  background-color: rgba(0, 0, 0, .75);
+  background-color: rgba(204, 204, 0, .95);
   height: fit-content;
-  border: solid 6px white;
-  border-radius: .5rem;
+  border: solid 6px darkgreen;
+  border-radius: 2rem;
 }
 .load-overlay.htmx-request {
   display: flex;
   flex-flow: row;
 }
+#toastHost {
+  z-index: 5;
+}

src/admin-theme/wwwroot/admin.js

@@ -293,33 +293,46 @@ this.Admin = {
       const parts = msg.split("|||")
       if (parts.length < 2) return
       
-      const msgDiv = document.createElement("div")
-      msgDiv.className = `alert alert-${parts[0]} alert-dismissible fade show`
-      msgDiv.setAttribute("role", "alert")
-      msgDiv.innerHTML = parts[1]
+      // Create the toast header
+      const toastType = document.createElement("strong")
+      toastType.className = "me-auto text-uppercase"
+      toastType.innerText = parts[0] === "danger" ? "error" : parts[0]
       
       const closeBtn = document.createElement("button")
       closeBtn.type = "button"
       closeBtn.className = "btn-close"
-      closeBtn.setAttribute("data-bs-dismiss", "alert")
+      closeBtn.setAttribute("data-bs-dismiss", "toast")
       closeBtn.setAttribute("aria-label", "Close")
-      msgDiv.appendChild(closeBtn)
-      
-      if (parts.length === 3) {
-        msgDiv.innerHTML += `<hr>${parts[2]}`
-      }
-      document.getElementById("msgContainer").appendChild(msgDiv)
-    })
-  },
 
-  /**
-   * Set all "success" alerts to close after 4 seconds
-   */
-  dismissSuccesses() {
-    [...document.querySelectorAll(".alert-success")].forEach(alert => {
-      setTimeout(() => {
-        (bootstrap.Alert.getInstance(alert) ?? new bootstrap.Alert(alert)).close()
-      }, 4000)
+      const toastHead = document.createElement("div")
+      toastHead.className = `toast-header bg-${parts[0]}${parts[0] === "warning" ? "" : " text-white"}`
+      toastHead.appendChild(toastType)
+      toastHead.appendChild(closeBtn)
+
+      // Create the toast body
+      const toastBody = document.createElement("div")
+      toastBody.className = `toast-body bg-${parts[0]} bg-opacity-25`
+      toastBody.innerHTML = parts[1]
+      if (parts.length === 3) {
+        toastBody.innerHTML += `<hr>${parts[2]}`
+      }
+      
+      // Assemble the toast
+      const toast = document.createElement("div")
+      toast.className = "toast"
+      toast.setAttribute("role", "alert")
+      toast.setAttribute("aria-live", "assertive")
+      toast.setAttribute("aria-atomic", "true")
+      toast.appendChild(toastHead)
+      toast.appendChild(toastBody)
+
+      document.getElementById("toasts").appendChild(toast)
+      
+      let options = { delay: 4000 }
+      if (parts[0] !== "success") options.autohide = false
+      
+      const theToast = new bootstrap.Toast(toast, options)
+      theToast.show()
     })
   }
 }
@@ -329,8 +342,19 @@ htmx.on("htmx:afterOnLoad", function (evt) {
   // Show messages if there were any in the response
   if (hdrs.indexOf("x-message") >= 0) {
     Admin.showMessage(evt.detail.xhr.getResponseHeader("x-message"))
-    Admin.dismissSuccesses()
   }
+  // Initialize any toasts that were pre-rendered from the server
+  [...document.querySelectorAll(".toast")].forEach(el => {
+    if (el.getAttribute("data-mwl-shown") === "true" && el.className.indexOf("hide") >= 0) {
+      document.removeChild(el)
+    } else {
+      const toast = new bootstrap.Toast(el,
+          el.getAttribute("data-bs-autohide") === "false"
+              ? { autohide: false } : { delay: 6000, autohide: true })
+      toast.show()
+      el.setAttribute("data-mwl-shown", "true")
+    }
+  })
 })
 
 htmx.on("htmx:responseError", function (evt) {