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

rpi issue/ docker port

Browse Source
pull/49/head
accius 2 days ago
parent 82585acb3e
commit a94be88f0e
8 changed files with 454 additions and 351 deletions
Show Stats Download Patch File Download Diff File

7
.env.example
Unescape View File

@ -48,6 +48,13 @@ THEME=dark
# Layout: 'modern' or 'classic'
LAYOUT=modern
# Timezone: IANA timezone identifier
# Set this if your local time shows incorrectly (e.g. same as UTC).
# This is common with privacy browsers like Librewolf that spoof timezone.
# Examples: America/New_York, America/Regina, Europe/London, Asia/Tokyo
# Leave blank or commented out to use browser default.
# TZ=America/New_York
# ===========================================
# OPTIONAL - External Services
# ===========================================

3
Dockerfile
Unescape View File

@ -55,8 +55,9 @@ RUN chown -R openhamclock:nodejs /app
# Switch to non-root user
USER openhamclock
# Expose port
# Expose ports (3000 = web, 2237 = WSJT-X UDP)
EXPOSE 3000
EXPOSE 2237/udp
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \

7
docker-compose.yml
Unescape View File

@ -6,9 +6,13 @@ services:
container_name: openhamclock
ports:
- "3000:3000"
- "2237:2237/udp" # WSJT-X UDP — point WSJT-X to 127.0.0.1:2237
environment:
- NODE_ENV=production
- PORT=3000
# Uncomment and set your timezone (IANA format)
# This ensures correct local time display, especially with privacy browsers
# - TZ=America/New_York
restart: unless-stopped
healthcheck:
test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/api/health"]
@ -16,9 +20,6 @@ services:
timeout: 10s
retries: 3
start_period: 10s
# Uncomment to set timezone
# environment:
# - TZ=America/Denver
# For development with hot reload:
# docker compose -f docker-compose.dev.yml up

3
server.js
Unescape View File

