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, ' +