hotel-manage-stack/lights
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Kiosk: Home button in the app's own header (posts hnf:kiosk-home)

Browse source 
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 831b562ee2
commit 66cbab3a02
2 changed files with 18 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/index.css
View file

@ -439,3 +439,8 @@ table.data tr.clickable { cursor: pointer; }
.kiosk-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 16px; } .kiosk-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 16px; }
.kiosk-close { background: none; border: none; color: var(--text-mid); cursor: pointer; display: flex; padding: 4px; } .kiosk-close { background: none; border: none; color: var(--text-mid); cursor: pointer; display: flex; padding: 4px; }
.kiosk-modal-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kiosk-modal-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kiosk-home {
display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: none; border-radius: 10px;
background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}

14
frontend/src/pages/Kiosk.tsx
View file

@ -1,5 +1,5 @@
import { useCallback, useEffect, useRef, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import { Sunrise, Sunset, PauseCircle, WifiOff, X, Lightbulb, LightbulbOff } from 'lucide-react' import { Sunrise, Sunset, PauseCircle, WifiOff, X, Lightbulb, LightbulbOff, Home } from 'lucide-react'
import { fetchState, setDevicePower, setGroupPower, holdSchedules } from '../api' import { fetchState, setDevicePower, setGroupPower, holdSchedules } from '../api'
import type { StateResponse, LightDevice } from '../types' import type { StateResponse, LightDevice } from '../types'
@ -11,6 +11,13 @@ function fmtTime(iso: string | null | undefined, tz: string) {
return new Date(iso).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', timeZone: tz }) return new Date(iso).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', timeZone: tz })
} }
// Inside the portal's kiosk shell the app supplies its own Home button (the
// shell has no bar) — it asks the shell to go back to the app list.
const embedded = window.self !== window.top
function goHome() {
window.parent.postMessage({ type: 'hnf:kiosk-home' }, window.location.origin)
}
// Back to the shared kiosk home (or, if opened standalone, just say so) when the // Back to the shared kiosk home (or, if opened standalone, just say so) when the
// kiosk session is gone — never the staff login. // kiosk session is gone — never the staff login.
function leaveToKioskHome() { function leaveToKioskHome() {
@ -81,6 +88,11 @@ export default function Kiosk() {
return ( return (
<div className="kiosk-screen"> <div className="kiosk-screen">
<header className="kiosk-header"> <header className="kiosk-header">
{embedded && (
<button className="kiosk-home" onClick={goHome} aria-label="Back to home">
<Home size={16} strokeWidth={1.75} /> Home
</button>
)}
<span className="kiosk-title"><Lightbulb size={20} strokeWidth={1.75} /> Lighting</span> <span className="kiosk-title"><Lightbulb size={20} strokeWidth={1.75} /> Lighting</span>
<span className="kiosk-sun"> <span className="kiosk-sun">
<span><Sunrise size={16} strokeWidth={1.75} /> {fmtTime(data.sun?.sunrise, data.timezone)}</span> <span><Sunrise size={16} strokeWidth={1.75} /> {fmtTime(data.sun?.sunrise, data.timezone)}</span>