From 86e486aea6a94b496b34d255b8fca566ffa38591 Mon Sep 17 00:00:00 2001 From: Joerg Date: Mon, 19 Jan 2026 12:51:17 +0100 Subject: [PATCH] feat: add QSO detail modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Click on any QSO row to view detailed information in modal - Display all QSO fields organized by section: - Basic information (callsign, date, time, band, mode) - Location (entity, DXCC, grid, continent, zones, state, county) - Satellite info (when applicable) - DOK information (partner's and my DOK) - Confirmation status (LoTW and DCL with dates and status) - Keyboard accessible (Enter to open, Escape to close) - Close by clicking backdrop, pressing Escape, or × button - Hover effect on rows to indicate clickability Co-Authored-By: Claude Sonnet 4.5 --- src/frontend/src/routes/qsos/+page.svelte | 412 +++++++++++++++++++++- 1 file changed, 411 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/routes/qsos/+page.svelte b/src/frontend/src/routes/qsos/+page.svelte index f97d55e..1240de5 100644 --- a/src/frontend/src/routes/qsos/+page.svelte +++ b/src/frontend/src/routes/qsos/+page.svelte @@ -33,6 +33,10 @@ let deleteConfirmText = ''; let deleting = false; + // QSO detail modal state + let selectedQSO = null; + let showQSODetailModal = false; + let filters = { band: '', mode: '', @@ -274,6 +278,23 @@ loadQSOs(); } + function openQSODetailModal(qso) { + selectedQSO = qso; + showQSODetailModal = true; + } + + function closeQSODetailModal() { + selectedQSO = null; + showQSODetailModal = false; + } + + function getConfirmationStatus(status) { + if (status === 'Y') return { label: 'Confirmed', class: 'confirmed' }; + if (status === 'N') return { label: 'Not Confirmed', class: 'not-confirmed' }; + if (status === '?') return { label: 'Unknown', class: 'unknown' }; + return { label: 'No Data', class: 'no-data' }; + } + function goToPage(page) { currentPage = page; loadQSOs(); @@ -603,7 +624,7 @@ {#each qsos as qso} - + openQSODetailModal(qso)} class="qso-row" on:keydown={(e) => e.key === 'Enter' && openQSODetailModal(qso)} role="button" tabindex="0"> {formatDate(qso.qsoDate)} {formatTime(qso.timeOn)} {qso.callsign} @@ -685,6 +706,184 @@ {/if} + +{#if showQSODetailModal && selectedQSO} +
e.key === 'Escape' && closeQSODetailModal()} role="dialog" aria-modal="true"> +
+
+

QSO Details

+ +
+ +
+
+

Basic Information

+
+
+ Callsign: + {selectedQSO.callsign} +
+
+ Date: + {formatDate(selectedQSO.qsoDate)} +
+
+ Time: + {formatTime(selectedQSO.timeOn)} +
+
+ Band: + {selectedQSO.band || '-'} +
+
+ Mode: + {selectedQSO.mode || '-'} +
+
+
+ +
+

Location

+
+
+ Entity: + {selectedQSO.entity || '-'} +
+ {#if selectedQSO.entityId} +
+ DXCC ID: + {selectedQSO.entityId} +
+ {/if} +
+ Grid Square: + {selectedQSO.grid || '-'} +
+ {#if selectedQSO.gridSource} +
+ Grid Source: + {selectedQSO.gridSource} +
+ {/if} +
+ Continent: + {selectedQSO.continent || '-'} +
+ {#if selectedQSO.cqZone} +
+ CQ Zone: + {selectedQSO.cqZone} +
+ {/if} + {#if selectedQSO.ituZone} +
+ ITU Zone: + {selectedQSO.ituZone} +
+ {/if} + {#if selectedQSO.state} +
+ State: + {selectedQSO.state} +
+ {/if} + {#if selectedQSO.county} +
+ County: + {selectedQSO.county} +
+ {/if} +
+
+ + {#if selectedQSO.satName} +
+

Satellite

+
+
+ Satellite: + {selectedQSO.satName} +
+ {#if selectedQSO.satMode} +
+ Mode: + {selectedQSO.satMode} +
+ {/if} +
+
+ {/if} + +
+

DOK Information

+
+
+ Partner's DOK: + {selectedQSO.darcDok || '-'} +
+
+ My DOK: + {selectedQSO.myDarcDok || '-'} +
+
+
+ +
+

Confirmation Status

+
+
+

LoTW

+
+ Status: + + {getConfirmationStatus(selectedQSO.lotwQslRstatus).label} + +
+ {#if selectedQSO.lotwQslRdate} +
+ Confirmed: + {formatDate(selectedQSO.lotwQslRdate)} +
+ {/if} + {#if selectedQSO.lotwSyncedAt} +
+ Last Synced: + {new Date(selectedQSO.lotwSyncedAt).toLocaleString()} +
+ {/if} +
+ +
+

DCL

+
+ Status: + + {getConfirmationStatus(selectedQSO.dclQslRstatus).label} + +
+ {#if selectedQSO.dclQslRdate} +
+ Confirmed: + {formatDate(selectedQSO.dclQslRdate)} +
+ {/if} +
+
+
+ +
+ QSO ID: + {selectedQSO.id} + {#if selectedQSO.createdAt} + Created: + {new Date(selectedQSO.createdAt).toLocaleString()} + {/if} +
+
+
+
+{/if} +