From 9147359b904a5b917d24bccf8374453493a49101 Mon Sep 17 00:00:00 2001
From: andreas <andreas@wellenvogel.de>
Date: Sun, 7 Nov 2021 17:00:40 +0100
Subject: [PATCH] improved counter display on status page

---
 lib/counter/GwCounter.h |  11 ++--
 src/main.cpp            |   4 +-
 web/index.css           |  11 ++++
 web/index.html          | 122 +++++++---------------------------------
 web/index.js            |  51 ++++++++++++++++-
 5 files changed, 88 insertions(+), 111 deletions(-)

diff --git a/lib/counter/GwCounter.h b/lib/counter/GwCounter.h
index 4a66aea..6d4be4f 100644
--- a/lib/counter/GwCounter.h
+++ b/lib/counter/GwCounter.h
@@ -42,17 +42,18 @@ template<class T> class GwCounter{
         }
         int getJsonSize(){
             return JSON_OBJECT_SIZE(4)+JSON_OBJECT_SIZE(okCounter.size()+1)+
-                JSON_OBJECT_SIZE(failCounter.size()+1);
+                JSON_OBJECT_SIZE(failCounter.size()+1)+
+                okCounter.size()*5+failCounter.size()*5;
         }
         void toJson(JsonDocument &json){
             JsonObject jo=json.createNestedObject(name);
-            jo["sumOk"]=globalOk;
-            jo["sumFail"]=globalFail;
-            JsonObject jok=jo.createNestedObject("ok");
+            jo[F("sumOk")]=globalOk;
+            jo[F("sumFail")]=globalFail;
+            JsonObject jok=jo.createNestedObject(F("ok"));
             for (auto it=okCounter.begin();it!=okCounter.end();it++){
                 jok[String(it->first)]=it->second;
             }
-            JsonObject jfail=jo.createNestedObject("fail");
+            JsonObject jfail=jo.createNestedObject(F("fail"));
             for (auto it=failCounter.begin();it!=failCounter.end();it++){
                 jfail[String(it->first)]=it->second;
             }
diff --git a/src/main.cpp b/src/main.cpp
index 79b21ba..4b52b9c 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -86,7 +86,7 @@ GwRequestQueue mainQueue(&logger,20);
 GwWebServer webserver(&logger,&mainQueue,80);
 
 GwCounter<unsigned long> countNMEA2KIn("count2Kin");
-GwCounter<unsigned long> countNMEA2KOut("count2kout");
+GwCounter<unsigned long> countNMEA2KOut("count2Kout");
 
 GwCounter<String> countUSBIn("countUSBin");
 GwCounter<String> countUSBOut("countUSBout");
@@ -595,8 +595,8 @@ void SendNMEA0183Message(const tNMEA0183Msg &NMEA0183Msg, int sourceId) {
 }
 
 void handleReceivedNmeaMessage(const char *buf, int sourceId){
-  updateNMEACounter(sourceId,buf,true);
   if (! checkFilter(buf,sourceId,true)) return;
+  updateNMEACounter(sourceId,buf,true);
   if ((sourceId == USB_CHANNEL_ID && n2kFromUSB->asBoolean())||
       (sourceId >= MIN_TCP_CHANNEL_ID && n2kFromTCP->asBoolean())||
       (sourceId == SERIAL1_CHANNEL_ID && n2kFromSerial->asBoolean())
diff --git a/web/index.css b/web/index.css
index 29588fa..d82d7b2 100644
--- a/web/index.css
+++ b/web/index.css
@@ -13,6 +13,16 @@ body{
   #statusPage .even {
       background-color: rgb(211 211 211 / 43%);
   }
+  #statusPageContent {
+    margin-bottom: 0.5em;
+  }
+  .counter-row .value{
+      text-align: right;
+      width: 6em;
+  }
+  .icon-row .label{
+      width: 8.7em;
+  }
   .category .title .label {
       opacity: 1;
       margin-left: 1em;
@@ -50,6 +60,7 @@ body{
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
+      align-items: center;
   }
   input,select {
       border: 1px solid #808080a1;
diff --git a/web/index.html b/web/index.html
index a4a1f8a..9778541 100644
--- a/web/index.html
+++ b/web/index.html
@@ -20,109 +20,27 @@
   <div class="tab" data-page="dashboardPage">Data</div>
 </div>
 <div id="statusPage" class="tabPage">
-<div class="row">
-  <span class="label">VERSION</span>
-  <span class="value" id="version">---</span>
-  <button class="infoButton" id="converterInfo">?</button> 
-</div>
+  <div id="statusPageContent">
+    <div class="row">
+      <span class="label">VERSION</span>
+      <span class="value" id="version">---</span>
+      <button class="infoButton" id="converterInfo">?</button>
+    </div>
 
-<div class="row even">
-  <span class="label">Access Point IP</span>
-  <span class="value" id="apIp">---</span>
-</div>
-<div class="row ">
-  <span class="label">wifi client connected</span>
-  <span class="value" id="wifiConnected">---</span>
-</div>
-<div class="row even">
-  <span class="label">wifi client IP</span>
-  <span class="value" id="clientIP">---</span>
-</div>
-<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"># TCP in</span>
-  <span class="value" id="countTCPin.sumOk">---</span>
-</div>
-<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 class="row even">
+      <span class="label">Access Point IP</span>
+      <span class="value" id="apIp">---</span>
+    </div>
+    <div class="row ">
+      <span class="label">wifi client connected</span>
+      <span class="value" id="wifiConnected">---</span>
+    </div>
+    <div class="row even">
+      <span class="label">wifi client IP</span>
+      <span class="value" id="clientIP">---</span>
+    </div>
+  </div>
+  <button id="reset">Reset</button>
 </div>
 <div class="configForm tabPage hidden" id="configPage" >
   <div class="configFormRows">
diff --git a/web/index.js b/web/index.js
index 7bb0c6d..5094f15 100644
--- a/web/index.js
+++ b/web/index.js
@@ -13,8 +13,9 @@ function addEl(type, clazz, parent, text) {
     if (parent) parent.appendChild(el);
     return el;
 }
-function forEl(query, callback) {
-    let all = document.querySelectorAll(query);
+function forEl(query, callback,base) {
+    if (! base) base=document;
+    let all = base.querySelectorAll(query);
     for (let i = 0; i < all.length; i++) {
         callback(all[i]);
     }
@@ -145,6 +146,28 @@ function factoryReset() {
             alertRestart();
         })
 }
+function createCounterDisplay(parent,label,key,isEven){
+    let clazz="row icon-row counter-row";
+    if (isEven) clazz+=" even";
+    let row=addEl('div',clazz,parent);
+    let icon=addEl('span','icon icon-more',row);
+    addEl('span','label',row,label);
+    let value=addEl('span','value',row,'---');
+    value.setAttribute('id',key+".sumOk");
+    let display=addEl('div',clazz+" msgDetails hidden",parent);
+    display.setAttribute('id',key+".ok");
+    row.addEventListener('click',function(ev){
+        let rs=display.classList.toggle('hidden');
+        if (rs){
+            icon.classList.add('icon-more');
+            icon.classList.remove('icon-less');
+        }
+        else{
+            icon.classList.remove('icon-more');
+            icon.classList.add('icon-less');
+        }
+    });
+}
 
 function updateMsgDetails(key, details) {
     forEl('.msgDetails', function (frame) {
@@ -161,8 +184,24 @@ function updateMsgDetails(key, details) {
                 el.textContent = details[k];
             }
         }
+        forEl('.value',function(el){
+            let k=el.getAttribute('data-id');
+            if (k && ! details[k]){
+                el.parentElement.remove();
+            }
+        },frame);
     });
 }
+let counters={
+    count2Kin: 'NMEA2000 in',
+    count2Kout: 'NMEA2000 out',
+    countTCPin: 'TCP in',
+    countTCPout: 'TCP out',
+    countUSBin: 'USB in',
+    countUSBout: 'USB out',
+    countSerialIn: 'Serial in',
+    countSerialOut: 'Serial out'
+}
 function showOverlay(text, isHtml) {
     let el = document.getElementById('overlayContent');
     if (isHtml) {
@@ -477,4 +516,12 @@ window.addEventListener('load', function () {
     }
     loadConfigDefinitions();
     createDashboard();
+    let statusPage=document.getElementById('statusPageContent');
+    if (statusPage){
+        let even=false;
+        for (let c in counters){
+            createCounterDisplay(statusPage,counters[c],c,even);
+            even=!even;
+        }
+    }
 });
\ No newline at end of file