From c2363226678c286861b1059616e383f9a3f45748 Mon Sep 17 00:00:00 2001
From: Marcel Peterkau <marcel@peterkau.de>
Date: Tue, 9 Jan 2024 22:51:45 +0100
Subject: [PATCH] reworked the WebUI-Websocket-Comm

---
 Software/data_src/index.htm              | 55 +++++++++++++-----------
 Software/data_src/static/js/websocket.js | 39 +++++++++--------
 Software/src/webui.cpp                   |  8 ++--
 3 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/Software/data_src/index.htm b/Software/data_src/index.htm
index a02d35c..8713756 100644
--- a/Software/data_src/index.htm
+++ b/Software/data_src/index.htm
@@ -60,7 +60,7 @@
         <p>
         <h4>Tankinhalt verbleibend</h4>
         <div class="progress">
-          <div id="tankremain" class="progress-bar text-light" role="progressbar" aria-valuenow="0"
+          <div id="tankremain" class="data-tankremain progress-bar text-light" role="progressbar" aria-valuenow="0"
             aria-valuemin="0" aria-valuemax="100" style="width: 0%">
             0
           </div>
@@ -71,7 +71,7 @@
         <hr />
         <p>
         <h4>aktueller Modus</h4>
-        <input class="form-control" type="text" id="SystemStatus" readonly>
+        <input class="data-systemstatus form-control" type="text" id="sysstatus" readonly>
         </p>
         <!-- Div Group current Mode -->
         <!-- Div Group DTC Table -->
@@ -107,9 +107,9 @@
             <label for="tankremain_maint" class="control-label col-4">Tankinhalt verbleibend</label>
             <div class="col-8">
               <div class="progress">
-                <div id="tankremain_maint" class="progress-bar text-light" role="progressbar"
-                  aria-valuenow="%TANK_REMAIN_CAPACITY%" aria-valuemin="0" aria-valuemax="100"
-                  style="width: %TANK_REMAIN_CAPACITY%&#37;">
+                <div id="tankremain_maint" class="data-tankremain progress-bar text-light" role="progressbar"
+                  aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+                  style="width: 0%">
                   %TANK_REMAIN_CAPACITY%&#37;
                 </div>
               </div>
@@ -129,10 +129,10 @@
         <h4>Entl&uuml;ftung</h4>
         <form action="post.htm" method="POST" class="form-horizontal">
           <div class="form-group row">
-            <label for="BleedingPulses" 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="BleedingPulses" name="BleedingPulses" value="0" type="text" class="form-control">
+                <input id="bleedingpulses" name="bleedingpulses" value="0" type="text" class="data-bleedingpulses form-control">
                 <div class="input-group-append">
                   <span class="input-group-text">Pulse</span>
                 </div>
@@ -258,7 +258,10 @@
           <div class="form-group row">
             <label for="sourceselect" class="control-label col-4">Schnittstelle</label>
             <div class="col-8">
-              <select id="sourceselect" name="sourceselect" class="select form-control">                
+              <select id="sourceselect" name="sourceselect" class="data-sourceselect select form-control"> 
+                <option value="Impuls">Impuls</option>
+                <option value="GPS">GPS</option>
+                <option value="CAN-Bus">CAN-Bus</option>               
               </select>
             </div>
           </div>
@@ -279,7 +282,7 @@
         </p>
         <!-- Div Group Signal Source -->
         <!-- Div Group Source:Impulse Settings-->
-        <div id="showimpulse" class="removeable">
+        <div id="showimpulse" class="data-showimpulse removeable">
           <hr />
           <p>
           <h4>Einstellungen Impulseingang</h4>
@@ -289,7 +292,7 @@
               <label for="tirewidth" class="control-label col-4">Reifenbreite</label>
               <div class="col-8">
                 <div class="input-group">
-                  <input id="tirewidth" name="tirewidth" type="text" required="required" class="form-control">
+                  <input id="tirewidth" name="tirewidth" type="text" required="required" class="data-tirewidth form-control">
                   <div class="input-group-append">
                     <span class="input-group-text">mm</span>
                   </div>
@@ -301,7 +304,7 @@
               <label for="tireratio" class="control-label col-4">Höhe/Breite-Verhältniss</label>
               <div class="col-8">
                 <div class="input-group">
-                  <input id="tireratio" name="tireratio" type="text" required="required" class="form-control">
+                  <input id="tireratio" name="tireratio" type="text" required="required" class="data-tireratio form-control">
                   <div class="input-group-append">
                     <span class="input-group-text">mm</span>
                   </div>
@@ -312,7 +315,7 @@
               <label for="tiredia" class="control-label col-4">Felgendurchmesser</label>
               <div class="col-8">
                 <div class="input-group">
