Fix regen-tank inversion in water softener diagram
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:
parent
4f048a9629
commit
9f41a26c6b
1 changed files with 30 additions and 14 deletions
|
|
@ -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 bPct = bValL !== null && cfg.tank_b_max_l ? (bValL / cfg.tank_b_max_l) * 100 : null
|
||||||
const brinePct = numericValue(brineField)
|
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 (
|
return (
|
||||||
<div className="softener-diagram">
|
<div className="softener-diagram">
|
||||||
{regenActive && (
|
{regenActive && (
|
||||||
|
|
@ -105,26 +122,25 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
|
||||||
variant="single"
|
variant="single"
|
||||||
regenerating={false}
|
regenerating={false}
|
||||||
/>
|
/>
|
||||||
<div className={`softener-flow ${regenActive ? 'softener-flow-active' : ''}`} aria-hidden="true">
|
<Flow active={aRegenerating} />
|
||||||
<ChevronsRight size={16} strokeWidth={2} />
|
|
||||||
<ChevronsRight size={16} strokeWidth={2} />
|
|
||||||
<ChevronsRight size={16} strokeWidth={2} />
|
|
||||||
</div>
|
|
||||||
<Tank
|
<Tank
|
||||||
label={single ? 'Resin tank' : 'Tank A'}
|
label={single ? 'Resin tank' : 'Tank A'}
|
||||||
pct={aPct}
|
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`}
|
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)}
|
variant={tankVariant(!bInService, aRegenerating, single)}
|
||||||
regenerating={regenActive && !bInService}
|
regenerating={aRegenerating}
|
||||||
/>
|
/>
|
||||||
{!single && (
|
{!single && (
|
||||||
|
<>
|
||||||
|
<Flow active={bRegenerating} />
|
||||||
<Tank
|
<Tank
|
||||||
label="Tank B"
|
label="Tank B"
|
||||||
pct={bPct}
|
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`}
|
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)}
|
variant={tankVariant(bInService, bRegenerating, false)}
|
||||||
regenerating={regenActive && bInService}
|
regenerating={bRegenerating}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue