Add "Mein Zimmer" room-control page (Home Assistant, proxied through the backend)
Implements the room-control page from the design mockup: a scenes row above cards for shutters, color lamps, and brightness-only lamps, all driven by a new `general.ha` config section (server URL, token, ordered device/scene lists). The backend proxies every Home Assistant call server-side (GET/POST /api/ha/...) rather than the browser calling Home Assistant directly, so the long-lived token never leaves the LAN device and Home Assistant's own CORS settings don't need to know about musicmouse at all. Card kind (shutter/color/brightness-only) is inferred at runtime from what Home Assistant reports about each entity, not configured explicitly. Also stops tracking python-backend/config.yml, which had drifted into the repo despite its own header saying it shouldn't be - it now carries real credentials locally and needs to stay untracked. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
91
web/src/hooks/useHomeAssistant.ts
Normal file
91
web/src/hooks/useHomeAssistant.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
/** Polls the backend's Home Assistant proxy for the configured devices/scenes and
|
||||
* exposes a `callService` escape hatch for commands. No websocket: HA's own
|
||||
* auth/subscribe protocol is more machinery than a room panel needs - a short poll is
|
||||
* plenty, and it's the backend, not the browser, doing the actual HA calls (see
|
||||
* `GET/POST /api/ha/...` in the Python backend), so there's no token or Home
|
||||
* Assistant URL here at all. */
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { api } from "../api/client";
|
||||
import type { HaConfig, HaEntityState } from "../api/types";
|
||||
|
||||
const POLL_INTERVAL_MS = 2500;
|
||||
|
||||
export interface HomeAssistant {
|
||||
states: Record<string, HaEntityState>;
|
||||
loading: boolean;
|
||||
/** Patch one entity's cached state locally so a tap feels instant; the next poll
|
||||
* reconciles with the truth. */
|
||||
optimistic: (entityId: string, patch: Partial<HaEntityState>) => void;
|
||||
callService: (domain: string, service: string, body: Record<string, unknown>) => Promise<void>;
|
||||
}
|
||||
|
||||
export function useHomeAssistant(config: HaConfig | null): HomeAssistant {
|
||||
const [states, setStates] = useState<Record<string, HaEntityState>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// When each entity last got an optimistic patch. A poll that was already in flight
|
||||
// when the patch landed resolves with pre-click data - without this, that stale
|
||||
// response clobbers the optimistic "on" back to "off" until the *next* poll catches
|
||||
// up, which is what made toggling feel laggy despite the optimistic update existing.
|
||||
const optimisticAt = useRef<Record<string, number>>({});
|
||||
|
||||
const entityIds = useMemo(
|
||||
() => [...(config?.devices ?? []), ...(config?.scenes ?? [])].map((d) => d.entity_id),
|
||||
[config],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!config) return;
|
||||
let cancelled = false;
|
||||
|
||||
const poll = async () => {
|
||||
const startedAt = Date.now();
|
||||
const fresh = await api.haStates(entityIds);
|
||||
if (cancelled) return;
|
||||
setStates((previous) => {
|
||||
const next = { ...previous };
|
||||
for (const [entityId, state] of Object.entries(fresh)) {
|
||||
// Only apply this result if no optimistic patch landed after the request
|
||||
// for it went out - otherwise it's stale and would undo a newer change.
|
||||
if (startedAt >= (optimisticAt.current[entityId] ?? 0)) {
|
||||
next[entityId] = state;
|
||||
}
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
void poll();
|
||||
const id = setInterval(() => void poll(), POLL_INTERVAL_MS);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
clearInterval(id);
|
||||
};
|
||||
}, [config, entityIds]);
|
||||
|
||||
const optimistic = useCallback((entityId: string, patch: Partial<HaEntityState>) => {
|
||||
optimisticAt.current[entityId] = Date.now();
|
||||
setStates((previous) => {
|
||||
const current = previous[entityId];
|
||||
return current ? { ...previous, [entityId]: { ...current, ...patch } } : previous;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const callService = useCallback(
|
||||
(domain: string, service: string, body: Record<string, unknown>) => {
|
||||
if (!config) return Promise.resolve();
|
||||
// Card components fire this with `void` - swallow a failure here (e.g. HA
|
||||
// unreachable, proxied as a 502) so it doesn't surface as an unhandled
|
||||
// rejection; the next poll corrects any optimistic update that didn't take.
|
||||
return api.haCallService(domain, service, body).catch((cause: unknown) => {
|
||||
console.error(`${domain}.${service} failed:`, cause);
|
||||
});
|
||||
},
|
||||
[config],
|
||||
);
|
||||
|
||||
return { states, loading, optimistic, callService };
|
||||
}
|
||||
Reference in New Issue
Block a user