sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat](trx-frontend-http): add longest map qso summary

Browse Source 
Add a map summary section below the map that lists the five longest directed FT8 and WSPR contacts in the current view, including distance, band, age, and locator details.

Verification: node --check src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
Verification: git diff --check -- src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-14 16:46:06 +01:00
parent 3b52fdf232
commit e2517ec184
3 changed files with 233 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+96 -3
View File
@@ -3780,6 +3780,7 @@ let mapP2pRadioPathsEnabled = loadSetting("mapP2pRadioPathsEnabled", true) !== f
let mapDecodeContactPathsEnabled = loadSetting("mapDecodeContactPathsEnabled", true) !== false;
let mapOverlayPanelVisible = loadSetting("mapOverlayPanelVisible", true) !== false;
const MAP_HISTORY_LIMIT_OPTIONS = [15, 30, 60, 180, 360, 720, 1440];
const MAP_QSO_SUMMARY_LIMIT = 5;
const stationMarkers = new Map();
const locatorMarkers = new Map();
const decodeContactPaths = new Map();
@@ -4398,6 +4399,7 @@ function syncDecodeContactPathVisibility() {
}
ensureDecodeContactPathRendered(entry);
}
renderMapQsoSummary();
}
function setMapRadioPathTo(lat, lon, color, className = "aprs-radio-path") {
@@ -5942,6 +5944,7 @@ function rebuildDecodeContactPaths() {
source,
target,
sourceGrid: grid,
sourceType: entry.sourceType,
tsMs,
bandLabel: band?.label || null,
});
@@ -5955,6 +5958,7 @@ function rebuildDecodeContactPaths() {
const sourceCenter = locatorToLatLon(msg.sourceGrid);
const targetCenter = locatorToLatLon(targetLocator.grid);
if (!sourceCenter || !targetCenter) continue;
const distanceKm = haversineKm(sourceCenter.lat, sourceCenter.lon, targetCenter.lat, targetCenter.lon);
const key = [msg.source, msg.target].sort().join("::");
const prev = decodeContactPaths.get(key);
if (prev && prev.tsMs > msg.tsMs) continue;
@@ -5963,13 +5967,13 @@ function rebuildDecodeContactPaths() {
target: msg.target,
sourceGrid: msg.sourceGrid,
targetGrid: targetLocator.grid,
sourceType: msg.sourceType,
bandLabel: msg.bandLabel,
from: sourceCenter,
to: targetCenter,
tsMs: msg.tsMs,
distanceText: formatDecodeContactDistance(
haversineKm(sourceCenter.lat, sourceCenter.lon, targetCenter.lat, targetCenter.lon)
),
distanceKm,
distanceText: formatDecodeContactDistance(distanceKm),
line: null,
labelMarker: null,
});
@@ -5977,6 +5981,95 @@ function rebuildDecodeContactPaths() {
syncDecodeContactPathVisibility();
}
function renderMapQsoSummary() {
const listEl = document.getElementById("map-qso-summary-list");
if (!listEl) return;
const entries = Array.from(decodeContactPaths.values())
.filter((entry) => entry
&& Number.isFinite(entry.distanceKm)
&& decodeLocatorPathVisibility(entry.sourceGrid)
&& decodeLocatorPathVisibility(entry.targetGrid))
.sort((a, b) => {
const distanceDelta = Number(b.distanceKm) - Number(a.distanceKm);
if (Math.abs(distanceDelta) > 0.001) return distanceDelta;
return Number(b.tsMs || 0) - Number(a.tsMs || 0);
})
.slice(0, MAP_QSO_SUMMARY_LIMIT);
if (entries.length === 0) {
const empty = document.createElement("div");
empty.className = "map-qso-summary-empty";
empty.textContent = "No directed FT8 or WSPR contacts match the current map history and filters.";
listEl.replaceChildren(empty);
return;
}
const fragment = document.createDocumentFragment();
entries.forEach((entry, index) => {
const card = document.createElement("article");
card.className = "map-qso-card";
const head = document.createElement("div");
head.className = "map-qso-card-head";
const rank = document.createElement("span");
rank.className = "map-qso-card-rank";
rank.textContent = `#${index + 1}`;
head.appendChild(rank);
const distance = document.createElement("span");
distance.className = "map-qso-card-distance";
distance.textContent = entry.distanceText || "--";
head.appendChild(distance);
const body = document.createElement("div");
body.className = "map-qso-card-body";
const pair = document.createElement("div");
pair.className = "map-qso-card-pair";
pair.textContent = `${entry.source || "Unknown"} -> ${entry.target || "Unknown"}`;
body.appendChild(pair);
const meta = document.createElement("div");
meta.className = "map-qso-card-meta";
const sourceType = document.createElement("span");
sourceType.className = "map-qso-card-pill";
sourceType.textContent = String(entry.sourceType || "ft8").toUpperCase();
meta.appendChild(sourceType);
if (entry.bandLabel) {
const band = document.createElement("span");
band.className = "map-qso-card-pill map-qso-card-band";
band.style.setProperty("--band-color", locatorBandChipColor(entry.bandLabel));
band.textContent = entry.bandLabel;
meta.appendChild(band);
}
const ageText = formatTimeAgo(Number(entry.tsMs));
if (ageText) {
const age = document.createElement("span");
age.className = "map-qso-card-pill";
age.textContent = ageText;
meta.appendChild(age);
}
body.appendChild(meta);
const grids = document.createElement("div");
grids.className = "map-qso-card-grids";
grids.textContent = `${entry.sourceGrid || "--"} -> ${entry.targetGrid || "--"}`;
body.appendChild(grids);
card.appendChild(head);
card.appendChild(body);
fragment.appendChild(card);
});
listEl.replaceChildren(fragment);
}
function buildBookmarkLocatorPopupHtml(grid, bookmarks) {
const list = Array.isArray(bookmarks) ? bookmarks : [];
const rows = list
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+9
View File
@@ -717,6 +717,15 @@
<div id="map-band-legend" class="map-band-legend" aria-label="Band color legend"></div>
<div id="aprs-map"></div>
</div>
<section class="map-qso-summary" aria-labelledby="map-qso-summary-title">
<div class="map-qso-summary-head">
<div>
<div id="map-qso-summary-title" class="map-qso-summary-title">Longest QSOs</div>
<div class="map-qso-summary-subtitle">Top 5 directed decode contacts in the current map view</div>
</div>
</div>
<div id="map-qso-summary-list" class="map-qso-summary-list"></div>
</section>
</div>
<div id="tab-settings" class="tab-panel" style="display:none;">
<div class="sub-tab-bar">
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+128
View File
@@ -1227,6 +1227,7 @@ small { color: var(--text-muted); }
display: flex;
flex-direction: column;
min-height: 0;
gap: 0.85rem;
}
#map-stage {
position: relative;
@@ -1244,6 +1245,127 @@ small { color: var(--text-muted); }
min-height: 0;
border-radius: 0;
}
.map-qso-summary {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.9rem 1rem 1rem;
border-radius: 0.8rem;
border: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent);
background:
linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 90%, transparent), color-mix(in srgb, var(--input-bg) 82%, transparent));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}
.map-qso-summary-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.map-qso-summary-title {
font-size: 0.88rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-heading);
}
.map-qso-summary-subtitle {
margin-top: 0.18rem;
font-size: 0.78rem;
color: var(--text-muted);
}
.map-qso-summary-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 0.65rem;
}
.map-qso-summary-empty {
padding: 0.85rem 0.9rem;
border-radius: 0.75rem;
border: 1px dashed color-mix(in srgb, var(--border-light) 76%, transparent);
background: color-mix(in srgb, var(--input-bg) 84%, transparent);
color: var(--text-muted);
font-size: 0.82rem;
}
.map-qso-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
padding: 0.8rem 0.85rem;
border-radius: 0.75rem;
border: 1px solid color-mix(in srgb, var(--border-light) 74%, transparent);
background: color-mix(in srgb, var(--card-bg) 78%, transparent);
}
.map-qso-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.map-qso-card-rank {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
min-height: 1.6rem;
padding: 0 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-green) 16%, transparent);
color: var(--accent-green);
font-size: 0.76rem;
font-weight: 800;
}
.map-qso-card-distance {
flex: 0 0 auto;
font-size: 0.95rem;
font-weight: 800;
color: var(--text-heading);
white-space: nowrap;
}
.map-qso-card-body {
display: flex;
flex-direction: column;
gap: 0.24rem;
min-width: 0;
}
.map-qso-card-pair {
font-size: 0.92rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.map-qso-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.45rem;
align-items: center;
}
.map-qso-card-pill {
display: inline-flex;
align-items: center;
min-height: 1.35rem;
padding: 0.04rem 0.42rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border-light) 74%, transparent);
background: color-mix(in srgb, var(--input-bg) 86%, transparent);
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.map-qso-card-grids {
color: var(--text-muted);
font-size: 0.78rem;
}
.map-qso-card-band {
color: var(--text);
border-color: color-mix(in srgb, var(--band-color, var(--accent-green)) 40%, transparent);
background: color-mix(in srgb, var(--band-color, var(--accent-green)) 14%, transparent);
}
.map-overlay-panel {
position: absolute;
right: 0.7rem;
@@ -2407,6 +2529,12 @@ button:focus-visible, input:focus-visible, select:focus-visible {
.map-locator-filter-group {
align-items: stretch;
}
.map-qso-summary {
padding: 0.8rem 0.85rem 0.9rem;
}
.map-qso-summary-list {
grid-template-columns: 1fr;
}
.map-locator-filter-label {
width: 100%;
min-width: 0;