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

@@ -743,13 +743,73 @@ body {
.polar-container .panel-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 8px;
min-height: 0;
overflow: hidden;
}
.pass-data-strip {
width: 100%;
max-width: 320px;
border-top: 1px solid rgba(74, 163, 255, 0.12);
padding-top: 10px;
flex-shrink: 0;
}
.pass-data-strip--empty {
text-align: center;
color: var(--text-dim);
font-size: 10px;
font-family: var(--font-mono);
letter-spacing: 0.08em;
}
.pass-data-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
text-align: center;
}
.pass-data-event {
font-size: 9px;
font-family: var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 3px;
}
.pass-data-time {
font-size: 12px;
font-family: var(--font-mono);
color: var(--text-primary);
margin-bottom: 2px;
}
.pass-data-sub {
font-size: 10px;
color: var(--accent-cyan);
font-family: var(--font-mono);
}
.pass-data-tca .pass-data-sub {
color: var(--accent-green);
}
.pass-data-footer {
text-align: center;
margin-top: 8px;
font-size: 10px;
color: var(--text-secondary);
font-family: var(--font-mono);
letter-spacing: 0.06em;
}
#polarPlot {
display: block;
width: 100%;

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';