// BHEEM Sense — Live monitoring screen
//
// Two equal rings: temperature and humidity. The HACCP original had a probe
// ring and demoted humidity to a small tile; on a DHT11-only unit humidity is
// half the product, so both channels get the same weight.
const { useState, useEffect } = React;
function LiveScreen({ live, device, history, activeAlerts, broker, devices, selectedDevice, profiles }) {
const [now, setNow] = useState(Date.now());
useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []);
const alerts = Object.values(activeAlerts);
const breachCount = alerts.length;
const stale = live.lastReadingTs && now - live.lastReadingTs > 30000;
const status = !live.online ? 'unknown'
: breachCount > 0 ? 'breach'
: stale ? 'stale'
: 'safe';
const sensors = live.sensors || {};
const ambientOk = sensors.ambient === 'ok' || sensors.ambient == null;
// Per-channel status, so a humidity breach colours only the humidity ring.
const channelBreached = ch => alerts.some(a => a.channel === ch);
const channelStatus = ch => !live.online || !ambientOk ? 'unknown'
: (ch === 'temp' ? sensors.temp_stuck : sensors.rh_stuck) ? 'unknown'
: channelBreached(ch) ? 'breach'
: stale ? 'stale'
: 'safe';
const sensorColor = s => s === 'fault' ? 'oklch(0.55 0.2 25)' : 'oklch(0.6 0.02 260)';
const sensorLabel = s => s === 'fault' ? 'Sensor fault' : s === 'absent' ? 'No sensor' : null;
// A stuck channel keeps arriving as valid data but has not moved in 30 min,
// which means the sensing element has failed. It must not read as a healthy
// number: the backend has already stopped judging it against thresholds.
const stuck = { temp: !!sensors.temp_stuck, rh: !!sensors.rh_stuck };
const StuckChip = () => (
Not responding
);
// Threshold band for the active profile, shown under each ring so the
// number on screen can be read against the limit it is judged by.
const limits = profiles && live.profile && profiles.profiles
? profiles.profiles[live.profile] : null;
const bandText = (ch, unit) => {
const l = limits && limits[ch];
if (!l) return null;
const lo = l.min != null ? `${l.min}${unit}` : null;
const hi = l.max != null ? `${l.max}${unit}` : null;
if (lo && hi) return `${lo} – ${hi}`;
if (hi) return `max ${hi}`;
if (lo) return `min ${lo}`;
return null;
};
// The device stamps every reading from its DS3231 in UTC. Readings arrive
// every 5 s, so advance the stamp by the time elapsed since it landed —
// otherwise the clock lurches in 5-second steps instead of ticking.
//
// Drift is the gap between the device's clock and this browser's at the moment
// the reading arrived. It is the whole point of carrying an RTC: if the board
// loses power or NTP, this number is what tells you the timestamps on the
// audit trail can still be trusted.
const rtc = (() => {
if (live.rtcEpoch == null || live.rtcEpochAt == null) {
return { time: '--', sub: device.rtcPresent === false ? 'no hardware clock' : 'waiting for reading' };
}
const deviceMs = live.rtcEpoch * 1000 + (now - live.rtcEpochAt);
const driftS = Math.round((live.rtcEpoch * 1000 - live.rtcEpochAt) / 1000);
const d = new Date(deviceMs);
const time = d.toLocaleTimeString('en-GB', { hour12: false });
const date = d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
const sub = Math.abs(driftS) <= 2
? `DS3231 · ${date} · in sync`
: `DS3231 · ${date} · ${driftS > 0 ? '+' : ''}${driftS}s vs browser`;
return { time, sub };
})();
const deviceList = Object.keys(devices || {}).sort();
return (