Row selection

mskvortsov · Apr 17, 2024 · 66633c8 · 66633c8
1 parent a8b5aca
commit 66633c8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -51,6 +51,7 @@
                                     <input id="mqtt-topic" type="text" size="10"/>
                                     <button id="mqtt-connect">Connect</button>
                                     <button id="clear">Clear</button>
+                                    <button id="unselect">Unselect</button>
                                     <span id="mqtt-status"></span>
                                 </td>
                                 <td class="right">

diff --git a/meshmon.css b/meshmon.css
@@ -12,6 +12,10 @@
     --filter-error-bg-color: #d5899c;
     --logo-light-mode: block;
     --logo-dark-mode: none;
+
+    --selected-header: #c2c260;
+    --selected-header-outbound: #5fcc44;
+    --selected-decoded: #f9f978;
 }
 
 [data-theme="dark"] {
@@ -25,6 +29,10 @@
     --filter-error-bg-color: #4b2f36;
     --logo-light-mode: none;
     --logo-dark-mode: block;
+
+    --selected-header: #5b6053;
+    --selected-header-outbound: #1c8100;
+    --selected-decoded: #56563c;
 }
 
 body {
@@ -78,7 +86,7 @@ body {
 .packet-header-row-outbound {
     background: var(--packet-header-outbound-bg-color);
 }
-.packet-decoded {
+.packet-decoded td {
     text-align: left;
 }
 #filter-expr-input {
@@ -115,6 +123,18 @@ body {
     border: 0;
 }
 
+/* Row selection */
+
+.selected.packet-header-row {
+    background-color: var(--selected-header);
+}
+.selected.packet-header-row-outbound {
+    background-color: var(--selected-header-outbound);
+}
+.selected.packet-decoded {
+    background-color: var(--selected-decoded);
+}
+
 /* Source code link logo */
 
 .logo {

diff --git a/meshmon.js b/meshmon.js
@@ -331,13 +331,22 @@ function render(se) {
         console.error('parsing error');
     }
 
-    var row = tbody.insertRow();
-    var cell = row.insertCell();
-    cell.className = 'packet-decoded verbatim';
+    var decodedRow = tbody.insertRow();
+    decodedRow.className = 'packet-decoded verbatim';
+    var cell = decodedRow.insertCell();
     cell.colSpan = fields.length;
     var decoded = document.createElement('pre');
     decoded.textContent = text;
     cell.appendChild(decoded);
+
+    headerRow.onclick = () => {
+        headerRow.classList.toggle('selected');
+        headerRow.nextElementSibling.classList.toggle('selected');
+    };
+    decodedRow.onclick = () => {
+        decodedRow.previousElementSibling.classList.toggle('selected');
+        decodedRow.classList.toggle('selected');
+    };
 }
 
 function mqttOnMessage(topic, message) {
@@ -476,8 +485,12 @@ window.onload = function() {
     connectButton = document.getElementById('mqtt-connect');
     connectButton.addEventListener('click', onClickConnect);
 
-    var clearButton = document.getElementById('clear');
-    clearButton.addEventListener('click', onClickClear);
+    document.getElementById('clear').addEventListener('click', onClickClear);
+    document.getElementById('unselect').addEventListener('click', function() {
+        Array.from(tbody.rows).forEach((row) => {
+            row.classList.remove('selected');
+        });
+    });
 
     filterInput = document.getElementById('filter-expr-input');
     filterInput.placeholder = 'Filter: a JavaScript expression over header fields, ' +