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

chaging the gate list display slightly to show the delta temp of the last temp reading on the gate

Browse source
This commit is contained in:
csawatzky 2026-02-03 15:14:49 -06:00
parent 934264708f
commit 5f44cf6f09
1 changed files with 109 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

203
src/gate/GateList.tsx
View file

@ -110,67 +110,83 @@ export default function GateList(props: Props) {
}
}
const lastOutletReading = (reading: pond.UnitMeasurementsForComponent[]) => {
let outletDisplay = "--"
let timeSince = "No Reading Yet"
let color = ""
reading.forEach(um => {
let clone = cloneDeep(um)
let measurement = UnitMeasurement.create(clone, user)
if(measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_TEMPERATURE || measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE){
let nodes = measurement.values[measurement.values.length-1].values
outletDisplay = nodes[nodes.length-1].toFixed(2) + " " + measurement.unit
timeSince = moment(measurement.timestamps[measurement.timestamps.length-1]).fromNow()
color = measurement.colour
}
})
// const lastOutletReading = (reading: pond.UnitMeasurementsForComponent[]) => {
// let outletDisplay = "--"
// let timeSince = "No Reading Yet"
// let color = ""
// reading.forEach(um => {
// let clone = cloneDeep(um)
// let measurement = UnitMeasurement.create(clone, user)
// if(measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_TEMPERATURE || measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE){
// let nodes = measurement.values[measurement.values.length-1].values
// outletDisplay = nodes[nodes.length-1].toFixed(2) + " " + measurement.unit
// timeSince = moment(measurement.timestamps[measurement.timestamps.length-1]).fromNow()
// 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">
<Typography>Value:</Typography>
<Typography color={color}>{outletDisplay}</Typography>
</Box>
<Box display="flex" justifyContent="space-between">
<Typography>Time:</Typography>
<Typography>{timeSince}</Typography>
</Box>
</Box>
)
}
// 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">
// <Typography>Value:</Typography>
// <Typography color={color}>{outletDisplay}</Typography>
// </Box>
// <Box display="flex" justifyContent="space-between">
// <Typography>Time:</Typography>
// <Typography>{timeSince}</Typography>
// </Box>
// </Box>
// )
// }
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 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) => {
console.log(gate)
let display = ""
let deltaTemp = 0
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"
} else { //the pca is currently active calulate the delta temp (T2 - T1) provided there are two temps
//loop to find the temp readings
let clone = cloneDeep(gate.status.lastTempReading)
clone.forEach(unitMeasurement => {
let um = UnitMeasurement.create(unitMeasurement, user)
if(um.type === quack.MeasurementType.MEASUREMENT_TYPE_TEMPERATURE){
if(um.values.length > 0){ //as long as there is at least on thing in the measurements
let lastReading = um.values[um.values.length-1] //there should only be one measurement in here but just make sure to get the end of the array
if(lastReading.values.length > 1){ //make sure there are at least two values in the array
console.log(lastReading.values)
deltaTemp = lastReading.values[lastReading.values.length -1] - lastReading.values[0] //subtract the first value from the last value to get the delta
}
}
}
})
display = deltaTemp.toFixed(2) + (getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? "°F" : "°C")
}
return (
<Typography>
@ -222,43 +238,44 @@ export default function GateList(props: Props) {
</Box>
)}
},
{
title: "Estimated Temp",
render: gate => {
return (
<Box padding={2}>
{tempDisplay(gate)}
</Box>
)
}
},
{
title: "Last FLow",
render: gate => (
<Box padding={2}>
<Box display="flex" justifyContent="space-between">
<Typography>Flow:</Typography>
<Typography color={teal[500]}>{gate.status.lastMassAirflow.toFixed(2)} kg/s</Typography>
</Box>
<Box display="flex" justifyContent="space-between">
<Typography>Read:</Typography>
<Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No Reading Yet"}</Typography>
</Box>
</Box>
)
},
{
title: "Outlet Temperature",
render: gate => (
<Box>{lastOutletReading(gate.status.lastTempReading)}</Box>
)
},
{
title: "Outlet Pressure",
render: gate => (
<Box>{lastOutletReading(gate.status.lastPressureReading)}</Box>
)
}
//taking out these columns for now because were not sure if the customer actually wants them
// {
// title: "Estimated Temp",
// render: gate => {
// return (
// <Box padding={2}>
// {tempDisplay(gate)}
// </Box>
// )
// }
// },
// {
// title: "Last FLow",
// render: gate => (
// <Box padding={2}>
// <Box display="flex" justifyContent="space-between">
// <Typography>Flow:</Typography>
// <Typography color={teal[500]}>{gate.status.lastMassAirflow.toFixed(2)} kg/s</Typography>
// </Box>
// <Box display="flex" justifyContent="space-between">
// <Typography>Read:</Typography>
// <Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No Reading Yet"}</Typography>
// </Box>
// </Box>
// )
// },
// {
// title: "Outlet Temperature",
// render: gate => (
// <Box>{lastOutletReading(gate.status.lastTempReading)}</Box>
// )
// },
// {
// title: "Outlet Pressure",
// render: gate => (
// <Box>{lastOutletReading(gate.status.lastPressureReading)}</Box>
// )
// }
]
}
const mobileCols = (): Column<Gate>[] => {
@ -297,7 +314,8 @@ export default function GateList(props: Props) {
<Typography>Conditioning:</Typography>
{conditionDisplay(gate)}
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
{/* taking these out for now because we are not sure if the customer wants them */}
{/* <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Estimated Temp:</Typography>
{tempDisplay(gate)}
</Box>
@ -313,11 +331,8 @@ export default function GateList(props: Props) {
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Outlet Pressure:</Typography>
{lastOutletReading(gate.status.lastPressureReading)}
</Box> */}
</Box>
</Box>
// <Typography variant="body2" color="textSecondary" sx={{ padding: 1 }}>
// </Typography>
)
}