83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import type React from "react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import prettyMilliseconds from "pretty-ms";
|
|
|
|
import { useDevice } from "@app/core/providers/useDevice.js";
|
|
import { Battery100Icon, ClockIcon } from "@heroicons/react/24/outline";
|
|
|
|
export interface BatteryWidgetProps {
|
|
batteryLevel: number;
|
|
voltage: number;
|
|
}
|
|
|
|
export const BatteryWidget = ({
|
|
batteryLevel,
|
|
voltage,
|
|
}: BatteryWidgetProps): JSX.Element => {
|
|
const { nodes, hardware } = useDevice();
|
|
|
|
const [timeRemaining, setTimeRemaining] = useState("Unknown");
|
|
|
|
useEffect(() => {
|
|
const stats = nodes.find(
|
|
(n) => n.data.num === hardware.myNodeNum
|
|
)?.deviceMetrics;
|
|
|
|
if (stats) {
|
|
let currentStat: number | undefined = undefined;
|
|
let currentTime = new Date();
|
|
let previousStat: number | undefined = undefined;
|
|
let previousTime = new Date();
|
|
for (const stat of [...stats].reverse()) {
|
|
if (stat.batteryLevel) {
|
|
if (!currentStat) {
|
|
currentStat = stat.batteryLevel;
|
|
currentTime = stat.timestamp;
|
|
} else {
|
|
previousStat = stat.batteryLevel;
|
|
previousTime = stat.timestamp;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (currentStat && previousStat) {
|
|
const timeDiff = currentTime.getTime() - previousTime.getTime();
|
|
const statDiff = Math.abs(currentStat - previousStat);
|
|
if (statDiff !== 0) {
|
|
//convert to ms/%
|
|
const msPerPercent = timeDiff / statDiff;
|
|
const formatted = prettyMilliseconds(
|
|
(100 - currentStat) * msPerPercent
|
|
);
|
|
setTimeRemaining(formatted);
|
|
}
|
|
} else setTimeRemaining("Unknown");
|
|
}
|
|
}, [hardware.myNodeNum, nodes]);
|
|
|
|
return (
|
|
<div className="flex gap-3 overflow-hidden rounded-lg bg-white p-3 shadow">
|
|
<div className="rounded-md bg-indigo-500 p-3">
|
|
<Battery100Icon className="h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="truncate text-sm font-medium text-gray-500">
|
|
Battery State
|
|
</p>
|
|
<div className="flex gap-1">
|
|
<p className="text-xl font-semibold text-gray-900">{batteryLevel}%</p>
|
|
<div className={`flex text-sm font-semibold text-orange-600`}>
|
|
<ClockIcon
|
|
className="text-Orange-500 h-5 w-5 flex-shrink-0 self-center"
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="my-auto">{timeRemaining}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|