From f9a420cb82892d8984382fb99f7f34e929a6ee49 Mon Sep 17 00:00:00 2001 From: accius Date: Sat, 31 Jan 2026 16:35:44 -0500 Subject: [PATCH] N3DD Requests added persistence on views added dropdown for map view Toggle fullscreen --- public/index.html | 183 ++++++++++++++++++++++++++++++++++++---------- 1 file changed, 145 insertions(+), 38 deletions(-) diff --git a/public/index.html b/public/index.html index 289a8cf..c0abb4b 100644 --- a/public/index.html +++ b/public/index.html @@ -1398,9 +1398,30 @@ const dxPathsMarkersRef = useRef([]); const satMarkersRef = useRef([]); const satTracksRef = useRef([]); - const [mapStyle, setMapStyle] = useState('dark'); - const [showSatellites, setShowSatellites] = useState(true); - const [showDXPaths, setShowDXPaths] = useState(true); + + // Load map view settings from localStorage + const getStoredMapSettings = () => { + try { + const stored = localStorage.getItem('openhamclock_mapSettings'); + return stored ? JSON.parse(stored) : {}; + } catch (e) { return {}; } + }; + const storedSettings = getStoredMapSettings(); + + const [mapStyle, setMapStyle] = useState(storedSettings.mapStyle || 'dark'); + const [showSatellites, setShowSatellites] = useState(storedSettings.showSatellites !== false); + const [showDXPaths, setShowDXPaths] = useState(storedSettings.showDXPaths !== false); + + // Save map view settings to localStorage when they change + useEffect(() => { + try { + localStorage.setItem('openhamclock_mapSettings', JSON.stringify({ + mapStyle, + showSatellites, + showDXPaths + })); + } catch (e) { console.error('Failed to save map settings:', e); } + }, [mapStyle, showSatellites, showDXPaths]); // Initialize map useEffect(() => { @@ -1816,18 +1837,30 @@
- {/* Map style selector */} -
+ {/* Map style dropdown */} + {/* Satellite toggle */} {/* DX Paths toggle */} @@ -1859,7 +1892,7 @@ style={{ position: 'absolute', top: '10px', - left: '155px', + left: '118px', background: showDXPaths ? 'rgba(68, 136, 255, 0.2)' : 'rgba(0, 0, 0, 0.7)', border: `1px solid ${showDXPaths ? '#4488ff' : '#666'}`, color: showDXPaths ? '#4488ff' : '#888', @@ -1874,7 +1907,7 @@ gap: '4px' }} > - 📡 {showDXPaths ? 'DX ON' : 'DX OFF'} + 📡 {showDXPaths ? 'DX' : 'DX'}
); @@ -1883,7 +1916,7 @@ // ============================================ // UI COMPONENTS // ============================================ - const Header = ({ callsign, uptime, version, onSettingsClick }) => ( + const Header = ({ callsign, uptime, version, onSettingsClick, onFullscreenToggle, isFullscreen }) => (
{callsign}
-
+
UPTIME: {uptime} v{version} +
@@ -2182,7 +2230,7 @@ config, currentTime, utcTime, utcDate, localTime, localDate, deGrid, dxGrid, deSunTimes, dxSunTimes, dxLocation, onDXChange, spaceWeather, bandConditions, potaSpots, dxCluster, dxPaths, contests, propagation, mySpots, satellites, - onSettingsClick + onSettingsClick, onFullscreenToggle, isFullscreen }) => { 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); @@ -2446,21 +2494,36 @@ {/* BOTTOM - Footer */}
- OpenHamClock v3.3.0 • In memory of Elwood Downey WB0OEW + OpenHamClock v3.5.1 • In memory of Elwood Downey WB0OEW Click map to set DX • 73 de {config.callsign} - +
+ + +
); @@ -2800,6 +2863,33 @@ const [uptime, setUptime] = useState('0d 0h 0m'); const [dxLocation, setDxLocation] = useState(config.defaultDX); const [showSettings, setShowSettings] = useState(false); + const [isFullscreen, setIsFullscreen] = useState(false); + + // Fullscreen toggle handler + const handleFullscreenToggle = useCallback(() => { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen().then(() => { + setIsFullscreen(true); + }).catch(err => { + console.error('Fullscreen error:', err); + }); + } else { + document.exitFullscreen().then(() => { + setIsFullscreen(false); + }).catch(err => { + console.error('Exit fullscreen error:', err); + }); + } + }, []); + + // Listen for fullscreen changes (e.g., user presses Escape) + useEffect(() => { + const handleFullscreenChange = () => { + setIsFullscreen(!!document.fullscreenElement); + }; + document.addEventListener('fullscreenchange', handleFullscreenChange); + return () => document.removeEventListener('fullscreenchange', handleFullscreenChange); + }, []); // Apply theme on initial load useEffect(() => { @@ -2884,6 +2974,8 @@ mySpots={mySpots} satellites={satellites} onSettingsClick={() => setShowSettings(true)} + onFullscreenToggle={handleFullscreenToggle} + isFullscreen={isFullscreen} /> {config.callsign} - v3.3.0 + v3.5.1
{/* UTC Clock */} @@ -2987,13 +3079,28 @@
SSN {spaceWeather.data?.sunspotNumber || '--'}
- {/* Settings Button */} - + {/* Settings & Fullscreen Buttons */} +
+ + +
{/* LEFT SIDEBAR */}