mirror of
https://github.com/smittix/intercept.git
synced 2026-06-08 14:11:54 -07:00
Move satellite packets into map console
This commit is contained in:
James Smith
@@ -294,10 +294,10 @@ body {
|
||||
|
||||
.data-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 0.9fr) minmax(320px, 1.1fr);
|
||||
grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
|
||||
grid-template-columns: minmax(320px, 1.2fr) minmax(320px, 0.95fr) minmax(360px, 1.1fr);
|
||||
grid-template-rows: minmax(340px, 1fr);
|
||||
gap: 12px;
|
||||
min-height: 460px;
|
||||
min-height: 340px;
|
||||
}
|
||||
|
||||
/* Panels */
|
||||
@@ -439,6 +439,198 @@ body {
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.packet-console {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 500;
|
||||
width: min(420px, calc(100% - 28px));
|
||||
max-height: min(250px, calc(100% - 28px));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(74, 163, 255, 0.24);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(4, 14, 23, 0.94), rgba(10, 25, 39, 0.9));
|
||||
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.28);
|
||||
backdrop-filter: blur(8px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.packet-console.collapsed {
|
||||
max-height: 42px;
|
||||
}
|
||||
|
||||
.packet-console.collapsed .packet-console-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.packet-console-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 9px 10px;
|
||||
border-bottom: 1px solid rgba(74, 163, 255, 0.12);
|
||||
color: var(--accent-cyan);
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.packet-console-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.packet-console-btn {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgba(74, 163, 255, 0.28);
|
||||
border-radius: 4px;
|
||||
background: rgba(8, 20, 31, 0.88);
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.packet-console-btn:hover {
|
||||
border-color: rgba(74, 163, 255, 0.65);
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.packet-console-body {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.packet-entry {
|
||||
padding: 7px 10px;
|
||||
border-bottom: 1px solid rgba(0, 212, 255, 0.08);
|
||||
font-size: 10px;
|
||||
font-family: var(--font-mono);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.packet-entry.compact .packet-entry-json {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.packet-entry-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.packet-entry-protocol {
|
||||
color: var(--accent-cyan);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.packet-entry-time {
|
||||
color: var(--text-dim);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.packet-entry-summary {
|
||||
color: var(--text-primary);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.packet-entry-raw {
|
||||
margin-top: 4px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 9px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.packet-entry-json {
|
||||
margin-top: 6px;
|
||||
padding: 7px 8px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.packet-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.packet-modal[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.packet-modal-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(5, 12, 18, 0.72);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.packet-modal-dialog {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(900px, calc(100vw - 40px));
|
||||
max-height: min(80vh, 860px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(74, 163, 255, 0.24);
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, rgba(8, 19, 30, 0.98), rgba(10, 27, 43, 0.96));
|
||||
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.packet-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 16px 18px;
|
||||
border-bottom: 1px solid rgba(74, 163, 255, 0.14);
|
||||
}
|
||||
|
||||
.packet-modal-kicker {
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.packet-modal-title {
|
||||
margin-top: 4px;
|
||||
color: var(--text-primary);
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.packet-modal-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.packet-modal-body {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.map-overlay-kicker {
|
||||
margin-bottom: 4px;
|
||||
color: var(--text-secondary);
|
||||
@@ -656,8 +848,7 @@ body {
|
||||
}
|
||||
|
||||
.packets-panel {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.transmitters-panel .panel-content,
|
||||
@@ -698,7 +889,7 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
grid-row: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -706,7 +897,7 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 3;
|
||||
grid-row: 1 / span 2;
|
||||
grid-row: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -937,12 +1128,12 @@ body {
|
||||
|
||||
.data-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
|
||||
.pass-list {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.transmitters-panel {
|
||||
@@ -950,14 +1141,9 @@ body {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.packets-panel {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.gs-panel {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
grid-row: 2;
|
||||
min-height: 320px;
|
||||
}
|
||||
}
|
||||
@@ -989,7 +1175,6 @@ body {
|
||||
|
||||
.pass-list,
|
||||
.transmitters-panel,
|
||||
.packets-panel,
|
||||
.gs-panel {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
@@ -1003,6 +1188,11 @@ body {
|
||||
.map-overlay-card {
|
||||
width: calc(100% - 28px);
|
||||
}
|
||||
|
||||
.packet-console {
|
||||
width: calc(100% - 28px);
|
||||
max-height: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -1023,6 +1213,16 @@ body {
|
||||
.map-header-tools {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.packet-modal-dialog {
|
||||
width: calc(100vw - 20px);
|
||||
max-height: calc(100vh - 20px);
|
||||
}
|
||||
|
||||
.packet-modal-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Embedded Mode Styles */
|
||||
|
||||
@@ -86,6 +86,20 @@
|
||||
</div>
|
||||
<div class="panel-content map-panel-content">
|
||||
<div id="groundMap"></div>
|
||||
<div class="packet-console" id="packetConsole">
|
||||
<div class="packet-console-header">
|
||||
<span>DECODED PACKETS <span id="packetCount" style="color:var(--accent-cyan);"></span></span>
|
||||
<div class="packet-console-actions">
|
||||
<button class="packet-console-btn" id="packetConsoleToggleBtn" onclick="togglePacketConsoleCollapsed()">MIN</button>
|
||||
<button class="packet-console-btn" onclick="openPacketModal()">POP OUT</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="packet-console-body" id="packetList">
|
||||
<div class="packet-empty-state">
|
||||
No packets received yet.<br>Run a ground-station observation with telemetry tasks enabled to populate this console.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-overlay-card">
|
||||
<div class="map-overlay-kicker">TRACK VIEW</div>
|
||||
<div class="map-overlay-primary" id="mapTrackPrimary">Loading active orbit and pass corridor...</div>
|
||||
@@ -360,18 +374,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Decoded Packets -->
|
||||
<div class="panel packets-panel">
|
||||
<div class="panel-header">
|
||||
<span>DECODED PACKETS <span id="packetCount" style="color:var(--accent-cyan);"></span></span>
|
||||
<div class="panel-indicator"></div>
|
||||
</div>
|
||||
<div class="panel-content" id="packetList">
|
||||
<div style="text-align:center;color:var(--text-secondary);padding:15px;font-size:11px;">
|
||||
No packets received yet.<br>Run a ground-station observation with telemetry tasks enabled to populate this panel.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Controls Bar -->
|
||||
@@ -389,6 +391,27 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="packet-modal" id="packetModal" hidden>
|
||||
<div class="packet-modal-backdrop" onclick="closePacketModal()"></div>
|
||||
<div class="packet-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="packetModalTitle">
|
||||
<div class="packet-modal-header">
|
||||
<div>
|
||||
<div class="packet-modal-kicker">GROUND STATION</div>
|
||||
<div class="packet-modal-title" id="packetModalTitle">Decoded Packets <span id="packetModalCount" style="color:var(--accent-cyan);"></span></div>
|
||||
</div>
|
||||
<div class="packet-modal-actions">
|
||||
<button class="packet-console-btn" onclick="clearPacketConsole()">CLEAR</button>
|
||||
<button class="packet-console-btn" onclick="closePacketModal()">CLOSE</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="packet-modal-body" id="packetModalList">
|
||||
<div class="packet-empty-state">
|
||||
No packets received yet.<br>Run a ground-station observation with telemetry tasks enabled to populate this console.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Location selector styles */
|
||||
.location-selector {
|
||||
@@ -501,6 +524,14 @@
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.packet-empty-state {
|
||||
text-align:center;
|
||||
color:var(--text-secondary);
|
||||
padding:15px;
|
||||
font-size:11px;
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
/* Ground Station panel */
|
||||
.gs-panel { margin-top: 0; }
|
||||
.gs-status-row {
|
||||
@@ -627,6 +658,8 @@
|
||||
let _passRequestId = 0;
|
||||
let _passAbortController = null;
|
||||
let _passTimeoutId = null;
|
||||
let packetHistory = [];
|
||||
let packetConsoleCollapsed = false;
|
||||
const DASHBOARD_FETCH_TIMEOUT_MS = 30000;
|
||||
const BUILTIN_TX_FALLBACK = {
|
||||
25544: [
|
||||
@@ -1161,9 +1194,14 @@
|
||||
clearTimeout(_passTimeoutId);
|
||||
_passTimeoutId = null;
|
||||
}
|
||||
closePacketModal();
|
||||
});
|
||||
window.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') closePacketModal();
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderPacketPanels();
|
||||
loadDashboardSatellites();
|
||||
setupEmbeddedMode();
|
||||
const usedShared = applySharedObserverLocation();
|
||||
@@ -2539,21 +2577,99 @@
|
||||
el.textContent = (hz >= 0 ? '+' : '') + hz + ' Hz';
|
||||
}
|
||||
|
||||
function _appendPacket(data) {
|
||||
function _packetEmptyState() {
|
||||
return '<div class="packet-empty-state">No packets received yet.<br>Run a ground-station observation with telemetry tasks enabled to populate this console.</div>';
|
||||
}
|
||||
|
||||
function _packetSummary(packet) {
|
||||
if (packet.parsed) {
|
||||
try {
|
||||
const json = JSON.stringify(packet.parsed);
|
||||
return json.length > 140 ? json.slice(0, 137) + '...' : json;
|
||||
} catch (_) {}
|
||||
}
|
||||
const raw = packet.raw || '';
|
||||
return raw.length > 180 ? raw.slice(0, 177) + '...' : raw || 'Telemetry frame received';
|
||||
}
|
||||
|
||||
function _packetItemHtml(packet, compact = false) {
|
||||
const protocol = packet.protocol ? _esc(String(packet.protocol)) : 'TELEMETRY';
|
||||
const source = packet.source ? ' / ' + _esc(String(packet.source)) : '';
|
||||
const summary = _esc(_packetSummary(packet));
|
||||
const raw = packet.raw ? `<div class="packet-entry-raw">${_esc(String(packet.raw))}</div>` : '';
|
||||
const parsed = packet.parsed ? `<div class="packet-entry-json">${_esc(JSON.stringify(packet.parsed, null, 2))}</div>` : '';
|
||||
return `
|
||||
<div class="packet-entry ${compact ? 'compact' : ''}">
|
||||
<div class="packet-entry-header">
|
||||
<div class="packet-entry-protocol">${protocol}${source}</div>
|
||||
<div class="packet-entry-time">${packet.timeLabel}</div>
|
||||
</div>
|
||||
<div class="packet-entry-summary">${summary}</div>
|
||||
${compact ? '' : parsed}
|
||||
${raw}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderPacketPanels() {
|
||||
const list = document.getElementById('packetList');
|
||||
if (!list) return;
|
||||
const placeholder = list.querySelector('div[style*="text-align:center"]');
|
||||
if (placeholder) placeholder.remove();
|
||||
const item = document.createElement('div');
|
||||
item.style.cssText = 'padding:4px 6px;border-bottom:1px solid rgba(0,212,255,0.08);font-size:10px;font-family:var(--font-mono);word-break:break-all;';
|
||||
const protocol = data.protocol ? `<div style="color:var(--accent-cyan);margin-bottom:2px;">${_esc(String(data.protocol))}${data.source ? ' / ' + _esc(String(data.source)) : ''}</div>` : '';
|
||||
const parsed = data.parsed ? `<pre style="white-space:pre-wrap;margin:2px 0 4px 0;color:var(--text-primary);font-family:var(--font-mono);font-size:9px;">${_esc(JSON.stringify(data.parsed, null, 2))}</pre>` : '';
|
||||
const raw = data.data ? `<div style="color:var(--text-secondary);">${_esc(String(data.data))}</div>` : '';
|
||||
item.innerHTML = protocol + parsed + raw;
|
||||
list.prepend(item);
|
||||
const modalList = document.getElementById('packetModalList');
|
||||
const countText = packetHistory.length ? `(${packetHistory.length})` : '';
|
||||
const countEl = document.getElementById('packetCount');
|
||||
if (countEl) { const n = parseInt(countEl.textContent) || 0; countEl.textContent = n + 1; }
|
||||
while (list.children.length > 100) list.removeChild(list.lastChild);
|
||||
const modalCountEl = document.getElementById('packetModalCount');
|
||||
if (countEl) countEl.textContent = countText;
|
||||
if (modalCountEl) modalCountEl.textContent = countText;
|
||||
|
||||
if (list) {
|
||||
list.innerHTML = packetHistory.length
|
||||
? packetHistory.map(packet => _packetItemHtml(packet, true)).join('')
|
||||
: _packetEmptyState();
|
||||
}
|
||||
if (modalList) {
|
||||
modalList.innerHTML = packetHistory.length
|
||||
? packetHistory.map(packet => _packetItemHtml(packet, false)).join('')
|
||||
: _packetEmptyState();
|
||||
}
|
||||
}
|
||||
|
||||
function _appendPacket(data) {
|
||||
packetHistory.unshift({
|
||||
protocol: data.protocol || '',
|
||||
source: data.source || '',
|
||||
parsed: data.parsed || null,
|
||||
raw: data.data || '',
|
||||
timeLabel: new Date().toISOString().substring(11, 19) + ' UTC'
|
||||
});
|
||||
if (packetHistory.length > 100) packetHistory.length = 100;
|
||||
renderPacketPanels();
|
||||
}
|
||||
|
||||
window.togglePacketConsoleCollapsed = function () {
|
||||
packetConsoleCollapsed = !packetConsoleCollapsed;
|
||||
const consoleEl = document.getElementById('packetConsole');
|
||||
const btn = document.getElementById('packetConsoleToggleBtn');
|
||||
if (consoleEl) consoleEl.classList.toggle('collapsed', packetConsoleCollapsed);
|
||||
if (btn) btn.textContent = packetConsoleCollapsed ? 'EXPAND' : 'MIN';
|
||||
};
|
||||
|
||||
window.openPacketModal = function () {
|
||||
const modal = document.getElementById('packetModal');
|
||||
if (!modal) return;
|
||||
renderPacketPanels();
|
||||
modal.hidden = false;
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
|
||||
window.closePacketModal = function () {
|
||||
const modal = document.getElementById('packetModal');
|
||||
if (!modal || modal.hidden) return;
|
||||
modal.hidden = true;
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
|
||||
window.clearPacketConsole = function () {
|
||||
packetHistory = [];
|
||||
renderPacketPanels();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user