feat: add sum row to award details table

Add a summary row at the bottom of the award details table that shows the sum for each band column. The sum automatically calculates:
- For points-based awards: Total confirmed points per band
- For QSO-based awards: Count of confirmed QSOs per band

The sum row is styled with a gray background and bold text for visual distinction.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-19 16:56:09 +01:00
parent 42b4fce30a
commit 39795cd3c9

View File

@@ -164,6 +164,28 @@
applyFilter(); applyFilter();
} }
// Calculate band sums
$: bandSums = (() => {
const sums = new Map();
const hasPoints = entities.length > 0 && entities[0].points !== undefined;
bands.forEach(band => {
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);
} else {
// Count confirmed QSOs in this band
const count = entities.filter(e => e.band === band && e.confirmed).length;
sums.set(band, count);
}
});
return sums;
})();
// QSO Detail Modal Functions // QSO Detail Modal Functions
async function openQSODetailModal(qso) { async function openQSODetailModal(qso) {
loadingQSO = true; loadingQSO = true;
@@ -341,6 +363,19 @@
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
<tfoot>
<tr class="sum-row">
<td class="sum-label">
<strong>Sum</strong>
</td>
{#each bands as band}
{@const sum = bandSums.get(band) ?? 0}
<td class="sum-cell">
<strong>{sum}</strong>
</td>
{/each}
</tr>
</tfoot>
</table> </table>
{/if} {/if}
</div> </div>
@@ -559,6 +594,28 @@
padding: 0px 3px 0px 3px; padding: 0px 3px 0px 3px;
} }
.award-table tfoot {
background-color: #f5f5f5;
border-top: 2px solid #333;
}
.sum-row td {
border: 1px solid #000;
padding: 8px 5px;
text-align: center;
background-color: #f5f5f5;
font-weight: 600;
}
.sum-label {
text-align: left !important;
color: #333;
}
.sum-cell {
color: #4a90e2;
}
.award-header { .award-header {
margin-bottom: 2rem; margin-bottom: 2rem;
} }