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 {
|
.polar-container .panel-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: hidden;
|
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 {
|
#polarPlot {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -281,6 +281,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="panel-content">
|
<div class="panel-content">
|
||||||
<canvas id="polarPlot"></canvas>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
@@ -2356,6 +2359,38 @@
|
|||||||
ctx.fillText(l.text, x, y);
|
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
|
// Pass trajectory
|
||||||
if (pass && pass.trajectory) {
|
if (pass && pass.trajectory) {
|
||||||
ctx.strokeStyle = pass.color || '#00d4ff';
|
ctx.strokeStyle = pass.color || '#00d4ff';
|
||||||
|
|||||||
Reference in New Issue
Block a user