legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 09:31:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

layoit

Browse Source
This commit is contained in:
legop3
2025-11-15 21:30:18 -05:00
parent 6b52c84b86
commit 392e2f661b
21 changed files with 782 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/TelemetryPanel.jsx
+39 -39
View File
@@ -1,56 +1,56 @@
import { useMemo } from 'react';
import { useSession } from '../context/SessionContext.jsx';
import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
function formatEntries(sensors = {}) {
return Object.entries(sensors).map(([key, value]) => ({
key,
value: typeof value === 'object' ? JSON.stringify(value) : value,
}));
function formatMetric(value, fallback = '--') {
if (value == null || value === '') return fallback;
return value;
}
export default function TelemetryPanel() {
const { session } = useSession();
const roverId = session?.assignment?.roverId;
const frame = useTelemetryFrame(roverId);
const entries = useMemo(() => formatEntries(frame?.sensors), [frame?.sensors]);
const sensors = frame?.sensors || {};
const voltage = sensors.voltageMv != null ? (sensors.voltageMv / 1000).toFixed(2) : null;
const current = sensors.currentMa != null ? (sensors.currentMa / 1000).toFixed(2) : null;
const charge = sensors.batteryChargeMah;
const capacity = sensors.batteryCapacityMah;
const updated = frame?.receivedAt ? new Date(frame.receivedAt).toLocaleTimeString() : null;
const rawSnippet = frame?.raw ? (frame.raw.length > 80 ? `${frame.raw.slice(0, 80)}…` : frame.raw) : null;
return (
<section className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
<header className="flex flex-wrap items-center justify-between gap-3">
<div>
<p className="text-xs uppercase tracking-[0.3em] text-slate-500">Telemetry</p>
<h2 className="text-2xl font-semibold text-white">
{roverId ? `Rover ${roverId}` : 'No rover assigned'}
</h2>
</div>
<p className="text-sm text-slate-400">
{frame?.receivedAt ? `Updated ${new Date(frame.receivedAt).toLocaleTimeString()}` : 'Waiting…'}
</p>
</header>
{entries.length === 0 ? (
<p className="mt-4 text-sm text-slate-400">
{roverId ? 'No sensor frames yet.' : 'Assignment required to view sensors.'}
</p>
<section className="rounded-lg border border-slate-900 bg-slate-950/70 p-2 text-[0.8rem] text-slate-200">
<div className="flex items-center justify-between text-[0.65rem] uppercase tracking-[0.3em] text-slate-500">
<span>Telemetry</span>
<span>{updated ? `Updated ${updated}` : 'waiting'}</span>
</div>
{!roverId ? (
<p className="mt-2 text-[0.75rem] text-slate-400">Assignment required to view sensors.</p>
) : !frame ? (
<p className="mt-2 text-[0.75rem] text-slate-400">No sensor frames yet.</p>
) : (
<dl className="mt-4 grid gap-3 text-sm text-slate-100">
{entries.map(({ key, value }) => (
<div key={key} className="flex justify-between gap-6">
<dt className="text-slate-500">{key}</dt>
<dd className="text-right font-semibold text-white">{value}</dd>
</div>
))}
</dl>
)}
{frame?.raw && (
<div className="mt-6">
<p className="text-xs uppercase tracking-[0.3em] text-slate-500">Raw frame</p>
<pre className="mt-2 max-h-32 overflow-y-auto rounded-xl bg-slate-950/60 p-3 text-xs text-lime-300">
{frame.raw}
</pre>
<div className="mt-2 space-y-2">
<Metric label="Charge" value={formatMetric(charge != null && capacity != null ? `${charge}/${capacity} mAh` : null)} />
<Metric label="Charging" value={formatMetric(sensors.chargingState?.label)} />
<Metric label="OI Mode" value={formatMetric(sensors.oiMode?.label)} />
<Metric label="Voltage" value={formatMetric(voltage ? `${voltage} V` : null)} />
<Metric label="Current" value={formatMetric(current ? `${current} A` : null)} />
</div>
)}
{rawSnippet && (
<pre className="mt-2 overflow-hidden rounded border border-slate-800 bg-black/60 p-1 text-[0.6rem] text-lime-300">
{rawSnippet}
</pre>
)}
</section>
);
}
function Metric({ label, value }) {
return (
<div className="flex items-center justify-between text-[0.75rem]">
<span className="text-slate-500">{label}</span>
<span className="font-semibold text-slate-200">{value}</span>
</div>
);
}