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

Dashboard: drop room-state badge, colour left border to match NewBook status colours

Browse source 
- Remove status badge from ZoneCard, keep left-border indicator only (with hover title for accessibility)
- Rename heating_up label from 'Heating Up' to 'Preparing'
- Recolour room states: booked=green, occupied=blue, cooling_down=purple (matches NewBook's status colours); vacant stays grey, heating_up stays amber
- Decouple rad-icon.heating from --st-occupied (now blue) to --st-heating-up (amber) so an actively-heating radiator icon still reads warm

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-25 09:24:54 +00:00
parent d7cbb0c452
commit bed2c9e2be
3 changed files with 7 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/components/ZoneCard.tsx
View file

@ -42,7 +42,7 @@ export default function ZoneCard({ zone, onClick }: { zone: ZoneStatus; onClick:
const fanLevel = ac ? (MHI_FAN_SPEEDS as readonly string[]).indexOf(ac.fan_speed || '') + 1 : 0 const fanLevel = ac ? (MHI_FAN_SPEEDS as readonly string[]).indexOf(ac.fan_speed || '') + 1 : 0
return ( return (
<div className={`card zone-card st-${zone.room_state}`} onClick={onClick}> <div className={`card zone-card st-${zone.room_state}`} onClick={onClick} title={ROOM_STATE_LABELS[zone.room_state]}>
<div className="zone-card-title"> <div className="zone-card-title">
<span> <span>
{zone.name} {zone.name}
@ -57,7 +57,6 @@ export default function ZoneCard({ zone, onClick }: { zone: ZoneStatus; onClick:
</span> </span>
{!zone.auto_mode && <span className="badge badge-outline">Manual</span>} {!zone.auto_mode && <span className="badge badge-outline">Manual</span>}
</div> </div>
<div className={`badge badge-st-${zone.room_state}`}>{ROOM_STATE_LABELS[zone.room_state]}</div>
<div className="zone-card-body"> <div className="zone-card-body">
<div className="zone-card-main"> <div className="zone-card-main">

10
frontend/src/index.css
View file

@ -26,12 +26,12 @@ body { background: var(--body-bg); color: var(--text-dark); font-family: var(--f
--app-primary: #c1440e; --app-primary: #c1440e;
--app-primary-light: #e0692f; --app-primary-light: #e0692f;
/* Room state colours — vacant/booked = cool greys/blues, heating_up/occupied = warm */ /* Room state colours — matches NewBook's status colours: booked=green, occupied=blue, departing=purple */
--st-vacant: #64748b; --st-vacant: #64748b;
--st-booked: #2563eb; --st-booked: #16a34a;
--st-heating-up: #d97706; --st-heating-up: #d97706;
--st-occupied: #dc2626; --st-occupied: #2563eb;
--st-cooling-down: #0891b2; --st-cooling-down: #7c3aed;
--health-healthy: #16a34a; --health-healthy: #16a34a;
--health-degraded: #d97706; --health-degraded: #d97706;
@ -227,7 +227,7 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.rad-row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .rad-row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.rad-icon { display: flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--text-mid); } .rad-icon { display: flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--text-mid); }
.rad-icon.heating { color: var(--st-occupied); } .rad-icon.heating { color: var(--st-heating-up); }
.rad-icon.idle { color: var(--st-cooling-down); } .rad-icon.idle { color: var(--st-cooling-down); }
.ac-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; color: var(--text-dark); } .ac-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; color: var(--text-dark); }

2
frontend/src/types.ts
View file

@ -8,7 +8,7 @@ export type PhotoType = 'device' | 'serial_plate'
export const ROOM_STATE_LABELS: Record<RoomState, string> = { export const ROOM_STATE_LABELS: Record<RoomState, string> = {
vacant: 'Vacant', vacant: 'Vacant',
booked: 'Booked', booked: 'Booked',
heating_up: 'Heating Up', heating_up: 'Preparing',
occupied: 'Occupied', occupied: 'Occupied',
cooling_down: 'Cooling Down', cooling_down: 'Cooling Down',
} }