first Values updated by websockets!

Software/data_src/index.htm

@@ -72,7 +72,7 @@
         <hr />
         <p>
         <h4>aktueller Modus</h4>
-        <input class="form-control" type="text" placeholder="%SYSTEM_STATUS%" readonly>
+        <input class="form-control" type="text" id="SystemStatus" readonly>
         </p>
         <!-- Div Group current Mode -->
         <!-- Div Group DTC Table -->
@@ -130,10 +130,10 @@
         <h4>Entl&uuml;ftung</h4>
         <form action="post.htm" method="POST" class="form-horizontal">
           <div class="form-group row">
-            <label for="purgepulse" class="control-label col-4">Entl&uuml;ftung Dosierung</label>
+            <label for="BleedingPulses" class="control-label col-4">Entl&uuml;ftung Dosierung</label>
             <div class="col-8">
               <div class="input-group">
-                <input id="purgepulse" name="purgepulse" value="%BLEEDING_PULSES%" type="text" class="form-control">
+                <input id="BleedingPulses" name="BleedingPulses" value="0" type="text" class="form-control">
                 <div class="input-group-append">
                   <span class="input-group-text">Pulse</span>
                 </div>

Software/data_src/static/js/websocket.js

@@ -1,6 +1,9 @@
 var gateway = `ws://${window.location.hostname}/ws`;
 var websocket;
 
+var statusMapping;
+var staticMapping;
+
 window.addEventListener("load", onLoad);
 
 function initWebSocket() {
@@ -31,25 +34,79 @@ function onClose(event) {
 
 function onMessage(event) {
   var data = event.data;
+  console.log("ws_msg:" + event.data + "\n");
+
   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:")) {
     const dtcs = data.slice(4);
     const dtcArray = dtcs.trim() !== "" ? dtcs.split(";").filter(Boolean) : [];
 
-    if(dtcArray[0] != "0")
-    {
+    if (dtcArray[0] != "0") {
       processDTCNotifications(dtcArray);
       fillDTCTable(dtcArray);
     }
-    console.log(dtcArray + "\n");
+    return;
   }
-  console.log("ws_msg:" + event.data + "\n");
+
+  if (data.startsWith("MAPPING_STATUS:")) {
+    const data_sliced = data.slice(15);
+    statusMapping = createMapping(data_sliced);
+  }
+
+  if (data.startsWith("MAPPING_STATIC:")) {
+    const data_sliced = data.slice(15);
+    staticMapping = createMapping(data_sliced);
+  }
+
+  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:")) {
+    const data_sliced = data.slice(7);
+    const result = processDataString(data_sliced, staticMapping);
+    console.log("STATIC:");
+    console.log(JSON.stringify(result, null, 2));
+    fillValuestoHTML(result);
+    return;
+  }
+}
+
+function createMapping(mappingString) {
+  const mappingArray = mappingString.split(";");
+  const mapping = [];
+
+  mappingArray.forEach((variable) => {
+    if (variable !== null) mapping.push(variable.trim());
+  });
+  return mapping;
+}
+
+function processDataString(dataString, mapping) {
+  const valuesArray = dataString.split(";");
+  const dataObject = {};
+
+  valuesArray.forEach((value, index) => {
+    const variable = mapping[index];
+    if (variable) {
+      dataObject[variable] = value.trim();
+    }
+  });
+
+  return dataObject;
 }
 
 function onLoad(event) {
@@ -82,4 +139,11 @@ function do_resize(textbox) {
   else textbox.rows = rows;
 }
 
-
+function fillValuestoHTML(dataset) {
+  for (var key in dataset) {
+    var inputElement = document.getElementById(key);
+    if (inputElement) {
+      inputElement.value = dataset[key];
+    }
+  }
+}