@ -3600,6 +3600,9 @@ app.get('/api/config', (req, res) => {
// Whether config is incomplete (show setup wizard)
configIncomplete: CONFIG.callsign === 'N0CALL' || !CONFIG.gridSquare,
// Server timezone (from TZ env var or system)
timezone: process.env.TZ || Intl.DateTimeFormat().resolvedOptions().timeZone || '',
// Feature availability
features: {
spaceWeather: true,

13
src/App.jsx
Unescape View File

@ -259,11 +259,18 @@ const App = () => {
setDxLocation({ lat: coords.lat, lon: coords.lon });
}, []);
// Format times
// Format times — use explicit timezone if configured (fixes privacy browsers like Librewolf
// that spoof timezone to UTC via privacy.resistFingerprinting)
const utcTime = currentTime.toISOString().substr(11, 8);
const localTime = currentTime.toLocaleTimeString('en-US', { hour12: use12Hour });
const utcDate = currentTime.toISOString().substr(0, 10);
const localDate = currentTime.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
const localTimeOpts = { hour12: use12Hour };
const localDateOpts = { weekday: 'short', month: 'short', day: 'numeric' };
if (config.timezone) {
localTimeOpts.timeZone = config.timezone;
localDateOpts.timeZone = config.timezone;
}
const localTime = currentTime.toLocaleTimeString('en-US', localTimeOpts);
const localDate = currentTime.toLocaleDateString('en-US', localDateOpts);
// Scale for small screens
const [scale, setScale] = useState(1);

657
src/components/PSKReporterPanel.jsx
Unescape View File

@ -1,7 +1,11 @@
/**
* PSKReporter Panel
* Shows where your digital mode signals are being received
* Toggles between PSKReporter (internet) and WSJT-X (local UDP) views
* PSKReporter + WSJT-X Panel
* Digital mode spots — toggle between internet (PSKReporter) and local (WSJT-X UDP)
*
* Layout:
* Row 1: Segmented mode toggle | map + filter controls
* Row 2: Sub-tabs (Being Heard / Hearing or Decodes / QSOs)
* Content: Scrolling spot/decode list
*/
import React, { useState, useMemo } from 'react';
import { usePSKReporter } from '../hooks/usePSKReporter.js';
@ -25,36 +29,28 @@ const PSKReporterPanel = ({
showWSJTXOnMap,
onToggleWSJTXMap
}) => {
const [panelMode, setPanelMode] = useState('psk'); // 'psk' | 'wsjtx'
const [activeTab, setActiveTab] = useState('tx'); // PSK: tx | rx
const [wsjtxTab, setWsjtxTab] = useState('decodes'); // WSJT-X: decodes | qsos
const [bandFilter, setBandFilter] = useState('all');
const [showCQ, setShowCQ] = useState(false);
const [panelMode, setPanelMode] = useState('psk');
const [activeTab, setActiveTab] = useState('tx');
const [wsjtxTab, setWsjtxTab] = useState('decodes');
const [wsjtxFilter, setWsjtxFilter] = useState('all'); // 'all' | 'cq' | band name
// PSKReporter hook
const {
txReports,
txCount,
rxReports,
rxCount,
loading,
error,
connected,
source,
refresh
txReports, txCount, rxReports, rxCount,
loading, error, connected, source, refresh
} = usePSKReporter(callsign, {
minutes: 15,
enabled: callsign && callsign !== 'N0CALL'
});
// PSK filter logic
// ── PSK filtering ──
const filterReports = (reports) => {
return reports.filter(r => {
if (filters?.bands?.length && !filters.bands.includes(r.band)) return false;
if (filters?.grids?.length) {
const grid = activeTab === 'tx' ? r.receiverGrid : r.senderGrid;
if (!grid) return false;
const gridPrefix = grid.substring(0, 2).toUpperCase();
if (!filters.grids.includes(gridPrefix)) return false;
if (!filters.grids.includes(grid.substring(0, 2).toUpperCase())) return false;
}
if (filters?.modes?.length && !filters.modes.includes(r.mode)) return false;
return true;
@ -64,401 +60,378 @@ const PSKReporterPanel = ({
const filteredTx = useMemo(() => filterReports(txReports), [txReports, filters, activeTab]);
const filteredRx = useMemo(() => filterReports(rxReports), [rxReports, filters, activeTab]);
const filteredReports = activeTab === 'tx' ? filteredTx : filteredRx;
const pskFilterCount = [filters?.bands?.length, filters?.grids?.length, filters?.modes?.length].filter(Boolean).length;
const getActiveFilterCount = () => {
let count = 0;
if (filters?.bands?.length) count++;
if (filters?.grids?.length) count++;
if (filters?.modes?.length) count++;
return count;
};
const filterCount = getActiveFilterCount();
const getFreqColor = (freqMHz) => {
if (!freqMHz) return 'var(--text-muted)';
return getBandColor(parseFloat(freqMHz));
};
const formatAge = (minutes) => {
if (minutes < 1) return 'now';
if (minutes < 60) return `${minutes}m`;
return `${Math.floor(minutes/60)}h`;
};
const getStatusIndicator = () => {
if (connected) return <span style={{ color: '#4ade80', fontSize: '10px' }}>● LIVE</span>;
if (source === 'connecting' || source === 'reconnecting') return <span style={{ color: '#fbbf24', fontSize: '10px' }}>◐ {source}</span>;
if (error) return <span style={{ color: '#ef4444', fontSize: '10px' }}>● offline</span>;
return null;
};
const getFreqColor = (freqMHz) => !freqMHz ? 'var(--text-muted)' : getBandColor(parseFloat(freqMHz));
const formatAge = (m) => m < 1 ? 'now' : m < 60 ? `${m}m` : `${Math.floor(m/60)}h`;
// WSJT-X helpers
// ── WSJT-X helpers ──
const activeClients = Object.entries(wsjtxClients);
const primaryClient = activeClients.length > 0 ? activeClients[0][1] : null;
const primaryClient = activeClients[0]?.[1] || null;
const wsjtxBands = useMemo(() => {
const bands = new Set(wsjtxDecodes.map(d => d.band).filter(Boolean));
return ['all', ...Array.from(bands).sort((a, b) => (parseInt(b) || 999) - (parseInt(a) || 999))];
// Build unified filter options: All, CQ Only, then each available band
const wsjtxFilterOptions = useMemo(() => {
const bands = [...new Set(wsjtxDecodes.map(d => d.band).filter(Boolean))]
.sort((a, b) => (parseInt(b) || 999) - (parseInt(a) || 999));
return [
{ value: 'all', label: 'All decodes' },
{ value: 'cq', label: 'CQ only' },
...bands.map(b => ({ value: b, label: b }))
];
}, [wsjtxDecodes]);
const filteredDecodes = useMemo(() => {
let filtered = [...wsjtxDecodes];
if (bandFilter !== 'all') filtered = filtered.filter(d => d.band === bandFilter);
if (showCQ) filtered = filtered.filter(d => d.type === 'CQ');
if (wsjtxFilter === 'cq') {
filtered = filtered.filter(d => d.type === 'CQ');
} else if (wsjtxFilter !== 'all') {
// Band filter
filtered = filtered.filter(d => d.band === wsjtxFilter);
}
return filtered.reverse();
}, [wsjtxDecodes, bandFilter, showCQ]);
}, [wsjtxDecodes, wsjtxFilter]);
const getSnrColor = (snr) => {
if (snr === null || snr === undefined) return 'var(--text-muted)';
if (snr == null) return 'var(--text-muted)';
if (snr >= 0) return '#4ade80';
if (snr >= -10) return '#fbbf24';
if (snr >= -18) return '#fb923c';
return '#ef4444';
};
const getMsgColor = (decode) => {
if (decode.type === 'CQ') return '#60a5fa';
if (decode.exchange === 'RR73' || decode.exchange === '73' || decode.exchange === 'RRR') return '#4ade80';
if (decode.exchange?.startsWith('R')) return '#fbbf24';
const getMsgColor = (d) => {
if (d.type === 'CQ') return '#60a5fa';
if (['RR73', '73', 'RRR'].includes(d.exchange)) return '#4ade80';
if (d.exchange?.startsWith('R')) return '#fbbf24';
return 'var(--text-primary)';
};
// Mode switch button style
const modeBtn = (mode, color) => ({
padding: '2px 8px',
background: panelMode === mode ? `${color}22` : 'transparent',
border: `1px solid ${panelMode === mode ? color : 'var(--border-color)'}`,
color: panelMode === mode ? color : 'var(--text-muted)',
// Active map toggle for current mode
const isMapOn = panelMode === 'psk' ? showOnMap : showWSJTXOnMap;
const handleMapToggle = panelMode === 'psk' ? onToggleMap : onToggleWSJTXMap;
// Compact status dot
const statusDot = connected
? { color: '#4ade80', char: '●' }
: (source === 'connecting' || source === 'reconnecting')
? { color: '#fbbf24', char: '◐' }
: error ? { color: '#ef4444', char: '●' } : null;
// ── Shared styles ──
const segBtn = (active, color) => ({
padding: '3px 10px',
background: active ? `${color}18` : 'transparent',
color: active ? color : 'var(--text-muted)',
border: 'none',
borderBottom: active ? `2px solid ${color}` : '2px solid transparent',
fontSize: '11px',
fontWeight: active ? '700' : '400',
cursor: 'pointer',
letterSpacing: '0.02em',
});
const subTabBtn = (active, color) => ({
flex: 1,
padding: '3px 4px',
background: active ? `${color}20` : 'transparent',
border: `1px solid ${active ? color + '66' : 'var(--border-color)'}`,
borderRadius: '3px',
color: active ? color : 'var(--text-muted)',
cursor: 'pointer',
fontSize: '10px',
fontWeight: active ? '600' : '400',
});
const iconBtn = (active, activeColor = '#4488ff') => ({
background: active ? `${activeColor}30` : 'rgba(100,100,100,0.3)',
border: `1px solid ${active ? activeColor : '#555'}`,
color: active ? activeColor : '#777',
padding: '2px 6px',
borderRadius: '3px',
fontSize: '10px',
cursor: 'pointer',
fontWeight: panelMode === mode ? '700' : '400',
lineHeight: 1,
});
return (
<div className="panel" style={{
padding: '10px',
padding: '8px 10px',
display: 'flex',
flexDirection: 'column',
height: '100%',
overflow: 'hidden'
}}>
{/* Mode switcher header */}
{/* ── Row 1: Mode toggle + controls ── */}
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: '4px',
flexShrink: 0
marginBottom: '5px',
flexShrink: 0,
}}>
<div style={{ display: 'flex', gap: '3px' }}>
<button onClick={() => setPanelMode('psk')} style={modeBtn('psk', 'var(--accent-primary)')}>
📡 PSKReporter
{/* Mode toggle */}
<div style={{ display: 'flex' }}>
<button onClick={() => setPanelMode('psk')} style={segBtn(panelMode === 'psk', 'var(--accent-primary)')}>
PSKReporter
</button>
<button onClick={() => setPanelMode('wsjtx')} style={modeBtn('wsjtx', '#a78bfa')}>
🔊 WSJT-X
<button onClick={() => setPanelMode('wsjtx')} style={segBtn(panelMode === 'wsjtx', '#a78bfa')}>
WSJT-X
</button>
</div>
{/* Controls row - differs per mode */}
{/* Right controls */}
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
{/* PSK: status dot + filter + refresh */}
{panelMode === 'psk' && (
<>
<span style={{ fontSize: '9px', color: 'var(--text-muted)' }}>
{filteredReports.length}/{activeTab === 'tx' ? txCount : rxCount}
</span>
{getStatusIndicator()}
<button onClick={onOpenFilters} style={{
background: filterCount > 0 ? 'rgba(255, 170, 0, 0.3)' : 'rgba(100, 100, 100, 0.3)',
border: `1px solid ${filterCount > 0 ? '#ffaa00' : '#666'}`,
color: filterCount > 0 ? '#ffaa00' : '#888',
padding: '2px 6px', borderRadius: '4px', fontSize: '10px', cursor: 'pointer'
}}>🔍</button>
{statusDot && (
<span style={{ color: statusDot.color, fontSize: '10px', lineHeight: 1 }}>{statusDot.char}</span>
)}
<button onClick={onOpenFilters} style={iconBtn(pskFilterCount > 0, '#ffaa00')}>
{pskFilterCount > 0 ? `🔍${pskFilterCount}` : '🔍'}
</button>
<button onClick={refresh} disabled={loading} style={{
background: 'rgba(100, 100, 100, 0.3)', border: '1px solid #666',
color: '#888', padding: '2px 6px', borderRadius: '4px', fontSize: '10px',
cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? 0.5 : 1
...iconBtn(false),
opacity: loading ? 0.4 : 1,
cursor: loading ? 'not-allowed' : 'pointer',
}}>🔄</button>
{onToggleMap && (
<button onClick={onToggleMap} style={{
background: showOnMap ? 'rgba(68, 136, 255, 0.3)' : 'rgba(100, 100, 100, 0.3)',
border: `1px solid ${showOnMap ? '#4488ff' : '#666'}`,
color: showOnMap ? '#4488ff' : '#888',
padding: '2px 6px', borderRadius: '4px', fontSize: '10px', cursor: 'pointer'
}}>🗺️ {showOnMap ? 'ON' : 'OFF'}</button>
)}
</>
)}
{/* WSJT-X: mode/band info + unified filter */}
{panelMode === 'wsjtx' && (
<>
{primaryClient && (
<span style={{ fontSize: '10px', color: 'var(--text-muted)' }}>
{primaryClient.mode || ''} {primaryClient.band || ''}
{primaryClient.transmitting && <span style={{ color: '#ef4444', marginLeft: '3px' }}>TX</span>}
{primaryClient.decoding && <span style={{ color: '#4ade80', marginLeft: '3px' }}>RX</span>}
<span style={{ fontSize: '9px', color: 'var(--text-muted)' }}>
{primaryClient.mode} {primaryClient.band}
{primaryClient.transmitting && <span style={{ color: '#ef4444', marginLeft: '2px' }}>TX</span>}
</span>
)}
<select value={bandFilter} onChange={(e) => setBandFilter(e.target.value)} style={{
background: 'var(--bg-tertiary)', color: 'var(--text-primary)',
border: '1px solid var(--border-color)', borderRadius: '3px',
fontSize: '10px', padding: '1px 2px', cursor: 'pointer'
}}>
{wsjtxBands.map(b => <option key={b} value={b}>{b === 'all' ? 'All' : b}</option>)}
<select
value={wsjtxFilter}
onChange={(e) => setWsjtxFilter(e.target.value)}
style={{
background: 'var(--bg-tertiary)',
color: wsjtxFilter !== 'all' ? '#a78bfa' : 'var(--text-primary)',
border: `1px solid ${wsjtxFilter !== 'all' ? '#a78bfa55' : 'var(--border-color)'}`,
borderRadius: '3px',
fontSize: '10px',
padding: '1px 4px',
cursor: 'pointer',
maxWidth: '90px',
}}
>
{wsjtxFilterOptions.map(o => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
<button onClick={() => setShowCQ(!showCQ)} style={{
background: showCQ ? '#60a5fa33' : 'transparent',
color: showCQ ? '#60a5fa' : 'var(--text-muted)',
border: `1px solid ${showCQ ? '#60a5fa55' : 'var(--border-color)'}`,
borderRadius: '3px', fontSize: '10px', padding: '1px 4px', cursor: 'pointer'
}}>CQ</button>
{onToggleWSJTXMap && (
<button onClick={onToggleWSJTXMap} style={{
background: showWSJTXOnMap ? 'rgba(167, 139, 250, 0.3)' : 'rgba(100, 100, 100, 0.3)',
border: `1px solid ${showWSJTXOnMap ? '#a78bfa' : '#666'}`,
color: showWSJTXOnMap ? '#a78bfa' : '#888',
padding: '2px 6px', borderRadius: '4px', fontSize: '10px', cursor: 'pointer'
}}>🗺️ {showWSJTXOnMap ? 'ON' : 'OFF'}</button>
)}
</>
)}
{/* Map toggle (always visible) */}
{handleMapToggle && (
<button onClick={handleMapToggle} style={iconBtn(isMapOn, panelMode === 'psk' ? '#4488ff' : '#a78bfa')}>
🗺️
</button>
)}
</div>
</div>
{/* === PSKReporter View === */}
{panelMode === 'psk' && (
<>
{(!callsign || callsign === 'N0CALL') ? (
<div style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '10px', fontSize: '11px' }}>
Set callsign in Settings
</div>
) : (
<>
{/* PSK Tabs */}
<div style={{ display: 'flex', gap: '4px', marginBottom: '6px', flexShrink: 0 }}>
<button onClick={() => setActiveTab('tx')} style={{
flex: 1, padding: '4px 6px',
background: activeTab === 'tx' ? 'rgba(74, 222, 128, 0.2)' : 'rgba(100, 100, 100, 0.2)',
border: `1px solid ${activeTab === 'tx' ? '#4ade80' : '#555'}`,
borderRadius: '3px', color: activeTab === 'tx' ? '#4ade80' : '#888',
cursor: 'pointer', fontSize: '10px', fontFamily: 'JetBrains Mono'
}}>
📤 Being Heard ({filterCount > 0 ? filteredTx.length : txCount})
</button>
<button onClick={() => setActiveTab('rx')} style={{
flex: 1, padding: '4px 6px',
background: activeTab === 'rx' ? 'rgba(96, 165, 250, 0.2)' : 'rgba(100, 100, 100, 0.2)',
border: `1px solid ${activeTab === 'rx' ? '#60a5fa' : '#555'}`,
borderRadius: '3px', color: activeTab === 'rx' ? '#60a5fa' : '#888',
cursor: 'pointer', fontSize: '10px', fontFamily: 'JetBrains Mono'
}}>
📥 Hearing ({filterCount > 0 ? filteredRx.length : rxCount})
</button>
</div>
{/* ── Row 2: Sub-tabs ── */}
<div style={{ display: 'flex', gap: '4px', marginBottom: '5px', flexShrink: 0 }}>
{panelMode === 'psk' ? (
<>
<button onClick={() => setActiveTab('tx')} style={subTabBtn(activeTab === 'tx', '#4ade80')}>
▲ Heard ({pskFilterCount > 0 ? filteredTx.length : txCount})
</button>
<button onClick={() => setActiveTab('rx')} style={subTabBtn(activeTab === 'rx', '#60a5fa')}>
▼ Hearing ({pskFilterCount > 0 ? filteredRx.length : rxCount})
</button>
</>
) : (
<>
<button onClick={() => setWsjtxTab('decodes')} style={subTabBtn(wsjtxTab === 'decodes', '#a78bfa')}>
Decodes ({filteredDecodes.length})
</button>
<button onClick={() => setWsjtxTab('qsos')} style={subTabBtn(wsjtxTab === 'qsos', '#a78bfa')}>
QSOs ({wsjtxQsos.length})
</button>
</>
)}
</div>
{/* PSK Reports list */}
{error && !connected ? (
<div style={{ textAlign: 'center', padding: '10px', color: 'var(--text-muted)', fontSize: '11px' }}>
⚠️ Connection failed - click 🔄 to retry
</div>
) : loading && filteredReports.length === 0 && filterCount === 0 ? (
<div style={{ textAlign: 'center', padding: '15px', color: 'var(--text-muted)', fontSize: '11px' }}>
<div className="loading-spinner" style={{ margin: '0 auto 8px' }} />
Connecting to MQTT...
</div>
) : !connected && filteredReports.length === 0 && filterCount === 0 ? (
<div style={{ textAlign: 'center', padding: '10px', color: 'var(--text-muted)', fontSize: '11px' }}>
Waiting for connection...
</div>
) : filteredReports.length === 0 ? (
<div style={{ textAlign: 'center', padding: '10px', color: 'var(--text-muted)', fontSize: '11px' }}>
{filterCount > 0
? 'No spots match filters'
: activeTab === 'tx'
? 'Waiting for spots... (TX to see reports)'
: 'No stations heard yet'}
</div>
) : (
<div style={{ flex: 1, overflow: 'auto', fontSize: '12px', fontFamily: 'JetBrains Mono, monospace' }}>
{filteredReports.slice(0, 20).map((report, i) => {
const freqMHz = report.freqMHz || (report.freq ? (report.freq / 1000000).toFixed(3) : '?');
const color = getFreqColor(freqMHz);
const displayCall = activeTab === 'tx' ? report.receiver : report.sender;
const grid = activeTab === 'tx' ? report.receiverGrid : report.senderGrid;
{/* ── Content area ── */}
<div style={{ flex: 1, overflow: 'auto', fontSize: '11px', fontFamily: "'JetBrains Mono', monospace" }}>
return (
<div
key={`${displayCall}-${report.freq}-${i}`}
onClick={() => onShowOnMap && report.lat && report.lon && onShowOnMap(report)}
style={{
display: 'grid', gridTemplateColumns: '55px 1fr auto',
gap: '6px', padding: '4px 6px', borderRadius: '3px', marginBottom: '2px',
background: i % 2 === 0 ? 'rgba(255,255,255,0.03)' : 'transparent',
cursor: report.lat && report.lon ? 'pointer' : 'default',
transition: 'background 0.15s', borderLeft: '2px solid transparent'
}}
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(68, 136, 255, 0.15)'}
onMouseLeave={(e) => e.currentTarget.style.background = i % 2 === 0 ? 'rgba(255,255,255,0.03)' : 'transparent'}
>
<div style={{ color, fontWeight: '600', fontSize: '11px' }}>{freqMHz}</div>
<div style={{ color: 'var(--text-primary)', fontWeight: '600', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: '11px' }}>
{displayCall}
{grid && <span style={{ color: 'var(--text-muted)', fontWeight: '400', marginLeft: '4px', fontSize: '9px' }}>{grid}</span>}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '10px' }}>
<span style={{ color: 'var(--text-muted)' }}>{report.mode}</span>
{report.snr !== null && report.snr !== undefined && (
<span style={{ color: report.snr >= 0 ? '#4ade80' : report.snr >= -10 ? '#fbbf24' : '#f97316', fontWeight: '600' }}>
{report.snr > 0 ? '+' : ''}{report.snr}
</span>
)}
<span style={{ color: 'var(--text-muted)', fontSize: '9px' }}>{formatAge(report.age)}</span>
</div>
</div>
);
})}
</div>
)}
</>
)}
</>
)}
{/* === PSKReporter content === */}
{panelMode === 'psk' && (
<>
{(!callsign || callsign === 'N0CALL') ? (
<div style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '16px', fontSize: '11px' }}>
Set your callsign in Settings to see reports
</div>
) : error && !connected ? (
<div style={{ textAlign: 'center', padding: '12px', color: 'var(--text-muted)', fontSize: '11px' }}>
Connection failed — tap 🔄
</div>
) : loading && filteredReports.length === 0 && pskFilterCount === 0 ? (
<div style={{ textAlign: 'center', padding: '16px', color: 'var(--text-muted)', fontSize: '11px' }}>
<div className="loading-spinner" style={{ margin: '0 auto 8px' }} />
Connecting...
</div>
) : filteredReports.length === 0 ? (
<div style={{ textAlign: 'center', padding: '12px', color: 'var(--text-muted)', fontSize: '11px' }}>
{pskFilterCount > 0
? 'No spots match filters'
: activeTab === 'tx'
? 'Waiting for spots... (TX to see reports)'
: 'No stations heard yet'}
</div>
) : (
filteredReports.slice(0, 25).map((report, i) => {
const freqMHz = report.freqMHz || (report.freq ? (report.freq / 1000000).toFixed(3) : '?');
const color = getFreqColor(freqMHz);
const displayCall = activeTab === 'tx' ? report.receiver : report.sender;
const grid = activeTab === 'tx' ? report.receiverGrid : report.senderGrid;
{/* === WSJT-X View === */}
{panelMode === 'wsjtx' && (
<>
{/* WSJT-X Tabs */}
<div style={{ display: 'flex', gap: '2px', marginBottom: '4px', flexShrink: 0 }}>
{[
{ key: 'decodes', label: `Decodes (${wsjtxDecodes.length})` },
{ key: 'qsos', label: `QSOs (${wsjtxQsos.length})` },
].map(tab => (
<button
key={tab.key}
onClick={() => setWsjtxTab(tab.key)}
style={{
flex: 1,
background: wsjtxTab === tab.key ? 'var(--bg-tertiary)' : 'transparent',
color: wsjtxTab === tab.key ? '#a78bfa' : 'var(--text-muted)',
border: 'none',
borderBottom: wsjtxTab === tab.key ? '2px solid #a78bfa' : '2px solid transparent',
fontSize: '10px', padding: '3px 6px', cursor: 'pointer',
borderRadius: '3px 3px 0 0',
}}
>
{tab.label}
</button>
))}
</div>
return (
<div
key={`${displayCall}-${report.freq}-${i}`}
onClick={() => onShowOnMap?.(report)}
style={{
display: 'grid',
gridTemplateColumns: '52px 1fr auto',
gap: '5px',
padding: '3px 4px',
borderRadius: '2px',
background: i % 2 === 0 ? 'rgba(255,255,255,0.02)' : 'transparent',
cursor: report.lat && report.lon ? 'pointer' : 'default',
}}
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(68,136,255,0.12)'}
onMouseLeave={(e) => e.currentTarget.style.background = i % 2 === 0 ? 'rgba(255,255,255,0.02)' : 'transparent'}
>
<span style={{ color, fontWeight: '600', fontSize: '10px' }}>{freqMHz}</span>
<span style={{
color: 'var(--text-primary)', fontWeight: '600', fontSize: '11px',
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'
}}>
{displayCall}
{grid && <span style={{ color: 'var(--text-muted)', fontWeight: '400', marginLeft: '4px', fontSize: '9px' }}>{grid}</span>}
</span>
<span style={{ display: 'flex', alignItems: 'center', gap: '3px', fontSize: '9px' }}>
<span style={{ color: 'var(--text-muted)' }}>{report.mode}</span>
{report.snr != null && (
<span style={{ color: report.snr >= 0 ? '#4ade80' : report.snr >= -10 ? '#fbbf24' : '#f97316', fontWeight: '600' }}>
{report.snr > 0 ? '+' : ''}{report.snr}
</span>
)}
<span style={{ color: 'var(--text-muted)' }}>{formatAge(report.age)}</span>
</span>
</div>
);
})
)}
</>
)}
{/* No WSJT-X connected */}
{!wsjtxLoading && activeClients.length === 0 && wsjtxDecodes.length === 0 ? (
<div style={{
flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
flexDirection: 'column', gap: '6px', color: 'var(--text-muted)',
fontSize: '11px', textAlign: 'center', padding: '8px'
}}>
<div>Waiting for WSJT-X...</div>
<div style={{ fontSize: '10px', opacity: 0.7 }}>
Settings → Reporting → UDP Server
<br />
Address: {'{server IP}'} &nbsp; Port: {wsjtxPort || 2237}
</div>
</div>
) : (
<>
{/* Decodes / QSOs content */}
{/* === WSJT-X content === */}
{panelMode === 'wsjtx' && (
<>
{/* No client connected */}
{!wsjtxLoading && activeClients.length === 0 && wsjtxDecodes.length === 0 ? (
<div style={{
flex: 1, overflowY: 'auto', overflowX: 'hidden',
fontSize: '11px', fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
display: 'flex', alignItems: 'center', justifyContent: 'center',
flexDirection: 'column', gap: '8px', color: 'var(--text-muted)',
fontSize: '11px', textAlign: 'center', padding: '16px 8px', height: '100%'
}}>
{wsjtxTab === 'decodes' && (
<>
{filteredDecodes.length === 0 ? (
<div style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '20px', fontSize: '11px' }}>
{wsjtxDecodes.length > 0 ? 'No decodes match filter' : 'Listening for decodes...'}
</div>
) : (
filteredDecodes.map((d, i) => (
<div
key={d.id || i}
style={{
display: 'flex', gap: '6px', padding: '2px 0',
borderBottom: '1px solid var(--border-color)',
alignItems: 'baseline',
opacity: d.lowConfidence ? 0.6 : 1,
}}
>
<span style={{ color: 'var(--text-muted)', minWidth: '48px', fontSize: '10px' }}>{d.time}</span>
<span style={{ color: getSnrColor(d.snr), minWidth: '28px', textAlign: 'right', fontSize: '10px' }}>
{d.snr != null ? (d.snr >= 0 ? `+${d.snr}` : d.snr) : ''}
</span>
<span style={{ color: 'var(--text-muted)', minWidth: '28px', textAlign: 'right', fontSize: '10px' }}>{d.dt}</span>
<span style={{
color: d.band ? getBandColor(d.dialFrequency / 1000000) : 'var(--text-muted)',
minWidth: '36px', textAlign: 'right', fontSize: '10px'
}}>{d.freq}</span>
<span style={{
color: getMsgColor(d), flex: 1, whiteSpace: 'nowrap',
overflow: 'hidden', textOverflow: 'ellipsis',
}}>{d.message}</span>
</div>
))
)}
</>
<div style={{ fontSize: '12px' }}>Waiting for WSJT-X...</div>
<div style={{ fontSize: '10px', opacity: 0.6, lineHeight: 1.5 }}>
In WSJT-X: Settings → Reporting → UDP Server
<br />
Address: 127.0.0.1 &nbsp; Port: {wsjtxPort || 2237}
</div>
</div>
) : wsjtxTab === 'decodes' ? (
<>
{filteredDecodes.length === 0 ? (
<div style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '16px', fontSize: '11px' }}>
{wsjtxDecodes.length > 0 ? 'No decodes match filter' : 'Listening...'}
</div>
) : (
filteredDecodes.map((d, i) => (
<div
key={d.id || i}
style={{
display: 'flex', gap: '5px', padding: '2px 2px',
borderBottom: '1px solid var(--border-color)',
alignItems: 'baseline',
opacity: d.lowConfidence ? 0.5 : 1,
}}
>
<span style={{ color: 'var(--text-muted)', minWidth: '44px', fontSize: '10px' }}>{d.time}</span>
<span style={{ color: getSnrColor(d.snr), minWidth: '26px', textAlign: 'right', fontSize: '10px' }}>
{d.snr != null ? (d.snr >= 0 ? `+${d.snr}` : d.snr) : ''}
</span>
<span style={{ color: 'var(--text-muted)', minWidth: '24px', textAlign: 'right', fontSize: '10px' }}>{d.dt}</span>
<span style={{
color: d.band ? getBandColor(d.dialFrequency / 1000000) : 'var(--text-muted)',
minWidth: '32px', textAlign: 'right', fontSize: '10px'
}}>{d.freq}</span>
<span style={{
color: getMsgColor(d), flex: 1, whiteSpace: 'nowrap',
overflow: 'hidden', textOverflow: 'ellipsis',
}}>{d.message}</span>
</div>
))
)}
{wsjtxTab === 'qsos' && (
<>
{wsjtxQsos.length === 0 ? (
<div style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '20px', fontSize: '11px' }}>
No QSOs logged yet
</div>
) : (
[...wsjtxQsos].reverse().map((q, i) => (
<div key={i} style={{
display: 'flex', gap: '6px', padding: '3px 0',
borderBottom: '1px solid var(--border-color)', alignItems: 'baseline',
}}>
<span style={{ color: q.band ? getBandColor(q.frequency / 1000000) : 'var(--accent-green)', fontWeight: '600', minWidth: '70px' }}>
{q.dxCall}
</span>
<span style={{ color: 'var(--text-muted)', minWidth: '40px', fontSize: '10px' }}>{q.band}</span>
<span style={{ color: 'var(--text-muted)', minWidth: '30px', fontSize: '10px' }}>{q.mode}</span>
<span style={{ color: 'var(--text-muted)', fontSize: '10px' }}>{q.reportSent}/{q.reportRecv}</span>
{q.dxGrid && <span style={{ color: '#a78bfa', fontSize: '10px' }}>{q.dxGrid}</span>}
</div>
))
)}
</>
</>
) : (
/* QSOs tab */
<>
{wsjtxQsos.length === 0 ? (
<div style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '16px', fontSize: '11px' }}>
No QSOs logged yet
</div>
) : (
[...wsjtxQsos].reverse().map((q, i) => (
<div key={i} style={{
display: 'flex', gap: '5px', padding: '3px 2px',
borderBottom: '1px solid var(--border-color)', alignItems: 'baseline',
}}>
<span style={{
color: q.band ? getBandColor(q.frequency / 1000000) : 'var(--accent-green)',
fontWeight: '600', minWidth: '65px'
}}>{q.dxCall}</span>
<span style={{ color: 'var(--text-muted)', fontSize: '10px' }}>{q.band}</span>
<span style={{ color: 'var(--text-muted)', fontSize: '10px' }}>{q.mode}</span>
<span style={{ color: 'var(--text-muted)', fontSize: '10px' }}>{q.reportSent}/{q.reportRecv}</span>
{q.dxGrid && <span style={{ color: '#a78bfa', fontSize: '10px' }}>{q.dxGrid}</span>}
</div>
))
)}
</div>
</>
)}
</>
)}
</div>
{/* WSJT-X status bar */}
{activeClients.length > 0 && (
<div style={{
fontSize: '9px', color: 'var(--text-muted)',
borderTop: '1px solid var(--border-color)',
paddingTop: '3px', marginTop: '3px',
display: 'flex', justifyContent: 'space-between', flexShrink: 0
}}>
<span>
{activeClients.map(([id, c]) => `${id}${c.version ? ` v${c.version}` : ''}`).join(', ')}
</span>
{primaryClient?.dialFrequency && (
<span style={{ color: '#a78bfa' }}>
{(primaryClient.dialFrequency / 1000000).toFixed(6)} MHz
</span>
)}
</div>
)}
</>
{/* ── WSJT-X status footer ── */}
{panelMode === 'wsjtx' && activeClients.length > 0 && (
<div style={{
fontSize: '9px', color: 'var(--text-muted)',
borderTop: '1px solid var(--border-color)',
paddingTop: '2px', marginTop: '2px',
display: 'flex', justifyContent: 'space-between', flexShrink: 0
}}>
<span>{activeClients.map(([id, c]) => `${id}${c.version ? ` v${c.version}` : ''}`).join(', ')}</span>
{primaryClient?.dialFrequency && (
<span style={{ color: '#a78bfa' }}>{(primaryClient.dialFrequency / 1000000).toFixed(6)} MHz</span>
)}
</>
</div>
)}
</div>
);
};
export default PSKReporterPanel;
export { PSKReporterPanel };

109
src/components/SettingsPanel.jsx
Unescape View File

@ -14,6 +14,7 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
const [lon, setLon] = useState(config?.location?.lon || 0);
const [theme, setTheme] = useState(config?.theme || 'dark');
const [layout, setLayout] = useState(config?.layout || 'modern');
const [timezone, setTimezone] = useState(config?.timezone || '');
const [dxClusterSource, setDxClusterSource] = useState(config?.dxClusterSource || 'dxspider-proxy');
const { t, i18n } = useTranslation();
@ -28,6 +29,7 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
setLon(config.location?.lon || 0);
setTheme(config.theme || 'dark');
setLayout(config.layout || 'modern');
setTimezone(config.timezone || '');
setDxClusterSource(config.dxClusterSource || 'dxspider-proxy');
if (config.location?.lat && config.location?.lon) {
setGridSquare(calculateGridSquare(config.location.lat, config.location.lon));
@ -148,6 +150,7 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
location: { lat: parseFloat(lat), lon: parseFloat(lon) },
theme,
layout,
timezone,
dxClusterSource
});
onClose();
@ -451,6 +454,112 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
</div>
{/* DX Cluster Source */}
<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '8px', color: 'var(--text-muted)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1px' }}>
🕐 Timezone
</label>
<select
value={timezone}
onChange={(e) => setTimezone(e.target.value)}
style={{
width: '100%',
padding: '12px',
background: 'var(--bg-tertiary)',
border: '1px solid var(--border-color)',
borderRadius: '6px',
color: timezone ? 'var(--accent-green)' : 'var(--text-muted)',
fontSize: '14px',
fontFamily: 'JetBrains Mono, monospace',
cursor: 'pointer'
}}
>
<option value="">Auto (browser default)</option>
<optgroup label="North America">
<option value="America/New_York">Eastern (New York)</option>
<option value="America/Chicago">Central (Chicago)</option>
<option value="America/Denver">Mountain (Denver)</option>
<option value="America/Los_Angeles">Pacific (Los Angeles)</option>
<option value="America/Anchorage">Alaska</option>
<option value="Pacific/Honolulu">Hawaii</option>
<option value="America/Phoenix">Arizona (no DST)</option>
<option value="America/Regina">Saskatchewan (no DST)</option>
<option value="America/Halifax">Atlantic (Halifax)</option>
<option value="America/St_Johns">Newfoundland</option>
<option value="America/Toronto">Ontario (Toronto)</option>
<option value="America/Winnipeg">Manitoba (Winnipeg)</option>
<option value="America/Edmonton">Alberta (Edmonton)</option>
<option value="America/Vancouver">BC (Vancouver)</option>
<option value="America/Mexico_City">Mexico City</option>
</optgroup>
<optgroup label="Europe">
<option value="Europe/London">UK (London)</option>
<option value="Europe/Dublin">Ireland (Dublin)</option>
<option value="Europe/Paris">Central Europe (Paris)</option>
<option value="Europe/Berlin">Germany (Berlin)</option>
<option value="Europe/Rome">Italy (Rome)</option>
<option value="Europe/Madrid">Spain (Madrid)</option>
<option value="Europe/Amsterdam">Netherlands (Amsterdam)</option>
<option value="Europe/Brussels">Belgium (Brussels)</option>
<option value="Europe/Stockholm">Sweden (Stockholm)</option>
<option value="Europe/Helsinki">Finland (Helsinki)</option>
<option value="Europe/Athens">Greece (Athens)</option>
<option value="Europe/Bucharest">Romania (Bucharest)</option>
<option value="Europe/Moscow">Russia (Moscow)</option>
<option value="Europe/Warsaw">Poland (Warsaw)</option>
<option value="Europe/Zurich">Switzerland (Zurich)</option>
<option value="Europe/Lisbon">Portugal (Lisbon)</option>
</optgroup>
<optgroup label="Asia & Pacific">
<option value="Asia/Tokyo">Japan (Tokyo)</option>
<option value="Asia/Seoul">Korea (Seoul)</option>
<option value="Asia/Shanghai">China (Shanghai)</option>
<option value="Asia/Hong_Kong">Hong Kong</option>
<option value="Asia/Taipei">Taiwan (Taipei)</option>
<option value="Asia/Singapore">Singapore</option>
<option value="Asia/Kolkata">India (Kolkata)</option>
<option value="Asia/Dubai">UAE (Dubai)</option>
<option value="Asia/Riyadh">Saudi Arabia (Riyadh)</option>
<option value="Asia/Tehran">Iran (Tehran)</option>
<option value="Asia/Bangkok">Thailand (Bangkok)</option>
<option value="Asia/Jakarta">Indonesia (Jakarta)</option>
<option value="Asia/Manila">Philippines (Manila)</option>
<option value="Australia/Sydney">Australia Eastern (Sydney)</option>
<option value="Australia/Adelaide">Australia Central (Adelaide)</option>
<option value="Australia/Perth">Australia Western (Perth)</option>
<option value="Pacific/Auckland">New Zealand (Auckland)</option>
<option value="Pacific/Fiji">Fiji</option>
</optgroup>
<optgroup label="South America">
<option value="America/Sao_Paulo">Brazil (São Paulo)</option>
<option value="America/Argentina/Buenos_Aires">Argentina (Buenos Aires)</option>
<option value="America/Santiago">Chile (Santiago)</option>
<option value="America/Bogota">Colombia (Bogotá)</option>
<option value="America/Lima">Peru (Lima)</option>
<option value="America/Caracas">Venezuela (Caracas)</option>
</optgroup>
<optgroup label="Africa">
<option value="Africa/Cairo">Egypt (Cairo)</option>
<option value="Africa/Johannesburg">South Africa (Johannesburg)</option>
<option value="Africa/Lagos">Nigeria (Lagos)</option>
<option value="Africa/Nairobi">Kenya (Nairobi)</option>
<option value="Africa/Casablanca">Morocco (Casablanca)</option>
</optgroup>
<optgroup label="Other">
<option value="UTC">UTC</option>
<option value="Atlantic/Reykjavik">Iceland (Reykjavik)</option>
<option value="Atlantic/Azores">Azores</option>
<option value="Indian/Maldives">Maldives</option>
<option value="Indian/Mauritius">Mauritius</option>
</optgroup>
</select>
<div style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: '6px' }}>
Set this if your local time shows incorrectly (e.g. same as UTC).
Privacy browsers like Librewolf may spoof your timezone.
{timezone ? '' : ' Currently using browser default.'}
</div>
</div>
{/* DX Cluster Source - original */}
<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '8px', color: 'var(--text-muted)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1px' }}>
{t('station.settings.dx.title')}

2
src/utils/config.js
Unescape View File

@ -16,6 +16,7 @@ export const DEFAULT_CONFIG = {
units: 'imperial', // 'imperial' or 'metric'
theme: 'dark', // 'dark', 'light', 'legacy', or 'retro'
layout: 'modern', // 'modern' or 'classic'
timezone: '', // IANA timezone (e.g. 'America/Regina') — empty = browser default
use12Hour: true,
showSatellites: true,
showPota: true,
@ -104,6 +105,7 @@ export const loadConfig = () => {
units: serverConfig.units || config.units,
theme: serverConfig.theme || config.theme,
layout: serverConfig.layout || config.layout,
timezone: serverConfig.timezone || config.timezone,
use12Hour: serverConfig.timeFormat === '12',
showSatellites: serverConfig.showSatellites ?? config.showSatellites,
showPota: serverConfig.showPota ?? config.showPota,

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.