DTC in WebUI now handled via Websocket

Software/data_src/index.htm

@@ -75,11 +75,11 @@
         </p>
         <!-- Div Group current Mode -->
         <!-- Div Group DTC Table -->
-        <div %SHOW_DTC_TABLE%>
+        <div id="dtc_container" hidden>
           <hr />
           <p>
           <h4>Fehlercodes</h4>
-          <table class="table">
+          <table class="table" id="dtc_table">
             <tbody>
               <tr>
                 <th class="col-6" scope="col">Zeitstempel</th>
@@ -87,7 +87,6 @@
                 <th class="col-2" scope="col">Schwere</th>
                 <th class="col-2" scope="col">Aktiv</th>
               </tr>
-              %DTC_TABLE%
             </tbody>
           </table>
           </p>
@@ -803,18 +802,10 @@
       nextSibling.innerText = fileName
     });
 
-    $(document).ready(function () {
-      $("tr[data-dtc]").each(function (i) {
-        $(this).attr('data-toggle', "modal");
-        $(this).attr('data-target', "#dtcModal");
-      });
-    });
-
-    $('#dtcModal').on('show.bs.modal', function (event) {
-      var dtctr = $(event.relatedTarget)
-      var dtc = dtctr.data('dtc')
-      var debugval = dtctr.data('debugval')
-      var modal = $(this)
+    $('table').on('click', 'tr[data-dtc]', function () {
+      var dtc = $(this).data('dtc');
+      var debugval = $(this).data('debugval');
+      var modal = $('#dtcModal');
 
       getDescriptionForDTCNumber(dtc, function (error, title, description) {
         if (error)
@@ -837,6 +828,8 @@
           }
         }
       });
+      // Modal anzeigen
+      modal.modal('show');
     });
 
   </script>

Software/data_src/static/dtc_table.json

@@ -71,6 +71,21 @@
     },
     {
         "num": 14,
+        "title": "Dummy-DTC Info",
+        "description": "Ein Dummy-DTC der Schwere \"Info\" für Debugging-Zwecke"
+    },
+    {
+        "num": 15,
+        "title": "Dummy-DTC Warnung",
+        "description": "Ein Dummy-DTC der Schwere \"Warnung\" für Debugging-Zwecke"
+    },
+    {
+        "num": 16,
+        "title": "Dummy-DTC Kritisch",
+        "description": "Ein Dummy-DTC der Schwere \"Kritisch\" für Debugging-Zwecke"
+    },
+    {
+        "num": 17,
         "title": "Last Error",
         "description": "Last Error"
     }

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!");
+        // …
+      }
+    });
+  }
+}