139 lines
7.3 KiB
TypeScript
139 lines
7.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { Antenna, X, ListFilter } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useI18n } from '@/lib/i18n';
|
|
|
|
export type AGAntenna = { index: number; name: string; bands?: number };
|
|
export type AGStatus = {
|
|
connected: boolean; host?: string; last_error?: string;
|
|
port_a: number; port_b: number; tx_a?: boolean; tx_b?: boolean;
|
|
antennas: AGAntenna[];
|
|
};
|
|
|
|
// AG_BAND_BITS maps a band name to its bit in the 4O3A Antenna Genius band
|
|
// bitmask (standard HF+6m order, bit 0 = 160m). Used to show only the antennas
|
|
// configured for the current band, like the native app. If the mapping ever
|
|
// proves off on real hardware, the debug log (antgenius: antenna raw …) shows the
|
|
// device's actual mask so it can be corrected.
|
|
const AG_BAND_BITS: Record<string, number> = {
|
|
'160m': 1 << 0, '80m': 1 << 1, '60m': 0, '40m': 1 << 2, '30m': 1 << 3,
|
|
'20m': 1 << 4, '17m': 1 << 5, '15m': 1 << 6, '12m': 1 << 7, '10m': 1 << 8, '6m': 1 << 9,
|
|
};
|
|
|
|
function bandBit(band?: string): number {
|
|
if (!band) return 0;
|
|
return AG_BAND_BITS[band.trim().toLowerCase()] ?? 0;
|
|
}
|
|
|
|
// Format an antenna name: first letter uppercase, the rest lowercase
|
|
// (e.g. "DX COMMANDER" → "Dx commander").
|
|
function pretty(name: string): string {
|
|
const t = name.trim();
|
|
if (!t) return t;
|
|
return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
|
|
}
|
|
|
|
// AntGeniusPanel — antenna-switch widget for a 4O3A Antenna Genius, styled to
|
|
// match the app's light theme with soft gradients + glows. Each antenna row has
|
|
// a port-A button (left) and port-B button (right). Colours: green = selected on
|
|
// port A, blue = selected on port B, red (pulsing) = that port is transmitting.
|
|
// Clicking an already-selected port deselects it (port → None).
|
|
export function AntGeniusPanel({ status, onActivate, onClose, band }: {
|
|
status: AGStatus;
|
|
onActivate: (port: number, antenna: number) => void; // antenna 0 = deselect
|
|
onClose: () => void;
|
|
band?: string; // current operating band (e.g. "20m") for the band filter
|
|
}) {
|
|
const { t } = useI18n();
|
|
const allAntennas = status.antennas ?? [];
|
|
|
|
// Band filter (persisted, default ON): show only antennas whose band mask
|
|
// includes the current band — matching the native 4O3A app. Antennas with an
|
|
// unknown mask (0) always show, and if the filter would hide EVERYTHING (e.g. a
|
|
// band we can't map, or masks the device didn't send) we fall back to the full
|
|
// list so the panel is never mysteriously empty.
|
|
const [bandFilter, setBandFilter] = useState(() => localStorage.getItem('opslog.agBandFilter') !== '0');
|
|
const toggleBandFilter = () => setBandFilter((v) => { const n = !v; localStorage.setItem('opslog.agBandFilter', n ? '1' : '0'); return n; });
|
|
const bit = bandBit(band);
|
|
let list = allAntennas;
|
|
if (bandFilter && bit !== 0) {
|
|
const filtered = allAntennas.filter((a) => !a.bands || (a.bands & bit) !== 0);
|
|
if (filtered.length > 0) list = filtered;
|
|
}
|
|
|
|
const PortBtn = ({ port, index, active, tx }: { port: 1 | 2; index: number; active: boolean; tx: boolean }) => {
|
|
const letter = port === 1 ? 'A' : 'B';
|
|
const cls = tx
|
|
? 'bg-gradient-to-b from-red-500 to-rose-600 text-white border-red-400/50 shadow-[0_0_10px_rgba(244,63,94,0.5)] animate-pulse'
|
|
: active
|
|
? (port === 1
|
|
? 'bg-gradient-to-b from-emerald-400 to-emerald-600 text-white border-emerald-300/60 shadow-[0_0_9px_rgba(16,185,129,0.45)]'
|
|
: 'bg-gradient-to-b from-sky-400 to-sky-600 text-white border-sky-300/60 shadow-[0_0_9px_rgba(14,165,233,0.45)]')
|
|
: 'bg-card text-muted-foreground border-border hover:bg-muted hover:text-foreground';
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onActivate(port, active ? 0 : index)}
|
|
title={active ? t('agp.portDeselect', { letter }) : t('agp.portSelect', { letter })}
|
|
className={cn('w-8 shrink-0 rounded-lg text-xs font-bold py-1.5 border transition-all active:scale-95', cls)}
|
|
>
|
|
{letter}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="h-full flex flex-col rounded-xl border border-border bg-gradient-to-b from-card to-muted/30 shadow-sm overflow-hidden">
|
|
<div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/40 shrink-0">
|
|
<Antenna className={cn('size-4', status.connected ? 'text-success drop-shadow-[0_0_3px_rgba(16,185,129,0.55)]' : 'text-muted-foreground')} />
|
|
<span className="text-xs font-bold uppercase tracking-[0.18em] text-foreground/80">Antenna Genius</span>
|
|
<span className="flex-1" />
|
|
<button type="button" onClick={toggleBandFilter}
|
|
title={bandFilter ? t('agp.filterOnHint', { band: band || '' }) : t('agp.filterOffHint')}
|
|
className={cn('transition-colors', bandFilter ? 'text-primary' : 'text-muted-foreground/50 hover:text-muted-foreground')}>
|
|
<ListFilter className="size-3.5" />
|
|
</button>
|
|
<span className="inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-wider">
|
|
<span className={cn('size-1.5 rounded-full', status.connected ? 'bg-success shadow-[0_0_6px_rgba(16,185,129,0.8)] animate-pulse' : 'bg-danger')} />
|
|
<span className={status.connected ? 'text-success' : 'text-danger'}>{status.connected ? t('agp.online') : t('agp.offline')}</span>
|
|
</span>
|
|
<button type="button" onClick={onClose} className="ml-1 text-muted-foreground hover:text-foreground transition-colors" title={t('agp.close')}>
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 min-h-0 overflow-y-auto p-2 space-y-1.5">
|
|
{!status.connected ? (
|
|
<div className="text-center py-6 text-xs space-y-2">
|
|
<div className="text-muted-foreground italic animate-pulse">{t('agp.connecting')}</div>
|
|
{status.last_error && <div className="text-danger font-mono text-[10px] break-words px-2">{status.last_error}</div>}
|
|
</div>
|
|
) : list.length === 0 ? (
|
|
<div className="text-muted-foreground italic text-center py-6 text-xs">{t('agp.noAntennas')}</div>
|
|
) : list.map((a) => {
|
|
const aActive = status.port_a === a.index;
|
|
const bActive = status.port_b === a.index;
|
|
const aTx = aActive && !!status.tx_a;
|
|
const bTx = bActive && !!status.tx_b;
|
|
const nameCls = (aTx || bTx)
|
|
? 'bg-gradient-to-r from-red-500 to-rose-600 text-white border-red-400/40 shadow-[0_0_11px_rgba(244,63,94,0.35)]'
|
|
: aActive
|
|
? 'bg-gradient-to-r from-emerald-500 to-emerald-600 text-white border-emerald-400/40 shadow-[0_0_11px_rgba(16,185,129,0.3)]'
|
|
: bActive
|
|
? 'bg-gradient-to-r from-sky-500 to-sky-600 text-white border-sky-400/40 shadow-[0_0_11px_rgba(14,165,233,0.3)]'
|
|
: 'bg-card/70 text-foreground/80 border-border hover:bg-muted/60';
|
|
return (
|
|
<div key={a.index} className="flex items-center gap-1.5">
|
|
<PortBtn port={1} index={a.index} active={aActive} tx={aTx} />
|
|
<div className={cn('flex-1 min-w-0 truncate text-center text-xs font-semibold tracking-wide rounded-lg px-2 py-1.5 border transition-all', nameCls)}>
|
|
{pretty(a.name)}
|
|
</div>
|
|
<PortBtn port={2} index={a.index} active={bActive} tx={bTx} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|