legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-15 17:12:59 -04:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

neat

Browse Source
This commit is contained in:
legop3
2026-04-26 20:43:46 -04:00
parent 47dc4e06af
commit de3e32e0f0
4 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/vip/VipNeatoCard.jsx
+20 -11
View File
@@ -22,15 +22,19 @@ function badgeClass(active) {
: 'rounded bg-slate-700 px-1 py-0.5 text-[0.7rem] font-semibold text-slate-200';
}
function StatusIndicator({ label, active, detail = '' }) {
function statusToneClass(tone) {
if (tone === 'good') return 'bg-emerald-500';
if (tone === 'warn') return 'bg-amber-500 text-slate-900';
if (tone === 'danger') return 'bg-rose-600';
if (tone === 'info') return 'bg-sky-500';
return 'bg-slate-700';
}
function StatusIndicator({ label, tone = 'muted', detail = '' }) {
return (
<div
className={`rounded-md px-0.5 py-0.5 text-xs text-slate-100 ${
active ? 'bg-emerald-500' : 'bg-slate-700'
}`}
>
<div className={`rounded-md px-0.5 py-0.5 text-xs text-slate-100 ${statusToneClass(tone)}`}>
<div className="text-center font-medium">{label}</div>
<div className="text-center text-[0.72rem] opacity-90">{detail || (active ? 'yes' : 'no')}</div>
<div className="text-center text-[0.72rem] opacity-90">{detail || '--'}</div>
</div>
);
}
@@ -67,6 +71,11 @@ export default function VipNeatoCard({ neato, onStart, onSendHome, onLocate, ful
const robotAlert = normalizeState(neato?.telemetry?.robotAlert) || '--';
const hasError = robotError !== '--' && !/^no errors$/i.test(robotError) && !/^200/.test(robotError);
const hasAlert = robotAlert !== '--' && !/^200/.test(robotAlert);
const batteryTone =
battery == null ? 'muted' : battery >= 60 ? 'good' : battery >= 25 ? 'warn' : 'danger';
const voltageTone = voltage == null ? 'muted' : 'info';
const chargingTone = charging ? 'info' : 'muted';
const dockedTone = docked ? 'info' : 'muted';
const runAction = async (key, fn, successMessage) => {
if (!fn) return;
@@ -122,10 +131,10 @@ export default function VipNeatoCard({ neato, onStart, onSendHome, onLocate, ful
<div className="grid h-full gap-0.5 grid-rows-[auto_1fr]">
<p className="text-sm text-slate-200 text-center">Power & Dock</p>
<div className="grid gap-0.5 content-start grid-cols-2">
<StatusIndicator label="Battery" active={battery != null} detail={batteryLabel} />
<StatusIndicator label="Voltage" active={voltage != null} detail={voltageLabel} />
<StatusIndicator label="Charging" active={charging} detail={charging ? 'active' : 'idle'} />
<StatusIndicator label="Docked" active={docked} detail={docked ? 'on base' : 'away'} />
<StatusIndicator label="Battery" tone={batteryTone} detail={batteryLabel} />
<StatusIndicator label="Voltage" tone={voltageTone} detail={voltageLabel} />
<StatusIndicator label="Charging" tone={chargingTone} detail={charging ? 'active' : 'idle'} />
<StatusIndicator label="Docked" tone={dockedTone} detail={docked ? 'on base' : 'away'} />
</div>
</div>
</section>