diff --git a/src/frontend/src/routes/awards/[id]/+page.svelte b/src/frontend/src/routes/awards/[id]/+page.svelte index 54ee123..c49a71e 100644 --- a/src/frontend/src/routes/awards/[id]/+page.svelte +++ b/src/frontend/src/routes/awards/[id]/+page.svelte @@ -10,6 +10,11 @@ let groupedData = []; let bands = []; + // QSO detail modal state + let selectedQSO = null; + let showQSODetailModal = false; + let loadingQSO = false; + onMount(async () => { await loadAwardData(); }); @@ -80,6 +85,7 @@ entityData.bands.get(entity.band).push({ callsign: entity.callsign, mode: entity.mode, + band: entity.band, confirmed: entity.confirmed, qsoDate: entity.qsoDate, }); @@ -127,6 +133,7 @@ entityData.bands.get(entity.band).push({ callsign: entity.callsign, mode: entity.mode, + band: entity.band, confirmed: entity.confirmed, qsoDate: entity.qsoDate, }); @@ -154,6 +161,79 @@ $: if (entities.length > 0) { applyFilter(); } + + // QSO Detail Modal Functions + async function openQSODetailModal(qso) { + loadingQSO = true; + showQSODetailModal = true; + selectedQSO = null; + + try { + // Fetch full QSO details using filters + const params = new URLSearchParams({ + callsign: qso.callsign, + qsoDate: qso.qsoDate, + band: qso.band, + mode: qso.mode, + limit: '1' + }); + + const response = await fetch(`/api/qsos?${params}`, { + headers: { + 'Authorization': `Bearer ${$auth.token}`, + }, + }); + + if (!response.ok) { + throw new Error('Failed to fetch QSO details'); + } + + const data = await response.json(); + + if (!data.success) { + throw new Error(data.error || 'Failed to fetch QSO details'); + } + + if (data.qsos && data.qsos.length > 0) { + selectedQSO = data.qsos[0]; + } else { + throw new Error('QSO not found'); + } + } catch (err) { + console.error('Failed to load QSO details:', err); + alert('Failed to load QSO details: ' + err.message); + showQSODetailModal = false; + } finally { + loadingQSO = false; + } + } + + function closeQSODetailModal() { + selectedQSO = null; + showQSODetailModal = false; + } + + function formatDate(dateStr) { + if (!dateStr) return '-'; + // ADIF format: YYYYMMDD + const year = dateStr.substring(0, 4); + const month = dateStr.substring(4, 6); + const day = dateStr.substring(6, 8); + return `${day}/${month}/${year}`; + } + + function formatTime(timeStr) { + if (!timeStr) return '-'; + // ADIF format: HHMMSS or HHMM + return timeStr.substring(0, 2) + ':' + timeStr.substring(2, 4); + } + + 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' }; + }
@@ -247,7 +327,13 @@ {#if qsos.length > 0}
{#each qsos as qso} -
+
openQSODetailModal(qso)} + on:keydown={(e) => e.key === 'Enter' && openQSODetailModal(qso)} + role="button" + tabindex="0" + > {qso.callsign} {qso.mode}
@@ -267,6 +353,188 @@ {/if}
+ +{#if showQSODetailModal && selectedQSO} +
e.key === 'Escape' && closeQSODetailModal()} role="dialog" aria-modal="true"> +
+
+

QSO Details

+ +
+ +
+ {#if loadingQSO} +
Loading QSO details...
+ {:else} +
+

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} +
+
+
+{/if} +