|
|
|
@ -9,6 +9,7 @@ import { LANGUAGES } from '../lang/i18n.js';
|
|
|
|
|
|
|
|
|
|
|
|
export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
|
|
|
|
export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
|
|
|
|
const [callsign, setCallsign] = useState(config?.callsign || '');
|
|
|
|
const [callsign, setCallsign] = useState(config?.callsign || '');
|
|
|
|
|
|
|
|
const [callsignSize, setCallsignSize] = useState(config?.callsignSize || 1.0);
|
|
|
|
const [gridSquare, setGridSquare] = useState('');
|
|
|
|
const [gridSquare, setGridSquare] = useState('');
|
|
|
|
const [lat, setLat] = useState(config?.location?.lat || 0);
|
|
|
|
const [lat, setLat] = useState(config?.location?.lat || 0);
|
|
|
|
const [lon, setLon] = useState(config?.location?.lon || 0);
|
|
|
|
const [lon, setLon] = useState(config?.location?.lon || 0);
|
|
|
|
@ -25,6 +26,7 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
if (config) {
|
|
|
|
if (config) {
|
|
|
|
setCallsign(config.callsign || '');
|
|
|
|
setCallsign(config.callsign || '');
|
|
|
|
|
|
|
|
setCallsignSize(config.callsignSize || 1.0)
|
|
|
|
setLat(config.location?.lat || 0);
|
|
|
|
setLat(config.location?.lat || 0);
|
|
|
|
setLon(config.location?.lon || 0);
|
|
|
|
setLon(config.location?.lon || 0);
|
|
|
|
setTheme(config.theme || 'dark');
|
|
|
|
setTheme(config.theme || 'dark');
|
|
|
|
@ -147,6 +149,7 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
|
|
|
|
onSave({
|
|
|
|
onSave({
|
|
|
|
...config,
|
|
|
|
...config,
|
|
|
|
callsign: callsign.toUpperCase(),
|
|
|
|
callsign: callsign.toUpperCase(),
|
|
|
|
|
|
|
|
callsignSize: callsignSize,
|
|
|
|
location: { lat: parseFloat(lat), lon: parseFloat(lon) },
|
|
|
|
location: { lat: parseFloat(lat), lon: parseFloat(lon) },
|
|
|
|
theme,
|
|
|
|
theme,
|
|
|
|
layout,
|
|
|
|
layout,
|
|
|
|
@ -302,6 +305,35 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* Callsign Size*/}
|
|
|
|
|
|
|
|
<div style={{ marginBottom: '20px'}}>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<label style={{ display: 'block', marginBottom: '6px', color: 'var(--text-muted)', fontSize: '11px', textTransform: 'uppercase' }}>
|
|
|
|
|
|
|
|
{t('station.settings.callsignSize')}
|
|
|
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
|
|
|
type="number"
|
|
|
|
|
|
|
|
step="0.1"
|
|
|
|
|
|
|
|
value={isNaN(lat) ? '' : callsignSize}
|
|
|
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
|
|
|
if (e.target.value >= 0.1 && e.target.value <= 2.0) {
|
|
|
|
|
|
|
|
setCallsignSize(e.target.value)
|
|
|
|
|
|
|
|
}}}
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
width: '100%',
|
|
|
|
|
|
|
|
padding: '10px',
|
|
|
|
|
|
|
|
background: 'var(--bg-tertiary)',
|
|
|
|
|
|
|
|
border: '1px solid var(--border-color)',
|
|
|
|
|
|
|
|
borderRadius: '6px',
|
|
|
|
|
|
|
|
color: 'var(--text-primary)',
|
|
|
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
|
|
|
fontFamily: 'JetBrains Mono, monospace',
|
|
|
|
|
|
|
|
boxSizing: 'border-box'
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Grid Square */}
|
|
|
|
{/* Grid Square */}
|
|
|
|
<div style={{ marginBottom: '20px' }}>
|
|
|
|
<div style={{ marginBottom: '20px' }}>
|
|
|
|
<label style={{ display: 'block', marginBottom: '6px', color: 'var(--text-muted)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1px' }}>
|
|
|
|
<label style={{ display: 'block', marginBottom: '6px', color: 'var(--text-muted)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1px' }}>
|
|
|
|
|