brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated the gate page to use the pca state in the gates status for the lights on the visualizer and the pca fan on/off, this also allows me to get rid of setting those base on the data loaded for the graph which will fix the bug where the light could change based on what date range you loaded

Browse source
This commit is contained in:
csawatzky 2026-01-28 14:59:32 -06:00
parent f02aa3a6e0
commit e42f1a3fb0
5 changed files with 52 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/gate/GateDevice.tsx
View file

@ -51,8 +51,8 @@ export default function GateDevice(props: Props) {
const [interactionDialog, setInteractionDialog] = useState(false); const [interactionDialog, setInteractionDialog] = useState(false);
const [densityTemp, setDensityTemp] = useState(0); const [densityTemp, setDensityTemp] = useState(0);
const isMobile = useMobile(); const isMobile = useMobile();
const [pcaState, setPCAState] = useState(false); // const [pcaState, setPCAState] = useState(false);
const [pcaFanOn, setPCAFanOn] = useState(false); // const [pcaFanOn, setPCAFanOn] = useState(false);
const [detail, setDetail] = useState<"sensors" | "analytics">("analytics"); const [detail, setDetail] = useState<"sensors" | "analytics">("analytics");
const [lastAmbient, setLastAmbient] = useState(0); const [lastAmbient, setLastAmbient] = useState(0);
const [lastTemps, setLastTemps] = useState({ t1: 0, t2: 0 }); const [lastTemps, setLastTemps] = useState({ t1: 0, t2: 0 });
@ -99,13 +99,13 @@ export default function GateDevice(props: Props) {
break; break;
case pond.GateComponentType.GATE_COMPONENT_TYPE_PRESSURE: case pond.GateComponentType.GATE_COMPONENT_TYPE_PRESSURE:
setPressureKey(c.key()); setPressureKey(c.key());
if ( // if (
c.status.measurement[0] && // c.status.measurement[0] &&
c.status.measurement[0].values[0] && // c.status.measurement[0].values[0] &&
c.status.measurement[0].values[0].values[1] // c.status.measurement[0].values[0].values[1]
) { // ) {
setPCAFanOn(c.status.measurement[0].values[0].values[1] > 996); //apx 4 iwg // setPCAFanOn(c.status.measurement[0].values[0].values[1] > 996); //apx 4 iwg
} // }
break; break;
default: default:
// type is unknown, do nothing // type is unknown, do nothing
@ -345,8 +345,8 @@ export default function GateDevice(props: Props) {
ambientSelector={ambientSelector} ambientSelector={ambientSelector}
tempChainSelector={tempSelector} tempChainSelector={tempSelector}
pressureChainSelector={pressureSelector} pressureChainSelector={pressureSelector}
pcaState={pcaState} pcaState={gate.status.pcaState}
pcaFanState={pcaFanOn} // pcaFanState={pcaFanOn}
checkInTime={device.status.lastActive} checkInTime={device.status.lastActive}
/> />
<Button <Button
@ -374,9 +374,9 @@ export default function GateDevice(props: Props) {
gate={gate} gate={gate}
display={detail} display={detail}
compMap={componentOptions} compMap={componentOptions}
setPCAState={(state: boolean) => { // setPCAState={(state: boolean) => {
setPCAState(state); // setPCAState(state);
}} // }}
ambient={ambientKey} ambient={ambientKey}
pressure={pressureKey} pressure={pressureKey}
tempChain={tempKey} tempChain={tempKey}

24
src/gate/GateFlowGraph.tsx
View file

@ -25,7 +25,7 @@ interface Props {
ambient?: string; ambient?: string;
newXDomain?: number[] | string[]; newXDomain?: number[] | string[];
pressureComponent?: string; pressureComponent?: string;
setPCAState: (state: boolean) => void; // setPCAState: (state: boolean) => void;
multiGraphZoom?: (domain: number[] | string[]) => void; multiGraphZoom?: (domain: number[] | string[]) => void;
} }
@ -55,7 +55,7 @@ export default function GateFlowGraph(props: Props) {
device, device,
ambient, ambient,
pressureComponent, pressureComponent,
setPCAState, // setPCAState,
start, start,
end, end,
newXDomain, newXDomain,
@ -131,22 +131,22 @@ export default function GateFlowGraph(props: Props) {
} }
}); });
setRuntime(moment.duration(runtime)); setRuntime(moment.duration(runtime));
let state = false; // let state = false;
if ( // if (
data.length > 1 && // data.length > 1 &&
data[data.length - 1].value > gate.lowerFlow() && // data[data.length - 1].value > gate.lowerFlow() &&
data[data.length - 1].value < gate.upperFlow() // data[data.length - 1].value < gate.upperFlow()
) { // ) {
state = true; // state = true;
} // }
setPCAState(state); // setPCAState(state);
} }
setFlowData(data); setFlowData(data);
setLoadingChartData(false); setLoadingChartData(false);
setRecent(recent); setRecent(recent);
}); });
} }
}, [gateAPI, gate, ambient, pressureComponent, start, end, device, setPCAState, as]); // eslint-disable-line react-hooks/exhaustive-deps }, [gateAPI, gate, ambient, pressureComponent, start, end, device, as]); // eslint-disable-line react-hooks/exhaustive-deps
const loadFlowEvents = () => { const loadFlowEvents = () => {
if (ambient && pressureComponent) { if (ambient && pressureComponent) {

10
src/gate/GateGraphs.tsx
View file

@ -39,7 +39,7 @@ interface Props {
tempChain: string; tempChain: string;
redKey: string; redKey: string;
greenKey: string; greenKey: string;
setPCAState: (state: boolean) => void; // setPCAState: (state: boolean) => void;
} }
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles((theme: Theme) => ({
@ -63,7 +63,7 @@ const useStyles = makeStyles((theme: Theme) => ({
); );
export default function GateGraphs(props: Props) { export default function GateGraphs(props: Props) {
const { gate, display, compMap, device, pressure, ambient, tempChain, greenKey, redKey, setPCAState } = props; const { gate, display, compMap, device, pressure, ambient, tempChain, greenKey, redKey } = props;
const [{ as }] = useGlobalState(); const [{ as }] = useGlobalState();
const [xDomain, setXDomain] = useState<string[] | number[]>(["dataMin", "dataMax"]); const [xDomain, setXDomain] = useState<string[] | number[]>(["dataMin", "dataMax"]);
const [zoomed, setZoomed] = useState(false); const [zoomed, setZoomed] = useState(false);
@ -347,9 +347,9 @@ export default function GateGraphs(props: Props) {
gate={gate} gate={gate}
ambient={ambient} ambient={ambient}
pressureComponent={pressure} pressureComponent={pressure}
setPCAState={(state: boolean) => { // setPCAState={(state: boolean) => {
setPCAState(state); // setPCAState(state);
}} // }}
multiGraphZoom={domain => { multiGraphZoom={domain => {
setXDomain(domain); setXDomain(domain);
setZoomed(true); setZoomed(true);

30
src/gate/GateSVG.tsx
View file

@ -48,8 +48,8 @@ interface Props {
ambientSelector: () => JSX.Element; ambientSelector: () => JSX.Element;
tempChainSelector: () => JSX.Element; tempChainSelector: () => JSX.Element;
pressureChainSelector: () => JSX.Element; pressureChainSelector: () => JSX.Element;
pcaState: boolean; pcaState: pond.PCAState;
pcaFanState: boolean; // pcaFanState: boolean;
checkInTime: string; checkInTime: string;
} }
@ -63,7 +63,7 @@ export default function GateSVG(props: Props) {
tempChainSelector, tempChainSelector,
pressureChainSelector, pressureChainSelector,
pcaState, pcaState,
pcaFanState, // pcaFanState,
checkInTime checkInTime
} = props; } = props;
const classes = useStyles(); const classes = useStyles();
@ -242,16 +242,23 @@ export default function GateSVG(props: Props) {
return temp; return temp;
}; };
const finalTempDisplay = (temp: number) => {
let display = "--"
if(pcaState === pond.PCAState.PCA_STATE_IN_BOUNDS || pcaState === pond.PCAState.PCA_STATE_OUT_BOUNDS){
if(temp < 60 && temp > -40 && !isNaN(temp) && temp !== 0){
display = convertFinalTemp(finalTemp).toFixed(2) + (user.settings.temperatureUnit === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? "°F" : "°C")
}
}
return display
}
const renderValues = () => { const renderValues = () => {
let values: JSX.Element[] = []; let values: JSX.Element[] = [];
//add the final temp display to the array //add the final temp display to the array
values.push( values.push(
<g key={"finalTemp"} id={"finalTemp"} data-name={"finalTemp"}> <g key={"finalTemp"} id={"finalTemp"} data-name={"finalTemp"}>
<text fontSize={7} className={classes.fontBase} x={100} y={85}> <text fontSize={7} className={classes.fontBase} x={100} y={85}>
{convertFinalTemp(finalTemp).toFixed(2)} {finalTempDisplay(finalTemp)}
{user.settings.temperatureUnit === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
? "°F"
: "°C"}
</text> </text>
</g> </g>
); );
@ -302,7 +309,8 @@ export default function GateSVG(props: Props) {
const pcaRed = () => { const pcaRed = () => {
return ( return (
<g key={"pcaRed"} id={"pcaRed"} data-name={"pcaRed"}> <g key={"pcaRed"} id={"pcaRed"} data-name={"pcaRed"}>
<circle cx={175} cy={152} r={8} fill={pcaFanState ? (pcaState ? "grey" : "red") : "grey"} /> {/* <circle cx={175} cy={152} r={8} fill={(pcaFanState && pcaState === pond.PCAState.PCA_STATE_OUT_BOUNDS) ? "red" : "grey"} /> */}
<circle cx={175} cy={152} r={8} fill={pcaState === pond.PCAState.PCA_STATE_OUT_BOUNDS ? "red" : "grey"} />
</g> </g>
); );
}; };
@ -314,7 +322,8 @@ export default function GateSVG(props: Props) {
cx={175} cx={175}
cy={174} cy={174}
r={8} r={8}
fill={pcaFanState ? (pcaState ? "green" : "grey") : "grey"} //fill={(pcaFanState && pcaState === pond.PCAState.PCA_STATE_IN_BOUNDS) ? "green" : "grey"}
fill={pcaState === pond.PCAState.PCA_STATE_IN_BOUNDS ? "green" : "grey"}
/> />
</g> </g>
); );
@ -324,7 +333,8 @@ export default function GateSVG(props: Props) {
return ( return (
<g key={"fanStatus"}> <g key={"fanStatus"}>
<text x={125} y={180} fontSize={5} className={classes.fontBase}> <text x={125} y={180} fontSize={5} className={classes.fontBase}>
PCA Fan: {pcaFanState ? "ON" : "OFF"} {/* PCA Fan: {pcaFanState ? "ON" : "OFF"} */}
PCA Fan: {pcaState === pond.PCAState.PCA_STATE_OFF ? "OFF" : "ON"}
</text> </text>
</g> </g>
); );

2
src/pages/Gate.tsx
View file

@ -134,7 +134,7 @@ export default function Gate(props: Props) {
gateAPI gateAPI
.getGatePageData(id, as) .getGatePageData(id, as)
.then(resp => { .then(resp => {
//console.log(resp.data); console.log(resp.data);
let p = new Map<number, pond.GateDeviceType>(); let p = new Map<number, pond.GateDeviceType>();
Object.keys(resp.data.preferences).forEach(k => { Object.keys(resp.data.preferences).forEach(k => {
let prefKey = parseInt(k); let prefKey = parseInt(k);