fix: Resizable worked before Net Control
This commit is contained in:
@@ -73,6 +73,20 @@ export function NetControlPanel({ onLogged, countries, bands, modes }: Props) {
|
||||
const [wb, setWb] = useState<any>(null);
|
||||
const [wbBusy, setWbBusy] = useState(false);
|
||||
const wbReq = useRef(0);
|
||||
// Resizable height (drag the handle on top). Persisted.
|
||||
const [wbHeight, setWbHeight] = useState(() => {
|
||||
const v = parseInt(localStorage.getItem('opslog.netWbHeight') || '', 10);
|
||||
return v >= 80 && v <= 600 ? v : 176;
|
||||
});
|
||||
useEffect(() => { localStorage.setItem('opslog.netWbHeight', String(wbHeight)); }, [wbHeight]);
|
||||
const startWbResize = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
const startY = e.clientY, startH = wbHeight;
|
||||
const onMove = (ev: MouseEvent) => setWbHeight(Math.max(80, Math.min(600, startH - (ev.clientY - startY))));
|
||||
const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
};
|
||||
const showWorkedBefore = useCallback(async (call: string, dxcc = 0) => {
|
||||
const c = (call ?? '').trim().toUpperCase();
|
||||
setWbCall(c);
|
||||
@@ -302,6 +316,61 @@ export function NetControlPanel({ onLogged, countries, bands, modes }: Props) {
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Worked-before for the clicked station — click a row (on air or
|
||||
roster) to see if/when we contacted it before. Lives INSIDE the
|
||||
on-air column so resizing only splits this column; the roster on
|
||||
the right keeps its full height. */}
|
||||
<div className="shrink-0 flex flex-col" style={{ height: wbHeight }}>
|
||||
<div className="h-1.5 shrink-0 cursor-ns-resize border-t border-border/60 hover:bg-primary/40 transition-colors" onMouseDown={startWbResize} title={t('ncp.wbResize')} />
|
||||
<div className="flex-1 min-h-0 bg-card flex flex-col">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted/40 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0">
|
||||
<History className="size-3.5" />
|
||||
{t('ncp.workedBefore')}
|
||||
{wbCall && <span className="font-mono text-foreground normal-case">{wbCall}</span>}
|
||||
{wb && wb.count > 0 && (
|
||||
<span className="ml-auto font-normal normal-case text-foreground">
|
||||
{wb.count} QSO · {t('ncp.wbFirst')} {String(wb.first ?? '').slice(0, 10)} · {t('ncp.wbLast')} {String(wb.last ?? '').slice(0, 10)}
|
||||
{wb.dxcc_name ? ` · ${wb.dxcc_name} (${wb.dxcc_count})` : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-auto">
|
||||
{!wbCall ? (
|
||||
<div className="flex h-full items-center justify-center text-xs text-muted-foreground">{t('ncp.wbHint')}</div>
|
||||
) : wbBusy ? (
|
||||
<div className="flex h-full items-center justify-center text-xs text-muted-foreground">…</div>
|
||||
) : !wb || wb.count === 0 ? (
|
||||
<div className="flex h-full items-center justify-center text-xs text-muted-foreground">{t('ncp.wbNone')} {wbCall}</div>
|
||||
) : (
|
||||
<table className="w-full text-xs">
|
||||
<thead className="sticky top-0 bg-muted/30 text-muted-foreground">
|
||||
<tr className="text-left">
|
||||
<th className="px-3 py-1 font-semibold">{t('ncp.colDate')}</th>
|
||||
<th className="px-2 py-1 font-semibold">{t('ncp.colTimeOn')}</th>
|
||||
<th className="px-2 py-1 font-semibold">{t('ncp.colBand')}</th>
|
||||
<th className="px-2 py-1 font-semibold">{t('ncp.colMode')}</th>
|
||||
<th className="px-2 py-1 font-semibold">RST</th>
|
||||
<th className="px-2 py-1 font-semibold">{t('ncp.colComment')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{((wb.entries ?? []) as any[]).map((q, i) => (
|
||||
<tr key={q.id ?? i} className="border-t border-border/20 hover:bg-muted/30">
|
||||
<td className="px-3 py-1 font-mono">{String(q.qso_date ?? '').slice(0, 10)}</td>
|
||||
<td className="px-2 py-1 font-mono">{String(q.time_on ?? '').slice(0, 5)}</td>
|
||||
<td className="px-2 py-1">{q.band}</td>
|
||||
<td className="px-2 py-1">{q.mode}</td>
|
||||
<td className="px-2 py-1 font-mono">{(q.rst_sent ?? '')}/{(q.rst_rcvd ?? '')}</td>
|
||||
<td className="px-2 py-1 truncate max-w-[360px]">{q.comment}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* NET USERS / roster (right) */}
|
||||
@@ -343,56 +412,6 @@ export function NetControlPanel({ onLogged, countries, bands, modes }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Worked-before for the clicked station — click a row (on air or roster) to
|
||||
see if/when we contacted it before. */}
|
||||
<div className="shrink-0 h-44 border-t border-border/60 bg-card flex flex-col min-h-0">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted/40 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0">
|
||||
<History className="size-3.5" />
|
||||
{t('ncp.workedBefore')}
|
||||
{wbCall && <span className="font-mono text-foreground normal-case">{wbCall}</span>}
|
||||
{wb && wb.count > 0 && (
|
||||
<span className="ml-auto font-normal normal-case text-foreground">
|
||||
{wb.count} QSO · {t('ncp.wbFirst')} {String(wb.first ?? '').slice(0, 10)} · {t('ncp.wbLast')} {String(wb.last ?? '').slice(0, 10)}
|
||||
{wb.dxcc_name ? ` · ${wb.dxcc_name} (${wb.dxcc_count})` : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-auto">
|
||||
{!wbCall ? (
|
||||
<div className="flex h-full items-center justify-center text-xs text-muted-foreground">{t('ncp.wbHint')}</div>
|
||||
) : wbBusy ? (
|
||||
<div className="flex h-full items-center justify-center text-xs text-muted-foreground">…</div>
|
||||
) : !wb || wb.count === 0 ? (
|
||||
<div className="flex h-full items-center justify-center text-xs text-muted-foreground">{t('ncp.wbNone')} {wbCall}</div>
|
||||
) : (
|
||||
<table className="w-full text-xs">
|
||||
<thead className="sticky top-0 bg-muted/30 text-muted-foreground">
|
||||
<tr className="text-left">
|
||||
<th className="px-3 py-1 font-semibold">{t('ncp.colDate')}</th>
|
||||
<th className="px-2 py-1 font-semibold">{t('ncp.colTimeOn')}</th>
|
||||
<th className="px-2 py-1 font-semibold">{t('ncp.colBand')}</th>
|
||||
<th className="px-2 py-1 font-semibold">{t('ncp.colMode')}</th>
|
||||
<th className="px-2 py-1 font-semibold">RST</th>
|
||||
<th className="px-2 py-1 font-semibold">{t('ncp.colComment')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{((wb.entries ?? []) as any[]).map((q, i) => (
|
||||
<tr key={q.id ?? i} className="border-t border-border/20 hover:bg-muted/30">
|
||||
<td className="px-3 py-1 font-mono">{String(q.qso_date ?? '').slice(0, 10)}</td>
|
||||
<td className="px-2 py-1 font-mono">{String(q.time_on ?? '').slice(0, 5)}</td>
|
||||
<td className="px-2 py-1">{q.band}</td>
|
||||
<td className="px-2 py-1">{q.mode}</td>
|
||||
<td className="px-2 py-1 font-mono">{(q.rst_sent ?? '')}/{(q.rst_rcvd ?? '')}</td>
|
||||
<td className="px-2 py-1 truncate max-w-[360px]">{q.comment}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full-QSO edit modal for the selected on-air draft. Save writes back to
|
||||
the in-memory draft (NetUpdateActive); Delete cancels it (no log). */}
|
||||
{editingDraft && (
|
||||
|
||||
Reference in New Issue
Block a user