Public/Live_RC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add sorting

Browse Source
This commit is contained in:
larssand
2026-09-05 13:50:11 +02:00
parent 9c74c1f256
commit a2e29b89dd
6 changed files with 193 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/training_views.js
View File

@@ -1,3 +1,4 @@
import { sortValuesAttribute } from "./list_sorting.js";
import { getDriverProfileGroups, getDriverProfileReferences } from "./driver_profile_logic.js";
function renderStintRow(row, { t, escapeHtml, formatLap, formatRaceClock }) {
@@ -12,7 +13,7 @@ function renderStintRow(row, { t, escapeHtml, formatLap, formatRaceClock }) {
? `${paceRetention} · ${t("training.strong_finish")}`
: paceRetention;
return `
<tr class="${row.insufficient ? "is-muted" : ""}">
<tr data-sort-values="${sortValuesAttribute([row.number, row.startedAt, row.lapCount, row.bestLapMs || null, row.paceMs || null, row.racePace10Ms || null, row.mistakes, row.endChangeMs, row.consistencyPct, row.fiveMinuteResult ? [row.fiveMinuteResult.lapCount, row.fiveMinuteResult.totalMs] : null, row.durationMs])}" class="${row.insufficient ? "is-muted" : ""}">
<td>${row.number}</td>
<td>${escapeHtml(new Date(row.startedAt).toLocaleString(undefined, { dateStyle: "short", timeStyle: "short" }))}</td>
<td>${row.lapCount}</td>
@@ -182,7 +183,7 @@ export function renderTrainingView(deps) {
const dailyRows = stats.dailySummaries.length
? stats.dailySummaries.slice(0, 10).map((day) => `
<tr>
<td>${escapeHtml(new Date(day.latestTimestamp).toLocaleDateString(undefined, { dateStyle: "medium" }))}</td>
<td data-sort-value="${day.latestTimestamp}">${escapeHtml(new Date(day.latestTimestamp).toLocaleDateString(undefined, { dateStyle: "medium" }))}</td>
<td>${day.laps}</td>
<td>${formatLap(day.bestLapMs)}</td>
<td>${formatLap(day.averageLapMs)}</td>
@@ -237,7 +238,7 @@ export function renderTrainingView(deps) {
.map((entry) => {
const milestone = getNextTrainingMilestone(entry.stats);
return `
<tr class="${entry.profile.id === selectedProfileId ? "is-selected" : ""}">
<tr data-sort-values="${sortValuesAttribute([entry.driver?.name, entry.stats.totalLaps, entry.stats.trainingDays, entry.stats.bestLapMs || null, milestone.targetLaps])}" class="${entry.profile.id === selectedProfileId ? "is-selected" : ""}">
<td><button class="training-club-driver" data-driver-id="${escapeHtml(entry.profile.id)}" data-class-id="${escapeHtml(selectedClassId)}" type="button">${escapeHtml(entry.driver?.name || "-")}</button></td>
<td>${entry.stats.totalLaps}</td>
<td>${entry.stats.trainingDays}</td>
@@ -546,13 +547,13 @@ export function renderTrainingView(deps) {
${stintAnalysis.best ? `<span class="badge success">${escapeHtml(t("training.best_stint", { stint: stintAnalysis.best.number, laps: stintAnalysis.best.lapCount, pace: formatLap(stintAnalysis.best.paceMs) }))}</span>` : ""}
</div>
<div class="table-wrap training-history-wrap">
<table class="training-history-table training-stint-table"><thead>${stintColumns}</thead><tbody>${featuredStintRows}</tbody></table>
<table data-sort-id="training-stints-featured" class="training-history-table training-stint-table"><thead>${stintColumns}</thead><tbody>${featuredStintRows}</tbody></table>
</div>
${stintAnalysis.rows.length > featuredStints.length ? `
<details class="training-stint-all">
<summary>${escapeHtml(t("training.show_all_stints", { count: stintAnalysis.rows.length }))}</summary>
<div class="table-wrap training-history-wrap">
<table class="training-history-table training-stint-table"><thead>${stintColumns}</thead><tbody>${allStintRows}</tbody></table>
<table data-sort-id="training-stints-all" class="training-history-table training-stint-table"><thead>${stintColumns}</thead><tbody>${allStintRows}</tbody></table>
</div>
</details>` : ""}
<p class="hint training-method-note">${escapeHtml(t("training.stats_method"))}</p>
@@ -580,11 +581,11 @@ export function renderTrainingView(deps) {
${channelStats.recentPitStops.length ? `
<div class="training-section-title"><h3>${escapeHtml(t("training.recent_pit_stops"))}</h3></div>
<div class="table-wrap training-history-wrap">
<table class="training-history-table">
<table data-sort-id="training-pit-stops" class="training-history-table">
<thead><tr><th>${escapeHtml(t("training.date"))}</th><th>${escapeHtml(t("table.event"))}</th><th>${escapeHtml(t("table.session"))}</th><th>${escapeHtml(t("table.car"))}</th><th>${escapeHtml(t("table.duration"))}</th></tr></thead>
<tbody>${channelStats.recentPitStops.map((stop) => `
<tr>
<td>${escapeHtml(new Date(stop.enteredAt).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }))}</td>
<td data-sort-value="${stop.enteredAt}">${escapeHtml(new Date(stop.enteredAt).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }))}</td>
<td>${escapeHtml(stop.eventName || "-")}</td>
<td>${escapeHtml(stop.sessionName || "-")}</td>
<td>${escapeHtml(stop.carName || "-")}</td>
@@ -599,7 +600,7 @@ export function renderTrainingView(deps) {
${stats.personalBestGainMs ? `<span class="badge success">${escapeHtml(t("training.pb_improvement", { lap: formatLap(stats.personalBestGainMs) }))}</span>` : ""}
</div>
<div class="table-wrap training-history-wrap">
<table class="training-history-table">
<table data-sort-id="training-history" class="training-history-table">
<thead><tr><th>${escapeHtml(t("training.date"))}</th><th>${escapeHtml(t("training.laps"))}</th><th>${escapeHtml(t("training.best_lap"))}</th><th>${escapeHtml(t("training.average_lap"))}</th></tr></thead>
<tbody>${dailyRows}</tbody>
</table>
@@ -613,7 +614,7 @@ export function renderTrainingView(deps) {
<span class="training-disclosure-arrow">+</span>
</summary>
<div class="training-disclosure-body table-wrap training-history-wrap">
<table class="training-history-table training-club-table">
<table data-sort-id="training-class-drivers" class="training-history-table training-club-table">
<thead><tr><th>${escapeHtml(t("training.driver"))}</th><th>${escapeHtml(t("training.laps"))}</th><th>${escapeHtml(t("training.training_days"))}</th><th>${escapeHtml(t("training.best_lap"))}</th><th>${escapeHtml(t("training.next_target"))}</th></tr></thead>
<tbody>${clubRows}</tbody>
</table>
@@ -859,7 +860,7 @@ function renderTrainingOverview({ state, dom, t, escapeHtml, formatLap, uid, sav
? new Date(row.stats.lastLapAt).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })
: "-";
return `
<tr>
<tr data-sort-values="${sortValuesAttribute([row.driver?.name, row.className, row.stats.totalLaps, row.stats.trainingDays, row.stats.bestLapMs || null, row.stats.lastLapAt || null, milestone.targetLaps])}">
<td><button class="training-club-driver" data-driver-id="${escapeHtml(row.profile.id)}" data-class-id="${escapeHtml(row.classId)}" type="button">${escapeHtml(row.driver?.name || "-")}</button></td>
<td>${escapeHtml(row.className)}</td>
<td>${row.stats.totalLaps}</td>
@@ -941,7 +942,7 @@ function renderTrainingOverview({ state, dom, t, escapeHtml, formatLap, uid, sav
<div class="panel-body">
<p class="hint">${escapeHtml(t("training.overview_class_hint"))}</p>
<div class="table-wrap training-history-wrap">
<table class="training-history-table training-club-table">
<table data-sort-id="training-overview" class="training-history-table training-club-table">
<thead><tr><th>${escapeHtml(t("training.driver"))}</th><th>${escapeHtml(t("training.class"))}</th><th>${escapeHtml(t("training.laps"))}</th><th>${escapeHtml(t("training.training_days"))}</th><th>${escapeHtml(t("training.best_lap"))}</th><th>${escapeHtml(t("training.last_activity"))}</th><th>${escapeHtml(t("training.next_target"))}</th></tr></thead>
<tbody>${tableRows}</tbody>
</table>