From 05ea1baa77870ea05123b7d57dfd5492aac42496 Mon Sep 17 00:00:00 2001
From: Silversthorn <nakor.silverton@gmail.com>
Date: Sun, 8 Oct 2023 11:40:25 +0200
Subject: [PATCH] Improve Notifications with Toasts

---
 app/frontend/templates/base.html | 118 +++++++++++++++++++++----------
 1 file changed, 80 insertions(+), 38 deletions(-)

diff --git a/app/frontend/templates/base.html b/app/frontend/templates/base.html
index ad298cf1..3e71880b 100755
--- a/app/frontend/templates/base.html
+++ b/app/frontend/templates/base.html
@@ -124,19 +124,29 @@
 
     .notification {
       position: relative;
-      box-sizing: border-box;
-      padding: 0.5rem;
-      padding-left: 0.7rem;
-      width: 180px;
-      margin-left: 10px;
-      margin-right: 10px;
+      margin-right: 1rem;
       background: var(--card-banner-bg);
       transition: right 0.75s, opacity 0.75s, top 0.75s;
-      right: -6rem;
+      right: -20rem;
       opacity: 0.1;
-      margin-bottom: 1rem;
-      z-index: 999;
-      top: 0px;
+    }
+
+    .toast-header {
+      background-color: var(--card-banner-bg);
+      color: var(--base-text);
+    }
+
+    .toast-body {
+      background-color: var(--dropdown-bg);
+      color: var(--base-text);
+    }
+
+    .notification img {
+      max-height: 20px;
+    }
+
+    .notification strong {
+      line-height: 20px;
     }
 
     .notification.active {
@@ -147,30 +157,30 @@
     .notification.remove {
       right: 0rem;
       opacity: 0.1;
-      top: -2rem;
-    }
-
-    .notification p {
-      margin: 0px;
-      width: calc(160.8px - 16px);
-      z-index: inherit;
+      top: -10rem;
     }
 
     .notification span {
-      position: absolute;
-      right: 0.5rem;
-      top: 0.46rem;
-      cursor: pointer;
-      font-weight: bold;
       line-height: 20px;
-      font-size: 22px;
+      font-size: 20px;
       user-select: none;
-      z-index: inherit;
     }
   </style>
-  <div class="notifications"></div>
 
 
+  <div class="notifications">
+    <!--<div id="toast_98" class="notification toast fade active show" role="alert" aria-lived="assertive" aria-atomic="true" data-delay="7500" data-animation="true" data-autohide="false">
+      <div class="toast-header">
+        <img src="/static/assets/images/logo_small.svg" class="mr-auto" alt="logo" />
+        <strong class="mr-auto"> Crafty Controller</strong>
+        <button type="button" class="close" data-dismiss="toast_98" aria-label="Close" onclick="closeNotification(this)">
+          <span class="fa-solid fa-xmark"></span>
+        </button>
+      </div>
+      <div class="toast-body">Admin issued command stop_server for server ServerTest1 with ID: 1</div>
+    </div>-->
+  </div>
+
   <script src="/static/assets/vendors/js/vendor.bundle.base.js"></script>
   <script src="/static/assets/js/shared/off-canvas.js"></script>
   <script src="/static/assets/js/shared/hoverable-collapse.js"></script>
@@ -494,7 +504,7 @@
     }
 
     function closeNotification(element) {
-      element.parentElement.classList.add('remove');
+      element.parentElement.parentElement.classList.add('remove');
       setTimeout(function () {
         element.parentElement.remove();
       }, 500);
@@ -502,30 +512,62 @@
 
     function notify(message) {
       console.log(`notify(${message})`);
-      var paragraphEl = document.createElement('p');
-      var closeEl = document.createElement('span');
+      var intId = getRandomInt(0, 100);
+      var toastDiv = document.createElement('div');
+      toastDiv.setAttribute("id", "toast_" + intId);
+      toastDiv.setAttribute("class", "notification toast");
+      toastDiv.setAttribute("role", "alert");
+      toastDiv.setAttribute("aria-lived", "assertive");
+      toastDiv.setAttribute("aria-atomic", "true");
+      toastDiv.setAttribute("data-delay", "3000");
+      toastDiv.setAttribute("data-animation", "true");
+      toastDiv.setAttribute("data-autohide", "false");
 
-      paragraphEl.textContent = message;
+      var toastHeaderDiv = document.createElement('div');
+      toastHeaderDiv.setAttribute("class", "toast-header");
 
-      closeEl.innerHTML = '&times;';
-      closeEl.addEventListener('click', function () { closeNotification(this) });
+      var toastHeaderImg = document.createElement('img');
+      toastHeaderImg.setAttribute("src", "/static/assets/images/logo_small.svg");
+      toastHeaderImg.setAttribute("class", "mr-auto");
+      toastHeaderImg.setAttribute("alt", "logo");
+      toastHeaderDiv.appendChild(toastHeaderImg);
 
-      var parentEl = document.createElement('div');
-      parentEl.appendChild(paragraphEl);
-      parentEl.appendChild(closeEl);
+      var toastHeaderTitle = document.createElement('strong');
+      toastHeaderTitle.setAttribute("class", "mr-auto");
+      toastHeaderTitle.innerHTML = " Crafty Controller ";
+      toastHeaderDiv.appendChild(toastHeaderTitle);
 
-      parentEl.classList.add('notification');
+      var toastHeaderBtn = document.createElement('button');
+      toastHeaderBtn.setAttribute("type", "button");
+      toastHeaderBtn.setAttribute("class", "ml-2 mb-1 close");
+      toastHeaderBtn.setAttribute("data-dismiss", "toast_" + intId);
+      toastHeaderBtn.setAttribute("aria-label", "Close");
+      toastHeaderDiv.appendChild(toastHeaderBtn);
 
-      document.querySelector('.notifications').appendChild(parentEl);
+      var toastHeaderCloseSpan = document.createElement('span');
+      toastHeaderCloseSpan.setAttribute("class", "fa-solid fa-xmark");
+      toastHeaderCloseSpan.setAttribute("aria-hidden", "true");
+      toastHeaderCloseSpan.addEventListener('click', function () { closeNotification(this.parentElement) });
+      toastHeaderBtn.appendChild(toastHeaderCloseSpan);
 
+      var toastBodyDiv = document.createElement('div');
+      toastBodyDiv.setAttribute("class", "toast-body");
+      toastBodyDiv.textContent = message;
+
+      toastDiv.appendChild(toastHeaderDiv);
+      toastDiv.appendChild(toastBodyDiv);
+
+      document.querySelector('.notifications').appendChild(toastDiv);
+
+      $('#toast_' + intId).toast('show');
 
       setTimeout(function () {
-        parentEl.classList.add('active');
+        toastDiv.classList.add('active');
       }, 200);
 
       setTimeout(function (element) {
         closeNotification(element);
-      }, 7500, closeEl);
+      }, 7500, toastHeaderCloseSpan);
 
       `
       <div class="notification">