DTC in WebUI now handled via Websocket

Software/data_src/static/js/dtc_table.js

@@ -12,7 +12,11 @@ function getDescriptionForDTCNumber(number, callback) {
         callback(null, title, description);
       } else {
         // Wenn die Nummer nicht gefunden wurde, geben Sie einen Fehler zurück
-        callback(`Beschreibung für Nummer ${number} nicht gefunden.`,null, null);
+        callback(
+          `Beschreibung für Nummer ${number} nicht gefunden.`,
+          null,
+          null
+        );
       }
     })
     .catch((error) => {
@@ -21,3 +25,98 @@ function getDescriptionForDTCNumber(number, callback) {
     });
 }
 
+function fillDTCTable(dtcArray) {
+  // Referenz auf das Tabellen-Element
+  var table = document.getElementById("dtc_table");
+  var tablediv = document.getElementById("dtc_container");
+
+  // Prüfen, ob DTC vorhanden sind
+  if (dtcArray.length === 0) {
+    // Verstecke das Tabellen-Div, wenn keine DTC vorhanden sind
+    tablediv.hidden = true;
+    return;
+  } else {
+    // Zeige das Tabellen-Div, wenn DTC vorhanden sind
+    tablediv.hidden = false;
+  }
+
+  // Tabelle leeren, bevor sie neu gefüllt wird
+  table.innerHTML = "";
+
+  // Überschriften für die Tabelle erstellen
+  var headerRow = table.insertRow(0);
+
+  // Definition der Klassen und Scopes für die Spalten
+  var columnDefinitions = [
+    { class: "col-6", scope: "Zeitstempel" },
+    { class: "col-2", scope: "Fehlercode" },
+    { class: "col-2", scope: "Schwere" },
+    { class: "col-2", scope: "Aktiv" },
+  ];
+
+  for (var i = 0; i < columnDefinitions.length; i++) {
+    var headerCell = headerRow.insertCell(i);
+    headerCell.className = `th ${columnDefinitions[i].class}`;
+    headerCell.scope = columnDefinitions[i].scope;
+    headerCell.innerHTML = columnDefinitions[i].scope;
+  }
+
+  // DTC-Daten in die Tabelle einfügen
+  for (var i = 0; i < dtcArray.length; i++) {
+    var dtcInfo = dtcArray[i].split(",");
+
+    var row = table.insertRow(i + 1); // +1 wegen der Überschriftenzeile
+
+    // Zeitstempel
+    var timestampCell = row.insertCell(0);
+    timestampCell.innerHTML = formatTimestamp(parseInt(dtcInfo[0]));
+
+    // Fehlercode
+    var errorCodeCell = row.insertCell(1);
+    errorCodeCell.innerHTML = dtcInfo[1];
+
+    // Schwere
+    var severityCell = row.insertCell(2);
+    var severity = parseInt(dtcInfo[2]);
+
+    // Schwere
+    switch (severity) {
+      case 1:
+        severityCell.innerHTML = '<img src="static/img/info.png" alt="Info" />';
+        break;
+      case 2:
+        severityCell.innerHTML =
+          '<img src="static/img/warn.png" alt="Warnung" />';
+        break;
+      case 3:
+        severityCell.innerHTML =
+          '<img src="static/img/critical.png" alt="Kritisch" />';
+        break;
+      default:
+        severityCell.innerHTML =
+          '<img src="static/img/none.png" alt="Unbekannt" />';
+    }
+
+    row.setAttribute("data-dtc", dtcInfo[1]);
+    row.setAttribute("data-debugval", dtcInfo[4]);
+
+    // Aktivität
+    var activityCell = row.insertCell(3);
+    activityCell.innerHTML = parseInt(dtcInfo[3]) === 1 ? "active" : "previous";
+  }
+}
+
+function formatTimestamp(milliseconds) {
+  const date = new Date(milliseconds);
+
+  const days = String(date.getUTCDate() - 1).padStart(2, "0");
+  const hours = String(date.getUTCHours()).padStart(2, "0");
+  const minutes = String(date.getUTCMinutes()).padStart(2, "0");
+  const seconds = String(date.getUTCSeconds()).padStart(2, "0");
+  const millisecondsFormatted = String(date.getUTCMilliseconds()).padStart(
+    3,
+    "0"
+  );
+
+  return `${days}-${hours}:${minutes}:${seconds}:${millisecondsFormatted}`;
+}

Software/data_src/static/js/websocket.js

@@ -30,11 +30,26 @@ function onClose(event) {
 }
 
 function onMessage(event) {
-  var livedebug_out = document.getElementById("livedebug-out");
-  var textarea_heigth = livedebug_out.scrollHeight;
-  livedebug_out.value += event.data;
-  livedebug_out.scrollTop = livedebug_out.scrollHeight;
-  do_resize(livedebug_out);
+  var data = event.data;
+  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);
+  }
+  if (data.startsWith("DTC:")) {
+    const dtcs = data.slice(4);
+    const dtcArray = dtcs.trim() !== "" ? dtcs.split(";").filter(Boolean) : [];
+
+    if(dtcArray[0] != "0")
+    {
+      notifyMe();
+      fillDTCTable(dtcArray);
+    }
+    console.log(dtcArray + "\n");
+  }
+  console.log("ws_msg:" + event.data + "\n");
 }
 
 function onLoad(event) {
@@ -66,3 +81,19 @@ function do_resize(textbox) {
   else if (rows < minrows) textbox.rows = minrows;
   else textbox.rows = rows;
 }
+
+function notifyMe() {
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  } else if (Notification.permission === "granted") {
+    const notification = new Notification("Hi there!");
+    // …
+  } else if (Notification.permission !== "denied") {
+    Notification.requestPermission().then((permission) => {
+      if (permission === "granted") {
+        const notification = new Notification("Hi there!");
+        // …
+      }
+    });
+  }
+}