163 lines
8.3 KiB
TypeScript
163 lines
8.3 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { Copy, Loader2, Trash2, X } from 'lucide-react';
|
||
import { FindDuplicates, DeleteQSOs } from '../../wailsjs/go/main/App';
|
||
import { useI18n } from '@/lib/i18n';
|
||
import { cn } from '@/lib/utils';
|
||
|
||
type QSO = {
|
||
id: number; callsign: string; qso_date: string; band?: string; mode?: string;
|
||
freq_hz?: number; rst_sent?: string; rst_rcvd?: string; name?: string;
|
||
};
|
||
type Group = { key: string; qsos: QSO[] };
|
||
|
||
const fmtDate = (iso: string) => {
|
||
const d = new Date(iso);
|
||
if (isNaN(d.getTime())) return iso;
|
||
const p = (n: number) => String(n).padStart(2, '0');
|
||
return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())} ${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`;
|
||
};
|
||
const fmtFreq = (hz?: number) => (hz && hz > 0 ? (hz / 1e6).toFixed(3) : '—');
|
||
|
||
// DuplicatesModal — scans the log for duplicate QSOs (same call+band+mode on the
|
||
// same day; optionally same minute), groups them, and lets the operator pick
|
||
// which copies to delete. The oldest in each group is left unchecked by default.
|
||
export function DuplicatesModal({ onClose, onDeleted }: { onClose: () => void; onDeleted: () => void }) {
|
||
const { t } = useI18n();
|
||
const [windowMin, setWindowMin] = useState(5); // duplicates land a few minutes apart
|
||
const [loading, setLoading] = useState(true);
|
||
const [groups, setGroups] = useState<Group[]>([]);
|
||
const [sel, setSel] = useState<Set<number>>(new Set());
|
||
const [busy, setBusy] = useState(false);
|
||
|
||
const load = (w: number) => {
|
||
setLoading(true);
|
||
FindDuplicates(w)
|
||
.then((g) => {
|
||
const gs = (g ?? []) as Group[];
|
||
setGroups(gs);
|
||
// Default: select every QSO except the first (oldest) of each group.
|
||
const next = new Set<number>();
|
||
gs.forEach((grp) => grp.qsos.slice(1).forEach((q) => next.add(q.id)));
|
||
setSel(next);
|
||
})
|
||
.catch(() => { setGroups([]); setSel(new Set()); })
|
||
.finally(() => setLoading(false));
|
||
};
|
||
useEffect(() => { load(windowMin); /* eslint-disable-next-line */ }, [windowMin]);
|
||
|
||
const toggle = (id: number) => setSel((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
|
||
const selectExtras = () => { const n = new Set<number>(); groups.forEach((g) => g.qsos.slice(1).forEach((q) => n.add(q.id))); setSel(n); };
|
||
const deselectAll = () => setSel(new Set());
|
||
|
||
const totalQsos = groups.reduce((a, g) => a + g.qsos.length, 0);
|
||
|
||
const doDelete = async () => {
|
||
if (sel.size === 0) return;
|
||
if (!confirm(t('dup.deleteConfirm', { n: sel.size }))) return;
|
||
setBusy(true);
|
||
try {
|
||
await DeleteQSOs(Array.from(sel) as any);
|
||
onDeleted();
|
||
load(windowMin); // rescan so the list reflects what's left
|
||
} catch { /* ignore */ } finally { setBusy(false); }
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/50 p-4" onMouseDown={onClose}>
|
||
<div className="w-[820px] max-w-full max-h-[88vh] flex flex-col rounded-2xl border border-border bg-card shadow-2xl"
|
||
onMouseDown={(e) => e.stopPropagation()}>
|
||
{/* Header */}
|
||
<div className="flex items-center gap-2 px-5 py-3 border-b border-border">
|
||
<Copy className="size-4 text-primary" />
|
||
<span className="font-bold">{t('dup.title')}</span>
|
||
<button type="button" onClick={onClose} className="ml-auto rounded-md p-1 hover:bg-muted"><X className="size-4" /></button>
|
||
</div>
|
||
|
||
{/* Controls */}
|
||
<div className="px-5 py-3 border-b border-border/60 space-y-2">
|
||
<p className="text-xs text-muted-foreground">{t('dup.hint')}</p>
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<label className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||
{t('dup.window')}
|
||
<select value={windowMin} onChange={(e) => setWindowMin(parseInt(e.target.value, 10))}
|
||
className="rounded-md border border-border bg-card px-2 py-1 text-xs">
|
||
{[2, 3, 5, 10, 15, 30].map((m) => <option key={m} value={m}>{m} {t('dup.minutes')}</option>)}
|
||
<option value={0}>{t('dup.sameDay')}</option>
|
||
</select>
|
||
</label>
|
||
<div className="ml-auto flex items-center gap-2">
|
||
<button type="button" onClick={selectExtras} className="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-muted">{t('dup.selectExtras')}</button>
|
||
<button type="button" onClick={deselectAll} className="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-muted">{t('dup.deselectAll')}</button>
|
||
</div>
|
||
</div>
|
||
<div className="text-[11px] text-muted-foreground">
|
||
{t('dup.summary', { groups: groups.length, qsos: totalQsos, sel: sel.size })}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Body */}
|
||
<div className="flex-1 overflow-y-auto px-5 py-3 space-y-3 min-h-0">
|
||
{loading ? (
|
||
<div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
|
||
<Loader2 className="size-4 animate-spin" /> {t('dup.scanning')}
|
||
</div>
|
||
) : groups.length === 0 ? (
|
||
<div className="py-16 text-center text-sm text-muted-foreground">{t('dup.none')}</div>
|
||
) : (
|
||
groups.map((g) => (
|
||
<div key={g.key} className="rounded-lg border border-border overflow-hidden">
|
||
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted/40 text-xs font-bold">
|
||
<span className="font-mono">{g.qsos[0].callsign}</span>
|
||
<span className="text-muted-foreground font-normal">
|
||
{g.qsos[0].band} · {g.qsos[0].mode} · {g.qsos.length}×
|
||
</span>
|
||
</div>
|
||
<table className="w-full text-xs">
|
||
<thead className="text-[10px] uppercase tracking-wider text-muted-foreground">
|
||
<tr className="border-b border-border/60">
|
||
<th className="w-8"></th>
|
||
<th className="text-left px-2 py-1 font-semibold">{t('dup.colDate')}</th>
|
||
<th className="text-left px-2 py-1 font-semibold">{t('dup.colFreq')}</th>
|
||
<th className="text-left px-2 py-1 font-semibold">{t('dup.colRst')}</th>
|
||
<th className="text-left px-2 py-1 font-semibold">{t('dup.colName')}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{g.qsos.map((q, i) => {
|
||
const checked = sel.has(q.id);
|
||
return (
|
||
<tr key={q.id} className={cn('border-t border-border/40', checked && 'bg-danger/10')}>
|
||
<td className="text-center py-1">
|
||
<input type="checkbox" checked={checked} onChange={() => toggle(q.id)} />
|
||
</td>
|
||
<td className="px-2 py-1 font-mono whitespace-nowrap">
|
||
{fmtDate(q.qso_date)}
|
||
{i === 0 && <span className="ml-1.5 text-[9px] uppercase tracking-wider text-success">{t('dup.keep')}</span>}
|
||
</td>
|
||
<td className="px-2 py-1 font-mono">{fmtFreq(q.freq_hz)}</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-[160px]">{q.name || ''}</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="flex items-center gap-2 px-5 py-3 border-t border-border">
|
||
<button type="button" onClick={onClose} className="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted">{t('dup.close')}</button>
|
||
<button type="button" onClick={doDelete} disabled={busy || sel.size === 0}
|
||
className="ml-auto inline-flex items-center gap-1.5 rounded-md bg-destructive px-3 py-1.5 text-sm font-bold text-destructive-foreground hover:bg-destructive disabled:opacity-40">
|
||
{busy ? <Loader2 className="size-3.5 animate-spin" /> : <Trash2 className="size-3.5" />}
|
||
{t('dup.deleteSel', { n: sel.size })}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|