Add AOS/TCA/LOS pass data strip below polar plot

Fills the empty space below the sky view circle with a compact
three-column AOS / TCA / LOS readout (time + azimuth/elevation)
and a duration + max elevation footer line.
Populated by drawPolarPlot() when a pass is selected; shows a
placeholder prompt otherwise.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
2026-03-19 23:40:38 +00:00
parent 123d38d295
commit a42ea35d8b
2 changed files with 95 additions and 0 deletions

View File

@@ -281,6 +281,9 @@
</div>
<div class="panel-content">
<canvas id="polarPlot"></canvas>
<div id="passDataStrip" class="pass-data-strip pass-data-strip--empty">
<span>Select a pass to view geometry</span>
</div>
</div>
</div>
</aside>
@@ -2356,6 +2359,38 @@
ctx.fillText(l.text, x, y);
});
// Pass data strip
const strip = document.getElementById('passDataStrip');
if (strip) {
if (pass && pass.aosTime) {
const fmtTime = iso => iso ? iso.slice(11, 16) + ' UTC' : '--';
strip.className = 'pass-data-strip';
strip.innerHTML = `
<div class="pass-data-grid">
<div class="pass-data-col">
<div class="pass-data-event">AOS</div>
<div class="pass-data-time">${fmtTime(pass.aosTime)}</div>
<div class="pass-data-sub">Az ${pass.aosAz}°</div>
</div>
<div class="pass-data-col pass-data-tca">
<div class="pass-data-event">TCA</div>
<div class="pass-data-time">${fmtTime(pass.tcaTime)}</div>
<div class="pass-data-sub">El ${pass.tcaEl}°</div>
</div>
<div class="pass-data-col">
<div class="pass-data-event">LOS</div>
<div class="pass-data-time">${fmtTime(pass.losTime)}</div>
<div class="pass-data-sub">Az ${pass.losAz}°</div>
</div>
</div>
<div class="pass-data-footer">Duration ${pass.duration} min &nbsp;·&nbsp; Max El ${pass.maxEl}°</div>
`;
} else {
strip.className = 'pass-data-strip pass-data-strip--empty';
strip.innerHTML = '<span>Select a pass to view geometry</span>';
}
}
// Pass trajectory
if (pass && pass.trajectory) {
ctx.strokeStyle = pass.color || '#00d4ff';