-                  <input id="tiredia" name="tiredia" type="text" required="required" class="form-control">
+                  <input id="tiredia" name="tiredia" type="text" required="required" class="data-tiredia form-control">
                   <div class="input-group-append">
                     <span class="input-group-text">"</span>
                   </div>
@@ -323,7 +326,7 @@
               <label for="pulserev" class="control-label col-4">Pulse pro Umdrehung</label>
               <div class="col-8">
                 <div class="input-group">
-                  <input id="pulserev" name="pulserev" type="text" required="required" class="form-control">
+                  <input id="pulserev" name="pulserev" type="text" required="required" class="data-pulserev form-control">
                   <div class="input-group-addon"></div>
                 </div>
               </div>
@@ -338,7 +341,7 @@
         </div>
         <!-- Div Group Source:Impulse Settings-->
         <!-- Div Group Source:CAN Settings-->
-        <div id="showcan" class="removeable">
+        <div id="showcan" class="data-showcan removeable">
           <hr />
           <p>
           <h4>Einstellungen CAN-Bus</h4>
@@ -346,7 +349,9 @@
             <div class="form-group row">
               <label for="cansource" class="control-label col-4">Model</label>
               <div class="col-8">
-                <select id="cansource" name="cansource" class="select form-control">
+                <select id="cansource" name="cansource" class="data-cansource select form-control">
+                  <option value="KTM 890 Adventure R (2021)">KTM 890 Adventure R (2021)</option>
+                  <option value="KTM 1290 Superduke R (2023)">KTM 1290 Superduke R (2023)</option> 
                 </select>
               </div>
             </div>
@@ -360,7 +365,7 @@
         </div>
         <!-- Div Group Source:CAN Settings-->
         <!-- Div Group Source:GPS Settings-->
-        <div id="showgps" class="removeable">
+        <div id="showgps" class="data-showgps removeable">
           <hr />
           <p>
           <h4>Einstellungen GPS</h4>
@@ -368,7 +373,7 @@
             <div class="form-group row">
               <label for="gpsbaud" class="control-label col-4">Baudrate</label>
               <div class="col-8">
-                <select id="gpsbaud" name="gpsbaud" class="select form-control">
+                <select id="gpsbaud" name="gpsbaud" class="data-gpsbaud select form-control">
                 </select>
               </div>
             </div>
@@ -391,7 +396,7 @@
             <div class="col-8">
               <div class="input-group">
                 <input id="lubedistancenormal" name="lubedistancenormal" type="text"
-                  class="form-control" required="required">
+                  class="data-lubedistancenormal form-control" required="required">
                 <div class="input-group-append">
                   <span class="input-group-text">m</span>
                 </div>
@@ -403,7 +408,7 @@
             <div class="col-8">
               <div class="input-group">
                 <input id="lubedistancerain" name="lubedistancerain" type="text"
-                  class="form-control" required="required">
+                  class="data-lubedistancerain form-control" required="required">
                 <div class="input-group-append">
                   <span class="input-group-text">m</span>
                 </div>
@@ -427,7 +432,7 @@
             <label for="tankcap" class="control-label col-4">Tankkapazität</label>
             <div class="col-8">
               <div class="input-group">
-                <input id="tankcap" name="tankcap" type="text" class="form-control"
+                <input id="tankcap" name="tankcap" type="text" class="data-tankcap form-control"
                   required="required">
                 <div class="input-group-append">
                   <span class="input-group-text">ml</span>
@@ -439,7 +444,7 @@
             <label for="tankwarn" class="control-label col-4">Leer-Warnung</label>
             <div class="col-8">
               <div class="input-group">
-                <input id="tankwarn" name="tankwarn" type="text" class="form-control"
+                <input id="tankwarn" name="tankwarn" type="text" class="data-tankwarn form-control"
                   required="required">
                 <div class="input-group-append">
                   <span class="input-group-text">&#37;</span>
@@ -451,7 +456,7 @@
             <label for="pumppulse" class="control-label col-4">Menge pro Puls</label>
             <div class="col-8">
               <div class="input-group">
-                <input id="pumppulse" name="pumppulse" type="text" class="form-control"
+                <input id="pumppulse" name="pumppulse" type="text" class="data-pumppulse form-control"
                   required="required">
                 <div class="input-group-append">
                   <span class="input-group-text">µl</span>
@@ -476,7 +481,7 @@
             <label for="ledmodeflash" class="control-label col-4">LED Modus blinken</label>
             <div class="col-8">
               <div class="form-check">
-                <input class="form-check-input" type="checkbox" name="ledmodeflash" id="ledmodeflash">
+                <input class="data-ledmodeflash form-check-input" type="checkbox" name="ledmodeflash" id="ledmodeflash">
                 <label class="form-check-label" for="ledmodeflash">
                   LED blinken
                 </label>
@@ -488,7 +493,7 @@
             <div class="col-8">
               <div class="input-group">
                 <input id="ledmaxbrightness" name="ledmaxbrightness" type="text"
