added websocket-driven notification-overlay

Software/data_src/index.htm

@@ -28,6 +28,9 @@
     </div>
   </div>
   <!-- Connection-Overlay -->
+  <!-- Notification-Container -->
+  <div id="notification-container" class="notification-container"></div>
+  <!-- Notification-Container -->
   <nav class="navbar fixed-top navbar-dark bg-primary" id="navbar1">
     <a class="navbar-brand" href="#">
       <img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top mr-1" alt="">

Software/data_src/static/css/tweaks.css

@@ -76,3 +76,15 @@ hr {
       transform: rotate(360deg);
     }
   } 
+
+  .notification-container {
+    position: fixed;
+    top: 30%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+  }
+  
+  .notification {
+    margin-bottom: 20px; /* Fügen Sie bei Bedarf weitere Stile hinzu */
+  }

Software/data_src/static/js/websocket.js

@@ -69,53 +69,42 @@ function onMessage(event) {
   var data = event.data;
   console.log("ws_msg:" + event.data + "\n");
 
-  if (data.startsWith("DEBUG:")) {
+  if (data.startsWith("NOTIFY:")) {
+    var notify_data = data.slice(7).split(";")[1];
+    var notify_type = data.slice(7).split(";")[0];
+    showNotification(notify_data, notify_type);
+  } else if (data.startsWith("DEBUG:")) {
     var addtext = data.slice(6);
     var livedebug_out = document.getElementById("livedebug-out");
     livedebug_out.value += addtext;
     livedebug_out.scrollTop = livedebug_out.scrollHeight;
     do_resize(livedebug_out);
-    return;
-  }
-
-  if (data.startsWith("DTC:")) {
+  } else if (data.startsWith("DTC:")) {
     const dtcs = data.slice(4);
     const dtcArray = dtcs.trim() !== "" ? dtcs.split(";").filter(Boolean) : [];
 
-    if (dtcArray[0] != "0") {
-      processDTCNotifications(dtcArray);
-      fillDTCTable(dtcArray);
-    }
-    return;
-  }
+    processDTCNotifications(dtcArray);
+    fillDTCTable(dtcArray);
 
-  if (data.startsWith("MAPPING_STATUS:")) {
+  } else if (data.startsWith("MAPPING_STATUS:")) {
     const data_sliced = data.slice(15);
     statusMapping = createMapping(data_sliced);
-  }
-
-  if (data.startsWith("MAPPING_STATIC:")) {
+  } else if (data.startsWith("MAPPING_STATIC:")) {
     const data_sliced = data.slice(15);
     staticMapping = createMapping(data_sliced);
-  }
-
-  if (data.startsWith("STATUS:")) {
+  } else if (data.startsWith("STATUS:")) {
     const data_sliced = data.slice(7);
     const result = processDataString(data_sliced, statusMapping);
     console.log("STATUS:");
     console.log(JSON.stringify(result, null, 2));
     fillValuesToHTML(result);
-    return;
-  }
-
-  if (data.startsWith("STATIC:")) {
+  } else if (data.startsWith("STATIC:")) {
     const data_sliced = data.slice(7);
     const result = processDataString(data_sliced, staticMapping);
     console.log("STATIC:");
     console.log(JSON.stringify(result, null, 2));
     fillValuesToHTML(result);
     overlay.style.display = "none";
-    return;
   }
 }
 
@@ -221,3 +210,27 @@ function updateProgressBar(progressBar, value) {
   progressBar.style.width = value + "%";
   progressBar.textContent = value + "%";
 }
+
+function showNotification(message, type) {
+  // Erstellen Sie ein Bootstrap-Alert-Element
+  var alertElement = $(
+    '<div class="alert alert-' +
+    type +
+    ' alert-dismissible fade show notification" role="alert">' +
+    "<strong>" +
+    message +
+    "</strong>" +
+    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
+    '<span aria-hidden="true">&times;</span>' +
+    "</button>" +
+    "</div>"
+  );
+
+  // Fügen Sie das Alert-Element dem Container hinzu
+  $("#notification-container").append(alertElement);
+
+  // Nach 5 Sekunden das Alert-Element ausblenden
+  setTimeout(function () {
+    alertElement.alert("close");
+  }, 5000);
+}

Software/include/webui.h

@@ -31,10 +31,19 @@
 #include "debugger.h"
 #include "struct2json.h"
 
+typedef enum
+{
+    info,
+    success,
+    warning,
+    error
+} NotificationType_t;
+
 void initWebUI();
 void Webserver_Process();
 void Webserver_Shutdown();
 
 void Websocket_PushLiveDebug(String Message);
+void Websocket_PushNotification(String Message, NotificationType_t type);
 
 #endif // _WEBUI_H_

Software/src/webui.cpp

@@ -831,3 +831,37 @@ int findIndexByString(const char *searchString, const char *const *array, int ar
   // String nicht gefunden, gib -1 zurück
   return -1;
 }
+
+/**
+ * @brief Pushes a notification to all WebSocket clients.
+ *
+ * This function sends a live debug message to all connected WebSocket clients.
+ *
+ * @param Message The debug message to be sent.
+ * @param type The type of notification (info, success, warning, error).
+ *             - Use NotificationType_t::info for informational messages.
+ *             - Use NotificationType_t::success for successful operation messages.
+ *             - Use NotificationType_t::warning for warning messages.
+ *             - Use NotificationType_t::error for error messages.
+ */
+void Websocket_PushNotification(String Message, NotificationType_t type)
+{
+  String typeString = "";
+  switch (type)
+  {
+  case info:
+    typeString = "info";
+    break;
+  case success:
+    typeString = "success";
+    break;
+  case warning:
+    typeString = "warning";
+    break;
+  case error:
+    typeString = "danger";
+    break;
+  }
+  webSocket.textAll("NOTIFY:" + typeString + ";" + Message);
+  Debug_pushMessage("Sending Notification to WebUI: %s\n", typeString);
+}