You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.9 KiB
80 lines
2.9 KiB
/**
|
|
* POTAPanel Component
|
|
* Displays Parks on the Air activations with ON/OFF toggle
|
|
*/
|
|
import React from 'react';
|
|
|
|
export const POTAPanel = ({ data, loading, showOnMap, onToggleMap }) => {
|
|
return (
|
|
<div className="panel" style={{ padding: '8px', height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
<div className="panel-header" style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: '6px',
|
|
fontSize: '11px'
|
|
}}>
|
|
<span>▲ POTA ACTIVATORS {data?.length > 0 ? `(${data.length})` : ''}</span>
|
|
<button
|
|
onClick={onToggleMap}
|
|
title={showOnMap ? 'Hide POTA activators on map' : 'Show POTA activators on map'}
|
|
style={{
|
|
background: showOnMap ? 'rgba(68, 204, 68, 0.3)' : 'rgba(100, 100, 100, 0.3)',
|
|
border: `1px solid ${showOnMap ? '#44cc44' : '#666'}`,
|
|
color: showOnMap ? '#44cc44' : '#888',
|
|
padding: '1px 6px',
|
|
borderRadius: '3px',
|
|
fontSize: '9px',
|
|
fontFamily: 'JetBrains Mono',
|
|
cursor: 'pointer'
|
|
}}
|
|
>
|
|
⊞ Map {showOnMap ? 'ON' : 'OFF'}
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ flex: 1, overflowY: 'auto' }}>
|
|
{loading ? (
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '10px' }}>
|
|
<div className="loading-spinner" />
|
|
</div>
|
|
) : data && data.length > 0 ? (
|
|
<div style={{ fontSize: '10px', fontFamily: 'JetBrains Mono, monospace' }}>
|
|
{data.map((spot, i) => (
|
|
<div
|
|
key={`${spot.call}-${spot.ref}-${i}`}
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '62px 50px 58px 1fr',
|
|
gap: '4px',
|
|
padding: '3px 0',
|
|
borderBottom: i < data.length - 1 ? '1px solid var(--border-color)' : 'none'
|
|
}}
|
|
>
|
|
<span style={{ color: '#44cc44', fontWeight: '600', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{spot.call}
|
|
</span>
|
|
<span style={{ color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{spot.locationDesc || spot.ref}
|
|
</span>
|
|
<span style={{ color: 'var(--accent-cyan)', textAlign: 'right' }}>
|
|
{spot.freq}
|
|
</span>
|
|
<span style={{ color: 'var(--text-muted)', textAlign: 'right', fontSize: '9px' }}>
|
|
{spot.time}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '10px', fontSize: '11px' }}>
|
|
No POTA spots
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default POTAPanel;
|