rouggy/OpsLog
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 67 Wiki Activity

ui(stats): prettier slot drill-down + click a callsign to edit the QSO

Browse Source 
The pop-up listing the QSOs behind a Stats band/mode square gets a cleaner header
(band chip, hint), banded/hover rows and roomier spacing. Callsigns are now
clickable and open the QSO editor (App.openEdit threaded through DetailsPanel →
BandSlotGrid → SlotQSOModal as onEditQso), matching the double-click-to-edit of
the log grids.
This commit is contained in:
rouggy
2026-08-06 10:30:34 +02:00
parent 62cdabe114
commit 20dc3e83a6
4 changed files with 54 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+1
View File
@@ -5653,6 +5653,7 @@ export default function App() {
band={band}
mode={mode}
bands={bands}
onEditQso={openEdit}
{...(!callsign.trim() && selQso ? {
slotCall: selQso.call, slotBand: selQso.band, slotMode: selQso.mode,
slotWb: selWb, slotWbBusy: selWbBusy,
frontend/src/components/BandSlotGrid.tsx
+44 -29
View File
@@ -22,6 +22,9 @@ interface Props {
// Set when the matrix is showing a QSO picked in the log grid rather than the
// entry form — labelled so the two can never be confused.
forCall?: string;
// Open the QSO editor for a contact — makes callsigns in the cell drill-down
// clickable. Threaded down from App.openEdit.
onEditQso?: (id: number) => void;
}
// Compact column label for a band tag: keep the classic V/U for 2m/70cm,
@@ -93,7 +96,7 @@ function cellTitle(band: string, cls: string, status: string, current: boolean):
return `${band} ${cls}: ${desc}${current ? ' — current entry' : ''}`;
}
export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, hasCall = true, lat, lon, forCall }: Props) {
export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, hasCall = true, lat, lon, forCall, onEditQso }: Props) {
// Cell drill-down: which band+class the operator clicked, or null.
const [slot, setSlot] = useState<{ band: string; cls: string } | null>(null);
// Columns from the operator's configured bands (so the matrix shows only the
@@ -340,6 +343,7 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, hasCal
band={slot.band}
cls={slot.cls}
onClose={() => setSlot(null)}
onEdit={onEditQso}
/>
)}
</section>
@@ -351,8 +355,8 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, hasCal
// in the entity, because that is the pair of facts the cell's colour encodes.
// The call's own QSOs are marked so the two never blur together.
function SlotQSOModal({ call, dxcc, entity, band, cls, onClose }: {
call: string; dxcc: number; entity: string; band: string; cls: string; onClose: () => void;
function SlotQSOModal({ call, dxcc, entity, band, cls, onClose, onEdit }: {
call: string; dxcc: number; entity: string; band: string; cls: string; onClose: () => void; onEdit?: (id: number) => void;
}) {
const [rows, setRows] = useState<any[] | null>(null);
const [err, setErr] = useState('');
@@ -376,18 +380,19 @@ function SlotQSOModal({ call, dxcc, entity, band, cls, onClose }: {
}, [onClose]);
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
<div className="bg-card border border-border rounded-lg shadow-xl w-[720px] max-w-[92vw] max-h-[70vh] flex flex-col"
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-[2px] p-4" onClick={onClose}>
<div className="bg-card border border-border rounded-xl shadow-2xl w-[760px] max-w-full max-h-[72vh] flex flex-col overflow-hidden ring-1 ring-black/5"
onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-2 px-3 py-2 border-b border-border">
<span className="font-semibold text-sm">
{band} · {cls}
{entity && <span className="text-muted-foreground font-normal"> — {entity}</span>}
</span>
<span className="ml-auto text-xs text-muted-foreground tabular-nums">
{rows ? `${rows.length} QSO` : ''}
</span>
<button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground">
<div className="flex items-center gap-2.5 px-4 py-2.5 border-b border-border bg-muted/30">
<span className="inline-flex items-center justify-center h-6 min-w-6 px-1.5 rounded-md bg-primary/15 text-primary text-[11px] font-bold shrink-0 tabular-nums">{band}</span>
<div className="min-w-0">
<div className="font-semibold text-sm leading-tight truncate">
{cls}{entity && <span className="text-muted-foreground font-normal"> · {entity}</span>}
</div>
{onEdit && <div className="text-[10px] text-muted-foreground leading-tight">Click a callsign to edit the QSO</div>}
</div>
<span className="ml-auto text-xs text-muted-foreground tabular-nums shrink-0">{rows ? `${rows.length} QSO${rows.length > 1 ? 's' : ''}` : ''}</span>
<button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground shrink-0 rounded p-0.5 hover:bg-muted transition-colors">
<X className="size-4" />
</button>
</div>
@@ -400,30 +405,40 @@ function SlotQSOModal({ call, dxcc, entity, band, cls, onClose }: {
) : rows.length === 0 ? (
<p className="p-4 text-xs text-muted-foreground italic">No QSOs.</p>
) : (
<table className="w-full text-xs">
<thead className="sticky top-0 bg-muted/60 backdrop-blur text-muted-foreground">
<table className="w-full text-xs border-collapse">
<thead className="sticky top-0 z-10 bg-muted/80 backdrop-blur text-[10px] uppercase tracking-wider text-muted-foreground">
<tr>
<th className="text-left font-medium px-2 py-1">Date UTC</th>
<th className="text-left font-medium px-2 py-1">Callsign</th>
<th className="text-left font-medium px-2 py-1">Mode</th>
<th className="text-left font-medium px-2 py-1">Freq</th>
<th className="text-left font-medium px-2 py-1">Name</th>
<th className="text-left font-medium px-2 py-1">Cfm</th>
<th className="text-left font-medium px-3 py-1.5">Date UTC</th>
<th className="text-left font-medium px-3 py-1.5">Callsign</th>
<th className="text-left font-medium px-3 py-1.5">Mode</th>
<th className="text-left font-medium px-3 py-1.5">Freq</th>
<th className="text-left font-medium px-3 py-1.5">Name</th>
<th className="text-center font-medium px-3 py-1.5">Cfm</th>
</tr>
</thead>
<tbody>
{rows.map((q, i) => {
const cfm = q.lotw_rcvd === 'Y' || q.eqsl_rcvd === 'Y' || q.qsl_rcvd === 'Y';
const mine = q.callsign === call;
return (
<tr key={q.id ?? i} className="border-t border-border/40">
<td className="px-2 py-1 tabular-nums text-muted-foreground whitespace-nowrap">
<tr key={q.id ?? i} className="border-t border-border/40 even:bg-muted/[0.06] hover:bg-primary/[0.06] transition-colors">
<td className="px-3 py-1.5 tabular-nums text-muted-foreground whitespace-nowrap">
{String(q.qso_date ?? '').slice(0, 16).replace('T', ' ')}
</td>
<td className={cn('px-2 py-1 font-mono', q.callsign === call && 'font-bold text-primary')}>{q.callsign}</td>
<td className="px-2 py-1">{q.mode}</td>
<td className="px-2 py-1 tabular-nums text-muted-foreground">{q.freq_hz ? (q.freq_hz / 1e6).toFixed(3) : ''}</td>
<td className="px-2 py-1 text-muted-foreground truncate max-w-[160px]">{q.name}</td>
<td className="px-2 py-1">{cfm ? <span className="text-success">✓</span> : ''}</td>
<td className="px-3 py-1.5">
{onEdit ? (
<button type="button" onClick={() => { onEdit(q.id as number); onClose(); }} title="Edit this QSO"
className={cn('font-mono cursor-pointer text-left hover:underline underline-offset-2', mine ? 'font-bold text-primary' : 'text-foreground hover:text-primary')}>
{q.callsign}
</button>
) : (
<span className={cn('font-mono', mine && 'font-bold text-primary')}>{q.callsign}</span>
)}
</td>
<td className="px-3 py-1.5">{q.mode}</td>
<td className="px-3 py-1.5 tabular-nums text-muted-foreground">{q.freq_hz ? (q.freq_hz / 1e6).toFixed(3) : ''}</td>
<td className="px-3 py-1.5 text-muted-foreground truncate max-w-[180px]">{q.name}</td>
<td className="px-3 py-1.5 text-center">{cfm ? <span className="text-success">✓</span> : <span className="text-muted-foreground/30">·</span>}</td>
</tr>
);
})}
frontend/src/components/DetailsPanel.tsx
+4 -1
View File
@@ -85,6 +85,8 @@ interface Props {
// When the WinKeyer is active, F1-F12 fire macros, so the tab shortcut is
// shown as Ctrl+F1…F5 instead of F1…F5.
keyerActive?: boolean;
// Open the QSO editor — makes callsigns clickable in the band-slot drill-down.
onEditQso?: (id: number) => void;
}
export type TabName = 'stats' | 'info' | 'awards' | 'my' | 'extended';
@@ -147,7 +149,7 @@ function Field({ label, span = 1, className, children }: { label: string; span?:
);
}
export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, qth, name, country, comment, note, details, onChange, wb, wbBusy, band, mode, bands, slotCall, slotBand, slotMode, slotWb, slotWbBusy, tab, onTab, keyerActive }: Props) {
export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, qth, name, country, comment, note, details, onChange, wb, wbBusy, band, mode, bands, slotCall, slotBand, slotMode, slotWb, slotWbBusy, tab, onTab, keyerActive, onEditQso }: Props) {
const { t } = useI18n();
const [internalOpen, setInternalOpen] = useState<TabName>('stats');
const open = tab ?? internalOpen; // controlled when `tab` is provided
@@ -288,6 +290,7 @@ export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, qth,
bands={bands}
hasCall={slotCall ? true : callsign.trim() !== ''}
forCall={slotCall}
onEditQso={onEditQso}
lat={dxLL?.lat} lon={dxLL?.lon} />
</div>
)}