Kiosk: tile per zone/room, not per device

Correction to the kiosk grid design (user, 2026-08-26): tiles now match the
Dashboard's ZoneCard -- one tile per room showing its TRV and AC together
(reusing ZoneCard's own rad-row/ac-block/fan-bar CSS), not a separate tile
per device. Selection/bulk-edit now operates on selected zones, gathering
every live device across them for KioskBulkPanel's type-aware sections.
Single-zone tap opens a modal listing that zone's device panels, mirroring
ZoneDetailModal's device loop minus the staff-only schedule/override UI.

- KioskZoneBlock.tsx replaces KioskDeviceBlock.tsx
- KioskZonePanel.tsx: new, one control panel per live device in a zone

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-26 10:43:28 +00:00
parent 2bae718b50
commit 930f3d867f
5 changed files with 155 additions and 116 deletions

View file

@ -0,0 +1,27 @@
import type { DeviceSummary } from '../types'
import MhiControlPanel from './MhiControlPanel'
import DaikinControlPanel from './DaikinControlPanel'
import TrvControlPanel from './TrvControlPanel'
// Single-zone edit modal content — one card per live device in this zone, each
// with its normal control panel. Same "loop the zone's devices, render the
// matching control panel" pattern as ZoneDetailModal.tsx, minus the staff-only
// schedule/override sections (kiosk isn't for editing scheduling config).
export default function KioskZonePanel({ devices }: { devices: DeviceSummary[] }) {
if (devices.length === 0) {
return <p className="muted">No live-controllable devices in this zone.</p>
}
return (
<div>
{devices.map(d => (
<div key={d.id} className="card">
<div style={{ fontWeight: 600, fontSize: 13 }}>{d.location || d.discovered_name || d.external_ref}</div>
{d.device_type === 'shelly_trv' && <TrvControlPanel deviceId={d.id} canControl={true} />}
{d.device_type === 'mhi_mqtt' && <MhiControlPanel deviceId={d.id} canControl={true} />}
{d.device_type === 'daikin' && <DaikinControlPanel deviceId={d.id} canControl={true} />}
</div>
))}
</div>
)
}