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

updated the mobile view and moved the displays into their own function rather than in the columns so they can be used for the mobile views

Browse source
This commit is contained in:
csawatzky 2026-01-29 11:24:20 -06:00
parent e42f1a3fb0
commit 79c29f518a
1 changed files with 60 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/gate/GateList.tsx
View file

@ -19,6 +19,7 @@ import { UnitMeasurement } from "models/UnitMeasurement";
import { quack } from "protobuf-ts/quack";
import { getTemperatureUnit } from "utils";
import { teal } from "@mui/material/colors";
import { react } from "@babel/types";
interface Props {
//gates: Gate[];
@ -123,6 +124,15 @@ export default function GateList(props: Props) {
color = measurement.colour
}
})
if(isMobile){
return (
<React.Fragment>
<Typography color={color}>{outletDisplay}</Typography>
<Typography>{timeSince}</Typography>
</React.Fragment>
)
}
return (
<Box padding={2}>
<Box display="flex" justifyContent="space-between">
@ -137,6 +147,38 @@ export default function GateList(props: Props) {
)
}
const tempDisplay = (gate: Gate) => {
let display = "--"
if(gate.status.pcaState !== pond.PCAState.PCA_STATE_OFF){
//only display it if the final temp is between -4 and 60 C, is a valid number, and is not exactly 0
//0 is technically a valid number but the likely hood of the calculation being exactly 0 is negligible
if (gate.status.finalTemp < 60 && gate.status.finalTemp > -40 && !isNaN(gate.status.finalTemp) && gate.status.finalTemp !== 0){
display = getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? CtoF(gate.status.finalTemp).toFixed(2) + "°F" : gate.status.finalTemp.toFixed(2) + "°C"
}
}
return (
<Typography>
{display}
</Typography>
)
}
const conditionDisplay = (gate: Gate) => {
let display = ""
if(gate.status.pcaState === pond.PCAState.PCA_STATE_OFF){
display = "Inactive"
} else if (gate.status.pcaState === pond.PCAState.PCA_STATE_UNKNOWN){
display = "--"
} else {
display = gate.status.heating ? "Heating" : "Cooling"
}
return (
<Typography>
{display}
</Typography>
)
}
const CtoF = (celsius: number) => {
return Math.round((celsius * (9 / 5) + 32) * 100) / 100;
};
@ -174,40 +216,21 @@ export default function GateList(props: Props) {
{
title: "Conditioning",
render: gate => {
let display = ""
if(gate.status.pcaState === pond.PCAState.PCA_STATE_OFF){
display = "Inactive"
} else if (gate.status.pcaState === pond.PCAState.PCA_STATE_UNKNOWN){
display = "--"
} else {
display = gate.status.heating ? "Heating" : "Cooling"
}
return (
<Box padding={2}>
<Typography>
{display}
</Typography>
{conditionDisplay(gate)}
</Box>
)}
},
{
title: "Estimated Temp",
render: gate => {
let display = "--"
if(gate.status.pcaState !== pond.PCAState.PCA_STATE_OFF){
//only display it if the final temp is between -4 and 60 C, is a valid number, and is not exactly 0
//0 is technically a valid number but the likely hood of the calculation being exactly 0 is negligible
if (gate.status.finalTemp < 60 && gate.status.finalTemp > -40 && !isNaN(gate.status.finalTemp) && gate.status.finalTemp !== 0){
display = getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? CtoF(gate.status.finalTemp).toFixed(2) + "°F" : gate.status.finalTemp.toFixed(2) + "°C"
}
}
return (
<Box padding={2}>
<Typography >
{display}
</Typography>
</Box>
)}
<Box padding={2}>
{tempDisplay(gate)}
</Box>
)
}
},
{
title: "Last FLow",
@ -271,28 +294,25 @@ export default function GateList(props: Props) {
<Typography>{terminalMap.get(gate.terminal()) ?? "None"}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Duct Type:</Typography>
<Typography>{gate.ductName() !== "" ? gate.ductName() : "None"}</Typography>
<Typography>Conditioning:</Typography>
{conditionDisplay(gate)}
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Duct Size(mm):</Typography>
<Typography>{gate.ductDiameter()}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>DuctLength(m):</Typography>
<Typography>{gate.ductLength()}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>PCA Unit:</Typography>
<Typography>{gate.settings.pcaType !== "" ? gate.settings.pcaType : "None"}</Typography>
<Typography>Estimated Temp:</Typography>
{tempDisplay(gate)}
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Last Flow:</Typography>
<Typography>{gate.status.lastMassAirflow}</Typography>
<Typography color={teal[500]}>{gate.status.lastMassAirflow.toFixed(2)} kg/s</Typography>
<Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No PCA reading yet"}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Last Reading:</Typography>
<Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No PCA reading yet"}</Typography>
<Typography>Outlet Temp:</Typography>
{lastOutletReading(gate.status.lastTempReading)}
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Outlet Pressure:</Typography>
{lastOutletReading(gate.status.lastPressureReading)}
</Box>
</Box>
// <Typography variant="body2" color="textSecondary" sx={{ padding: 1 }}>