diff --git a/index.html b/index.html
index dd3dff2..19db99c 100644
--- a/index.html
+++ b/index.html
@@ -51,6 +51,7 @@
+
diff --git a/meshmon.css b/meshmon.css
index cf2ed7f..c98b9c7 100644
--- 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
index 180e9a1..da6459a 100644
--- 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, ' +
|