add sorting

src/timing_views.js

@@ -1,3 +1,4 @@
+import { sortableTable, sortValuesAttribute } from "./list_sorting.js";
 import {
   advanceSessionReplay,
   buildSessionReplaySnapshot,
@@ -267,7 +268,7 @@ function renderLeaderboard(rows, deps) {
     return `<p>${t("timing.no_laps")}</p>`;
   }
 
-  return renderTable(
+  return sortableTable(renderTable(
     [
       t("table.pos"),
       t("table.driver"),
@@ -287,7 +288,7 @@ function renderLeaderboard(rows, deps) {
     rows.map((row, idx) => {
       const posClass = idx === 0 ? "pos-1" : idx === 1 ? "pos-2" : idx === 2 ? "pos-3" : "";
       return `
-        <tr class="${row.invalidPending ? "leaderboard-invalid" : ""}">
+        <tr data-sort-values="${sortValuesAttribute([idx + 1, row.displayName || row.driverName, row.subLabel || row.carName, row.transponder, row.laps, row.resultDisplay, row.lastLapMs || null, row.bestLapMs || null, row.leaderGap || row.gap || null, row.gapAhead || null, row.lapDelta || null, row.lastSplitMs || null, [Number(row.pitStops || 0), Number(row.totalPitMs || 0)]])}" class="${row.invalidPending ? "leaderboard-invalid" : ""}">
           <td><span class="pos-pill ${posClass}">${idx + 1}</span></td>
           <td>
             <div class="table-primary">${escapeHtml(row.displayName || row.driverName)}</div>
@@ -310,7 +311,7 @@ function renderLeaderboard(rows, deps) {
         </tr>
       `;
     })
-  );
+  ), "timing-leaderboard");
 }
 
 function renderRecentPassings(session, deps) {
@@ -324,11 +325,11 @@ function renderRecentPassings(session, deps) {
     return `<p>${t("timing.no_passings")}</p>`;
   }
 
-  return renderTable(
+  return sortableTable(renderTable(
     [t("table.time"), t("table.transponder"), t("table.driver"), t("table.car"), t("table.last_lap"), t("table.status"), ""],
     items.map((p, index) => {
       return `
-        <tr class="${isCountedPassing(p) ? "" : "passing-invalid"}">
+        <tr data-sort-values="${sortValuesAttribute([p.timestamp, p.transponder, p.teamName || p.driverName, p.carName || p.subLabel, p.lapMs, getPassingValidationLabel(p)])}" class="${isCountedPassing(p) ? "" : "passing-invalid"}">
           <td>${new Date(p.timestamp).toLocaleTimeString()}</td>
           <td>${escapeHtml(p.transponder)}</td>
           <td>${escapeHtml(p.teamName ? `${p.teamName} • ${p.driverName || t("common.unknown_driver")}` : p.driverName || t("common.unknown_driver"))}</td>
@@ -339,7 +340,7 @@ function renderRecentPassings(session, deps) {
         </tr>
       `;
     })
-  );
+  ), "timing-passings");
 }
 
 export function renderTimingView(deps) {