add NMEA and NSk counter

web/index.html

@@ -15,6 +15,12 @@
     if (parent)parent.appendChild(el);
     return el;
   }
+  function forEl(query,callback){
+    let all=document.querySelectorAll(query);
+    for (let i=0;i<all.length;i++){
+      callback(all[i]);
+    }
+  }
   function alertRestart(){
     reloadConfig=true;
     alert("Board reset triggered, reconnect WLAN if necessary");
@@ -41,8 +47,18 @@
     getJson('/api/status')
       .then(function(jsonData){
         for (let k in jsonData){
-          if (k == 'cnv'){
-            updateCanDetails(jsonData[k]);
+          if (typeof(jsonData[k]) === 'object'){
+            for (let sk in jsonData[k]){
+              let key=k+"."+sk;
+              if (typeof(jsonData[k][sk]) === 'object'){
+                //msg details
+                updateMsgDetails(key,jsonData[k][sk]);
+              }
+              else{
+                let el=document.getElementById(key);
+                if (el) el.textContent=jsonData[k][sk];
+              }
+            }
           }
           else{
             let el=document.getElementById(k);
@@ -131,36 +147,24 @@
         alertRestart(); 
       })
   }
-  function showCanDetails(on){
-    let el=document.getElementById('canDetails');
-    if (!el) return;
-    if (on) el.classList.add('visible');
-    else(el.classList).remove('visible');
-  }
-  function updateCanDetails(details){
-    let frame=document.getElementById('canDetails');
-    if (! frame) return;
-    for (let k in details){
-      let el=frame.querySelector("[data-id=\""+k+"\"] ");
-      if (!el){
-        el=document.createElement('div');
-        el.classList.add('row');
-        let cv=document.createElement('span');
-        cv.classList.add('label');
-        cv.textContent="PGN"+k;
-        el.appendChild(cv);
-        cv=document.createElement('span');
-        cv.classList.add('value');
-        cv.setAttribute('data-id',k);
-        cv.textContent=details[k];
-        el.appendChild(cv);
-        frame.appendChild(el);
-      }
-      else{
-        el.textContent=details[k];
-      }
+  
+  function updateMsgDetails(key, details) {
+      forEl('.msgDetails', function (frame) {
+        if (frame.getAttribute('id') !== key) return;
+        for (let k in details) {
+          let el = frame.querySelector("[data-id=\"" + k + "\"] ");
+          if (!el) {
+            el = addEl('div','row',frame);
+            let cv = addEl('span','label',el,k);
+            cv = addEl('span','value',el,details[k]);
+            cv.setAttribute('data-id', k);
+          }
+          else {
+            el.textContent = details[k];
+          }
+        }
+      });
     }
-  }
   function showOverlay(text,isHtml){
     let el=document.getElementById('overlayContent');
     if (isHtml){
@@ -451,9 +455,15 @@
       let be=buttons[i];
       be.onclick=window[be.id]; //assume a function with the button id
     }
-    let cd=document.getElementById("showCanDetails");
-    cd.addEventListener('change',function(ev){
-      showCanDetails(ev.target.checked);
+    forEl('.showMsgDetails',function(cd){
+      cd.addEventListener('change',function(ev){
+        let key=ev.target.getAttribute('data-key');
+        if (! key) return;
+        let el=document.getElementById(key);
+        if (!el) return;
+        if (ev.target.checked) el.classList.remove('hidden');
+        else(el.classList).add('hidden');
+      });
     });
     let tabs=document.querySelectorAll('.tab');
     for (let i=0;i<tabs.length;i++){
@@ -544,13 +554,13 @@ button.infoButton {
 .hidden{
   display: none !important;
 }
-#canDetails{
-  display:none;
+.msgDetails .value {
+    width: 5em;
+    text-align: right;
 }
-#canDetails.visible{
-  display: block;
+.msgDetails .label {
+    width: 5em;
 }
-
 .overlayContainer {
     position: fixed;
     top: 0;
@@ -669,29 +679,97 @@ div#dashboardPage {
   <span class="label">Access Point IP</span>
   <span class="value" id="apIp">---</span>
 </div>
-<div class="row">
-  <span class="label"># NMEA2000 messages</span>
-  <span class="value" id="numcan">---</span>
+<div class="row ">
+  <span class="label">wifi client connected</span>
+  <span class="value" id="wifiConnected">---</span>
 </div>
 <div class="row even">
-  <span class="label">NMEA2000 details</span>
-  <input type="checkbox" id="showCanDetails"></span>
+  <span class="label">wifi client IP</span>
+  <span class="value" id="clientIP">---</span>
 </div>
-
-<div class="row even" id="canDetails">
-
+<div class="row">
+  <span class="label"># NMEA2000 in</span>
+  <span class="value" id="count2Kin.sumOk">---</span>
+</div>
+<div class="row even">
+  <span class="label">NMEA2000 in details</span>
+  <input type="checkbox" class="showMsgDetails" data-key="count2Kin.ok"></span>
+</div>
+<div class="row even msgDetails hidden" id="count2Kin.ok" >
+</div>
+<div class="row">
+  <span class="label"># NMEA2000 out</span>
+  <span class="value" id="count2Kout.sumOk">---</span>
+</div>
+<div class="row even">
+  <span class="label">NMEA2000 out details</span>
+  <input type="checkbox" class="showMsgDetails" data-key="count2Kout.ok"></span>
+</div>
+<div class="row even msgDetails hidden" id="count2Kout.ok" >
 </div>
 <div class="row">
   <span class="label"># TCP clients</span>
   <span class="value" id="numClients">---</span>
 </div>
 <div class="row even">
-  <span class="label">wifi client connected</span>
-  <span class="value" id="wifiConnected">---</span>
+  <span class="label"># TCP in</span>
+  <span class="value" id="countTCPin.sumOk">---</span>
 </div>
-<div class="row">
-  <span class="label">wifi client IP</span>
-  <span class="value" id="clientIP">---</span>
+<div class="row ">
+  <span class="label">TCP in details</span>
+  <input type="checkbox" class="showMsgDetails" data-key="countTCPin.ok"></span>
+</div>
+<div class="row msgDetails hidden" id="countTCPin.ok" >
+</div>
+<div class="row even">
+  <span class="label"># TCP out</span>
+  <span class="value" id="countTCPout.sumOk">---</span>
+</div>
+<div class="row ">
+  <span class="label">TCP out details</span>
+  <input type="checkbox" class="showMsgDetails" data-key="countTCPout.ok"></span>
+</div>
+<div class="row msgDetails hidden" id="countTCPout.ok" >
+</div>
+<div class="row even">
+  <span class="label"># USB in</span>
+  <span class="value" id="countUSBin.sumOk">---</span>
+</div>
+<div class="row ">
+  <span class="label">USB in details</span>
+  <input type="checkbox" class="showMsgDetails" data-key="countUSBin.ok"></span>
+</div>
+<div class="row msgDetails hidden" id="countUSBin.ok" >
+</div>
+<div class="row even">
+  <span class="label"># USB out</span>
+  <span class="value" id="countUSBout.sumOk">---</span>
+</div>
+<div class="row ">
+  <span class="label">USB out details</span>
+  <input type="checkbox" class="showMsgDetails" data-key="countUSBout.ok"></span>
+</div>
+<div class="row msgDetails hidden" id="countUSBout.ok" >
+</div>
+<div class="row even">
+  <span class="label"># Serial in</span>
+  <span class="value" id="countSerialin.sumOk">---</span>
+</div>
+<div class="row ">
+  <span class="label">Serial in details</span>
+  <input type="checkbox" class="showMsgDetails" data-key="countSerialin.ok"></span>
+</div>
+<div class="row msgDetails hidden" id="countSerialin.ok" >
+</div>
+<div class="row even">
+  <span class="label"># Serial out</span>
+  <span class="value" id="countSerialout.sumOk">---</span>
+</div>
+<div class="row ">
+  <span class="label">Serial out details</span>
+  <input type="checkbox" class="showMsgDetails" data-key="countSerialout.ok"></span>
+</div>
+<div class="row msgDetails hidden" id="countSerialout.ok" >
 </div>
 <button id="reset" >Reset</button>
 </div>