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

Fix regen-tank inversion in water softener diagram

Browse source 
The regenerating tank is the one NOT currently in service — on an
alternating twin-tank softener, service switches to the other tank the
moment one depletes, and the just-depleted tank regenerates offline. Was
previously showing regen on the in-service tank. Also splits the flow
indicator so it visually tracks whichever tank is actually regenerating.
This commit is contained in:
jtricerolph 2026-07-30 09:08:48 +00:00
parent 4f048a9629
commit 9f41a26c6b
1 changed files with 30 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/src/components/WaterSoftenerDiagram.tsx
View file

@ -89,6 +89,23 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
const bPct = bValL !== null && cfg.tank_b_max_l ? (bValL / cfg.tank_b_max_l) * 100 : null
const brinePct = numericValue(brineField)
// On an alternating twin-tank softener, service switches to the other tank
// the moment one depletes, and the just-depleted tank regenerates offline —
// so the regenerating tank is whichever one is NOT tank_in_service. A single
// tank has no partner to switch to, so it simply tracks regen_active.
const aRegenerating = single ? regenActive : regenActive && bInService
const bRegenerating = regenActive && !bInService
function Flow({ active }: { active: boolean }) {
return (
<div className={`softener-flow ${active ? 'softener-flow-active' : ''}`} aria-hidden="true">
<ChevronsRight size={16} strokeWidth={2} />
<ChevronsRight size={16} strokeWidth={2} />
<ChevronsRight size={16} strokeWidth={2} />
</div>
)
}
return (
<div className="softener-diagram">
{regenActive && (
@ -105,26 +122,25 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
variant="single"
regenerating={false}
/>
<div className={`softener-flow ${regenActive ? 'softener-flow-active' : ''}`} aria-hidden="true">
<ChevronsRight size={16} strokeWidth={2} />
<ChevronsRight size={16} strokeWidth={2} />
<ChevronsRight size={16} strokeWidth={2} />
</div>
<Flow active={aRegenerating} />
<Tank
label={single ? 'Resin tank' : 'Tank A'}
pct={aPct}
valueLabel={aValL === null ? 'No reading' : cfg.tank_a_max_l ? `${Math.round(aValL)} / ${cfg.tank_a_max_l} L` : `${Math.round(aValL)} L`}
variant={tankVariant(!bInService, regenActive && !bInService, single)}
regenerating={regenActive && !bInService}
variant={tankVariant(!bInService, aRegenerating, single)}
regenerating={aRegenerating}
/>
{!single && (
<Tank
label="Tank B"
pct={bPct}
valueLabel={bValL === null ? 'No reading' : cfg.tank_b_max_l ? `${Math.round(bValL)} / ${cfg.tank_b_max_l} L` : `${Math.round(bValL)} L`}
variant={tankVariant(bInService, regenActive && bInService, false)}
regenerating={regenActive && bInService}
/>
<>
<Flow active={bRegenerating} />
<Tank
label="Tank B"
pct={bPct}
valueLabel={bValL === null ? 'No reading' : cfg.tank_b_max_l ? `${Math.round(bValL)} / ${cfg.tank_b_max_l} L` : `${Math.round(bValL)} L`}
variant={tankVariant(bInService, bRegenerating, false)}
regenerating={bRegenerating}
/>
</>
)}
</div>
</div>