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

[feat](trx-frontend-http): default map filtering to band

Browse Source 
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-13 16:31:40 +01:00
parent cb824d20ec
commit fb83e3cade
3 changed files with 91 additions and 2 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
+24 -2
View File
@@ -3755,7 +3755,7 @@ const decodeContactPaths = new Map();
const mapMarkers = new Set();
const DEFAULT_MAP_SOURCE_FILTER = { ais: true, vdes: true, aprs: true, bookmark: false, ft8: true, wspr: true };
const mapFilter = { ...DEFAULT_MAP_SOURCE_FILTER };
const mapLocatorFilter = { phase: "type", bands: new Set() };
const mapLocatorFilter = { phase: "band", bands: new Set() };
let mapSearchFilter = "";
const APRS_TRACK_MAX_POINTS = 64;
const AIS_TRACK_MAX_POINTS = 64;
@@ -4303,11 +4303,30 @@ function renderMapLocatorPhaseRow(container, phase) {
}
}
function renderMapBandLegend(items) {
const legendEl = document.getElementById("map-band-legend");
if (!legendEl) return;
const bandItems = Array.isArray(items) ? items : [];
if (bandItems.length === 0) {
legendEl.classList.add("is-empty");
legendEl.innerHTML = "";
return;
}
legendEl.classList.remove("is-empty");
const rows = bandItems
.map((item) => {
const label = escapeMapHtml(item.label);
const color = escapeMapHtml(item.color);
return `<span class="map-band-legend-item"><span class="map-band-legend-swatch" style="--legend-color:${color};"></span><span class="map-band-legend-text">${label}</span></span>`;
})
.join("");
legendEl.innerHTML = `<div class="map-band-legend-title">Band Colors</div><div class="map-band-legend-list">${rows}</div>`;
}
function rebuildMapLocatorFilters() {
const phaseEl = document.getElementById("map-locator-phase");
const choiceEl = document.getElementById("map-locator-choice-filter");
const choiceLabelEl = document.getElementById("map-locator-choice-label");
if (!phaseEl || !choiceEl || !choiceLabelEl) return;
const availableSources = new Set();
if (aisMarkers.size > 0) availableSources.add("ais");
@@ -4360,6 +4379,9 @@ function rebuildMapLocatorFilters() {
const bandItems = Array.from(bandMap.values())
.sort((a, b) => (b.sortHz - a.sortHz) || a.label.localeCompare(b.label));
renderMapBandLegend(bandItems);
if (!phaseEl || !choiceEl || !choiceLabelEl) return;
renderMapLocatorPhaseRow(phaseEl, mapLocatorFilter.phase);
if (mapLocatorFilter.phase === "band") {
choiceLabelEl.textContent = "Visible Bands";
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+1
View File
@@ -698,6 +698,7 @@
<button type="button" id="map-fullscreen-btn" class="map-fullscreen-btn">Fullscreen</button>
<button type="button" id="map-overlay-toggle-btn" class="map-overlay-toggle-btn">Hide Filters</button>
</div>
<div id="map-band-legend" class="map-band-legend" aria-label="Band color legend"></div>
<div id="aprs-map"></div>
</div>
</div>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+66
View File
@@ -1314,6 +1314,61 @@ small { color: var(--text-muted); }
border-color: color-mix(in srgb, var(--accent-green) 34%, var(--border-light));
color: var(--text-heading);
}
.map-band-legend {
position: absolute;
left: 0.7rem;
bottom: 0.7rem;
z-index: 410;
display: flex;
flex-direction: column;
gap: 0.45rem;
width: min(14rem, calc(100% - 5.8rem));
max-height: min(40%, 18rem);
padding: 0.65rem 0.7rem;
border-radius: 0.8rem;
border: 1px solid color-mix(in srgb, var(--border-light) 74%, transparent);
background: color-mix(in srgb, var(--card-bg) 78%, transparent);
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
overflow: auto;
}
.map-band-legend.is-empty {
display: none;
}
.map-band-legend-title {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.map-band-legend-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr));
gap: 0.35rem 0.55rem;
}
.map-band-legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
.map-band-legend-swatch {
flex: 0 0 auto;
width: 0.78rem;
height: 0.78rem;
border-radius: 999px;
background: var(--legend-color, var(--accent-green));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--legend-color, var(--accent-green)) 44%, rgba(255, 255, 255, 0.18));
}
.map-band-legend-text {
min-width: 0;
font-size: 0.76rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
}
#map-stage:fullscreen,
#map-stage:-webkit-full-screen,
#map-stage.map-fake-fullscreen {
@@ -2321,6 +2376,17 @@ button:focus-visible, input:focus-visible, select:focus-visible {
top: 0.55rem;
right: 0.55rem;
}
.map-band-legend {
left: 0.55rem;
bottom: 0.55rem;
width: min(12rem, calc(100% - 1.1rem));
max-height: min(36%, 13rem);
padding: 0.55rem 0.6rem;
border-radius: 0.7rem;
}
.map-band-legend-list {
grid-template-columns: repeat(auto-fit, minmax(4.8rem, 1fr));
}
.map-locator-filter-group {
align-items: stretch;
}