feat(units): show distances in miles
Everything is computed in kilometres and converted once at display time, in lib/units — storing miles anywhere would give the same number two sources of truth and a rounding error that grows with every hop. The grids capture the unit inside their column definitions, header and formatter both, so a change is published to them the way the date format already is; without that a toggle would only appear after a language change or a restart. The preference is portable, like the other display ones.
This commit is contained in:
@@ -57,6 +57,7 @@ import {
|
||||
import { Combobox } from '@/components/ui/combobox';
|
||||
import { applyAwardRefs, parseAwardRefs as parseManualRefs, spotRefList , withIOTARef, withRDARef } from '@/lib/awardRefs';
|
||||
import { ListRadios, SetActiveRadio } from '../wailsjs/go/main/App';
|
||||
import { formatDistance } from '@/lib/units';
|
||||
import { EventsOn, BrowserOpenURL, WindowMinimise, WindowToggleMaximise, WindowIsMaximised, Quit } from '../wailsjs/runtime/runtime';
|
||||
import type { adif as adifModels, lookup as lookupModels, cat as catModels } from '../wailsjs/go/models';
|
||||
import type { QSOForm, WorkedBeforeView, StationSettingsForm, ListsSettingsForm, ModePresetForm } from '@/types';
|
||||
@@ -6419,7 +6420,7 @@ export default function App() {
|
||||
disabled={disabled}
|
||||
onClick={() => p && goto(p.bearingShort, 'SP')}
|
||||
title={p
|
||||
? `Rotate short-path · ${Math.round(p.distanceShort).toLocaleString()} km`
|
||||
? `Rotate short-path · ${formatDistance(p.distanceShort)}`
|
||||
: (station.my_grid ? 'No remote grid' : 'Set your station grid in Preferences')}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 px-2 py-0.5 transition-colors',
|
||||
@@ -6435,7 +6436,7 @@ export default function App() {
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => p && goto(p.bearingLong, 'LP')}
|
||||
title={p ? `Rotate long-path · ${Math.round(p.distanceLong).toLocaleString()} km` : ''}
|
||||
title={p ? `Rotate long-path · ${formatDistance(p.distanceLong)}` : ''}
|
||||
className={cn(
|
||||
'px-1.5 py-0.5 border-l border-info-border text-[10px] transition-colors',
|
||||
disabled
|
||||
@@ -8570,7 +8571,7 @@ export default function App() {
|
||||
"1.5k" and then appended the unit, giving "1.5kkm" — and even
|
||||
written correctly, "1.5k km" makes a reader do arithmetic to
|
||||
recover a number that was four characters long to begin with. */}
|
||||
<span className="font-mono opacity-80">{o.median_km} km</span>
|
||||
<span className="font-mono opacity-80">{formatDistance(o.median_km)}</span>
|
||||
{/* Out of season is the one an operator must not learn last, so it
|
||||
earns a mark on the badge rather than a line in the tooltip. */}
|
||||
{!o.in_season && <span className="opacity-90">!</span>}
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
// new is being decoded on FT8/FT4/JS8 near here — not that the band is dead.
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Radar, Loader2, X } from 'lucide-react';
|
||||
import { formatDistance } from '@/lib/units';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { markerColour } from '@/lib/spotMarkers';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -186,7 +187,7 @@ export function ChaseNewPanel({ onPick, onClose }: Props) {
|
||||
title={[
|
||||
s.country,
|
||||
s.grid,
|
||||
s.dist_km ? `${s.dist_km} km` : '',
|
||||
s.dist_km ? formatDistance(s.dist_km) : '',
|
||||
s.freq_hz ? `${(s.freq_hz / 1000).toFixed(1)} kHz` : '',
|
||||
].filter(Boolean).join(' · ')}
|
||||
>
|
||||
|
||||
@@ -15,6 +15,7 @@ import { cleanSpotter, inferSpotMode, spotStatusKey } from '@/lib/spot';
|
||||
import { markerColour } from '@/lib/spotMarkers';
|
||||
import { applySpotDisplay, readSpotDisplayOptions } from '@/lib/spotDisplay';
|
||||
import { loadLocal, loadRemote, saveState, seedLocal, whenGridPrefsReady } from '@/lib/gridPrefs';
|
||||
import { distanceUnit, distanceValue, subscribeDistanceUnit } from '@/lib/units';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
|
||||
type TFn = (key: string, vars?: Record<string, string | number>) => string;
|
||||
@@ -443,8 +444,13 @@ const makeColCatalog = (t: TFn): ColEntry[] => [
|
||||
},
|
||||
{
|
||||
group: 'Geo', label: t('clg2.c.distance_km'), colId: 'distance_km',
|
||||
headerName: t('clg2.h.distance_km'), field: 'distance_km' as any, width: 80, type: 'rightAligned', cellClass: 'font-mono',
|
||||
valueFormatter: (p) => p.value ? String(p.value) : '',
|
||||
// The header carries the unit, so the cells stay bare numbers and the
|
||||
// column still sorts on the km the backend sent — converting the VALUE
|
||||
// would sort miles as if they were kilometres either way, but it would
|
||||
// also round twice.
|
||||
headerName: t('clg2.h.distance_km') + ' (' + distanceUnit() + ')',
|
||||
field: 'distance_km' as any, width: 90, type: 'rightAligned', cellClass: 'font-mono',
|
||||
valueFormatter: (p) => p.value ? String(distanceValue(p.value)) : '',
|
||||
comparator: (a, b) => (a ?? 0) - (b ?? 0),
|
||||
},
|
||||
{
|
||||
@@ -523,7 +529,9 @@ export function ClusterGrid({ rows, spotStatus, onSpotClick, onSpotSelect }: Pro
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
|
||||
// Localized column catalog — rebuilt when the language changes.
|
||||
const COL_CATALOG = useMemo(() => makeColCatalog(t), [t]);
|
||||
const [distUnit, setDistUnit] = useState(distanceUnit);
|
||||
useEffect(() => subscribeDistanceUnit(() => setDistUnit(distanceUnit())), []);
|
||||
const COL_CATALOG = useMemo(() => makeColCatalog(t), [t, distUnit]);
|
||||
|
||||
// A rebuild makes AG Grid re-apply every colDef hide/width DEFAULT and fire the
|
||||
// matching column events. Without this guard those events were persisted, so a
|
||||
|
||||
@@ -4,6 +4,7 @@ import 'leaflet/dist/leaflet.css';
|
||||
import { nightPolygon } from '../lib/greyline';
|
||||
import { gridToLatLon, gridSquareBounds, greatCirclePoints, pathBetween, destinationPoint } from '@/lib/maidenhead';
|
||||
import { writeUiPref } from '@/lib/uiPref';
|
||||
import { formatDistance } from '@/lib/units';
|
||||
|
||||
// Persisted free-pan view of the world map (when auto-zoom is off).
|
||||
function loadMapView(): { lat: number; lon: number; zoom: number } | null {
|
||||
@@ -446,8 +447,8 @@ export function WorldMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, b
|
||||
</button>
|
||||
{path && (
|
||||
<div className="absolute bottom-1 left-1 z-[500] rounded-md bg-card/90 backdrop-blur px-2 py-1 text-[11px] font-mono shadow border border-border pointer-events-none">
|
||||
<div><span className="text-muted-foreground">Dist</span> {Math.round(path.distanceShort).toLocaleString()} km
|
||||
<span className="text-muted-foreground"> · LP</span> {Math.round(path.distanceLong).toLocaleString()} km</div>
|
||||
<div><span className="text-muted-foreground">Dist</span> {formatDistance(path.distanceShort)}
|
||||
<span className="text-muted-foreground"> · LP</span> {formatDistance(path.distanceLong)}</div>
|
||||
<div><span className="text-muted-foreground">Az SP</span> {Math.round(path.bearingShort)}°
|
||||
<span className="text-muted-foreground"> · LP</span> {Math.round(path.bearingLong)}°</div>
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,7 @@ import { formatDateTimeUTC, formatDateOnly, getDateFormat, subscribeDateFormat }
|
||||
import { AgGridReact } from 'ag-grid-react';
|
||||
import { Columns3, FilterX, ListChecks } from 'lucide-react';
|
||||
import type { QSOForm } from '@/types';
|
||||
import { distanceUnit, distanceValue, subscribeDistanceUnit } from '@/lib/units';
|
||||
import { QSOContextMenu, type QSOMenuState } from './QSOContextMenu';
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
|
||||
@@ -177,8 +178,9 @@ export const makeColCatalog = (t: TFn, myGrid?: string): ColEntry[] => [
|
||||
{ group: 'Contacted', label: t('rqg.c.lon'), colId: 'lon', headerName: t('rqg.c.lon'), field: 'lon' as any, width: 90, type: 'rightAligned', cellClass: 'font-mono' },
|
||||
// Derived, not stored: computed from the two locations at display time, like
|
||||
// the cluster grid's own distance column.
|
||||
{ group: 'Contacted', label: t('rqg.c.distance_km'), colId: 'distance_km', headerName: t('rqg.h.distance_km'), width: 90, type: 'rightAligned', cellClass: 'font-mono',
|
||||
valueGetter: (p) => qsoDistanceKm(p.data, myGrid),
|
||||
{ group: 'Contacted', label: t('rqg.c.distance_km'), colId: 'distance_km',
|
||||
headerName: t('rqg.h.distance_km') + ' (' + distanceUnit() + ')', width: 95, type: 'rightAligned', cellClass: 'font-mono',
|
||||
valueGetter: (p) => { const km = qsoDistanceKm(p.data, myGrid); return km ? distanceValue(km) : km; },
|
||||
comparator: (a, b) => (a ?? 0) - (b ?? 0), defaultVisible: true },
|
||||
{ group: 'Contacted', label: t('rqg.c.email'), colId: 'email', headerName: t('rqg.c.email'), field: 'email' as any, width: 180 },
|
||||
{ group: 'Contacted', label: t('rqg.c.web'), colId: 'web', headerName: t('rqg.c.web'), field: 'web' as any, width: 180 },
|
||||
@@ -335,7 +337,9 @@ export function RecentQSOsGrid({ rows, myGrid, selectAllSignal, selectRowSignal,
|
||||
// inside the column definitions, so nothing else would notice.
|
||||
const [dateFmt, setDateFmt] = useState(getDateFormat);
|
||||
useEffect(() => subscribeDateFormat(() => setDateFmt(getDateFormat())), []);
|
||||
const COL_CATALOG = useMemo(() => makeColCatalog(t, myGrid), [t, myGrid, dateFmt]);
|
||||
const [distUnit, setDistUnit] = useState(distanceUnit);
|
||||
useEffect(() => subscribeDistanceUnit(() => setDistUnit(distanceUnit())), []);
|
||||
const COL_CATALOG = useMemo(() => makeColCatalog(t, myGrid), [t, myGrid, dateFmt, distUnit]);
|
||||
|
||||
// Right-click: if the clicked row isn't already part of the selection,
|
||||
// select just it; then open the bulk-action menu on the whole selection.
|
||||
|
||||
@@ -80,6 +80,7 @@ import {
|
||||
} from '@/components/ui/select';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { writeUiPref } from '@/lib/uiPref';
|
||||
import { setUseMiles } from '@/lib/units';
|
||||
import { getDateFormat, setDateFormat, type DateFormat } from '@/lib/dateFormat';
|
||||
import { useI18n, FlagGB, FlagFR, type Lang } from '@/lib/i18n';
|
||||
import { useTheme, CONCRETE_THEMES, type ThemeChoice } from '@/lib/theme';
|
||||
@@ -1747,6 +1748,7 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
|
||||
const [startEqEnd, setStartEqEnd] = useState(() => localStorage.getItem('opslog.startEqualsEnd') === '1');
|
||||
const [lookupOnBlur, setLookupOnBlur] = useState(() => localStorage.getItem('opslog.lookupOnBlur') === '1');
|
||||
const [groupDigital, setGroupDigital] = useState(() => localStorage.getItem('opslog.groupDigitalSlots') === '1');
|
||||
const [milesUnit, setMilesUnit] = useState(() => localStorage.getItem('opslog.distanceMiles') === '1');
|
||||
const [clusterWorkedSameSlot, setClusterWorkedSameSlot] = useState(() => localStorage.getItem('opslog.clusterWorkedSameSlot') === '1');
|
||||
// Declared HERE and not in ClusterPanel: that renderer is called as a plain
|
||||
// function by the PANELS map, so it must stay hooks-free.
|
||||
@@ -7221,6 +7223,13 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
|
||||
<Checkbox checked={groupDigital} onCheckedChange={(c) => { const v = !!c; setGroupDigital(v); writeUiPref('opslog.groupDigitalSlots', v ? '1' : '0'); }} />
|
||||
{t('gen.groupDigital')} <span className="text-xs text-muted-foreground">{t('gen.groupDigitalHint')}</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
{/* Distances are computed in km everywhere and converted at display
|
||||
time — see lib/units. Changing this repaints the columns that
|
||||
already carry a distance; nothing stored moves. */}
|
||||
<Checkbox checked={milesUnit} onCheckedChange={(c) => { const v = !!c; setMilesUnit(v); setUseMiles(v); }} />
|
||||
{t('gen.miles')} <span className="text-xs text-muted-foreground">{t('gen.milesHint')}</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<Checkbox checked={checkUpdates} onCheckedChange={(c) => { const v = !!c; setCheckUpdates(v); writeUiPref('opslog.checkUpdates', v ? '1' : '0'); }} />
|
||||
{t('gen.checkUpdates')} <span className="text-xs text-muted-foreground">{t('gen.checkUpdatesHint')}</span>
|
||||
|
||||
@@ -128,6 +128,7 @@ const en: Dict = {
|
||||
'mx.tipDxConf': 'Entity confirmed (other callsign)', 'mx.tipDxWork': 'Entity worked (other callsign)',
|
||||
'mx.tipNone': 'Never worked', 'mx.tipClick': 'click to list the QSOs',
|
||||
'icmp.scopeNoStream': 'This radio does not send its scope over CI-V — its own screen still works.',
|
||||
'gen.miles': 'Distances in miles', 'gen.milesHint': '(instead of kilometres)',
|
||||
'qslm.qrzTitle': 'Open this callsign on QRZ.com',
|
||||
'qslm.lotwAllCalls': 'All my callsigns',
|
||||
'qslm.lotwAllCallsTitle': "Download the confirmations of every callsign on the LoTW account, not just this profile's. A QSO made as F4BPO/P or TM2Q is confirmed at LoTW but never reaches an F4BPO profile without this.",
|
||||
@@ -623,6 +624,7 @@ const fr: Dict = {
|
||||
'mx.tipDxConf': 'Entité confirmée (autre indicatif)', 'mx.tipDxWork': 'Entité contactée (autre indicatif)',
|
||||
'mx.tipNone': 'Jamais contacté', 'mx.tipClick': 'cliquer pour lister les QSO',
|
||||
'icmp.scopeNoStream': "Cette radio n'envoie pas son scope en CI-V — son propre écran fonctionne toujours.",
|
||||
'gen.miles': 'Distances en miles', 'gen.milesHint': '(au lieu des kilomètres)',
|
||||
'qslm.qrzTitle': 'Ouvrir cet indicatif sur QRZ.com',
|
||||
'qslm.lotwAllCalls': 'Tous mes indicatifs',
|
||||
'qslm.lotwAllCallsTitle': "Télécharger les confirmations de tous les indicatifs du compte LoTW, pas seulement celui du profil. Un QSO fait en F4BPO/P ou TM2Q est confirmé chez LoTW mais n'atteint jamais un profil F4BPO sans cette option.",
|
||||
|
||||
@@ -40,6 +40,7 @@ const PORTABLE_KEYS = [
|
||||
'opslog.clusterFilterSource', 'opslog.clusterGroup', 'opslog.clusterBands',
|
||||
'opslog.clusterLockBand', 'opslog.clusterLockMode', 'opslog.clusterStatusFilter',
|
||||
'opslog.clusterModeFilter', 'opslog.clusterSearch', 'opslog.clusterHideWorked',
|
||||
'opslog.distanceMiles', // distances shown in statute miles rather than km
|
||||
'opslog.activeTab', // last selected tab
|
||||
'opslog.mainSplit', // Main tab: width share of the left pane (percent) — legacy, read once to seed mainShares
|
||||
'opslog.mainShares', // Main tab: column shares per column count, as {2:[..],3:[..],4:[..]}
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
// Distance units.
|
||||
//
|
||||
// Everything is COMPUTED in kilometres — the great-circle maths, the backend's
|
||||
// distance_km on a spot, the map's path lengths — and converted once, here, at
|
||||
// display time. Storing miles anywhere would mean two sources of truth for the
|
||||
// same number and a rounding error that grows with every hop.
|
||||
//
|
||||
// The preference is portable (see lib/uiPref): an operator who works in miles
|
||||
// works in miles on every machine they copy their folder to.
|
||||
import { writeUiPref } from '@/lib/uiPref';
|
||||
|
||||
export const KEY_MILES = 'opslog.distanceMiles';
|
||||
const KM_PER_MILE = 1.609344; // statute miles, the ones a US licence is used in
|
||||
|
||||
export function useMiles(): boolean {
|
||||
try { return localStorage.getItem(KEY_MILES) === '1'; } catch { return false; }
|
||||
}
|
||||
|
||||
export function setUseMiles(on: boolean): void {
|
||||
writeUiPref(KEY_MILES, on ? '1' : '0');
|
||||
listeners.forEach((l) => l());
|
||||
}
|
||||
|
||||
// subscribeDistanceUnit notifies on a change. The grids capture the unit inside
|
||||
// their column definitions (header text and formatter both), so without this a
|
||||
// toggle would only show up on the next language change or restart.
|
||||
const listeners = new Set<() => void>();
|
||||
export function subscribeDistanceUnit(fn: () => void): () => void {
|
||||
listeners.add(fn);
|
||||
return () => { listeners.delete(fn); };
|
||||
}
|
||||
|
||||
// distanceValue converts a distance in km to the operator's unit, rounded to a
|
||||
// whole unit — the precision the inputs actually justify (a 4-character grid is
|
||||
// a square tens of kilometres wide).
|
||||
export function distanceValue(km: number): number {
|
||||
if (!isFinite(km)) return 0;
|
||||
return Math.round(useMiles() ? km / KM_PER_MILE : km);
|
||||
}
|
||||
|
||||
// distanceUnit is the short label: "km" or "mi".
|
||||
export function distanceUnit(): string {
|
||||
return useMiles() ? 'mi' : 'km';
|
||||
}
|
||||
|
||||
// formatDistance is value + unit, thousands-separated: "12 345 km".
|
||||
export function formatDistance(km: number): string {
|
||||
return `${distanceValue(km).toLocaleString()} ${distanceUnit()}`;
|
||||
}
|
||||
Reference in New Issue
Block a user