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

125
public/index.html
Unescape View File

@ -1205,24 +1205,34 @@
// ============================================
// PROPAGATION PANEL COMPONENT (Toggleable views)
// ============================================
const PropagationPanel = ({ propagation, loading }) => {
const PropagationPanel = ({ propagation, loading, bandConditions }) => {
// Load view mode preference from localStorage, default to 'chart'
const [viewMode, setViewMode] = useState(() => {
try {
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'; }
});
// Save view mode preference when changed
const toggleViewMode = () => {
const newMode = viewMode === 'bars' ? 'chart' : 'bars';
// Cycle through view modes: chart -> bars -> bands -> chart
const cycleViewMode = () => {
const modes = ['chart', 'bars', 'bands'];
const currentIdx = modes.indexOf(viewMode);
const newMode = modes[(currentIdx + 1) % modes.length];
setViewMode(newMode);
try {
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) {
return (
<div className="panel">
@ -1271,15 +1281,54 @@
const bands = ['80m', '40m', '30m', '20m', '17m', '15m', '12m', '10m'];
const viewModeLabels = {
chart: '▤ chart',
bars: '▦ bars',
bands: '◫ bands'
};
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' }}>
<span>📡 VOACAP {hasRealData && <span style={{ color: '#00ff88', fontSize: '10px' }}>●</span>}</span>
<span style={{ fontSize: '11px', color: 'var(--text-muted)' }}>
{viewMode === 'bars' ? '▦ bars' : '▤ chart'} • click to toggle
<span>
{viewMode === 'bands' ? '📊 BAND CONDITIONS' : '📡 VOACAP'}
{hasRealData && viewMode !== 'bands' && <span style={{ color: '#00ff88', fontSize: '10px', marginLeft: '4px' }}>●</span>}
</span>
<span style={{ fontSize: '10px', color: 'var(--text-muted)' }}>
{viewModeLabels[viewMode]} • click to toggle
</span>
</div>
{viewMode === 'bands' ? (
/* Band Conditions Grid View */
<div style={{ padding: '4px' }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '4px' }}>
{(bandConditions?.data || []).slice(0, 12).map((band, idx) => {
const style = getBandStyle(band.condition);
return (
<div key={idx} style={{
background: style.bg,
border: `1px solid ${style.border}`,
borderRadius: '4px',
padding: '6px 2px',
textAlign: 'center'
}}>
<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>
<div style={{ marginTop: '6px', fontSize: '10px', color: 'var(--text-muted)', textAlign: 'center' }}>
SFI {solarData.sfi} • K {solarData.kIndex} • General conditions for all paths
</div>
</div>
) : (
<>
{/* MUF/LUF and Data Source Info */}
<div style={{
display: 'flex',
@ -1448,6 +1497,8 @@
))}
</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 }) => (
<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' }}>
@ -3722,37 +3749,11 @@
</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) */}
<SolarPanel solarIndices={solarIndices} />
{/* VOACAP Propagation - Toggleable */}
<PropagationPanel propagation={propagation.data} loading={propagation.loading} />
{/* VOACAP/Propagation/Band Conditions - Toggleable */}
<PropagationPanel propagation={propagation.data} loading={propagation.loading} bandConditions={bandConditions} />
</div>
{/* CENTER - MAP */}

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.