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:
parent
2bae718b50
commit
930f3d867f
5 changed files with 155 additions and 116 deletions
27
frontend/src/components/KioskZonePanel.tsx
Normal file
27
frontend/src/components/KioskZonePanel.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue