fix(chase-new): one badge, filters, a way in and a way out — and the frequency
Four things from an operator's first look at the panel, and one of them was mine. The frequency column showed "—" on every row. pskr.Spot.FreqHz was declared and documented in one edit and never assigned in the next, so the payload's "f" was parsed and dropped. A click therefore filled the callsign and left the rig where it was, which is half the point of the panel. Assigned, with a test that runs a real payload through and checks the value survives into the Spot — the field being declared is what made it look done. A row now carries ONE indication instead of stacking them. A station can be a new band and a new prefix at once; the row says the first that matters, in the order that would make an operator leave what they are doing: entity, band, mode, slot, then prefix, then square. Two badges on one line made the list unreadable at a glance, which is the only thing it is for. Each category has a filter chip in the header, in its own colour, remembered across sessions. A toolbar button shows the panel and a cross closes it — the same split the Super Check Partial panel uses, where the setting decides whether the feature exists and the button whether it is on screen. The panel is wider and the country column gets what is left, which is more than it was now that a row carries one badge.
This commit is contained in:
@@ -3,15 +3,16 @@
|
||||
//
|
||||
// A DX cluster tells you what somebody chose to spot. This tells you what is
|
||||
// actually being decoded in your own region, which is a different and often
|
||||
// larger set: nobody spots the FT8 caller running 10 watts from a rare square.
|
||||
// larger set: nobody spots the FT8 caller running ten watts from a rare square.
|
||||
//
|
||||
// The one thing an operator has to know, and the reason for the line at the
|
||||
// bottom: PSK Reporter carries DIGITAL MODES ONLY. An empty panel means nothing
|
||||
// new is being decoded on FT8/FT4/JS8 near here — not that the band is dead.
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Radar, Loader2 } from 'lucide-react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Radar, Loader2, X } from 'lucide-react';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { markerColour } from '@/lib/spotMarkers';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { GetChaseNewSpots } from '../../wailsjs/go/main/App';
|
||||
|
||||
export interface ChaseNewSpot {
|
||||
@@ -35,25 +36,59 @@ interface Props {
|
||||
// Tuning the rig to a row is the whole point — a station heard on 14.074 is
|
||||
// only useful if you can get there in one click.
|
||||
onPick?: (s: ChaseNewSpot) => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
// statusLabel maps the backend's vocabulary — the cluster's own — to a short
|
||||
// badge. Kept to the same words the DX cluster list uses: an operator should not
|
||||
// have to learn two names for one idea.
|
||||
function statusKey(s: ChaseNewSpot): string | null {
|
||||
// The categories, in priority order. A station can be several at once — a new
|
||||
// band AND a new prefix — but a row shows ONE, the first that matches here.
|
||||
//
|
||||
// The order is by what would make an operator leave what they are doing: a new
|
||||
// entity beats a new band on it, which beats a new mode, which beats a new slot;
|
||||
// a prefix or a square is worth knowing but never worth interrupting a QSO for.
|
||||
// Two badges on one line also made the list unreadable at a glance, which is the
|
||||
// only thing this panel is for.
|
||||
type Category = 'dxcc' | 'band' | 'mode' | 'slot' | 'pfx' | 'grid';
|
||||
|
||||
const CATEGORIES: Array<{ key: Category; labelKey: string; colour: string }> = [
|
||||
{ key: 'dxcc', labelKey: 'clg2.newDxcc', colour: 'var(--danger)' },
|
||||
{ key: 'band', labelKey: 'clg2.newBand', colour: 'var(--danger)' },
|
||||
{ key: 'mode', labelKey: 'clg2.newMode', colour: 'var(--danger)' },
|
||||
{ key: 'slot', labelKey: 'clg2.newSlot', colour: 'var(--danger)' },
|
||||
{ key: 'pfx', labelKey: 'clg2.newPfx', colour: markerColour('new_pfx') },
|
||||
{ key: 'grid', labelKey: 'clg2.newGrid', colour: markerColour('new_grid') },
|
||||
];
|
||||
|
||||
// categoryOf is the single thing a row says about a station.
|
||||
function categoryOf(s: ChaseNewSpot): Category | null {
|
||||
switch (s.status) {
|
||||
case 'new': return 'clg2.newDxcc';
|
||||
case 'new-band': return 'clg2.newBand';
|
||||
case 'new-mode': return 'clg2.newMode';
|
||||
case 'new-slot': return 'clg2.newSlot';
|
||||
default: return null;
|
||||
case 'new': return 'dxcc';
|
||||
case 'new-band': return 'band';
|
||||
case 'new-mode': return 'mode';
|
||||
case 'new-slot': return 'slot';
|
||||
}
|
||||
if (s.new_pfx) return 'pfx';
|
||||
if (s.new_grid) return 'grid';
|
||||
return null;
|
||||
}
|
||||
|
||||
export function ChaseNewPanel({ onPick }: Props) {
|
||||
const FILTER_KEY = 'opslog.chaseNewFilters';
|
||||
|
||||
function loadFilters(): Set<Category> {
|
||||
try {
|
||||
const raw = localStorage.getItem(FILTER_KEY);
|
||||
if (raw) {
|
||||
const list = JSON.parse(raw) as Category[];
|
||||
if (Array.isArray(list)) return new Set(list);
|
||||
}
|
||||
} catch { /* a corrupt preference is not worth a broken panel */ }
|
||||
return new Set(CATEGORIES.map((c) => c.key));
|
||||
}
|
||||
|
||||
export function ChaseNewPanel({ onPick, onClose }: Props) {
|
||||
const { t } = useI18n();
|
||||
const [spots, setSpots] = useState<ChaseNewSpot[]>([]);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [on, setOn] = useState<Set<Category>>(loadFilters);
|
||||
|
||||
// Polled rather than pushed: the feed can deliver several a second under an
|
||||
// opening, and an event per row would be a redraw per row for a list nobody
|
||||
@@ -71,14 +106,60 @@ export function ChaseNewPanel({ onPick }: Props) {
|
||||
return () => { alive = false; window.clearInterval(id); };
|
||||
}, []);
|
||||
|
||||
function toggle(k: Category) {
|
||||
setOn((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(k)) next.delete(k); else next.add(k);
|
||||
try { localStorage.setItem(FILTER_KEY, JSON.stringify([...next])); } catch { /* not worth failing over */ }
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
const shown = useMemo(() => {
|
||||
return spots.filter((s) => {
|
||||
const c = categoryOf(s);
|
||||
return c !== null && on.has(c);
|
||||
});
|
||||
}, [spots, on]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col rounded-md border border-border bg-card overflow-hidden">
|
||||
<div className="flex items-center gap-2 border-b border-border px-2 py-1.5">
|
||||
<Radar className="size-3.5 text-primary" />
|
||||
<span className="text-xs font-semibold">{t('chn.title')}</span>
|
||||
<span className="ml-auto text-[10px] text-muted-foreground">
|
||||
{spots.length > 0 ? t('chn.count', { n: spots.length }) : ''}
|
||||
<Radar className="size-3.5 shrink-0 text-primary" />
|
||||
<span className="shrink-0 text-xs font-semibold">{t('chn.title')}</span>
|
||||
|
||||
{/* Filters, in the same order and colours as the badges they hide. */}
|
||||
<div className="flex flex-1 flex-wrap items-center gap-1">
|
||||
{CATEGORIES.map((c) => (
|
||||
<button
|
||||
key={c.key}
|
||||
type="button"
|
||||
onClick={() => toggle(c.key)}
|
||||
title={t('chn.filterHint')}
|
||||
className={cn(
|
||||
'rounded border px-1 py-px text-[9px] font-bold uppercase tracking-wide transition-colors',
|
||||
on.has(c.key) ? 'border-transparent' : 'border-border text-muted-foreground opacity-50',
|
||||
)}
|
||||
style={on.has(c.key) ? { color: c.colour, borderColor: c.colour } : undefined}
|
||||
>
|
||||
{t(c.labelKey).replace(/^(NEW|NOUV)\s+/i, '')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<span className="shrink-0 text-[10px] text-muted-foreground">
|
||||
{loaded ? t('chn.count', { n: shown.length }) : ''}
|
||||
</span>
|
||||
{onClose && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
title={t('chn.close')}
|
||||
className="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
@@ -86,33 +167,38 @@ export function ChaseNewPanel({ onPick }: Props) {
|
||||
<div className="flex items-center justify-center gap-2 p-3 text-[11px] text-muted-foreground">
|
||||
<Loader2 className="size-3 animate-spin" /> {t('chn.loading')}
|
||||
</div>
|
||||
) : spots.length === 0 ? (
|
||||
<p className="p-3 text-[11px] text-muted-foreground leading-relaxed">{t('chn.empty')}</p>
|
||||
) : shown.length === 0 ? (
|
||||
<p className="p-3 text-[11px] text-muted-foreground leading-relaxed">
|
||||
{spots.length === 0 ? t('chn.empty') : t('chn.allFiltered')}
|
||||
</p>
|
||||
) : (
|
||||
<div className="divide-y divide-border/60">
|
||||
{spots.map((s, i) => {
|
||||
const sk = statusKey(s);
|
||||
{shown.map((s, i) => {
|
||||
const c = categoryOf(s);
|
||||
const def = CATEGORIES.find((x) => x.key === c);
|
||||
return (
|
||||
<button
|
||||
key={`${s.call}-${s.band}-${s.mode}-${i}`}
|
||||
type="button"
|
||||
onClick={() => onPick?.(s)}
|
||||
className="flex w-full items-center gap-2 px-2 py-1 text-left text-[11px] hover:bg-accent/40"
|
||||
className="flex w-full items-center gap-1.5 px-2 py-1 text-left text-[11px] hover:bg-accent/40"
|
||||
title={[s.country, s.grid, s.dist_km ? `${s.dist_km} km` : ''].filter(Boolean).join(' · ')}
|
||||
>
|
||||
<span className="font-mono font-bold w-24 truncate">{s.call}</span>
|
||||
<span className="font-mono text-muted-foreground w-12">{s.band}</span>
|
||||
<span className="text-muted-foreground w-10 truncate">{s.mode}</span>
|
||||
<span className="font-mono text-muted-foreground w-16 text-right">
|
||||
<span className="w-[84px] shrink-0 truncate font-mono font-bold">{s.call}</span>
|
||||
<span className="w-9 shrink-0 font-mono text-muted-foreground">{s.band}</span>
|
||||
<span className="w-10 shrink-0 truncate text-muted-foreground">{s.mode}</span>
|
||||
<span className="w-[52px] shrink-0 text-right font-mono text-muted-foreground">
|
||||
{s.freq_hz ? (s.freq_hz / 1000).toFixed(1) : '—'}
|
||||
</span>
|
||||
<span className="flex-1 truncate text-muted-foreground">{s.country ?? ''}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
{sk && <span className="font-bold" style={{ color: 'var(--danger)' }}>{t(sk)}</span>}
|
||||
{s.new_pfx && <span style={{ color: markerColour('new_pfx') }}>{t('clg2.newPfx')}</span>}
|
||||
{s.new_grid && <span style={{ color: markerColour('new_grid') }}>{t('clg2.newGrid')}</span>}
|
||||
{s.lotw && <span className="text-[9px] text-info" title="LoTW">L</span>}
|
||||
</span>
|
||||
{/* The country gets whatever is left, and there is more of it
|
||||
now that a row carries one badge instead of three. */}
|
||||
<span className="min-w-0 flex-1 truncate text-muted-foreground">{s.country ?? ''}</span>
|
||||
{def && (
|
||||
<span className="shrink-0 text-[9px] font-bold" style={{ color: def.colour }}>
|
||||
{t(def.labelKey)}
|
||||
</span>
|
||||
)}
|
||||
{s.lotw && <span className="shrink-0 text-[9px] text-info" title="LoTW">L</span>}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user