-                  class="form-control" required="required">
+                  class="data-ledmaxbrightness form-control" required="required">
               </div>
             </div>
           </div>
@@ -497,7 +502,7 @@
             <div class="col-8">
               <div class="input-group">
                 <input id="ledminbrightness" name="ledminbrightness" type="text"
-                  class="form-control" required="required">
+                  class="data-ledminbrightness form-control" required="required">
               </div>
             </div>
           </div>
diff --git a/Software/data_src/static/js/websocket.js b/Software/data_src/static/js/websocket.js
index b716116..9261683 100644
--- a/Software/data_src/static/js/websocket.js
+++ b/Software/data_src/static/js/websocket.js
@@ -141,24 +141,29 @@ function do_resize(textbox) {
 
 function fillValuesToHTML(dataset) {
   for (var key in dataset) {
-    var element = document.getElementById(key);
+    var key_prefixed = "data-" + key;
+    var elements = document.getElementsByClassName(key_prefixed);
 
-    if (element) {
-      if (element.type === "checkbox") {
-        // Wenn das Element ein Kontrollkästchen ist
-        element.checked = dataset[key] == 1 ? true : false;
-      } else if (element.tagName === "SELECT") {
-        // Wenn das Element ein Dropdown ist
-        setDropdownValue(element, dataset[key]);
-      } else if (element.classList.contains("progress-bar")) {
-        // Wenn das Element eine Fortschrittsleiste ist
-        updateProgressBar(element, dataset[key]);
-      } else if (element.classList.contains("removeable")) {
-        // Wenn das Element ein Settingsabschnitt-div ist
-        if (dataset[key] == 0) element.remove();
-      } else {
-        // Standardmäßig für Textfelder und andere Elemente
-        element.value = dataset[key];
+    if (elements.length > 0) {
+      for (var i = 0; i < elements.length; i++) {
+        var element = elements[i];
+
+        if (element.type === "checkbox") {
+          // Wenn das Element ein Kontrollkästchen ist
+          element.checked = dataset[key] == 1 ? true : false;
+        } else if (element.tagName === "SELECT") {
+          // Wenn das Element ein Dropdown ist
+          setDropdownValue(element, dataset[key]);
+        } else if (element.classList.contains("progress-bar")) {
+          // Wenn das Element eine Fortschrittsleiste ist
+          updateProgressBar(element, dataset[key]);
+        } else if (element.classList.contains("removeable")) {
+          // Wenn das Element ein Settingsabschnitt-div ist
+          if (dataset[key] == 0) element.remove();
+        } else {
+          // Standardmäßig für Textfelder und andere Elemente
+          element.value = dataset[key];
+        }
       }
     }
   }
diff --git a/Software/src/webui.cpp b/Software/src/webui.cpp
index ccc2aa0..cff7943 100644
--- a/Software/src/webui.cpp
+++ b/Software/src/webui.cpp
@@ -617,9 +617,9 @@ void Websocket_RefreshClientData_Status(uint32_t client_id, bool send_mapping)
   if (send_mapping)
   {
     const char mapping[] = "MAPPING_STATUS:"
-                           "SystemStatus;"
+                           "systemstatus;"
                            "tankremain;"
-                           "Odometer;";
+                           "odometer;";
 
     if (client_id > 0)
       webSocket.text(client_id, mapping);
@@ -668,7 +668,6 @@ void Websocket_RefreshClientData_Static(uint32_t client_id, bool send_mapping)
                            "tirewidth;"
                            "tireratio;"
                            "tiredia;"
-                           "DistancePerRevolution_mm;"
                            "sourceselect;"
                            "gpsbaud;"
                            "cansource;"
@@ -678,7 +677,7 @@ void Websocket_RefreshClientData_Static(uint32_t client_id, bool send_mapping)
                            "showimpulse;"
                            "showgps;"
                            "showcan;"
-                           "BleedingPulses;";
+                           "bleedingpulses;";
 
     if (client_id > 0)
       webSocket.text(client_id, mapping);
@@ -697,7 +696,6 @@ void Websocket_RefreshClientData_Static(uint32_t client_id, bool send_mapping)
   temp.concat(String(LubeConfig.TireWidth_mm) + ";");
   temp.concat(String(LubeConfig.TireWidthHeight_Ratio) + ";");
   temp.concat(String(LubeConfig.RimDiameter_Inch) + ";");
-  temp.concat(String(LubeConfig.DistancePerRevolution_mm) + ";");
   temp.concat(String(SpeedSourceString[LubeConfig.SpeedSource]) + ";");
   temp.concat(String(GPSBaudRateString[LubeConfig.GPSBaudRate]) + ";");
   temp.concat(String(CANSourceString[LubeConfig.CANSource]) + ";");