From fae14aa6be920ccb3516333649d70cf8bc611532 Mon Sep 17 00:00:00 2001
From: acheronfail <acheronfail@gmail.com>
Date: Tue, 21 Apr 2026 23:08:29 +0930
Subject: [PATCH] app: show time

---
 src/components/Details.svelte | 18 ++++++++++--------
 src/lib/misc.ts               |  9 +++++++++
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/Details.svelte b/src/components/Details.svelte
index faa2f4b..833d0b1 100644
--- a/src/components/Details.svelte
+++ b/src/components/Details.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import { Units, type RowWithIndex } from '../lib/parse/types';
+  import { RowKey, Units, type RowWithIndex } from '../lib/parse/types';
   import type { RideStats } from './View';
 
   export interface Props {
@@ -20,7 +20,7 @@
   import Button from './Button.svelte';
   import { ChartColours } from './Chart';
   import { empty, State } from '../lib/parse/types';
-  import { formatFloat, formatInt } from '../lib/misc';
+  import { formatFloat, formatInt, formatTime } from '../lib/misc';
   import { globalState } from '../lib/global.svelte';
 
   let { data = empty, stats, batterySpecs, units, hasAdcTelemetry }: Props = $props();
@@ -137,9 +137,10 @@
           { label: 'Total Distance', value: `${formatFloat(stats.totalDistanceMeters)} m` },
           '-',
           {
-            label: 'Index',
-            value: formatInt(data.index + 1),
-            htmlTitle: 'Line number from the CSV file, or the specific log from the JSON file',
+            label: 'Time (index)',
+            value: `${formatTime(data[RowKey.Time])} (${formatInt(data.index + 1)})`,
+            htmlTitle:
+              'Time from log (index is the line number from the CSV file, or the specific log from the JSON file)',
           },
           { value: swapDetailsButton },
         ]}
@@ -156,9 +157,10 @@
           '-',
           { label: 'State', value: data.state.toUpperCase(), color: getStateColor(data.state) },
           {
-            label: 'Index',
-            value: formatInt(data.index + 1),
-            htmlTitle: 'Line number from the CSV file, or the specific log from the JSON file',
+            label: 'Time (index)',
+            value: `${formatTime(data[RowKey.Time])} (${formatInt(data.index + 1)})`,
+            htmlTitle:
+              'Time from log (index is the line number from the CSV file, or the specific log from the JSON file)',
           },
           { value: swapDetailsButton },
         ]}
diff --git a/src/lib/misc.ts b/src/lib/misc.ts
index 03a434c..3bd4a20 100644
--- a/src/lib/misc.ts
+++ b/src/lib/misc.ts
@@ -31,3 +31,12 @@ export const formatInt = (n: number | undefined, allowInt = false) => {
   if (typeof n !== 'number' || Number.isNaN(n)) return '??';
   return n.toString();
 };
+
+// formats seconds into "[__h] [__m] __s"
+export const formatTime = (seconds: number) => {
+  if (typeof seconds !== 'number' || Number.isNaN(seconds)) return '??';
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  return `${h > 0 ? `${h}h ` : ''}${m > 0 ? `${m}m ` : ''}${s}s`;
+};