@@ -835,7 +3152,7 @@
{item.label}
- {item.value}{item.unit && {item.unit}}
+ {item.value}{item.unit && {item.unit}}
))}
@@ -848,77 +3165,1478 @@
);
};
- 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)' });
+ // ============================================
+ // DX CLUSTER FILTER MANAGER - Comprehensive filtering system
+ // ============================================
+ const DXFilterManager = ({ filters, onFilterChange, isOpen, onClose }) => {
+ const [activeTab, setActiveTab] = useState('zones');
+ const [newWatchlistCall, setNewWatchlistCall] = useState('');
+ const [newExcludeCall, setNewExcludeCall] = useState('');
+
+ // CQ Zones (1-40)
+ const cqZones = Array.from({ length: 40 }, (_, i) => i + 1);
+
+ // ITU Zones (1-90)
+ const ituZones = Array.from({ length: 90 }, (_, i) => i + 1);
+
+ // Continents
+ const continents = [
+ { code: 'NA', name: 'North America' },
+ { code: 'SA', name: 'South America' },
+ { code: 'EU', name: 'Europe' },
+ { code: 'AF', name: 'Africa' },
+ { code: 'AS', name: 'Asia' },
+ { code: 'OC', name: 'Oceania' },
+ { code: 'AN', name: 'Antarctica' }
+ ];
+
+ // Bands
+ const bands = ['160m', '80m', '60m', '40m', '30m', '20m', '17m', '15m', '12m', '11m', '10m', '6m', '2m', '70cm'];
+
+ // Modes
+ const modes = ['CW', 'SSB', 'FT8', 'FT4', 'RTTY', 'PSK', 'AM', 'FM'];
+
+ // Toggle functions
+ const toggleArrayItem = (key, item) => {
+ const current = filters?.[key] || [];
+ const newArray = current.includes(item)
+ ? current.filter(i => i !== item)
+ : [...current, item];
+ onFilterChange({ ...filters, [key]: newArray.length > 0 ? newArray : undefined });
+ };
+
+ const selectAllZones = (type, zones) => {
+ onFilterChange({ ...filters, [type]: [...zones] });
+ };
+
+ const clearZones = (type) => {
+ onFilterChange({ ...filters, [type]: undefined });
+ };
+
+ const addToWatchlist = () => {
+ if (!newWatchlistCall.trim()) return;
+ const current = filters?.watchlist || [];
+ const call = newWatchlistCall.toUpperCase().trim();
+ if (!current.includes(call)) {
+ onFilterChange({ ...filters, watchlist: [...current, call] });
+ }
+ setNewWatchlistCall('');
+ };
+
+ const removeFromWatchlist = (call) => {
+ const current = filters?.watchlist || [];
+ onFilterChange({ ...filters, watchlist: current.filter(c => c !== call) });
+ };
+
+ const addToExclude = () => {
+ if (!newExcludeCall.trim()) return;
+ const current = filters?.excludeList || [];
+ const call = newExcludeCall.toUpperCase().trim();
+ if (!current.includes(call)) {
+ onFilterChange({ ...filters, excludeList: [...current, call] });
+ }
+ setNewExcludeCall('');
+ };
+
+ const removeFromExclude = (call) => {
+ const current = filters?.excludeList || [];
+ onFilterChange({ ...filters, excludeList: current.filter(c => c !== call) });
+ };
+
+ const clearAllFilters = () => {
+ onFilterChange({});
+ };
+
+ const getActiveFilterCount = () => {
+ let count = 0;
+ if (filters?.cqZones?.length) count++;
+ if (filters?.ituZones?.length) count++;
+ if (filters?.continents?.length) count++;
+ if (filters?.bands?.length) count++;
+ if (filters?.modes?.length) count++;
+ if (filters?.watchlist?.length) count++;
+ if (filters?.excludeList?.length) count++;
+ if (filters?.callsign) count++;
+ if (filters?.watchlistOnly) count++;
+ return count;
+ };
+
+ if (!isOpen) return null;
+
+ const tabStyle = (active) => ({
+ padding: '8px 16px',
+ background: active ? 'var(--accent-cyan)' : 'transparent',
+ color: active ? '#000' : 'var(--text-secondary)',
+ border: 'none',
+ borderRadius: '4px 4px 0 0',
+ cursor: 'pointer',
+ fontFamily: 'JetBrains Mono',
+ fontSize: '11px',
+ fontWeight: active ? '700' : '400'
+ });
+
+ const pillStyle = (active) => ({
+ padding: '4px 10px',
+ background: active ? 'rgba(0, 255, 136, 0.3)' : 'rgba(60,60,60,0.5)',
+ border: `1px solid ${active ? '#00ff88' : '#444'}`,
+ color: active ? '#00ff88' : '#888',
+ borderRadius: '4px',
+ fontSize: '10px',
+ cursor: 'pointer',
+ fontFamily: 'JetBrains Mono',
+ transition: 'all 0.15s'
+ });
+
+ return (
+
+
e.stopPropagation()}>
+ {/* Header */}
+
+
+
🔍 DX Cluster Filters
+
+ {getActiveFilterCount()} filter{getActiveFilterCount() !== 1 ? 's' : ''} active
+
+
+
+
+
+
+
+
+ {/* Tabs */}
+
+
+
+
+
+
+
+
+ {/* Tab Content */}
+
+
+ {/* ZONES TAB */}
+ {activeTab === 'zones' && (
+
+ {/* Continents */}
+
+
+ Continents
+
+
+ {continents.map(cont => (
+
+ ))}
+
+
+
+ {/* CQ Zones */}
+
+
+
CQ Zones
+
+
+
+
+
+
+ {cqZones.map(zone => (
+
+ ))}
+
+
+
+ {/* ITU Zones */}
+
+
+
ITU Zones
+
+
+
+
+
+
+ {ituZones.map(zone => (
+
+ ))}
+
+
+
+ )}
+
+ {/* BANDS TAB */}
+ {activeTab === 'bands' && (
+
+
+ Select bands to show (leave empty for all bands)
+
+
+ {bands.map(band => (
+
+ ))}
+
+
+ {/* Quick select groups */}
+
+
Quick Select:
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* MODES TAB */}
+ {activeTab === 'modes' && (
+
+
+ Select modes to show (leave empty for all modes)
+
+
+ {modes.map(mode => (
+
+ ))}
+
+
+ {/* Quick select groups */}
+
+
Quick Select:
+
+
+
+
+
+
+
+
+ )}
+
+ {/* WATCHLIST TAB */}
+ {activeTab === 'watchlist' && (
+
+
+ Callsign Watchlist
+
+
+ Add callsigns you want to watch for. Matching spots will be highlighted.
+
+
+ {/* Watchlist Only toggle */}
+
+
+
+
+ {/* Add callsign */}
+
+ setNewWatchlistCall(e.target.value.toUpperCase())}
+ onKeyDown={(e) => e.key === 'Enter' && addToWatchlist()}
+ style={{
+ flex: 1,
+ padding: '10px 12px',
+ background: 'var(--bg-secondary)',
+ border: '1px solid var(--border-color)',
+ borderRadius: '6px',
+ color: 'var(--text-primary)',
+ fontSize: '14px',
+ fontFamily: 'JetBrains Mono'
+ }}
+ />
+
+
+
+ {/* Watchlist items */}
+
+ {(filters?.watchlist || []).map(call => (
+
+ {call}
+
+
+ ))}
+ {(!filters?.watchlist || filters.watchlist.length === 0) && (
+
No callsigns in watchlist
+ )}
+
+
+ )}
+
+ {/* EXCLUDE TAB */}
+ {activeTab === 'exclude' && (
+
+
+ Exclude Callsigns
+
+
+ Add callsigns or prefixes to hide from the cluster. Partial matches work (e.g., "W3" hides all W3 calls).
+
+
+ {/* Add exclude */}
+
+ setNewExcludeCall(e.target.value.toUpperCase())}
+ onKeyDown={(e) => e.key === 'Enter' && addToExclude()}
+ style={{
+ flex: 1,
+ padding: '10px 12px',
+ background: 'var(--bg-secondary)',
+ border: '1px solid var(--border-color)',
+ borderRadius: '6px',
+ color: 'var(--text-primary)',
+ fontSize: '14px',
+ fontFamily: 'JetBrains Mono'
+ }}
+ />
+
+
+
+ {/* Exclude items */}
+
+ {(filters?.excludeList || []).map(call => (
+
+ {call}
+
+
+ ))}
+ {(!filters?.excludeList || filters.excludeList.length === 0) && (
+
No callsigns excluded
+ )}
+
+
+ )}
+
+
+
+ );
+ };
+
+ // Simple DX Cluster Panel (for sidebars)
+ const DXClusterPanel = ({ spots, loading, activeSource, showOnMap, onToggleMap, spotCount, filteredCount, filters, onFilterChange, onOpenFilters, hoveredSpot, onHoverSpot }) => {
+ const hasActiveFilters = (filters?.bands?.length > 0) || (filters?.modes?.length > 0) ||
+ (filters?.cqZones?.length > 0) || (filters?.ituZones?.length > 0) ||
+ (filters?.continents?.length > 0) || (filters?.watchlist?.length > 0) ||
+ (filters?.excludeList?.length > 0) || filters?.watchlistOnly;
+
+ // Check if spot matches watchlist for highlighting
+ const isWatchlistMatch = (spot) => {
+ if (!filters?.watchlist?.length) return false;
+ return filters.watchlist.some(w =>
+ spot.call?.toUpperCase().includes(w) ||
+ spot.spotter?.toUpperCase().includes(w)
+ );
+ };
+
+ return (
+
+
+
🌐 DX CLUSTER
+
+ {loading &&
}
+
+ {filteredCount !== undefined && spotCount !== undefined ? `${filteredCount}/${spotCount}` : ''}
+
+
+
+
● LIVE
+
+
+
+ {activeSource &&
Source: {activeSource}
}
+
+
+ {spots.length > 0 ? spots.map((s, i) => {
+ const isHighlighted = isWatchlistMatch(s);
+ const isHovered = hoveredSpot && hoveredSpot.call === s.call && hoveredSpot.freq === s.freq;
+ return (
+
onHoverSpot && onHoverSpot(s)}
+ onMouseLeave={() => onHoverSpot && onHoverSpot(null)}
+ style={{
+ display: 'grid',
+ gridTemplateColumns: '65px 75px 1fr auto',
+ gap: '10px',
+ padding: '8px 4px',
+ borderBottom: '1px solid rgba(255,255,255,0.03)',
+ fontFamily: 'JetBrains Mono, monospace',
+ fontSize: '13px',
+ alignItems: 'center',
+ background: isHovered ? 'rgba(68, 136, 255, 0.3)' : isHighlighted ? 'rgba(0, 255, 136, 0.15)' : 'transparent',
+ borderLeft: isHovered ? '3px solid #4488ff' : isHighlighted ? '3px solid #00ff88' : '3px solid transparent',
+ marginLeft: '-4px',
+ cursor: 'pointer',
+ transition: 'background 0.15s ease'
+ }}>
+ {s.freq}
+ {s.call}
+ {s.comment}
+ {s.time}
+
+ );
+ }) : (
+
+ {hasActiveFilters ? 'No spots match filters' : 'No spots available'}
+
+ )}
+
+
+ );
+ };
+
+ const POTAPanel = ({ activities, loading, showOnMap, onToggleMap }) => (
+
+
+
🏕 POTA ACTIVITY
+
+ {loading &&
}
+
+
● LIVE
+
+
+
+ {activities.length > 0 ? activities.map((a, i) => (
+
+
+ {a.call}
+ {a.ref}
+
+
+ {a.freq}
+ {a.mode}
+
+
+ )) :
No active POTA spots
}
+
+
+ );
+
+ // ============================================
+ // DXPEDITION PANEL
+ // ============================================
+ const DXpeditionPanel = ({ data, loading }) => {
+ const formatDate = (isoString) => {
+ if (!isoString) return '';
+ const date = new Date(isoString);
+ return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+ };
+
+ const getStatusStyle = (expedition) => {
+ if (expedition.isActive) {
+ return { bg: 'rgba(0, 255, 136, 0.15)', border: 'var(--accent-green)', color: 'var(--accent-green)' };
+ }
+ if (expedition.isUpcoming) {
+ return { bg: 'rgba(0, 170, 255, 0.15)', border: 'var(--accent-cyan)', color: 'var(--accent-cyan)' };
+ }
+ return { bg: 'var(--bg-tertiary)', border: 'var(--border-color)', color: 'var(--text-muted)' };
+ };
+
+ return (
+
+
+
🌍 DXPEDITIONS
+
+ {loading &&
}
+ {data && (
+
+ {data.active > 0 && {data.active} active}
+ {data.active > 0 && data.upcoming > 0 && ' • '}
+ {data.upcoming > 0 && {data.upcoming} upcoming}
+
+ )}
+
+
+
+
+ {data?.dxpeditions?.length > 0 ? (
+ data.dxpeditions.slice(0, 15).map((exp, idx) => {
+ const style = getStatusStyle(exp);
+ return (
+
+
+ {exp.callsign}
+
+ {exp.isActive ? '● ACTIVE' : exp.isUpcoming ? 'UPCOMING' : 'PAST'}
+
+
+
+ {exp.entity}
+
+
+
{exp.dates}
+
+ {exp.bands && {exp.bands.split(' ').slice(0, 3).join(' ')}}
+ {exp.modes && {exp.modes.split(' ').slice(0, 2).join(' ')}}
+
+
+
+ );
+ })
+ ) : (
+
+ {loading ? 'Loading DXpeditions...' : 'No DXpedition data available'}
+
+ )}
+
+
+ {data && (
+
+ )}
+
+ );
+ };
+
+ // ============================================
+ // CONTEST CALENDAR PANEL
+ // ============================================
+ const ContestPanel = ({ contests, loading }) => {
+ const formatContestTime = (isoString) => {
+ const date = new Date(isoString);
+ const now = new Date();
+ const diffMs = date - now;
+ const diffHours = Math.floor(diffMs / 3600000);
+ const diffDays = Math.floor(diffHours / 24);
+
+ if (diffMs < 0) {
+ // Contest is active or past
+ return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+ } else if (diffHours < 24) {
+ return `In ${diffHours}h`;
+ } else if (diffDays < 7) {
+ return `In ${diffDays}d`;
+ } else {
+ return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+ }
+ };
+
+ const getStatusColor = (contest) => {
+ if (contest.status === 'active') return 'var(--accent-green)';
+ const start = new Date(contest.start);
+ const now = new Date();
+ const hoursUntil = (start - now) / 3600000;
+ if (hoursUntil < 24) return 'var(--accent-amber)';
+ return 'var(--text-secondary)';
+ };
+
+ const getModeColor = (mode) => {
+ switch(mode) {
+ case 'CW': return 'var(--accent-cyan)';
+ case 'SSB': return 'var(--accent-amber)';
+ case 'RTTY': return 'var(--accent-purple)';
+ default: return 'var(--text-secondary)';
+ }
+ };
+
+ return (
+
+
+
+ {contests.length > 0 ? contests.map((c, i) => (
+
+
+
+ {c.name}
+ {c.status === 'active' && ●}
+
+
+ {c.mode}
+
+
+
+ {c.status === 'active' ? 'NOW' : formatContestTime(c.start)}
+
+
+ )) : (
+
+ No upcoming contests
+
+ )}
+
+
+
+ );
+ };
+
+ // ============================================
+ // LEGACY LAYOUT (Classic HamClock Style)
+ // ============================================
+ const LegacyLayout = ({
+ config, currentTime, utcTime, utcDate, localTime, localDate,
+ deGrid, dxGrid, deSunTimes, dxSunTimes, dxLocation, onDXChange,
+ spaceWeather, bandConditions, solarIndices, potaSpots, dxCluster, dxPaths, dxpeditions, contests, propagation, mySpots, satellites,
+ localWeather, use12Hour, onTimeFormatToggle,
+ onSettingsClick, onFullscreenToggle, isFullscreen,
+ mapLayers, toggleDXPaths, togglePOTA, toggleSatellites, toggleDXLabels,
+ dxFilters, onFilterChange,
+ hoveredSpot, onHoverSpot, onOpenDXFilters
+ }) => {
+ // Alias for setDxFilters used in the component
+ const setDxFilters = onFilterChange;
+ const setHoveredSpot = onHoverSpot;
+ const setShowDXFilters = onOpenDXFilters;
+ const bearing = calculateBearing(config.location.lat, config.location.lon, dxLocation.lat, dxLocation.lon);
+ const distance = calculateDistance(config.location.lat, config.location.lon, dxLocation.lat, dxLocation.lon);
+
+ const panelStyle = {
+ background: 'var(--bg-panel)',
+ border: '1px solid var(--border-color)',
+ padding: '8px 12px',
+ fontFamily: 'JetBrains Mono, monospace'
+ };
+
+ const labelStyle = {
+ fontSize: '12px',
+ color: 'var(--accent-green)',
+ fontWeight: '700',
+ letterSpacing: '1px'
+ };
+
+ const valueStyle = {
+ fontSize: '14px',
+ color: 'var(--text-primary)',
+ fontWeight: '600'
+ };
+
+ const bigValueStyle = {
+ fontSize: '32px',
+ color: 'var(--accent-green)',
+ fontWeight: '700',
+ fontFamily: 'Orbitron, JetBrains Mono, monospace',
+ textShadow: '0 0 10px var(--accent-green-dim)'
+ };
return (
-
-
-
📡 BAND CONDITIONS
- {loading &&
}
+
+ {/* TOP LEFT - Callsign & Weather */}
+
+
+ {config.callsign}
+
+ {localWeather.data ? (
+
+ {localWeather.data.icon} {localWeather.data.temp}°F • {localWeather.data.description}
+
+ ) : (
+
+ SFI {spaceWeather.data?.solarFlux || '--'} • K{spaceWeather.data?.kIndex || '-'}
+
+ )}
-
- {bands.map((b, i) => {
- const s = getStyle(b.condition);
- return (
-
-
{b.band}
-
{b.condition}
-
- );
- })}
+
+ {/* TOP CENTER - Large Clock */}
+
+
+
{utcTime}
+
{utcDate} UTC
+
+
+
+
{localTime}
+
{localDate} Local
+
-
- );
- };
- const DXClusterPanel = ({ spots, loading }) => (
-
-
-
🌐 DX CLUSTER
-
- {loading &&
}
-
● LIVE
+ {/* TOP RIGHT - Solar Indices with Mini Charts */}
+
+
☀ SOLAR INDICES
+ {solarIndices.data ? (
+
+ {/* SFI */}
+
+
SFI
+
+ {solarIndices.data.sfi?.current || '--'}
+
+ {solarIndices.data.sfi?.history?.length > 0 && (
+
+ )}
+
+ {/* SSN */}
+
+
SSN
+
+ {solarIndices.data.ssn?.current || '--'}
+
+ {solarIndices.data.ssn?.history?.length > 0 && (
+
+ )}
+
+ {/* Kp */}
+
+
Kp
+
= 5 ? '#ff6600' : solarIndices.data.kp?.current >= 4 ? '#ffcc00' : '#00ff88'
+ }}>
+ {solarIndices.data.kp?.current?.toFixed(1) || '--'}
+
+ {solarIndices.data.kp?.history?.length > 0 && (
+
+ )}
+
+
+ ) : (
+
+
+
SFI
+
{spaceWeather.data?.solarFlux || '--'}
+
+
+
Kp
+
4 ? 'var(--accent-red)' : 'var(--accent-green)', fontWeight: '700' }}>{spaceWeather.data?.kIndex || '-'}
+
+
+ )}
-
-
- {spots.map((s, i) => (
-
-
{s.freq}
-
{s.call}
-
{s.comment}
-
{s.time}
+
+ {/* LEFT SIDEBAR - DE/DX Info */}
+
+ {/* DE Section */}
+
+
DE:
+
{deGrid}
+
+ {config.location.lat.toFixed(2)}°{config.location.lat >= 0 ? 'N' : 'S'}, {config.location.lon.toFixed(2)}°{config.location.lon >= 0 ? 'E' : 'W'}
+
+
+ ☀↑ {deSunTimes.sunrise}z ☀↓ {deSunTimes.sunset}z
+
- ))}
-
-
- );
- const POTAPanel = ({ activities, loading }) => (
-
-
-
🏕 POTA ACTIVITY
-
- {loading &&
}
-
● LIVE
+ {/* DX Section */}
+
+
DX:
+
{dxGrid}
+
+ {dxLocation.lat.toFixed(2)}°{dxLocation.lat >= 0 ? 'N' : 'S'}, {dxLocation.lon.toFixed(2)}°{dxLocation.lon >= 0 ? 'E' : 'W'}
+
+
+ ☀↑ {dxSunTimes.sunrise}z ☀↓ {dxSunTimes.sunset}z
+
+
+
+ {/* Path Info */}
+
+
+ SP:
+ {bearing.toFixed(0)}°
+
+
+ LP:
+ {((bearing + 180) % 360).toFixed(0)}°
+
+
+ Dist:
+ {Math.round(distance).toLocaleString()} km
+
+
+
+ {/* Band Conditions - Compact */}
+
+
📡 BANDS
+
+ {bandConditions.data.slice(0, 9).map((b, i) => {
+ const color = b.condition === 'GOOD' ? 'var(--accent-green)' : b.condition === 'FAIR' ? 'var(--accent-amber)' : 'var(--accent-red)';
+ return (
+
+ );
+ })}
+
+
-
-
- {activities.length > 0 ? activities.map((a, i) => (
-
-
-
{a.call}
-
{a.ref}
+
+ {/* CENTER - Map */}
+
+
+
+
+ {/* RIGHT SIDEBAR - DX Cluster & Contests */}
+
+ {/* DX Cluster */}
+
+
+
🌐 DX CLUSTER {dxCluster.filteredCount}/{dxCluster.spotCount}
+
+
+
+ ● LIVE
+
-
-
{a.freq}
-
{a.mode}
+ {/* Quick search bar */}
+
+ setDxFilters(prev => ({ ...prev, callsign: e.target.value || undefined }))}
+ style={{
+ flex: 1,
+ padding: '3px 6px',
+ background: 'var(--bg-secondary)',
+ border: '1px solid var(--border-color)',
+ borderRadius: '3px',
+ color: 'var(--text-primary)',
+ fontSize: '10px',
+ fontFamily: 'JetBrains Mono'
+ }}
+ />
+ {Object.keys(dxFilters || {}).length > 0 && (
+
+ )}
+
+ {/* Active filters summary */}
+ {(dxFilters?.bands?.length || dxFilters?.cqZones?.length || dxFilters?.watchlist?.length) && (
+
+ {dxFilters.bands?.length > 0 && {dxFilters.bands.join(', ')} }
+ {dxFilters.cqZones?.length > 0 && | CQ: {dxFilters.cqZones.length} zones }
+ {dxFilters.watchlist?.length > 0 && | {dxFilters.watchlist.length} watched}
+
+ )}
+
+ {dxCluster.data.slice(0, 8).map((s, i) => {
+ const isHovered = hoveredSpot && hoveredSpot.call === s.call && hoveredSpot.freq === s.freq;
+ return (
+
setHoveredSpot(s)}
+ onMouseLeave={() => setHoveredSpot(null)}
+ style={{
+ padding: '4px 0',
+ borderBottom: '1px solid rgba(255,255,255,0.05)',
+ fontSize: '12px',
+ background: isHovered ? 'rgba(68, 136, 255, 0.3)' : 'transparent',
+ borderLeft: isHovered ? '3px solid #4488ff' : '3px solid transparent',
+ paddingLeft: '4px',
+ marginLeft: '-4px',
+ cursor: 'pointer',
+ transition: 'background 0.15s ease'
+ }}
+ >
+
+ {s.freq}
+ {s.call}
+
+
{s.comment}
+
+ );
+ })}
+ {dxCluster.data.length === 0 &&
No spots match filter
}
- )) :
No active POTA spots
}
+
+ {/* DXpeditions */}
+
+
+ 🌍 DXPEDITIONS
+ {dxpeditions.data?.active > 0 && (
+ {dxpeditions.data.active} active
+ )}
+
+
+ {dxpeditions.data?.dxpeditions?.slice(0, 6).map((exp, i) => (
+
+
+ {exp.callsign}
+
+ {exp.isActive ? '● NOW' : exp.dates?.split('-')[0]?.trim() || ''}
+
+
+
+ {exp.entity}
+ {exp.bands && {exp.bands.split(' ').slice(0,2).join(' ')}}
+
+
+ ))}
+ {!dxpeditions.data?.dxpeditions?.length && (
+
+ {dxpeditions.loading ? 'Loading...' : 'No data'}
+
+ )}
+
+
+
+ {/* Contests */}
+
+
🏆 CONTESTS
+
+ {contests.data.slice(0, 5).map((c, i) => (
+
+
+ {c.name} {c.status === 'active' && ●}
+
+
+ {c.mode} • {new Date(c.start).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+
+
+ ))}
+
+
+
+
+ {/* POTA */}
+
+
+ 🏕 POTA
+
+
+
+ {potaSpots.data.slice(0, 4).map((a, i) => (
+
+ {a.call}
+ {a.ref}
+ {a.freq}
+
+ ))}
+
+
+
+ {/* Propagation */}
+ {propagation.data && (
+
+
📡 PROPAGATION
+
+ {propagation.data.currentBands.slice(0, 6).map((b, i) => (
+
+
= 50 ? 'var(--accent-green)' : 'var(--text-muted)' }}>{b.band}
+
+
= 70 ? '#00ff88' : b.reliability >= 50 ? '#88ff00' : b.reliability >= 30 ? '#ffcc00' : '#ff8800',
+ borderRadius: '2px'
+ }} />
+
+
= 70 ? '#00ff88' : b.reliability >= 50 ? '#88ff00' : b.reliability >= 30 ? '#ffcc00' : '#ff8800'
+ }}>{b.status.substring(0, 4)}
+
+ ))}
+
+
+ )}
+
+
+ {/* BOTTOM - Footer */}
+
+
+ OpenHamClock v3.6.0 • In memory of Elwood Downey WB0OEW
+
+
+ Click map to set DX • 73 de {config.callsign}
+
+
+
+
+
+
-
- );
+ );
+ };
// ============================================
// SETTINGS PANEL COMPONENT
@@ -929,6 +4647,21 @@
const [lon, setLon] = useState(config.location.lon.toString());
const [gridSquare, setGridSquare] = useState('');
const [useGeolocation, setUseGeolocation] = useState(false);
+ const [theme, setTheme] = useState(config.theme || 'dark');
+ const [layout, setLayout] = useState(config.layout || 'modern');
+ const [dxClusterSource, setDxClusterSource] = useState(config.dxClusterSource || 'auto');
+
+ // Sync local state when config changes or panel opens
+ useEffect(() => {
+ if (isOpen) {
+ setCallsign(config.callsign);
+ setLat(config.location.lat.toString());
+ setLon(config.location.lon.toString());
+ setTheme(config.theme || 'dark');
+ setLayout(config.layout || 'modern');
+ setDxClusterSource(config.dxClusterSource || 'auto');
+ }
+ }, [isOpen, config]);
// Calculate grid square from lat/lon
useEffect(() => {
@@ -939,6 +4672,11 @@
}
}, [lat, lon]);
+ // Preview theme changes in real-time
+ useEffect(() => {
+ applyTheme(theme);
+ }, [theme]);
+
const handleGeolocation = () => {
if (navigator.geolocation) {
setUseGeolocation(true);
@@ -978,13 +4716,22 @@
const newConfig = {
...config,
callsign: callsign.toUpperCase().trim(),
- location: { lat: latNum, lon: lonNum }
+ location: { lat: latNum, lon: lonNum },
+ theme: theme,
+ layout: layout,
+ dxClusterSource: dxClusterSource
};
onSave(newConfig);
onClose();
};
+ const handleClose = () => {
+ // Revert theme if cancelled
+ applyTheme(config.theme || 'dark');
+ onClose();
+ };
+
const handleGridSquareChange = (gs) => {
setGridSquare(gs.toUpperCase());
// Convert grid square to lat/lon if valid (4 or 6 char)
@@ -1018,16 +4765,40 @@
if (!isOpen) return null;
+ const inputStyle = {
+ width: '100%', padding: '12px 16px', background: 'var(--bg-tertiary)',
+ border: '1px solid var(--border-color)', borderRadius: '6px',
+ color: 'var(--accent-green)', fontFamily: 'JetBrains Mono, monospace',
+ fontSize: '18px', outline: 'none', textTransform: 'uppercase'
+ };
+
+ const labelStyle = {
+ display: 'block', color: 'var(--text-secondary)', fontSize: '12px',
+ marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '1px'
+ };
+
+ const buttonGroupStyle = {
+ display: 'flex', gap: '8px', marginBottom: '20px'
+ };
+
+ const themeButtonStyle = (isActive) => ({
+ flex: 1, padding: '10px', background: isActive ? 'var(--accent-amber)' : 'var(--bg-tertiary)',
+ border: '1px solid var(--border-color)', borderRadius: '6px',
+ color: isActive ? '#000' : 'var(--text-secondary)', fontFamily: 'JetBrains Mono, monospace',
+ fontSize: '13px', cursor: 'pointer', fontWeight: isActive ? '700' : '400',
+ transition: 'all 0.2s'
+ });
+
return (
+ }} onClick={handleClose}>
e.stopPropagation()}>
-
+
setCallsign(e.target.value.toUpperCase())}
placeholder="W1ABC"
- style={{
- width: '100%', padding: '12px 16px', background: 'var(--bg-tertiary)',
- border: '1px solid var(--border-color)', borderRadius: '6px',
- color: 'var(--accent-green)', fontFamily: 'JetBrains Mono, monospace',
- fontSize: '18px', outline: 'none', textTransform: 'uppercase'
- }}
+ style={inputStyle}
/>
{/* Grid Square */}
-
+
handleGridSquareChange(e.target.value)}
placeholder="FN31pr"
maxLength={6}
- style={{
- width: '100%', padding: '12px 16px', background: 'var(--bg-tertiary)',
- border: '1px solid var(--border-color)', borderRadius: '6px',
- color: 'var(--accent-cyan)', fontFamily: 'JetBrains Mono, monospace',
- fontSize: '18px', outline: 'none', textTransform: 'uppercase'
- }}
+ style={{...inputStyle, color: 'var(--accent-cyan)'}}
/>
{/* Lat/Lon */}
-
+
setLat(e.target.value)}
placeholder="40.0150"
- style={{
- width: '100%', padding: '10px 12px', background: 'var(--bg-tertiary)',
- border: '1px solid var(--border-color)', borderRadius: '6px',
- color: 'var(--text-primary)', fontFamily: 'JetBrains Mono, monospace',
- fontSize: '14px', outline: 'none'
- }}
+ style={{...inputStyle, fontSize: '14px', color: 'var(--text-primary)'}}
/>
-
+
setLon(e.target.value)}
placeholder="-105.2705"
- style={{
- width: '100%', padding: '10px 12px', background: 'var(--bg-tertiary)',
- border: '1px solid var(--border-color)', borderRadius: '6px',
- color: 'var(--text-primary)', fontFamily: 'JetBrains Mono, monospace',
- fontSize: '14px', outline: 'none'
- }}
+ style={{...inputStyle, fontSize: '14px', color: 'var(--text-primary)'}}
/>
@@ -1132,10 +4875,74 @@
)}
+ {/* Theme Selection */}
+
+
+
+
+
+
+
+
+ {theme === 'legacy' && '→ Classic green-on-black HamClock style'}
+ {theme === 'light' && '→ Bright theme for daytime use'}
+ {theme === 'dark' && '→ Modern dark theme (default)'}
+
+
+
+ {/* Layout Selection */}
+
+
+
+
+
+
+
+ {layout === 'legacy' && '→ Layout inspired by original HamClock'}
+ {layout === 'modern' && '→ Modern responsive grid layout'}
+
+
+
+ {/* DX Cluster Source Selection */}
+
+
+
+
+ {dxClusterSource === 'auto' && '→ Tries Proxy first, then HamQTH, then direct telnet'}
+ {dxClusterSource === 'proxy' && '→ Real-time DX Spider feed via our dedicated proxy service'}
+ {dxClusterSource === 'hamqth' && '→ HamQTH.com CSV feed (works on all platforms)'}
+ {dxClusterSource === 'dxspider' && '→ Direct telnet to dxspider.co.uk:7300 (local/Pi only)'}
+
+
+
{/* Buttons */}
{
+ e.target.style.display = 'none';
+ }}
+ />
+