libarry bump + toast upload

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "fm-dx-webserver",
-  "version": "1.2.2",
+  "version": "1.2.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fm-dx-webserver",
-      "version": "1.2.2",
+      "version": "1.2.7",
       "license": "ISC",
       "dependencies": {
         "@mapbox/node-pre-gyp": "1.0.11",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fm-dx-webserver",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "FM DX Webserver",
   "main": "index.js",
   "scripts": {
@@ -13,9 +13,9 @@
   "license": "ISC",
   "dependencies": {
     "@mapbox/node-pre-gyp": "1.0.11",
-    "body-parser": "1.20.2",
-    "ejs": "3.1.9",
-    "express": "4.18.3",
+    "body-parser": "1.20.3",
+    "ejs": "3.1.10",
+    "express": "4.20.0",
     "express-session": "1.18.0",
     "ffmpeg-static": "5.2.0",
     "http": "0.0.1-security",
@@ -23,6 +23,6 @@
     "koffi": "2.7.2",
     "net": "1.0.2",
     "serialport": "12.0.0",
-    "ws": "8.14.2"
+    "ws": "8.18.0"
   }
 }

web/css/toast.css

@@ -0,0 +1,90 @@
+  /* Basic Toast Styling */
+  .toast {
+    padding: 15px;
+    margin-top: 10px;
+    border-radius: 15px;
+    opacity: 0;
+    width: 300px;
+    position: relative;
+    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
+    transform: translateY(-10px); /* Initial animation state */
+    backdrop-filter: blur(10px);
+  }
+
+  .toast:hover {
+    filter: brightness(1.15);
+  }
+
+  /* Fade in/out class */
+  .toast.show {
+    opacity: 0.9;
+    transform: translateY(0); /* Slide in */
+  }
+
+  .toast.warning {
+    color: #ff9800;
+    background-color: var(--color-1-transparent);
+  }
+
+  .toast.warning.important {
+    background-color: #ff9800cc;
+    color: var(--color-main);
+  }
+
+  .toast.error {
+    background-color: var(--color-1-transparent);
+    color: #f44336;
+  }
+
+  .toast.error.important {
+    color: var(--color-main);
+    background-color: #f44336cc;
+  }
+
+  .toast.success {
+    background-color: var(--color-1-transparent);
+    color: #4caf50;
+  }
+
+  .toast.success.important {
+    color: var(--color-main);
+    background-color: #4caf50cc;
+  }
+
+  .toast.info {
+    color: var(--color-5);
+    background-color: var(--color-1-transparent);
+  }
+
+  .toast.info.important {
+    color: var(--color-main);
+    background-color: var(--color-5-transparent);
+  }
+
+  /* Toast Title and Message */
+  .toast .toast-icon {
+    font-size: 32px;
+    margin-right: 20px;
+    margin-left: 10px;
+  }
+  .toast .toast-title {
+    font-weight: bold;
+    font-size: 18px;
+    margin: 0;
+  }
+
+  .toast .toast-message {
+    margin: 0;
+    font-size: 14px;
+  }
+
+  /* Close Button */
+  .toast .close-btn {
+    top: 0;
+    position: absolute;
+    background: none;
+    border: none;
+    font-size: 16px;
+    color: #fff;
+    cursor: pointer;
+  }

web/js/toast.js

@@ -0,0 +1,62 @@
+function sendToast(type, title, message, persistent, important) {
+    var toastId = 'toast-' + new Date().getTime(); // Unique ID for each toast
+
+    // If title isn't provided, use the type as the title
+    var toastTitle = title ? title : capitalizeFirstLetter(type);
+
+    // Icon mapping based on the toast type
+    var toastIcons = {
+        success: 'fa-check-circle',
+        error: 'fa-times-circle',
+        warning: 'fa-exclamation-triangle',
+        info: 'fa-info-circle',
+        default: 'fa-bell' // Default icon if the type is not found
+    };
+
+    // Get the icon class based on the toast type, fallback to 'default' if type doesn't exist
+    var iconClass = toastIcons[type] || toastIcons['default'];
+
+    // Create the toast element
+    var $toast = $(`
+        <div class="toast ${type} flex-container ${important ? 'important' : ''}" id="${toastId}">
+          <div class="toast-icon"><i class="fa-solid ${iconClass}"></i></div>
+          <div>
+            <div class="toast-title">${toastTitle}</div>
+            <div class="toast-message">${message}</div>
+          </div>
+          <button class="close-btn">&nbsp;</button>
+        </div>
+      `);      
+
+    // Append the toast to the container
+    $('#toast-container').append($toast);
+
+    // Add the 'show' class after appending for fade-in effect
+    setTimeout(function () {
+      $toast.addClass('show');
+    }, 10); // Timeout to ensure the element is appended before the animation triggers
+
+    // Close button functionality
+    $toast.find('.close-btn').click(function () {
+      closeToast($toast);
+    });
+
+    // If not persistent, remove it after 5 seconds
+    if (!persistent) {
+      setTimeout(function () {
+        closeToast($toast);
+      }, 5000); // 5000 ms = 5 seconds
+    }
+}
+
+// Function to close and remove the toast
+function closeToast($toast) {
+    $toast.removeClass('show'); // Trigger fade-out
+    setTimeout(function () {
+        $toast.remove(); // Remove the element from DOM after the animation
+    }, 300); // Timeout matches the CSS transition duration
+}
+
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}