Kiosk: Home button in own header when embedded in the kiosk shell

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-10-15 11:34:54 +00:00
parent befa0ca103
commit 1e45479227

View file

@ -1,5 +1,5 @@
import { useCallback, useEffect, useRef, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import { Thermometer, CheckSquare, X } from 'lucide-react' import { Thermometer, CheckSquare, X, Home } from 'lucide-react'
import { kioskLogin, kioskFetchStatus, kioskFetchConfig, KioskSessionError } from '../api' import { kioskLogin, kioskFetchStatus, kioskFetchConfig, KioskSessionError } from '../api'
import type { ActiveAcTemplate, DeviceSummary, ZoneStatus } from '../types' import type { ActiveAcTemplate, DeviceSummary, ZoneStatus } from '../types'
import { KIOSK_DEVICE_TYPES, DEFAULT_HVAC_TEMPLATE } from '../types' import { KIOSK_DEVICE_TYPES, DEFAULT_HVAC_TEMPLATE } from '../types'
@ -13,6 +13,14 @@ import KioskBulkPanel from '../components/KioskBulkPanel'
// data is already push/poll-cached (MQTT for TRV/MHI, a 60s poller for Daikin). // data is already push/poll-cached (MQTT for TRV/MHI, a 60s poller for Daikin).
const POLL_MS = 12_000 const POLL_MS = 12_000
// Inside the portal's shared kiosk shell (/kiosk) the shell has no bar of its
// own — each kiosk screen carries a Home button that asks it to go back to the
// app list. Standalone (own /hvac/kiosk URL) there's nothing to go back to.
const EMBEDDED = window.self !== window.top
function goHome() {
window.parent.postMessage({ type: 'hnf:kiosk-home' }, window.location.origin)
}
function liveDevicesOf(zone: ZoneStatus): DeviceSummary[] { function liveDevicesOf(zone: ZoneStatus): DeviceSummary[] {
return zone.devices.filter(d => KIOSK_DEVICE_TYPES.includes(d.device_type)) return zone.devices.filter(d => KIOSK_DEVICE_TYPES.includes(d.device_type))
} }
@ -194,6 +202,11 @@ export default function Kiosk() {
return ( return (
<div className="kiosk-shell"> <div className="kiosk-shell">
<header className="kiosk-header"> <header className="kiosk-header">
{EMBEDDED && (
<button className="btn btn-sm" onClick={goHome} aria-label="Back to home">
<Home size={14} strokeWidth={1.75} /> Home
</button>
)}
<span className="kiosk-header-title"> <span className="kiosk-header-title">
<Thermometer size={18} strokeWidth={1.75} /> HVAC Kiosk <Thermometer size={18} strokeWidth={1.75} /> HVAC Kiosk
</span> </span>