Add award detail page and fix award progress calculation
## Frontend - Create award detail page at /awards/[id] - Show all entities with worked/confirmed status - Add filtering (all, worked, confirmed, unworked) - Add sorting (name, status) - Display summary cards (total, confirmed, worked, needed) - Show entity details (callsign, band, mode, date) ## Backend Fixes - Fix award progress calculation for filtered awards - Add normalizeAwardRules to handle "filtered" type awards - Fix satellite filter to check satName field instead of satellite - Add case-insensitive contains matching - Apply normalization to both progress and entity breakdown functions This fixes the 0/0 issue for DXCC CW, WAS, VUCC, and satellite awards. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -60,13 +60,33 @@ export async function getAllAwards() {
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize award rules to a consistent format
|
||||
*/
|
||||
function normalizeAwardRules(rules) {
|
||||
// Handle "filtered" type awards (like DXCC CW)
|
||||
if (rules.type === 'filtered' && rules.baseRule) {
|
||||
return {
|
||||
type: 'entity',
|
||||
entityType: rules.baseRule.entityType,
|
||||
target: rules.baseRule.target,
|
||||
filters: rules.filters,
|
||||
};
|
||||
}
|
||||
|
||||
return rules;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate award progress for a user
|
||||
* @param {number} userId - User ID
|
||||
* @param {Object} award - Award definition
|
||||
*/
|
||||
export async function calculateAwardProgress(userId, award) {
|
||||
const { rules } = award;
|
||||
let { rules } = award;
|
||||
|
||||
// Normalize rules to handle different formats
|
||||
rules = normalizeAwardRules(rules);
|
||||
|
||||
// Get all QSOs for user
|
||||
const allQSOs = await db
|
||||
@@ -149,7 +169,15 @@ function applyFilters(qsos, filters) {
|
||||
* Check if a QSO matches a filter
|
||||
*/
|
||||
function matchesFilter(qso, filter) {
|
||||
const value = qso[filter.field];
|
||||
let value;
|
||||
|
||||
// Special handling for satellite field
|
||||
if (filter.field === 'satellite') {
|
||||
// Check if it's a satellite QSO (has satName)
|
||||
value = qso.satName && qso.satName.length > 0;
|
||||
} else {
|
||||
value = qso[filter.field];
|
||||
}
|
||||
|
||||
switch (filter.operator) {
|
||||
case 'eq':
|
||||
@@ -161,7 +189,7 @@ function matchesFilter(qso, filter) {
|
||||
case 'nin':
|
||||
return Array.isArray(filter.value) && !filter.value.includes(value);
|
||||
case 'contains':
|
||||
return value && typeof value === 'string' && value.includes(filter.value);
|
||||
return value && typeof value === 'string' && value.toLowerCase().includes(filter.value.toLowerCase());
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
@@ -204,7 +232,10 @@ export async function getAwardEntityBreakdown(userId, awardId) {
|
||||
throw new Error('Award not found');
|
||||
}
|
||||
|
||||
const { rules } = award;
|
||||
let { rules } = award;
|
||||
|
||||
// Normalize rules to handle different formats
|
||||
rules = normalizeAwardRules(rules);
|
||||
|
||||
// Get all QSOs for user
|
||||
const allQSOs = await db
|
||||
|
||||
408
src/frontend/src/routes/awards/[id]/+page.svelte
Normal file
408
src/frontend/src/routes/awards/[id]/+page.svelte
Normal file
@@ -0,0 +1,408 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { auth } from '$lib/stores.js';
|
||||
|
||||
let award = null;
|
||||
let entities = [];
|
||||
let loading = true;
|
||||
let error = null;
|
||||
let filter = 'all'; // all, worked, confirmed, unworked
|
||||
let sort = 'name'; // name, status
|
||||
|
||||
onMount(async () => {
|
||||
await loadAwardData();
|
||||
});
|
||||
|
||||
async function loadAwardData() {
|
||||
try {
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
const awardId = $page.params.id;
|
||||
|
||||
// Fetch award entities
|
||||
const response = await fetch(`/api/awards/${awardId}/entities`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${$auth.token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load award details');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.success) {
|
||||
throw new Error(data.error || 'Failed to load award details');
|
||||
}
|
||||
|
||||
award = data.award;
|
||||
entities = data.entities || [];
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getFilteredEntities() {
|
||||
let filtered = [...entities];
|
||||
|
||||
// Apply status filter
|
||||
switch (filter) {
|
||||
case 'worked':
|
||||
filtered = filtered.filter((e) => e.worked);
|
||||
break;
|
||||
case 'confirmed':
|
||||
filtered = filtered.filter((e) => e.confirmed);
|
||||
break;
|
||||
case 'unworked':
|
||||
filtered = filtered.filter((e) => !e.worked);
|
||||
break;
|
||||
}
|
||||
|
||||
// Apply sorting
|
||||
switch (sort) {
|
||||
case 'name':
|
||||
filtered.sort((a, b) => (a.entity || '').localeCompare(b.entity || ''));
|
||||
break;
|
||||
case 'status':
|
||||
filtered.sort((a, b) => {
|
||||
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;
|
||||
return (a.entity || '').localeCompare(b.entity || '');
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}
|
||||
|
||||
function getStatusClass(entity) {
|
||||
if (entity.confirmed) return 'confirmed';
|
||||
if (entity.worked) return 'worked';
|
||||
return 'unworked';
|
||||
}
|
||||
|
||||
function getStatusText(entity) {
|
||||
if (entity.confirmed) return 'Confirmed';
|
||||
if (entity.worked) return 'Worked';
|
||||
return 'Not Worked';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
{#if loading}
|
||||
<div class="loading">Loading award details...</div>
|
||||
{:else if error}
|
||||
<div class="error">
|
||||
<p>Failed to load award: {error}</p>
|
||||
<a href="/awards" class="btn">← Back to Awards</a>
|
||||
</div>
|
||||
{:else if award}
|
||||
<div class="award-header">
|
||||
<h1>{award.name}</h1>
|
||||
<p class="description">{award.description}</p>
|
||||
<a href="/awards" class="back-link">← Back to Awards</a>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="filter-group">
|
||||
<label>Filter:</label>
|
||||
<select bind:value={filter}>
|
||||
<option value="all">All Entities</option>
|
||||
<option value="worked">Worked</option>
|
||||
<option value="confirmed">Confirmed</option>
|
||||
<option value="unworked">Unworked</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sort-group">
|
||||
<label>Sort by:</label>
|
||||
<select bind:value={sort}>
|
||||
<option value="name">Name</option>
|
||||
<option value="status">Status</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary">
|
||||
<div class="summary-card">
|
||||
<span class="summary-label">Total:</span>
|
||||
<span class="summary-value">{entities.length}</span>
|
||||
</div>
|
||||
<div class="summary-card confirmed">
|
||||
<span class="summary-label">Confirmed:</span>
|
||||
<span class="summary-value">{entities.filter((e) => e.confirmed).length}</span>
|
||||
</div>
|
||||
<div class="summary-card worked">
|
||||
<span class="summary-label">Worked:</span>
|
||||
<span class="summary-value">{entities.filter((e) => e.worked).length}</span>
|
||||
</div>
|
||||
<div class="summary-card unworked">
|
||||
<span class="summary-label">Needed:</span>
|
||||
<span class="summary-value">{entities.filter((e) => !e.worked).length}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entities-list">
|
||||
{#if getFilteredEntities().length === 0}
|
||||
<div class="empty">No entities match the current filter.</div>
|
||||
{:else}
|
||||
{#each getFilteredEntities() as entity (entity.entity)}
|
||||
<div class="entity-card {getStatusClass(entity)}">
|
||||
<div class="entity-info">
|
||||
<div class="entity-name">{entity.entity || 'Unknown'}</div>
|
||||
<div class="entity-details">
|
||||
{#if entity.callsign}
|
||||
<span class="callsign">{entity.callsign}</span>
|
||||
{/if}
|
||||
{#if entity.band}
|
||||
<span class="band">{entity.band}</span>
|
||||
{/if}
|
||||
{#if entity.mode}
|
||||
<span class="mode">{entity.mode}</span>
|
||||
{/if}
|
||||
{#if entity.qsoDate}
|
||||
<span class="date">{entity.qsoDate}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-status">
|
||||
<span class="status-badge {getStatusClass(entity)}">
|
||||
{getStatusText(entity)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error,
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.award-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #333;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
color: #4a90e2;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-group,
|
||||
.sort-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.summary-card.confirmed {
|
||||
border-color: #4a90e2;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
.summary-card.worked {
|
||||
border-color: #66bb6a;
|
||||
background-color: #f5fff5;
|
||||
}
|
||||
|
||||
.summary-card.unworked {
|
||||
border-color: #ffa726;
|
||||
background-color: #fff8f0;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.entities-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.entity-card {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.entity-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.entity-card.confirmed {
|
||||
border-left: 4px solid #4a90e2;
|
||||
}
|
||||
|
||||
.entity-card.worked {
|
||||
border-left: 4px solid #ffa726;
|
||||
}
|
||||
|
||||
.entity-card.unworked {
|
||||
border-left: 4px solid #bdbdbd;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.entity-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.entity-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.entity-details {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.callsign,
|
||||
.band,
|
||||
.mode,
|
||||
.date {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.entity-status {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-badge.confirmed {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-badge.worked {
|
||||
background-color: #ffa726;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-badge.unworked {
|
||||
background-color: #e0e0e0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #357abd;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user