KB8PMY
/
openhamclock
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

moved band conditions to voacap toggles

Browse Source
pull/27/head
accius 4 days ago
parent 293bfd91ab
commit c312ce66e0
1 changed files with 210 additions and 209 deletions
Show Stats Download Patch File Download Diff File

419
public/index.html
Unescape View File

@ -1205,24 +1205,34 @@
// ============================================ // ============================================
// PROPAGATION PANEL COMPONENT (Toggleable views) // PROPAGATION PANEL COMPONENT (Toggleable views)
// ============================================ // ============================================
const PropagationPanel = ({ propagation, loading }) => { const PropagationPanel = ({ propagation, loading, bandConditions }) => {
// Load view mode preference from localStorage, default to 'chart' // Load view mode preference from localStorage, default to 'chart'
const [viewMode, setViewMode] = useState(() => { const [viewMode, setViewMode] = useState(() => {
try { try {
const saved = localStorage.getItem('openhamclock_voacapViewMode'); const saved = localStorage.getItem('openhamclock_voacapViewMode');
return saved === 'bars' ? 'bars' : 'chart'; // Default to chart if (saved === 'bars' || saved === 'bands') return saved;
return 'chart'; // Default to chart
} catch (e) { return 'chart'; } } catch (e) { return 'chart'; }
}); });
// Save view mode preference when changed // Cycle through view modes: chart -> bars -> bands -> chart
const toggleViewMode = () => { const cycleViewMode = () => {
const newMode = viewMode === 'bars' ? 'chart' : 'bars'; const modes = ['chart', 'bars', 'bands'];
const currentIdx = modes.indexOf(viewMode);
const newMode = modes[(currentIdx + 1) % modes.length];
setViewMode(newMode); setViewMode(newMode);
try { try {
localStorage.setItem('openhamclock_voacapViewMode', newMode); localStorage.setItem('openhamclock_voacapViewMode', newMode);
} catch (e) { console.error('Failed to save VOACAP view mode:', e); } } catch (e) { console.error('Failed to save view mode:', e); }
}; };
// Get band condition color/style
const getBandStyle = (condition) => ({
GOOD: { bg: 'rgba(0,255,136,0.2)', color: '#00ff88', border: 'rgba(0,255,136,0.4)' },
FAIR: { bg: 'rgba(255,180,50,0.2)', color: '#ffb432', border: 'rgba(255,180,50,0.4)' },
POOR: { bg: 'rgba(255,68,102,0.2)', color: '#ff4466', border: 'rgba(255,68,102,0.4)' }
}[condition] || { bg: 'rgba(255,180,50,0.2)', color: '#ffb432', border: 'rgba(255,180,50,0.4)' });
if (loading || !propagation) { if (loading || !propagation) {
return ( return (
<div className="panel"> <div className="panel">
@ -1270,183 +1280,224 @@
}; };
const bands = ['80m', '40m', '30m', '20m', '17m', '15m', '12m', '10m']; const bands = ['80m', '40m', '30m', '20m', '17m', '15m', '12m', '10m'];
const viewModeLabels = {
chart: '▤ chart',
bars: '▦ bars',
bands: '◫ bands'
};
return ( return (
<div className="panel" style={{ cursor: 'pointer' }} onClick={toggleViewMode}> <div className="panel" style={{ cursor: 'pointer' }} onClick={cycleViewMode}>
<div className="panel-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <div className="panel-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span>📡 VOACAP {hasRealData && <span style={{ color: '#00ff88', fontSize: '10px' }}>●</span>}</span> <span>
<span style={{ fontSize: '11px', color: 'var(--text-muted)' }}> {viewMode === 'bands' ? '📊 BAND CONDITIONS' : '📡 VOACAP'}
{viewMode === 'bars' ? '▦ bars' : '▤ chart'} • click to toggle {hasRealData && viewMode !== 'bands' && <span style={{ color: '#00ff88', fontSize: '10px', marginLeft: '4px' }}>●</span>}
</span> </span>
</div> <span style={{ fontSize: '10px', color: 'var(--text-muted)' }}>
{viewModeLabels[viewMode]} • click to toggle
{/* MUF/LUF and Data Source Info */}
<div style={{
display: 'flex',
justifyContent: 'space-between',
padding: '4px 8px',
background: hasRealData ? 'rgba(0, 255, 136, 0.1)' : 'var(--bg-tertiary)',
borderRadius: '4px',
marginBottom: '4px',
fontSize: '11px'
}}>
<div style={{ display: 'flex', gap: '12px' }}>
<span>
<span style={{ color: 'var(--text-muted)' }}>MUF </span>
<span style={{ color: '#ff8800', fontWeight: '600' }}>{muf || '?'}</span>
<span style={{ color: 'var(--text-muted)' }}> MHz</span>
</span>
<span>
<span style={{ color: 'var(--text-muted)' }}>LUF </span>
<span style={{ color: '#00aaff', fontWeight: '600' }}>{luf || '?'}</span>
<span style={{ color: 'var(--text-muted)' }}> MHz</span>
</span>
</div>
<span style={{ color: hasRealData ? '#00ff88' : 'var(--text-muted)', fontSize: '10px' }}>
{hasRealData ? `📡 ${ionospheric?.source || 'ionosonde'}` : '⚡ estimated'}
</span> </span>
</div> </div>
{viewMode === 'chart' ? ( {viewMode === 'bands' ? (
/* VOACAP Heat Map Chart View */ /* Band Conditions Grid View */
<div style={{ padding: '4px' }}> <div style={{ padding: '4px' }}>
{/* Heat map grid */} <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '4px' }}>
<div style={{ {(bandConditions?.data || []).slice(0, 12).map((band, idx) => {
display: 'grid', const style = getBandStyle(band.condition);
gridTemplateColumns: '28px repeat(24, 1fr)', return (
gridTemplateRows: `repeat(${bands.length}, 12px)`, <div key={idx} style={{
gap: '1px', background: style.bg,
fontSize: '12px', border: `1px solid ${style.border}`,
fontFamily: 'JetBrains Mono, monospace' borderRadius: '4px',
}}> padding: '6px 2px',
{bands.map((band, bandIdx) => ( textAlign: 'center'
<React.Fragment key={band}>
{/* Band label */}
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
paddingRight: '4px',
color: 'var(--text-muted)',
fontSize: '12px'
}}> }}>
{band.replace('m', '')} <div style={{ fontFamily: 'Orbitron, monospace', fontSize: '13px', fontWeight: '700', color: style.color }}>
{band.band}
</div>
<div style={{ fontSize: '9px', fontWeight: '600', color: style.color, marginTop: '2px', opacity: 0.8 }}>
{band.condition}
</div>
</div> </div>
{/* 24 hour cells */} );
{Array.from({ length: 24 }, (_, hour) => { })}
const bandData = hourlyPredictions?.[band];
const hourData = bandData?.find(h => h.hour === hour);
const rel = hourData?.reliability || 0;
return (
<div
key={hour}
style={{
background: getHeatColor(rel),
borderRadius: '1px',
border: hour === currentHour ? '1px solid white' : 'none'
}}
title={`${band} @ ${hour}:00 UTC: ${rel}%`}
/>
);
})}
</React.Fragment>
))}
</div>
{/* Hour labels */}
<div style={{
display: 'grid',
gridTemplateColumns: '28px repeat(24, 1fr)',
marginTop: '2px',
fontSize: '9px',
color: 'var(--text-muted)'
}}>
<div>UTC</div>
{[0, '', '', 3, '', '', 6, '', '', 9, '', '', 12, '', '', 15, '', '', 18, '', '', 21, '', ''].map((h, i) => (
<div key={i} style={{ textAlign: 'center' }}>{h}</div>
))}
</div> </div>
<div style={{ marginTop: '6px', fontSize: '10px', color: 'var(--text-muted)', textAlign: 'center' }}>
{/* Legend & Info */} SFI {solarData.sfi} • K {solarData.kIndex} • General conditions for all paths
<div style={{
marginTop: '6px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
fontSize: '11px'
}}>
<div style={{ display: 'flex', gap: '2px', alignItems: 'center' }}>
<span style={{ color: 'var(--text-muted)' }}>REL:</span>
<div style={{ width: '8px', height: '8px', background: '#004400', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#00aa00', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#88cc00', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#ffcc00', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#ff6600', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#ff0000', borderRadius: '1px' }} />
</div>
<div style={{ color: 'var(--text-muted)' }}>
{Math.round(distance)}km • {ionospheric?.foF2 ? `foF2=${ionospheric.foF2}` : `SSN=${solarData.ssn}`}
</div>
</div> </div>
</div> </div>
) : ( ) : (
/* Bar Chart View */ <>
<div style={{ fontSize: '13px' }}> {/* MUF/LUF and Data Source Info */}
{/* Solar quick stats */}
<div style={{ <div style={{
display: 'flex', display: 'flex',
justifyContent: 'space-around', justifyContent: 'space-between',
padding: '4px', padding: '4px 8px',
marginBottom: '4px', background: hasRealData ? 'rgba(0, 255, 136, 0.1)' : 'var(--bg-tertiary)',
background: 'var(--bg-tertiary)',
borderRadius: '4px', borderRadius: '4px',
marginBottom: '4px',
fontSize: '11px' fontSize: '11px'
}}> }}>
<span><span style={{ color: 'var(--text-muted)' }}>SFI </span><span style={{ color: 'var(--accent-amber)' }}>{solarData.sfi}</span></span> <div style={{ display: 'flex', gap: '12px' }}>
{ionospheric?.foF2 ? ( <span>
<span><span style={{ color: 'var(--text-muted)' }}>foF2 </span><span style={{ color: '#00ff88' }}>{ionospheric.foF2}</span></span> <span style={{ color: 'var(--text-muted)' }}>MUF </span>
) : ( <span style={{ color: '#ff8800', fontWeight: '600' }}>{muf || '?'}</span>
<span><span style={{ color: 'var(--text-muted)' }}>SSN </span><span style={{ color: 'var(--accent-cyan)' }}>{solarData.ssn}</span></span> <span style={{ color: 'var(--text-muted)' }}> MHz</span>
)} </span>
<span><span style={{ color: 'var(--text-muted)' }}>K </span><span style={{ color: solarData.kIndex >= 4 ? '#ff4444' : '#00ff88' }}>{solarData.kIndex}</span></span> <span>
<span style={{ color: 'var(--text-muted)' }}>LUF </span>
<span style={{ color: '#00aaff', fontWeight: '600' }}>{luf || '?'}</span>
<span style={{ color: 'var(--text-muted)' }}> MHz</span>
</span>
</div>
<span style={{ color: hasRealData ? '#00ff88' : 'var(--text-muted)', fontSize: '10px' }}>
{hasRealData ? `📡 ${ionospheric?.source || 'ionosonde'}` : '⚡ estimated'}
</span>
</div> </div>
{currentBands.slice(0, 8).map((band, idx) => ( {viewMode === 'chart' ? (
<div key={band.band} style={{ /* VOACAP Heat Map Chart View */
display: 'grid', <div style={{ padding: '4px' }}>
gridTemplateColumns: '32px 1fr 40px', {/* Heat map grid */}
gap: '4px', <div style={{
padding: '2px 0', display: 'grid',
alignItems: 'center' gridTemplateColumns: '28px repeat(24, 1fr)',
}}> gridTemplateRows: `repeat(${bands.length}, 12px)`,
<span style={{ gap: '1px',
fontFamily: 'JetBrains Mono, monospace',
fontSize: '12px', fontSize: '12px',
color: band.reliability >= 50 ? 'var(--accent-green)' : 'var(--text-muted)' fontFamily: 'JetBrains Mono, monospace'
}}> }}>
{band.band} {bands.map((band, bandIdx) => (
</span> <React.Fragment key={band}>
<div style={{ position: 'relative', height: '10px', background: 'var(--bg-tertiary)', borderRadius: '2px' }}> {/* Band label */}
<div style={{ <div style={{
position: 'absolute', display: 'flex',
top: 0, alignItems: 'center',
left: 0, justifyContent: 'flex-end',
height: '100%', paddingRight: '4px',
width: `${band.reliability}%`, color: 'var(--text-muted)',
background: getReliabilityColor(band.reliability), fontSize: '12px'
borderRadius: '2px' }}>
}} /> {band.replace('m', '')}
</div>
{/* 24 hour cells */}
{Array.from({ length: 24 }, (_, hour) => {
const bandData = hourlyPredictions?.[band];
const hourData = bandData?.find(h => h.hour === hour);
const rel = hourData?.reliability || 0;
return (
<div
key={hour}
style={{
background: getHeatColor(rel),
borderRadius: '1px',
border: hour === currentHour ? '1px solid white' : 'none'
}}
title={`${band} @ ${hour}:00 UTC: ${rel}%`}
/>
);
})}
</React.Fragment>
))}
</div> </div>
<span style={{
textAlign: 'right', {/* Hour labels */}
fontSize: '12px', <div style={{
color: getStatusColor(band.status) display: 'grid',
gridTemplateColumns: '28px repeat(24, 1fr)',
marginTop: '2px',
fontSize: '9px',
color: 'var(--text-muted)'
}}> }}>
{band.reliability}% <div>UTC</div>
</span> {[0, '', '', 3, '', '', 6, '', '', 9, '', '', 12, '', '', 15, '', '', 18, '', '', 21, '', ''].map((h, i) => (
<div key={i} style={{ textAlign: 'center' }}>{h}</div>
))}
</div>
{/* Legend & Info */}
<div style={{
marginTop: '6px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
fontSize: '11px'
}}>
<div style={{ display: 'flex', gap: '2px', alignItems: 'center' }}>
<span style={{ color: 'var(--text-muted)' }}>REL:</span>
<div style={{ width: '8px', height: '8px', background: '#004400', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#00aa00', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#88cc00', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#ffcc00', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#ff6600', borderRadius: '1px' }} />
<div style={{ width: '8px', height: '8px', background: '#ff0000', borderRadius: '1px' }} />
</div>
<div style={{ color: 'var(--text-muted)' }}>
{Math.round(distance)}km • {ionospheric?.foF2 ? `foF2=${ionospheric.foF2}` : `SSN=${solarData.ssn}`}
</div>
</div>
</div> </div>
))} ) : (
</div> /* Bar Chart View */
<div style={{ fontSize: '13px' }}>
{/* Solar quick stats */}
<div style={{
display: 'flex',
justifyContent: 'space-around',
padding: '4px',
marginBottom: '4px',
background: 'var(--bg-tertiary)',
borderRadius: '4px',
fontSize: '11px'
}}>
<span><span style={{ color: 'var(--text-muted)' }}>SFI </span><span style={{ color: 'var(--accent-amber)' }}>{solarData.sfi}</span></span>
{ionospheric?.foF2 ? (
<span><span style={{ color: 'var(--text-muted)' }}>foF2 </span><span style={{ color: '#00ff88' }}>{ionospheric.foF2}</span></span>
) : (
<span><span style={{ color: 'var(--text-muted)' }}>SSN </span><span style={{ color: 'var(--accent-cyan)' }}>{solarData.ssn}</span></span>
)}
<span><span style={{ color: 'var(--text-muted)' }}>K </span><span style={{ color: solarData.kIndex >= 4 ? '#ff4444' : '#00ff88' }}>{solarData.kIndex}</span></span>
</div>
{currentBands.slice(0, 8).map((band, idx) => (
<div key={band.band} style={{
display: 'grid',
gridTemplateColumns: '32px 1fr 40px',
gap: '4px',
padding: '2px 0',
alignItems: 'center'
}}>
<span style={{
fontFamily: 'JetBrains Mono, monospace',
fontSize: '12px',
color: band.reliability >= 50 ? 'var(--accent-green)' : 'var(--text-muted)'
}}>
{band.band}
</span>
<div style={{ position: 'relative', height: '10px', background: 'var(--bg-tertiary)', borderRadius: '2px' }}>
<div style={{
position: 'absolute',
top: 0,
left: 0,
height: '100%',
width: `${band.reliability}%`,
background: getReliabilityColor(band.reliability),
borderRadius: '2px'
}} />
</div>
<span style={{
textAlign: 'right',
fontSize: '12px',
color: getStatusColor(band.status)
}}>
{band.reliability}%
</span>
</div>
))}
</div>
)}
</>
)} )}
</div> </div>
); );
@ -2404,30 +2455,6 @@
); );
}; };
const BandConditionsPanel = ({ bands, loading }) => {
const getStyle = (c) => ({ GOOD: { bg: 'rgba(0,255,136,0.15)', color: 'var(--accent-green)', border: 'rgba(0,255,136,0.3)' }, FAIR: { bg: 'rgba(255,180,50,0.15)', color: 'var(--accent-amber)', border: 'rgba(255,180,50,0.3)' }, POOR: { bg: 'rgba(255,68,102,0.15)', color: 'var(--accent-red)', border: 'rgba(255,68,102,0.3)' } }[c] || { bg: 'rgba(255,180,50,0.15)', color: 'var(--accent-amber)', border: 'rgba(255,180,50,0.3)' });
return (
<div style={{ background: 'var(--bg-panel)', border: '1px solid var(--border-color)', borderRadius: '8px', padding: '20px', backdropFilter: 'blur(10px)' }}>
<div style={{ fontSize: '12px', fontWeight: '600', color: 'var(--accent-cyan)', letterSpacing: '2px', marginBottom: '16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<span>📡 BAND CONDITIONS</span>
{loading && <div className="loading-spinner" />}
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '8px' }}>
{bands.map((b, i) => {
const s = getStyle(b.condition);
return (
<div key={i} style={{ background: s.bg, border: `1px solid ${s.border}`, borderRadius: '6px', padding: '10px', textAlign: 'center' }}>
<div style={{ fontFamily: 'Orbitron, monospace', fontSize: '14px', fontWeight: '700', color: s.color }}>{b.band}</div>
<div style={{ fontSize: '12px', fontWeight: '600', color: s.color, marginTop: '4px', opacity: 0.8 }}>{b.condition}</div>
</div>
);
})}
</div>
</div>
);
};
const DXClusterPanel = ({ spots, loading, activeSource, showOnMap, onToggleMap }) => ( const DXClusterPanel = ({ spots, loading, activeSource, showOnMap, onToggleMap }) => (
<div style={{ background: 'var(--bg-panel)', border: '1px solid var(--border-color)', borderRadius: '8px', padding: '20px', backdropFilter: 'blur(10px)', maxHeight: '280px', overflow: 'hidden' }}> <div style={{ background: 'var(--bg-panel)', border: '1px solid var(--border-color)', borderRadius: '8px', padding: '20px', backdropFilter: 'blur(10px)', maxHeight: '280px', overflow: 'hidden' }}>
<div style={{ fontSize: '12px', fontWeight: '600', color: 'var(--accent-cyan)', letterSpacing: '2px', marginBottom: '16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> <div style={{ fontSize: '12px', fontWeight: '600', color: 'var(--accent-cyan)', letterSpacing: '2px', marginBottom: '16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
@ -3722,37 +3749,11 @@
</div> </div>
</div> </div>
{/* Band Conditions - Compact with color coding */}
<div className="panel" style={{ padding: '10px', flex: '0 0 auto', overflow: 'hidden' }}>
<div style={{ fontSize: '12px', color: 'var(--accent-purple)', fontWeight: '700', marginBottom: '6px' }}>📊 BAND CONDITIONS</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '3px', fontSize: '13px', fontFamily: 'JetBrains Mono' }}>
{bandConditions.data.slice(0, 12).map(band => {
const colors = {
GOOD: { bg: 'rgba(0,255,136,0.2)', color: '#00ff88', border: 'rgba(0,255,136,0.4)' },
FAIR: { bg: 'rgba(255,180,50,0.2)', color: '#ffb432', border: 'rgba(255,180,50,0.4)' },
POOR: { bg: 'rgba(255,68,102,0.2)', color: '#ff4466', border: 'rgba(255,68,102,0.4)' }
};
const style = colors[band.condition] || colors.FAIR;
return (
<div key={band.band} style={{
textAlign: 'center',
padding: '3px 1px',
background: style.bg,
border: `1px solid ${style.border}`,
borderRadius: '2px'
}}>
<div style={{ fontWeight: '600', color: style.color, fontSize: '12px' }}>{band.band}</div>
</div>
);
})}
</div>
</div>
{/* Solar Panel (toggleable between image and indices) */} {/* Solar Panel (toggleable between image and indices) */}
<SolarPanel solarIndices={solarIndices} /> <SolarPanel solarIndices={solarIndices} />
{/* VOACAP Propagation - Toggleable */} {/* VOACAP/Propagation/Band Conditions - Toggleable */}
<PropagationPanel propagation={propagation.data} loading={propagation.loading} /> <PropagationPanel propagation={propagation.data} loading={propagation.loading} bandConditions={bandConditions} />
</div> </div>
{/* CENTER - MAP */} {/* CENTER - MAP */}

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.