[fix](trx-frontend): fix APRS map popup age, distance, and dark theme

- Rebuild popup content on popupopen event so age and distance
  are always computed fresh at the moment of opening; store
  _aprsCall on each marker for O(1) lookup
- Extend map to fill viewport down to the footer instead of 60%
- Override Leaflet popup background/color to use CSS theme vars,
  fixing invisible text in dark theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-01 17:27:38 +01:00
parent db425156a4
commit 42e73f5eeb
2 changed files with 22 additions and 3 deletions
@@ -2422,6 +2422,16 @@ function initAprsMap() {
}).addTo(aprsMap).bindPopup(popupText);
}
// Rebuild APRS popup content on open so age and distance are always fresh
aprsMap.on("popupopen", function(e) {
const marker = e.popup._source;
if (!marker || !marker._aprsCall) return;
const entry = stationMarkers.get(marker._aprsCall);
if (!entry) return;
const ll = marker.getLatLng();
e.popup.setContent(buildAprsPopupHtml(marker._aprsCall, ll.lat, ll.lng, entry.pkt?.info || "", entry.pkt));
});
const aprsFilter = document.getElementById("map-filter-aprs");
const ft8Filter = document.getElementById("map-filter-ft8");
const wsprFilter = document.getElementById("map-filter-wspr");
@@ -2448,9 +2458,14 @@ function initAprsMap() {
function sizeAprsMapToViewport() {
const mapEl = document.getElementById("aprs-map");
if (!mapEl) return;
const topPadding = parseFloat(getComputedStyle(document.body).paddingTop) || 0;
const available = Math.max(0, window.innerHeight - topPadding);
const target = Math.max(150, Math.floor(available * 0.6));
const mapRect = mapEl.getBoundingClientRect();
const footer = document.querySelector(".footer");
let bottom = window.innerHeight;
if (footer) {
const fr = footer.getBoundingClientRect();
if (fr.top > mapRect.top + 50) bottom = fr.top;
}
const target = Math.max(150, Math.floor(bottom - mapRect.top - 8));
mapEl.style.height = `${target}px`;
if (aprsMap) aprsMap.invalidateSize();
}
@@ -2554,6 +2569,7 @@ window.aprsMapAddStation = function(call, lat, lon, info, symbolTable, symbolCod
radius: 6, color: "#00d17f", fillColor: "#00d17f", fillOpacity: 0.8
}).addTo(aprsMap).bindPopup(popupContent);
marker.__trxType = "aprs";
marker._aprsCall = call;
stationMarkers.set(call, { marker, type: "aprs", pkt });
mapMarkers.add(marker);
applyMapFilter();
@@ -1072,6 +1072,9 @@ small { color: var(--text-muted); }
.aprs-symbol { display: inline-block; width: 24px; height: 24px; background-size: 384px 192px; vertical-align: middle; margin-right: 0.3rem; }
.aprs-pos { color: var(--accent-green); text-decoration: none; margin-left: 0.3rem; font-size: 0.8rem; }
.aprs-pos:hover { text-decoration: underline; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card-bg) !important; color: var(--text) !important; box-shadow: 0 3px 14px rgba(0,0,0,0.45) !important; }
.leaflet-popup-close-button { color: var(--text-muted) !important; }
.leaflet-popup-close-button:hover { color: var(--text) !important; }
.aprs-popup { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.82rem; min-width: 12rem; max-width: 22rem; }
.aprs-popup-call { font-weight: 700; font-size: 1em; color: var(--accent-green); margin-bottom: 0.18rem; }
.aprs-popup-meta { font-size: 0.85em; color: var(--text-muted); margin-bottom: 0.3rem; }