adam/meshview
1
0
Fork 0
mirror of https://github.com/pablorevilla-meshtastic/meshview.git synced 2026-06-11 01:34:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

add reach.html

Browse Source
This commit is contained in:
pablorevilla-meshtastic
2026-05-12 19:21:08 -07:00
parent 3a5881975c
commit 4656a9a939
1 changed files with 78 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
meshview/templates/reach.html
+78 -26
View File
@@ -75,6 +75,21 @@
font-size: 0.9rem;
}
.reach-gateway-panels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 10px;
}
.reach-gateway-panel {
overflow-x: auto;
}
.reach-gateway-table {
min-width: 0;
}
.reach-table th,
.reach-table td {
vertical-align: top;
@@ -116,6 +131,12 @@
.reach-muted {
color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 600px) {
.reach-gateway-panels {
grid-template-columns: 1fr;
}
}
{% endblock %}
{% block body %}
@@ -170,22 +191,39 @@
</div>
</div>
<div class="reach-table-wrap">
<table class="table table-dark table-sm table-striped reach-table">
<thead>
<tr>
<th>Gateway</th>
<th>Heard Packets</th>
<th>Total Packets</th>
<th>Reach</th>
</tr>
</thead>
<tbody id="reach-packet-body">
<tr>
<td colspan="4" class="reach-muted">Loading packets...</td>
</tr>
</tbody>
</table>
<div class="reach-gateway-panels">
<div class="reach-gateway-panel">
<table class="table table-dark table-sm table-striped reach-table reach-gateway-table">
<thead>
<tr>
<th>Gateway</th>
<th>Heard</th>
<th>Reach</th>
</tr>
</thead>
<tbody id="reach-packet-body-left">
<tr>
<td colspan="3" class="reach-muted">Loading packets...</td>
</tr>
</tbody>
</table>
</div>
<div class="reach-gateway-panel">
<table class="table table-dark table-sm table-striped reach-table reach-gateway-table">
<thead>
<tr>
<th>Gateway</th>
<th>Heard</th>
<th>Reach</th>
</tr>
</thead>
<tbody id="reach-packet-body-right">
<tr>
<td colspan="3" class="reach-muted">Loading packets...</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
@@ -258,15 +296,23 @@ async function loadReachReport(nodeId = reachNodeId) {
reachNodeId = Number(nodeId);
const packetCountEl = document.getElementById("reach-packet-count");
const gatewayCountEl = document.getElementById("reach-gateway-count");
const bodyEl = document.getElementById("reach-packet-body");
const bodyEls = [
document.getElementById("reach-packet-body-left"),
document.getElementById("reach-packet-body-right"),
];
const bucketBodyEl = document.getElementById("reach-bucket-body");
const selectedNodeEl = document.getElementById("reach-node-id");
const setGatewayTables = html => {
bodyEls.forEach(el => {
el.innerHTML = html;
});
};
selectedNodeEl.textContent = reachNodeId;
packetCountEl.textContent = "...";
gatewayCountEl.textContent = "...";
bucketBodyEl.innerHTML = '<tr><td colspan="2" class="reach-muted">Loading statistics...</td></tr>';
bodyEl.innerHTML = '<tr><td colspan="4" class="reach-muted">Loading packets...</td></tr>';
setGatewayTables('<tr><td colspan="3" class="reach-muted">Loading packets...</td></tr>');
try {
const [packetData] = await Promise.all([
@@ -281,7 +327,7 @@ async function loadReachReport(nodeId = reachNodeId) {
if (packets.length === 0) {
gatewayCountEl.textContent = "0";
bucketBodyEl.innerHTML = '<tr><td colspan="2" class="reach-muted">No packets found.</td></tr>';
bodyEl.innerHTML = '<tr><td colspan="4" class="reach-muted">No packets found.</td></tr>';
setGatewayTables('<tr><td colspan="3" class="reach-muted">No packets found.</td></tr>');
return;
}
@@ -341,22 +387,26 @@ async function loadReachReport(nodeId = reachNodeId) {
`;
}).join("");
bodyEl.innerHTML = gatewayRows.length
? gatewayRows.map(row => `
const renderGatewayRows = rows => rows.length
? rows.map(row => `
<tr>
<td>${escapeHtml(gatewayLabel(row.nodeId, nodesById))}</td>
<td>${row.heardCount}</td>
<td>${packets.length}</td>
<td>${row.percent.toFixed(1)}%</td>
</tr>
`).join("")
: '<tr><td colspan="4" class="reach-muted">No gateways heard these packets.</td></tr>';
: '<tr><td colspan="3" class="reach-muted">No gateways heard these packets.</td></tr>';
const splitIndex = Math.ceil(gatewayRows.length / 2);
bodyEls[0].innerHTML = renderGatewayRows(gatewayRows.slice(0, splitIndex));
bodyEls[1].innerHTML = gatewayRows.length > 1
? renderGatewayRows(gatewayRows.slice(splitIndex))
: '<tr><td colspan="3" class="reach-muted">No additional gateways.</td></tr>';
} catch (err) {
console.error("Failed to load reach report:", err);
packetCountEl.textContent = "!";
gatewayCountEl.textContent = "!";
bucketBodyEl.innerHTML = '<tr><td colspan="2" class="text-danger">Failed to load statistics.</td></tr>';
bodyEl.innerHTML = '<tr><td colspan="4" class="text-danger">Failed to load report.</td></tr>';
setGatewayTables('<tr><td colspan="3" class="text-danger">Failed to load report.</td></tr>');
}
}
@@ -368,8 +418,10 @@ document.addEventListener("DOMContentLoaded", async () => {
if (!nodeId) {
document.getElementById("reach-bucket-body").innerHTML =
'<tr><td colspan="2" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
document.getElementById("reach-packet-body").innerHTML =
'<tr><td colspan="4" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
document.getElementById("reach-packet-body-left").innerHTML =
'<tr><td colspan="3" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
document.getElementById("reach-packet-body-right").innerHTML =
'<tr><td colspan="3" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
return;
}