mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 01:21:20 -04:00
change buttons
This commit is contained in:
+1
-1
@@ -15,7 +15,7 @@
|
||||
<!-- 3. convert rover roster to a reusable component, unbake it from telemetry and admin panels -->
|
||||
<!-- 4. room cameras -->
|
||||
4. fix gamepad input - add manual inversions?
|
||||
5. home assistant controls
|
||||
<!-- 5. home assistant controls -->
|
||||
6. nicknames
|
||||
7. discord bot
|
||||
8. turns mode display
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -5,8 +5,8 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>webui</title>
|
||||
<script type="module" crossorigin src="/assets/index-CDUUNtXX.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-Cgkk5Ipu.css">
|
||||
<script type="module" crossorigin src="/assets/index-UfOZBVB4.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-XZ96ICg2.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -21,12 +21,22 @@ function EntityRow({ entity, connected, onToggle }) {
|
||||
const statusTone = unavailable ? 'warn' : isOn ? 'success' : 'muted';
|
||||
const statusLabel = unavailable ? 'Unavailable' : isOn ? 'On' : 'Off';
|
||||
const disableToggle = !connected || unavailable;
|
||||
const toneStyles = unavailable
|
||||
? 'border-slate-800 bg-slate-900 text-slate-400 cursor-not-allowed'
|
||||
: isOn
|
||||
? 'border-emerald-700 bg-emerald-900/80 text-emerald-50 hover:bg-emerald-800'
|
||||
: 'border-rose-800 bg-rose-900/80 text-rose-50 hover:bg-rose-800';
|
||||
|
||||
return (
|
||||
<article className="flex items-center justify-between gap-1 rounded border border-slate-800 bg-zinc-950 px-1 py-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggle(entity.id)}
|
||||
disabled={disableToggle}
|
||||
className={`flex w-full items-center justify-between gap-1 rounded px-1 py-0.5 text-left transition-colors ${toneStyles} disabled:opacity-60 disabled:hover:bg-inherit`}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-1 text-sm text-white">
|
||||
<span className="truncate font-semibold">{entity.name || entity.id}</span>
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<span className="truncate font-semibold text-white">{entity.name || entity.id}</span>
|
||||
<StatusBadge label={entity.type === 'light' ? 'Light' : 'Switch'} />
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs text-slate-400">
|
||||
@@ -34,17 +44,8 @@ function EntityRow({ entity, connected, onToggle }) {
|
||||
{!connected && <span className="text-amber-200"> · Offline</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
className="button-dark whitespace-nowrap px-1 py-0.5 text-xs"
|
||||
disabled={disableToggle}
|
||||
onClick={() => onToggle(entity.id)}
|
||||
>
|
||||
{isOn ? 'Turn off' : 'Turn on'}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<div className="text-xs font-semibold text-white/90">{isOn ? 'Turn off' : 'Turn on'}</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -77,7 +78,7 @@ export default function HomeAssistantControls() {
|
||||
<section className="panel-section space-y-0.5 text-base">
|
||||
<header className="flex items-center justify-between gap-0.5 text-sm text-slate-400">
|
||||
<div className="flex items-center gap-1">
|
||||
<p>Home Assistant</p>
|
||||
<p>Light Controls</p>
|
||||
<span className="text-xs text-slate-500">{entities.length}</span>
|
||||
</div>
|
||||
<StatusBadge label={connected ? 'Connected' : 'Offline'} tone={connected ? 'success' : 'warn'} />
|
||||
|
||||
Reference in New Issue
Block a user