feat: add award detail view with QSO count per slot and mode filter
- Award detail page now shows QSO counts per (entity, band, mode) slot - Click count to open modal with all QSOs for that slot - Click QSO in list to view full details - Add mode filter: "Mixed Mode" aggregates by band, specific modes show (band, mode) columns - Backend groups by slot and collects all confirmed QSOs in qsos array - Frontend displays clickable count links (removed blue bubbles) Backend changes: - calculateDOKAwardProgress(): groups by (DOK, band, mode), collects qsos array - calculatePointsAwardProgress(): updated for all count modes with qsos array - getAwardEntityBreakdown(): groups by (entity, band, mode) slots Frontend changes: - Add mode filter dropdown with "Mixed Mode" default - Update grouping logic to handle mixed mode vs specific mode - Replace count badges with simple clickable links - Add QSO list modal showing all QSOs per slot - Add Mode column to QSO list (useful in mixed mode) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -199,7 +199,7 @@ async function calculateDOKAwardProgress(userId, award, options = {}) {
|
||||
}
|
||||
|
||||
// Track unique (DOK, band, mode) combinations
|
||||
const dokCombinations = new Map(); // Key: "DOK/band/mode" -> detail object
|
||||
const dokCombinations = new Map(); // Key: "DOK/band/mode" -> detail object with qsos array
|
||||
|
||||
for (const qso of filteredQSOs) {
|
||||
const dok = qso.darcDok;
|
||||
@@ -212,29 +212,35 @@ async function calculateDOKAwardProgress(userId, award, options = {}) {
|
||||
// Initialize combination if not exists
|
||||
if (!dokCombinations.has(combinationKey)) {
|
||||
dokCombinations.set(combinationKey, {
|
||||
qsoId: qso.id,
|
||||
entity: dok,
|
||||
entityId: null,
|
||||
entityName: dok,
|
||||
band,
|
||||
mode,
|
||||
callsign: qso.callsign,
|
||||
worked: false,
|
||||
confirmed: false,
|
||||
qsoDate: qso.qsoDate,
|
||||
dclQslRdate: null,
|
||||
qsos: [], // Array of confirmed QSOs for this slot
|
||||
});
|
||||
}
|
||||
|
||||
const detail = dokCombinations.get(combinationKey);
|
||||
detail.worked = true;
|
||||
|
||||
// Check for DCL confirmation
|
||||
// Check for DCL confirmation and add to qsos array
|
||||
if (qso.dclQslRstatus === 'Y') {
|
||||
if (!detail.confirmed) {
|
||||
detail.confirmed = true;
|
||||
detail.dclQslRdate = qso.dclQslRdate;
|
||||
}
|
||||
// Add this confirmed QSO to the qsos array
|
||||
detail.qsos.push({
|
||||
qsoId: qso.id,
|
||||
callsign: qso.callsign,
|
||||
mode: qso.mode,
|
||||
qsoDate: qso.qsoDate,
|
||||
timeOn: qso.timeOn,
|
||||
band: qso.band,
|
||||
confirmed: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -339,15 +345,13 @@ async function calculatePointsAwardProgress(userId, award, options = {}) {
|
||||
|
||||
if (!combinationMap.has(combinationKey)) {
|
||||
combinationMap.set(combinationKey, {
|
||||
qsoId: qso.id,
|
||||
callsign,
|
||||
band,
|
||||
mode,
|
||||
points,
|
||||
worked: true,
|
||||
confirmed: false,
|
||||
qsoDate: qso.qsoDate,
|
||||
lotwQslRdate: null,
|
||||
qsos: [], // Array of confirmed QSOs for this slot
|
||||
});
|
||||
}
|
||||
|
||||
@@ -355,8 +359,17 @@ async function calculatePointsAwardProgress(userId, award, options = {}) {
|
||||
const detail = combinationMap.get(combinationKey);
|
||||
if (!detail.confirmed) {
|
||||
detail.confirmed = true;
|
||||
detail.lotwQslRdate = qso.lotwQslRdate;
|
||||
}
|
||||
// Add this confirmed QSO to the qsos array
|
||||
detail.qsos.push({
|
||||
qsoId: qso.id,
|
||||
callsign: qso.callsign,
|
||||
mode: qso.mode,
|
||||
qsoDate: qso.qsoDate,
|
||||
timeOn: qso.timeOn,
|
||||
band: qso.band,
|
||||
confirmed: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -378,15 +391,11 @@ async function calculatePointsAwardProgress(userId, award, options = {}) {
|
||||
|
||||
if (!stationMap.has(callsign)) {
|
||||
stationMap.set(callsign, {
|
||||
qsoId: qso.id,
|
||||
callsign,
|
||||
points,
|
||||
worked: true,
|
||||
confirmed: false,
|
||||
qsoDate: qso.qsoDate,
|
||||
band: qso.band,
|
||||
mode: qso.mode,
|
||||
lotwQslRdate: null,
|
||||
qsos: [], // Array of confirmed QSOs for this station
|
||||
});
|
||||
}
|
||||
|
||||
@@ -394,8 +403,17 @@ async function calculatePointsAwardProgress(userId, award, options = {}) {
|
||||
const detail = stationMap.get(callsign);
|
||||
if (!detail.confirmed) {
|
||||
detail.confirmed = true;
|
||||
detail.lotwQslRdate = qso.lotwQslRdate;
|
||||
}
|
||||
// Add this confirmed QSO to the qsos array
|
||||
detail.qsos.push({
|
||||
qsoId: qso.id,
|
||||
callsign: qso.callsign,
|
||||
mode: qso.mode,
|
||||
qsoDate: qso.qsoDate,
|
||||
timeOn: qso.timeOn,
|
||||
band: qso.band,
|
||||
confirmed: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -415,6 +433,7 @@ async function calculatePointsAwardProgress(userId, award, options = {}) {
|
||||
|
||||
if (qso.lotwQslRstatus === 'Y') {
|
||||
totalPoints += points;
|
||||
// For perQso mode, each QSO is its own slot with a qsos array containing just itself
|
||||
stationDetails.push({
|
||||
qsoId: qso.id,
|
||||
callsign,
|
||||
@@ -424,7 +443,15 @@ async function calculatePointsAwardProgress(userId, award, options = {}) {
|
||||
qsoDate: qso.qsoDate,
|
||||
band: qso.band,
|
||||
mode: qso.mode,
|
||||
lotwQslRdate: qso.lotwQslRdate,
|
||||
qsos: [{
|
||||
qsoId: qso.id,
|
||||
callsign: qso.callsign,
|
||||
mode: qso.mode,
|
||||
qsoDate: qso.qsoDate,
|
||||
timeOn: qso.timeOn,
|
||||
band: qso.band,
|
||||
confirmed: true,
|
||||
}],
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -465,6 +492,7 @@ async function calculatePointsAwardProgress(userId, award, options = {}) {
|
||||
mode: detail.mode,
|
||||
callsign: detail.callsign,
|
||||
lotwQslRdate: detail.lotwQslRdate,
|
||||
qsos: detail.qsos || [], // All confirmed QSOs for this slot
|
||||
};
|
||||
} else if (countMode === 'perStation') {
|
||||
return {
|
||||
@@ -480,6 +508,7 @@ async function calculatePointsAwardProgress(userId, award, options = {}) {
|
||||
mode: detail.mode,
|
||||
callsign: detail.callsign,
|
||||
lotwQslRdate: detail.lotwQslRdate,
|
||||
qsos: detail.qsos || [], // All confirmed QSOs for this station
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
@@ -495,6 +524,7 @@ async function calculatePointsAwardProgress(userId, award, options = {}) {
|
||||
mode: detail.mode,
|
||||
callsign: detail.callsign,
|
||||
lotwQslRdate: detail.lotwQslRdate,
|
||||
qsos: detail.qsos || [], // All confirmed QSOs for this slot (just this one QSO)
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -675,48 +705,62 @@ export async function getAwardEntityBreakdown(userId, awardId) {
|
||||
// Apply filters
|
||||
const filteredQSOs = applyFilters(allQSOs, rules.filters);
|
||||
|
||||
// Group by entity
|
||||
const entityMap = new Map();
|
||||
// Group by (entity, band, mode) slot for entity awards
|
||||
// This allows showing multiple QSOs per entity on different bands/modes
|
||||
const slotMap = new Map(); // Key: "entity/band/mode" -> slot object
|
||||
|
||||
for (const qso of filteredQSOs) {
|
||||
const entity = getEntityValue(qso, rules.entityType);
|
||||
|
||||
if (!entity) continue;
|
||||
|
||||
if (!entityMap.has(entity)) {
|
||||
// Determine what to display as the entity name
|
||||
let displayName = String(entity);
|
||||
if (rules.displayField) {
|
||||
let rawValue = qso[rules.displayField];
|
||||
if (rules.displayField === 'grid' && rawValue && rawValue.length > 4) {
|
||||
rawValue = rawValue.substring(0, 4);
|
||||
}
|
||||
displayName = String(rawValue || entity);
|
||||
} else {
|
||||
displayName = qso.entity || qso.state || qso.grid || qso.callsign || String(entity);
|
||||
}
|
||||
const band = qso.band || 'Unknown';
|
||||
const mode = qso.mode || 'Unknown';
|
||||
const slotKey = `${entity}/${band}/${mode}`;
|
||||
|
||||
entityMap.set(entity, {
|
||||
qsoId: qso.id,
|
||||
// Determine what to display as the entity name (only on first create)
|
||||
let displayName = String(entity);
|
||||
if (rules.displayField) {
|
||||
let rawValue = qso[rules.displayField];
|
||||
if (rules.displayField === 'grid' && rawValue && rawValue.length > 4) {
|
||||
rawValue = rawValue.substring(0, 4);
|
||||
}
|
||||
displayName = String(rawValue || entity);
|
||||
} else {
|
||||
displayName = qso.entity || qso.state || qso.grid || qso.callsign || String(entity);
|
||||
}
|
||||
|
||||
if (!slotMap.has(slotKey)) {
|
||||
slotMap.set(slotKey, {
|
||||
entity,
|
||||
entityId: qso.entityId,
|
||||
entityName: displayName,
|
||||
band,
|
||||
mode,
|
||||
worked: false,
|
||||
confirmed: false,
|
||||
qsoDate: qso.qsoDate,
|
||||
band: qso.band,
|
||||
mode: qso.mode,
|
||||
callsign: qso.callsign,
|
||||
satName: qso.satName,
|
||||
qsos: [], // Array of confirmed QSOs for this slot
|
||||
});
|
||||
}
|
||||
|
||||
const entityData = entityMap.get(entity);
|
||||
entityData.worked = true;
|
||||
const slotData = slotMap.get(slotKey);
|
||||
slotData.worked = true;
|
||||
|
||||
// Check for LoTW confirmation and add to qsos array
|
||||
if (qso.lotwQslRstatus === 'Y') {
|
||||
entityData.confirmed = true;
|
||||
entityData.lotwQslRdate = qso.lotwQslRdate;
|
||||
if (!slotData.confirmed) {
|
||||
slotData.confirmed = true;
|
||||
}
|
||||
// Add this confirmed QSO to the qsos array
|
||||
slotData.qsos.push({
|
||||
qsoId: qso.id,
|
||||
callsign: qso.callsign,
|
||||
mode: qso.mode,
|
||||
qsoDate: qso.qsoDate,
|
||||
timeOn: qso.timeOn,
|
||||
band: qso.band,
|
||||
confirmed: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -728,8 +772,8 @@ export async function getAwardEntityBreakdown(userId, awardId) {
|
||||
caption: award.caption,
|
||||
target: rules.target || 0,
|
||||
},
|
||||
entities: Array.from(entityMap.values()),
|
||||
total: entityMap.size,
|
||||
confirmed: Array.from(entityMap.values()).filter((e) => e.confirmed).length,
|
||||
entities: Array.from(slotMap.values()),
|
||||
total: slotMap.size,
|
||||
confirmed: Array.from(slotMap.values()).filter((e) => e.confirmed).length,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -8,13 +8,22 @@
|
||||
let loading = true;
|
||||
let error = null;
|
||||
let groupedData = [];
|
||||
let bands = [];
|
||||
let columns = []; // Array of {band, mode?} - mode is undefined for mixed mode
|
||||
let selectedMode = 'Mixed Mode'; // Mode filter, default is all modes aggregated
|
||||
|
||||
// QSO detail modal state
|
||||
let selectedQSO = null;
|
||||
let showQSODetailModal = false;
|
||||
let loadingQSO = false;
|
||||
|
||||
// QSO list modal state
|
||||
let showQSOListModal = false;
|
||||
let selectedSlotQSOs = [];
|
||||
let selectedSlotInfo = null; // { entityName, band, mode }
|
||||
|
||||
// Get available modes from entities
|
||||
$: availableModes = ['Mixed Mode', ...new Set(entities.map(e => e.mode).filter(Boolean).sort())];
|
||||
|
||||
onMount(async () => {
|
||||
await loadAwardData();
|
||||
});
|
||||
@@ -56,17 +65,24 @@
|
||||
}
|
||||
|
||||
function groupDataForTable() {
|
||||
// Group by entity name, then create band columns
|
||||
// Group by entity name, then create columns based on mode filter
|
||||
const entityMap = new Map();
|
||||
const bandsSet = new Set();
|
||||
const columnSet = new Set();
|
||||
|
||||
const isMixedMode = selectedMode === 'Mixed Mode';
|
||||
|
||||
entities.forEach((entity) => {
|
||||
// Skip if mode filter is set and entity doesn't match
|
||||
if (!isMixedMode && entity.mode !== selectedMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
const entityName = entity.entityName || entity.entity || 'Unknown';
|
||||
|
||||
if (!entityMap.has(entityName)) {
|
||||
entityMap.set(entityName, {
|
||||
entityName,
|
||||
bands: new Map(),
|
||||
slots: new Map(),
|
||||
worked: entity.worked,
|
||||
confirmed: entity.confirmed,
|
||||
});
|
||||
@@ -74,27 +90,61 @@
|
||||
|
||||
const entityData = entityMap.get(entityName);
|
||||
|
||||
if (entity.band) {
|
||||
bandsSet.add(entity.band);
|
||||
const band = entity.band || 'Unknown';
|
||||
|
||||
if (!entityData.bands.has(entity.band)) {
|
||||
entityData.bands.set(entity.band, []);
|
||||
if (isMixedMode) {
|
||||
// Mixed Mode: aggregate by band only, collect all QSOs across modes
|
||||
columnSet.add(band);
|
||||
|
||||
if (!entityData.slots.has(band)) {
|
||||
entityData.slots.set(band, {
|
||||
band,
|
||||
mode: null, // No specific mode in mixed mode
|
||||
qsos: [], // Will be aggregated
|
||||
confirmed: false,
|
||||
});
|
||||
}
|
||||
|
||||
// Add QSO info to this band
|
||||
entityData.bands.get(entity.band).push({
|
||||
qsoId: entity.qsoId,
|
||||
callsign: entity.callsign,
|
||||
mode: entity.mode,
|
||||
band: entity.band,
|
||||
const slot = entityData.slots.get(band);
|
||||
// Add QSOs from this entity to the aggregated slot
|
||||
if (entity.qsos && entity.qsos.length > 0) {
|
||||
slot.qsos.push(...entity.qsos);
|
||||
if (entity.confirmed) slot.confirmed = true;
|
||||
}
|
||||
} else {
|
||||
// Specific Mode: group by (band, mode)
|
||||
const mode = entity.mode || 'Unknown';
|
||||
const columnKey = `${band}/${mode}`;
|
||||
columnSet.add(columnKey);
|
||||
|
||||
entityData.slots.set(columnKey, {
|
||||
band,
|
||||
mode,
|
||||
qsos: entity.qsos || [],
|
||||
confirmed: entity.confirmed,
|
||||
qsoDate: entity.qsoDate,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Convert bands Set to sorted array
|
||||
bands = Array.from(bandsSet).sort();
|
||||
// Convert columnSet to sorted array of column objects
|
||||
columns = Array.from(columnSet)
|
||||
.map(key => {
|
||||
if (isMixedMode) {
|
||||
return { band: key, mode: null }; // key is just the band name
|
||||
} else {
|
||||
const [band, mode] = key.split('/');
|
||||
return { band, mode };
|
||||
}
|
||||
})
|
||||
.sort((a, b) => {
|
||||
// Sort by band first, then mode (if present)
|
||||
const bandCompare = (a.band || '').localeCompare(b.band || '');
|
||||
if (bandCompare !== 0) return bandCompare;
|
||||
if (a.mode !== undefined && b.mode !== undefined) {
|
||||
return (a.mode || '').localeCompare(b.mode || '');
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Convert Map to array
|
||||
groupedData = Array.from(entityMap.values());
|
||||
@@ -108,15 +158,22 @@
|
||||
const filteredEntities = getFilteredEntities();
|
||||
|
||||
const entityMap = new Map();
|
||||
const bandsSet = new Set();
|
||||
const columnSet = new Set();
|
||||
|
||||
const isMixedMode = selectedMode === 'Mixed Mode';
|
||||
|
||||
filteredEntities.forEach((entity) => {
|
||||
// Skip if mode filter is set and entity doesn't match
|
||||
if (!isMixedMode && entity.mode !== selectedMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
const entityName = entity.entityName || entity.entity || 'Unknown';
|
||||
|
||||
if (!entityMap.has(entityName)) {
|
||||
entityMap.set(entityName, {
|
||||
entityName,
|
||||
bands: new Map(),
|
||||
slots: new Map(),
|
||||
worked: entity.worked,
|
||||
confirmed: entity.confirmed,
|
||||
});
|
||||
@@ -124,25 +181,59 @@
|
||||
|
||||
const entityData = entityMap.get(entityName);
|
||||
|
||||
if (entity.band) {
|
||||
bandsSet.add(entity.band);
|
||||
const band = entity.band || 'Unknown';
|
||||
|
||||
if (!entityData.bands.has(entity.band)) {
|
||||
entityData.bands.set(entity.band, []);
|
||||
if (isMixedMode) {
|
||||
// Mixed Mode: aggregate by band only
|
||||
columnSet.add(band);
|
||||
|
||||
if (!entityData.slots.has(band)) {
|
||||
entityData.slots.set(band, {
|
||||
band,
|
||||
mode: null,
|
||||
qsos: [],
|
||||
confirmed: false,
|
||||
});
|
||||
}
|
||||
|
||||
entityData.bands.get(entity.band).push({
|
||||
qsoId: entity.qsoId,
|
||||
callsign: entity.callsign,
|
||||
mode: entity.mode,
|
||||
band: entity.band,
|
||||
const slot = entityData.slots.get(band);
|
||||
if (entity.qsos && entity.qsos.length > 0) {
|
||||
slot.qsos.push(...entity.qsos);
|
||||
if (entity.confirmed) slot.confirmed = true;
|
||||
}
|
||||
} else {
|
||||
// Specific Mode: group by (band, mode)
|
||||
const mode = entity.mode || 'Unknown';
|
||||
const columnKey = `${band}/${mode}`;
|
||||
columnSet.add(columnKey);
|
||||
|
||||
entityData.slots.set(columnKey, {
|
||||
band,
|
||||
mode,
|
||||
qsos: entity.qsos || [],
|
||||
confirmed: entity.confirmed,
|
||||
qsoDate: entity.qsoDate,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
bands = Array.from(bandsSet).sort();
|
||||
columns = Array.from(columnSet)
|
||||
.map(key => {
|
||||
if (isMixedMode) {
|
||||
return { band: key, mode: null };
|
||||
} else {
|
||||
const [band, mode] = key.split('/');
|
||||
return { band, mode };
|
||||
}
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const bandCompare = (a.band || '').localeCompare(b.band || '');
|
||||
if (bandCompare !== 0) return bandCompare;
|
||||
if (a.mode !== undefined && b.mode !== undefined) {
|
||||
return (a.mode || '').localeCompare(b.mode || '');
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
groupedData = Array.from(entityMap.values());
|
||||
}
|
||||
|
||||
@@ -159,27 +250,41 @@
|
||||
return filtered;
|
||||
}
|
||||
|
||||
// Re-apply sort when entities or sort changes
|
||||
$: if (entities.length > 0) {
|
||||
// Re-apply sort when entities or mode changes
|
||||
$: if (entities.length > 0 || selectedMode) {
|
||||
applyFilter();
|
||||
}
|
||||
|
||||
// Calculate band sums
|
||||
$: bandSums = (() => {
|
||||
// Calculate column sums
|
||||
$: columnSums = (() => {
|
||||
const sums = new Map();
|
||||
const hasPoints = entities.length > 0 && entities[0].points !== undefined;
|
||||
const isMixedMode = selectedMode === 'Mixed Mode';
|
||||
|
||||
bands.forEach(band => {
|
||||
columns.forEach(({ band, mode }) => {
|
||||
const key = isMixedMode ? band : `${band}/${mode}`;
|
||||
if (hasPoints) {
|
||||
// Sum points for confirmed QSOs in this band
|
||||
const sum = entities
|
||||
.filter(e => e.band === band && e.confirmed)
|
||||
.reduce((total, e) => total + (e.points || 0), 0);
|
||||
sums.set(band, sum);
|
||||
// Sum points for confirmed QSOs in this column
|
||||
if (isMixedMode) {
|
||||
const sum = entities
|
||||
.filter(e => e.band === band && e.confirmed)
|
||||
.reduce((total, e) => total + (e.points || 0), 0);
|
||||
sums.set(key, sum);
|
||||
} else {
|
||||
const sum = entities
|
||||
.filter(e => e.band === band && e.mode === mode && e.confirmed)
|
||||
.reduce((total, e) => total + (e.points || 0), 0);
|
||||
sums.set(key, sum);
|
||||
}
|
||||
} else {
|
||||
// Count confirmed QSOs in this band
|
||||
const count = entities.filter(e => e.band === band && e.confirmed).length;
|
||||
sums.set(band, count);
|
||||
// Count confirmed QSOs in this column
|
||||
if (isMixedMode) {
|
||||
const count = entities.filter(e => e.band === band && e.confirmed).length;
|
||||
sums.set(key, count);
|
||||
} else {
|
||||
const count = entities.filter(e => e.band === band && e.mode === mode && e.confirmed).length;
|
||||
sums.set(key, count);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -229,6 +334,23 @@
|
||||
showQSODetailModal = false;
|
||||
}
|
||||
|
||||
// QSO List Modal Functions
|
||||
function openQSOListModal(slotData, entityName, band, mode) {
|
||||
selectedSlotInfo = {
|
||||
entityName,
|
||||
band,
|
||||
mode,
|
||||
};
|
||||
selectedSlotQSOs = slotData.qsos || [];
|
||||
showQSOListModal = true;
|
||||
}
|
||||
|
||||
function closeQSOListModal() {
|
||||
selectedSlotInfo = null;
|
||||
selectedSlotQSOs = [];
|
||||
showQSOListModal = false;
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
// ADIF format: YYYYMMDD
|
||||
@@ -318,6 +440,18 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mode-filter">
|
||||
<label for="mode-select">Filter by mode:</label>
|
||||
<select id="mode-select" bind:value={selectedMode}>
|
||||
{#each availableModes as mode}
|
||||
<option value={mode}>{mode}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if selectedMode !== 'Mixed Mode'}
|
||||
<button class="clear-filter-btn" on:click={() => selectedMode = 'Mixed Mode'}>Clear</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
{#if groupedData.length === 0}
|
||||
<div class="empty">No entities match the current filter.</div>
|
||||
@@ -326,8 +460,8 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="entity-column">Entity</th>
|
||||
{#each bands as band}
|
||||
<th class="band-column">{band}</th>
|
||||
{#each columns as { band, mode }}
|
||||
<th class="band-column">{band}{#if mode} {mode}{/if}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -337,26 +471,23 @@
|
||||
<td class="entity-cell">
|
||||
<div class="entity-name">{row.entityName}</div>
|
||||
</td>
|
||||
{#each bands as band}
|
||||
{@const qsos = row.bands.get(band) || []}
|
||||
{#each columns as { band, mode }}
|
||||
{@const columnKey = mode ? `${band}/${mode}` : band}
|
||||
{@const slotData = row.slots.get(columnKey)}
|
||||
<td class="band-cell">
|
||||
{#if qsos.length > 0}
|
||||
<div class="qso-list">
|
||||
{#each qsos as qso}
|
||||
<div
|
||||
class="qso-entry {qso.confirmed ? 'qso-confirmed' : 'qso-worked'}"
|
||||
on:click={() => openQSODetailModal(qso)}
|
||||
on:keydown={(e) => e.key === 'Enter' && openQSODetailModal(qso)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span class="callsign">{qso.callsign}</span>
|
||||
<span class="mode">{qso.mode}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#if slotData && slotData.qsos && slotData.qsos.length > 0}
|
||||
<span
|
||||
class="qso-count-link"
|
||||
on:click={() => openQSOListModal(slotData, row.entityName, band, mode)}
|
||||
on:keydown={(e) => e.key === 'Enter' && openQSOListModal(slotData, row.entityName, band, mode)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="{slotData.qsos.length} QSO{slotData.qsos.length === 1 ? '' : 's'}"
|
||||
>
|
||||
{slotData.qsos.length}
|
||||
</span>
|
||||
{:else}
|
||||
<div class="no-qso">-</div>
|
||||
<span class="no-qso">-</span>
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
@@ -368,8 +499,9 @@
|
||||
<td class="sum-label">
|
||||
<strong>Sum</strong>
|
||||
</td>
|
||||
{#each bands as band}
|
||||
{@const sum = bandSums.get(band) ?? 0}
|
||||
{#each columns as { band, mode }}
|
||||
{@const columnKey = mode ? `${band}/${mode}` : band}
|
||||
{@const sum = columnSums.get(columnKey) ?? 0}
|
||||
<td class="sum-cell">
|
||||
<strong>{sum}</strong>
|
||||
</td>
|
||||
@@ -564,6 +696,51 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- QSO List Modal -->
|
||||
{#if showQSOListModal && selectedSlotInfo}
|
||||
<div class="modal-backdrop" on:click={closeQSOListModal} on:keydown={(e) => e.key === 'Escape' && closeQSOListModal()} role="dialog" aria-modal="true">
|
||||
<div class="modal-content qso-list-modal" on:click|stopPropagation>
|
||||
<div class="modal-header">
|
||||
<h2>QSOs for {selectedSlotInfo.entityName} ({selectedSlotInfo.band}{#if selectedSlotInfo.mode} {selectedSlotInfo.mode}{/if})</h2>
|
||||
<button class="modal-close" on:click={closeQSOListModal} aria-label="Close modal">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
{#if selectedSlotQSOs.length === 0}
|
||||
<div class="empty">No QSOs found for this slot.</div>
|
||||
{:else}
|
||||
<table class="qso-list-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Callsign</th>
|
||||
<th>Date</th>
|
||||
<th>Time</th>
|
||||
<th>Mode</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each selectedSlotQSOs as qso}
|
||||
<tr
|
||||
class="qso-list-row"
|
||||
on:click={() => { openQSODetailModal(qso); closeQSOListModal(); }}
|
||||
on:keydown={(e) => e.key === 'Enter' && (openQSODetailModal(qso), closeQSOListModal())}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<td class="callsign-cell">{qso.callsign}</td>
|
||||
<td>{formatDate(qso.qsoDate)}</td>
|
||||
<td>{formatTime(qso.timeOn)}</td>
|
||||
<td>{qso.mode || '-'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
@@ -1037,4 +1214,129 @@
|
||||
.modal-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Mode Filter */
|
||||
.mode-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.mode-filter label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mode-filter select {
|
||||
padding: 0.5rem 2rem 0.5rem 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
font-size: 0.95rem;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.mode-filter select:hover {
|
||||
border-color: #4a90e2;
|
||||
}
|
||||
|
||||
.mode-filter select:focus {
|
||||
outline: none;
|
||||
border-color: #4a90e2;
|
||||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||||
}
|
||||
|
||||
.clear-filter-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #e0e0e0;
|
||||
color: #333;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.clear-filter-btn:hover {
|
||||
background-color: #d0d0d0;
|
||||
}
|
||||
|
||||
/* QSO Count Link */
|
||||
.qso-count-link {
|
||||
cursor: pointer;
|
||||
color: #4a90e2;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.qso-count-link:hover {
|
||||
background-color: #f0f7ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.qso-count-link:focus {
|
||||
outline: 2px solid #4a90e2;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.no-qso {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* QSO List Modal */
|
||||
.qso-list-modal {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.qso-list-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.qso-list-table th,
|
||||
.qso-list-table td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.qso-list-table th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.qso-list-row {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.qso-list-row:hover {
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
.qso-list-row:focus {
|
||||
outline: 2px solid #4a90e2;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.callsign-cell {
|
||||
font-family: monospace;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user