added websocket-driven notification-overlay
This commit is contained in:
parent
cebf0db60c
commit
d994fd25a0
@ -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="">
|
||||
|
@ -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 */
|
||||
}
|
@ -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">×</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);
|
||||
}
|
||||
|
@ -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_
|
||||
|
@ -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);
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user