Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 06:40:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: move radiosonde status display to main pane stats strip

Browse Source 
Move tracking state, balloon count, last update, and waveform from the
sidebar into a stats strip above the map, matching the APRS strip pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-03-02 16:58:16 +00:00
parent e89a0ef486
commit be70d2e43b
3 changed files with 131 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
static/css/modes/radiosonde.css
View File

@@ -139,6 +139,86 @@
border-radius: 2px;
}
/* Stats strip above map */
.radiosonde-strip {
background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-dark) 100%);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 6px 12px;
margin-bottom: 10px;
overflow-x: auto;
}
.radiosonde-strip-inner {
display: flex;
align-items: center;
gap: 8px;
min-width: max-content;
}
.radiosonde-strip .strip-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 10px;
background: rgba(0, 229, 255, 0.05);
border: 1px solid rgba(0, 229, 255, 0.15);
border-radius: 4px;
min-width: 55px;
}
.radiosonde-strip .strip-stat:hover {
background: rgba(0, 229, 255, 0.1);
border-color: rgba(0, 229, 255, 0.3);
}
.radiosonde-strip .strip-value {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--accent-cyan);
line-height: 1.2;
}
.radiosonde-strip .strip-label {
font-size: 8px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 1px;
}
.radiosonde-strip .strip-divider {
width: 1px;
height: 28px;
background: var(--border-color);
margin: 0 4px;
}
.radiosonde-strip .strip-status {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
font-size: 10px;
font-weight: 600;
color: var(--text-secondary);
}
.radiosonde-strip .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
}
.radiosonde-strip .status-dot.tracking {
background: var(--accent-green);
animation: radiosonde-strip-pulse 1.5s ease-in-out infinite;
}
@keyframes radiosonde-strip-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 4px 2px currentColor; }
50% { opacity: 0.6; box-shadow: none; }
}
.radiosonde-strip .strip-waveform {
display: flex;
align-items: center;
}
/* Responsive: stack cards on narrow screens */
@media (max-width: 600px) {
.radiosonde-card {

19
templates/index.html
View File

@@ -3137,6 +3137,25 @@
<!-- Radiosonde Visuals -->
<div id="radiosondeVisuals" class="radiosonde-visuals-container" style="display: none;">
<div class="radiosonde-strip">
<div class="radiosonde-strip-inner">
<div class="strip-status">
<div class="status-dot" id="radiosondeStripDot"></div>
<span id="radiosondeStripStatus">STANDBY</span>
</div>
<div class="strip-divider"></div>
<div class="strip-stat">
<span class="strip-value" id="radiosondeStripBalloons">0</span>
<span class="strip-label">BALLOONS</span>
</div>
<div class="strip-stat">
<span class="strip-value" id="radiosondeStripUpdate">--:--:--</span>
<span class="strip-label">LAST UPDATE</span>
</div>
<div class="strip-divider"></div>
<div class="strip-waveform" id="radiosondeStripWaveform"></div>
</div>
</div>
<div id="radiosondeMapContainer" style="flex: 1; min-height: 300px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-primary);"></div>
<div id="radiosondeCardContainer" class="radiosonde-card-container"></div>
</div>

37
templates/partials/modes/radiosonde.html
View File

@@ -35,7 +35,7 @@
<div class="section">
<h3>Status</h3>
<div id="radiosondeWaveformContainer" style="margin-bottom: 8px;"></div>
<!-- waveform lives in the main-pane strip now -->
<div id="radiosondeStatusDisplay" class="info-text">
<p>Status: <span id="radiosondeStatusText" style="color: var(--accent-yellow);">Standby</span></p>
<p>Balloons: <span id="radiosondeBalloonCount">0</span></p>
@@ -115,7 +115,7 @@
function initRadiosondeWaveform() {
if (radiosondeWaveform) return;
if (typeof SignalWaveform === 'undefined') return;
const el = document.getElementById('radiosondeWaveformContainer');
const el = document.getElementById('radiosondeStripWaveform');
if (el) {
radiosondeWaveform = new SignalWaveform.Live(el, {
width: 200,
@@ -183,6 +183,10 @@
document.getElementById('stopRadiosondeBtn').style.display = 'block';
document.getElementById('radiosondeStatusText').textContent = 'Tracking';
document.getElementById('radiosondeStatusText').style.color = 'var(--accent-green)';
const stripDot = document.getElementById('radiosondeStripDot');
if (stripDot) stripDot.className = 'status-dot tracking';
const stripStatus = document.getElementById('radiosondeStripStatus');
if (stripStatus) stripStatus.textContent = 'TRACKING';
startRadiosondeSSE();
} else {
alert(data.message || 'Failed to start radiosonde tracking');
@@ -210,6 +214,14 @@
document.getElementById('radiosondeStatusText').textContent = 'Standby';
document.getElementById('radiosondeBalloonCount').textContent = '0';
document.getElementById('radiosondeLastUpdate').textContent = '\u2014';
const stripDot = document.getElementById('radiosondeStripDot');
if (stripDot) stripDot.className = 'status-dot';
const stripStatus = document.getElementById('radiosondeStripStatus');
if (stripStatus) stripStatus.textContent = 'STANDBY';
const stripBalloons = document.getElementById('radiosondeStripBalloons');
if (stripBalloons) stripBalloons.textContent = '0';
const stripUpdate = document.getElementById('radiosondeStripUpdate');
if (stripUpdate) stripUpdate.textContent = '--:--:--';
radiosondeBalloons = {};
// Clear map markers
if (typeof radiosondeMap !== 'undefined' && radiosondeMap) {
@@ -221,6 +233,10 @@
})
.catch(() => {
document.getElementById('radiosondeStatusText').textContent = 'Standby';
const stripDot = document.getElementById('radiosondeStripDot');
if (stripDot) stripDot.className = 'status-dot';
const stripStatus = document.getElementById('radiosondeStripStatus');
if (stripStatus) stripStatus.textContent = 'STANDBY';
});
}
@@ -234,10 +250,15 @@
if (data.type === 'balloon') {
if (radiosondeWaveform) radiosondeWaveform.ping();
radiosondeBalloons[data.id] = data;
document.getElementById('radiosondeBalloonCount').textContent = Object.keys(radiosondeBalloons).length;
const balloonCount = Object.keys(radiosondeBalloons).length;
document.getElementById('radiosondeBalloonCount').textContent = balloonCount;
const stripBalloons = document.getElementById('radiosondeStripBalloons');
if (stripBalloons) stripBalloons.textContent = balloonCount;
const now = new Date();
document.getElementById('radiosondeLastUpdate').textContent =
now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
document.getElementById('radiosondeLastUpdate').textContent = timeStr;
const stripUpdate = document.getElementById('radiosondeStripUpdate');
if (stripUpdate) stripUpdate.textContent = timeStr;
updateRadiosondeMap(data);
updateRadiosondeCards();
}
@@ -477,6 +498,12 @@
document.getElementById('radiosondeStatusText').textContent = 'Tracking';
document.getElementById('radiosondeStatusText').style.color = 'var(--accent-green)';
document.getElementById('radiosondeBalloonCount').textContent = data.balloon_count || 0;
const stripDot = document.getElementById('radiosondeStripDot');
if (stripDot) stripDot.className = 'status-dot tracking';
const stripStatus = document.getElementById('radiosondeStripStatus');
if (stripStatus) stripStatus.textContent = 'TRACKING';
const stripBalloons = document.getElementById('radiosondeStripBalloons');
if (stripBalloons) stripBalloons.textContent = data.balloon_count || 0;
startRadiosondeSSE();
}
})