Display entity names instead of IDs in award details

- Add entityName field to backend entity breakdown
- For DXCC: Show country name (e.g., 'Germany') with ID in parentheses
- For WAS: Show state name
- For VUCC: Show grid square
- For RS-44: Show callsign
- Update sorting to use entity names for better UX
- Add subtle styling for entity IDs (gray, smaller font)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-16 09:05:50 +01:00
parent b3567100c0
commit 3b7dfd74fe
2 changed files with 18 additions and 5 deletions

View File

@@ -280,6 +280,7 @@ export async function getAwardEntityBreakdown(userId, awardId) {
entityMap.set(entity, { entityMap.set(entity, {
entity, entity,
entityId: qso.entityId, entityId: qso.entityId,
entityName: qso.entity || qso.state || qso.grid || qso.callsign || String(entity),
worked: false, worked: false,
confirmed: false, confirmed: false,
qsoDate: qso.qsoDate, qsoDate: qso.qsoDate,

View File

@@ -67,8 +67,8 @@
switch (sort) { switch (sort) {
case 'name': case 'name':
filtered.sort((a, b) => { filtered.sort((a, b) => {
const aName = String(a.entity || ''); const aName = String(a.entityName || a.entity || '');
const bName = String(b.entity || ''); const bName = String(b.entityName || b.entity || '');
return aName.localeCompare(bName); return aName.localeCompare(bName);
}); });
break; break;
@@ -78,8 +78,8 @@
if (!a.confirmed && b.confirmed) return 1; if (!a.confirmed && b.confirmed) return 1;
if (a.worked && !b.worked) return -1; if (a.worked && !b.worked) return -1;
if (!a.worked && b.worked) return 1; if (!a.worked && b.worked) return 1;
const aName = String(a.entity || ''); const aName = String(a.entityName || a.entity || '');
const bName = String(b.entity || ''); const bName = String(b.entityName || b.entity || '');
return aName.localeCompare(bName); return aName.localeCompare(bName);
}); });
break; break;
@@ -162,7 +162,12 @@
{#each getFilteredEntities() as entity (entity.entity)} {#each getFilteredEntities() as entity (entity.entity)}
<div class="entity-card {getStatusClass(entity)}"> <div class="entity-card {getStatusClass(entity)}">
<div class="entity-info"> <div class="entity-info">
<div class="entity-name">{entity.entity || 'Unknown'}</div> <div class="entity-name">
{entity.entityName || entity.entity || 'Unknown'}
{#if entity.entityId && entity.entityId !== entity.entityName}
<span class="entity-id">({entity.entityId})</span>
{/if}
</div>
<div class="entity-details"> <div class="entity-details">
{#if entity.callsign} {#if entity.callsign}
<span class="callsign">{entity.callsign}</span> <span class="callsign">{entity.callsign}</span>
@@ -356,6 +361,13 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.entity-id {
font-size: 0.85rem;
font-weight: 400;
color: #999;
margin-left: 0.5rem;
}
.entity-details { .entity-details {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;