From 053cd0c0ecada1a74385483a1974eb75cc3c46a6 Mon Sep 17 00:00:00 2001
From: Mikhael Skvortsov <mikhael.skvortsov@gmail.com>
Date: Wed, 17 Apr 2024 21:50:23 +0300
Subject: [PATCH] Show number of nodes with a seen User packet

---
 index.html  |  3 +++
 meshmon.css | 18 +++++++++++++++++-
 meshmon.js  |  2 ++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 19db99c..03feb6a 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,9 @@
                                 <td>
                                     <input id="filter-expr-input" type="text"/>
                                 </td>
+                                <td>
+                                    <div id="nodes-seen" title="Nodes with a seen User packet">000</div>
+                                </td>
                                 <td>
                                     <div class="theme-switch-wrapper">
                                         <label class="theme-switch">
diff --git a/meshmon.css b/meshmon.css
index ec940da..590a66f 100644
--- a/meshmon.css
+++ b/meshmon.css
@@ -18,6 +18,7 @@
     --selected-decoded: #f9f978;
 
     --tooltip-bg-color: #bababa;
+    --nodes-seen-bg-color: #76c2fc;
 }
 
 [data-theme="dark"] {
@@ -37,6 +38,7 @@
     --selected-decoded: #56563c;
 
     --tooltip-bg-color: #111111;
+    --nodes-seen-bg-color: #005596;
 }
 
 body {
@@ -83,6 +85,9 @@ body {
 .table-main tbody tr {
     text-align: right;
 }
+.table-main tfoot tr td {
+    border: none;
+}
 
 .packet-header-row {
     background: var(--packet-header-bg-color)
@@ -127,6 +132,17 @@ body {
     border: 0;
 }
 
+#nodes-seen {
+    font-family: var(--font-family-verbatim);
+    background-color: var(--nodes-seen-bg-color);
+    margin-left: 30px;
+    width: 32px;
+    height: 20px;
+    align-content: center;
+    padding-right: 8px;
+    border-radius: 5px;
+}
+
 /* Row selection */
 
 .selected.packet-header-row {
@@ -142,7 +158,7 @@ body {
 /* Source code link logo */
 
 .logo {
-    height: 22px;
+    height: 16px;
 }
 .logo-light {
     display: var(--logo-light-mode);
diff --git a/meshmon.js b/meshmon.js
index 670d90e..fcef84f 100644
--- a/meshmon.js
+++ b/meshmon.js
@@ -431,6 +431,8 @@ function mqttOnMessage(topic, message) {
         se.parsed.status == ParseResult.Ok) {
         const user = se.parsed.value.value;
         users.set(user.id, user);
+        document.getElementById('nodes-seen').innerHTML =
+            users.size.toString().padStart(3, '0');;
     }
 
     const scrollDown = window.scrollY + window.innerHeight + 42 > document.body.scrollHeight;