show runtime in gui

Author: sctanf

gui/src/components/tracker/TrackerBattery.tsx

@@ -6,6 +6,7 @@ import { Typography } from '@/components/commons/Typography';
 export function TrackerBattery({
   value,
   voltage,
+  runtime,
   disabled,
   textColor = 'primary',
 }: {
@@ -14,6 +15,7 @@ export function TrackerBattery({
    */
   value: number;
   voltage?: number | null;
+  runtime?: BigInt | null
   disabled?: boolean;
   textColor?: string;
 }) {
@@ -33,11 +35,27 @@ export function TrackerBattery({
   return (
     <div className="flex gap-2">
       <div className="flex flex-col justify-around">
-        <BatteryIcon value={value} disabled={disabled} charging={charging} />
+        <BatteryIcon value={value} disabled={disabled} charging={charging}/>
       </div>
       {((!charging || showVoltage) && (
-        <div className="w-10">
-          {!charging && (
+        <div className="w-15">
+          {!charging && runtime && (
+            <Typography color={textColor}>
+              {((
+                    runtime.valueOf() /
+                    BigInt(3600000000)
+                  ).toString() +
+                    'h ' +
+                    (
+                      (runtime.valueOf() %
+                        BigInt(3600000000)) /
+                      BigInt(60000000)
+                    ).toString() +
+                    'min') ||
+                  'N/A'}
+            </Typography>
+          )}
+          {!charging && (!runtime || showVoltage) && (
             <Typography color={textColor}>
               {percentFormatter.format(value)}
             </Typography>
@@ -49,7 +67,7 @@ export function TrackerBattery({
           )}
         </div>
       )) || (
-        <div className="flex flex-col justify-center w-10">
+        <div className="flex flex-col justify-center w-15">
           <div className="w-5 h-1 bg-background-30 rounded-full" />
         </div>
       )}

gui/src/components/tracker/TrackerCard.tsx

@@ -51,6 +51,7 @@ function TrackerBig({
               <TrackerBattery
                 voltage={device.hardwareStatus.batteryVoltage}
                 value={device.hardwareStatus.batteryPctEstimate / 100}
+                runtime={device.hardwareStatus.batteryRuntimeEstimate}
                 disabled={tracker.status === TrackerStatusEnum.DISCONNECTED}
               />
             )}
@@ -119,6 +120,7 @@ function TrackerSmol({
               <TrackerBattery
                 voltage={device.hardwareStatus.batteryVoltage}
                 value={device.hardwareStatus.batteryPctEstimate / 100}
+                runtime={device.hardwareStatus.batteryRuntimeEstimate}
                 disabled={tracker.status === TrackerStatusEnum.DISCONNECTED}
               />
             )}

gui/src/components/tracker/TrackersTable.tsx

@@ -229,6 +229,7 @@ function Row({
                 <TrackerBattery
                   value={device.hardwareStatus.batteryPctEstimate / 100}
                   voltage={device.hardwareStatus.batteryVoltage}
+                  runtime={device.hardwareStatus.batteryRuntimeEstimate}
                   disabled={tracker.status === TrackerStatusEnum.DISCONNECTED}
                   textColor={fontColor}
                 />
@@ -329,7 +330,7 @@ export function TrackersTable({
     const cols = [
       'minmax(150px, 1.5fr)', // Name
       'minmax(100px, 1fr)', // Type
-      'minmax(60px, 1fr)', // Battery
+      'minmax(110px, 1fr)', // Battery
       '6rem', // Ping (w-24)
       'minmax(60px, 1fr)', // TPS
       config?.devSettings?.preciseRotation ? '11rem' : '8rem', // Rotation