mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 06:40:00 -07:00
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:
@@ -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%;
|
||||
|
||||
@@ -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 · 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';
|
||||
|
||||
Reference in New Issue
Block a user