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

Centre brine tank between resin tanks in diagram

Browse source 
Tank A / Brine / Tank B reads more clearly as which side brine is flowing
into than the previous Brine / A / B order. Flow chevrons now point away
from the brine tank toward whichever resin tank is regenerating.
This commit is contained in:
jtricerolph 2026-07-30 09:42:52 +00:00
parent 56e672210a
commit 0ab98d3a3c
2 changed files with 21 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { RefreshCw, ChevronsRight } from 'lucide-react' import { RefreshCw, ChevronsRight, ChevronsLeft } from 'lucide-react'
import type { AssetStatus, TelemetryField } from '../types' import type { AssetStatus, TelemetryField } from '../types'
function fieldByKey(latest: TelemetryField[], key: string | null): TelemetryField | undefined { function fieldByKey(latest: TelemetryField[], key: string | null): TelemetryField | undefined {
@ -96,12 +96,16 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
const aRegenerating = single ? regenActive : regenActive && bInService const aRegenerating = single ? regenActive : regenActive && bInService
const bRegenerating = regenActive && !bInService const bRegenerating = regenActive && !bInService
function Flow({ active }: { active: boolean }) { // Brine flows FROM the brine tank INTO whichever resin tank is
// regenerating, so the chevrons point away from the (now centred) brine
// tank toward the tank they lead to.
function Flow({ active, direction }: { active: boolean; direction: 'left' | 'right' }) {
const Icon = direction === 'left' ? ChevronsLeft : ChevronsRight
return ( return (
<div className={`softener-flow ${active ? 'softener-flow-active' : ''}`} aria-hidden="true"> <div className={`softener-flow softener-flow-${direction} ${active ? 'softener-flow-active' : ''}`} aria-hidden="true">
<ChevronsRight size={16} strokeWidth={2} /> <Icon size={16} strokeWidth={2} />
<ChevronsRight size={16} strokeWidth={2} /> <Icon size={16} strokeWidth={2} />
<ChevronsRight size={16} strokeWidth={2} /> <Icon size={16} strokeWidth={2} />
</div> </div>
) )
} }
@ -115,14 +119,6 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
</div> </div>
)} )}
<div className="softener-diagram-row"> <div className="softener-diagram-row">
<Tank
label="Brine tank"
pct={brinePct}
valueLabel={brinePct === null ? 'No reading' : `${Math.round(brinePct)}% salt/brine`}
variant="single"
regenerating={false}
/>
<Flow active={aRegenerating} />
<Tank <Tank
label={single ? 'Resin tank' : 'Tank A'} label={single ? 'Resin tank' : 'Tank A'}
pct={aPct} pct={aPct}
@ -130,9 +126,17 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
variant={tankVariant(!bInService, aRegenerating, single)} variant={tankVariant(!bInService, aRegenerating, single)}
regenerating={aRegenerating} regenerating={aRegenerating}
/> />
<Flow active={aRegenerating} direction="left" />
<Tank
label="Brine tank"
pct={brinePct}
valueLabel={brinePct === null ? 'No reading' : `${Math.round(brinePct)}% salt/brine`}
variant="single"
regenerating={false}
/>
{!single && ( {!single && (
<> <>
<Flow active={bRegenerating} /> <Flow active={bRegenerating} direction="right" />
<Tank <Tank
label="Tank B" label="Tank B"
pct={bPct} pct={bPct}

3
frontend/src/index.css
View file

@ -245,7 +245,8 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
color: var(--card-border); color: var(--card-border);
flex-shrink: 0; flex-shrink: 0;
} }
.softener-flow svg { margin-left: -6px; } .softener-flow-right svg { margin-left: -6px; }
.softener-flow-left svg { margin-right: -6px; }
.softener-flow-active svg { color: var(--app-primary); animation: softener-flow-pulse 1.1s ease-in-out infinite; } .softener-flow-active svg { color: var(--app-primary); animation: softener-flow-pulse 1.1s ease-in-out infinite; }
.softener-flow-active svg:nth-child(2) { animation-delay: .15s; } .softener-flow-active svg:nth-child(2) { animation-delay: .15s; }
.softener-flow-active svg:nth-child(3) { animation-delay: .3s; } .softener-flow-active svg:nth-child(3) { animation-delay: .3s; }