added websocket-driven notification-overlay

This commit is contained in:
Marcel Peterkau 2024-01-15 22:56:08 +01:00
parent cebf0db60c
commit d994fd25a0
5 changed files with 95 additions and 24 deletions

View File

@ -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="">

View File

@ -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 */
}

View File

@ -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;
}
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);
}

View File

@ -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_

View File

@ -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);
}