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[]) => { // const lastOutletReading = (reading: pond.UnitMeasurementsForComponent[]) => {
let outletDisplay = "--" // let outletDisplay = "--"
let timeSince = "No Reading Yet" // let timeSince = "No Reading Yet"
let color = "" // let color = ""
reading.forEach(um => { // reading.forEach(um => {
let clone = cloneDeep(um) // let clone = cloneDeep(um)
let measurement = UnitMeasurement.create(clone, user) // let measurement = UnitMeasurement.create(clone, user)
if(measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_TEMPERATURE || measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE){ // if(measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_TEMPERATURE || measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE){
let nodes = measurement.values[measurement.values.length-1].values // let nodes = measurement.values[measurement.values.length-1].values
outletDisplay = nodes[nodes.length-1].toFixed(2) + " " + measurement.unit // outletDisplay = nodes[nodes.length-1].toFixed(2) + " " + measurement.unit
timeSince = moment(measurement.timestamps[measurement.timestamps.length-1]).fromNow() // timeSince = moment(measurement.timestamps[measurement.timestamps.length-1]).fromNow()
color = measurement.colour // color = measurement.colour
} // }
}) // })
if(isMobile){ // if(isMobile){
return ( // return (
<React.Fragment> // <React.Fragment>
<Typography color={color}>{outletDisplay}</Typography> // <Typography color={color}>{outletDisplay}</Typography>
<Typography>{timeSince}</Typography> // <Typography>{timeSince}</Typography>
</React.Fragment> // </React.Fragment>
) // )
} // }
return ( // return (
<Box padding={2}> // <Box padding={2}>
<Box display="flex" justifyContent="space-between"> // <Box display="flex" justifyContent="space-between">
<Typography>Value:</Typography> // <Typography>Value:</Typography>
<Typography color={color}>{outletDisplay}</Typography> // <Typography color={color}>{outletDisplay}</Typography>
</Box> // </Box>
<Box display="flex" justifyContent="space-between"> // <Box display="flex" justifyContent="space-between">
<Typography>Time:</Typography> // <Typography>Time:</Typography>
<Typography>{timeSince}</Typography> // <Typography>{timeSince}</Typography>
</Box> // </Box>
</Box> // </Box>
) // )
} // }
const tempDisplay = (gate: Gate) => { // const tempDisplay = (gate: Gate) => {
let display = "--" // let display = "--"
if(gate.status.pcaState !== pond.PCAState.PCA_STATE_OFF){ // 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 // //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 // //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){ // 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" // display = getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? CtoF(gate.status.finalTemp).toFixed(2) + "°F" : gate.status.finalTemp.toFixed(2) + "°C"
} // }
} // }
return ( // return (
<Typography> // <Typography>
{display} // {display}
</Typography> // </Typography>
) // )
} // }
const conditionDisplay = (gate: Gate) => { const conditionDisplay = (gate: Gate) => {
console.log(gate)
let display = "" let display = ""
let deltaTemp = 0
if(gate.status.pcaState === pond.PCAState.PCA_STATE_OFF){ if(gate.status.pcaState === pond.PCAState.PCA_STATE_OFF){
display = "Inactive" display = "Inactive"
} else if (gate.status.pcaState === pond.PCAState.PCA_STATE_UNKNOWN){ } else if (gate.status.pcaState === pond.PCAState.PCA_STATE_UNKNOWN){
display = "--" display = "--"
} else { } else { //the pca is currently active calulate the delta temp (T2 - T1) provided there are two temps
display = gate.status.heating ? "Heating" : "Cooling" //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 ( return (
<Typography> <Typography>
@ -222,43 +238,44 @@ export default function GateList(props: Props) {
</Box> </Box>
)} )}
}, },
{ //taking out these columns for now because were not sure if the customer actually wants them
title: "Estimated Temp", // {
render: gate => { // title: "Estimated Temp",
return ( // render: gate => {
<Box padding={2}> // return (
{tempDisplay(gate)} // <Box padding={2}>
</Box> // {tempDisplay(gate)}
) // </Box>
} // )
}, // }
{ // },
title: "Last FLow", // {
render: gate => ( // title: "Last FLow",
<Box padding={2}> // render: gate => (
<Box display="flex" justifyContent="space-between"> // <Box padding={2}>
<Typography>Flow:</Typography> // <Box display="flex" justifyContent="space-between">
<Typography color={teal[500]}>{gate.status.lastMassAirflow.toFixed(2)} kg/s</Typography> // <Typography>Flow:</Typography>
</Box> // <Typography color={teal[500]}>{gate.status.lastMassAirflow.toFixed(2)} kg/s</Typography>
<Box display="flex" justifyContent="space-between"> // </Box>
<Typography>Read:</Typography> // <Box display="flex" justifyContent="space-between">
<Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No Reading Yet"}</Typography> // <Typography>Read:</Typography>
</Box> // <Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No Reading Yet"}</Typography>
</Box> // </Box>
) // </Box>
}, // )
{ // },
title: "Outlet Temperature", // {
render: gate => ( // title: "Outlet Temperature",
<Box>{lastOutletReading(gate.status.lastTempReading)}</Box> // render: gate => (
) // <Box>{lastOutletReading(gate.status.lastTempReading)}</Box>
}, // )
{ // },
title: "Outlet Pressure", // {
render: gate => ( // title: "Outlet Pressure",
<Box>{lastOutletReading(gate.status.lastPressureReading)}</Box> // render: gate => (
) // <Box>{lastOutletReading(gate.status.lastPressureReading)}</Box>
} // )
// }
] ]
} }
const mobileCols = (): Column<Gate>[] => { const mobileCols = (): Column<Gate>[] => {
@ -297,7 +314,8 @@ export default function GateList(props: Props) {
<Typography>Conditioning:</Typography> <Typography>Conditioning:</Typography>
{conditionDisplay(gate)} {conditionDisplay(gate)}
</Box> </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> <Typography>Estimated Temp:</Typography>
{tempDisplay(gate)} {tempDisplay(gate)}
</Box> </Box>
@ -313,11 +331,8 @@ export default function GateList(props: Props) {
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between"> <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Outlet Pressure:</Typography> <Typography>Outlet Pressure:</Typography>
{lastOutletReading(gate.status.lastPressureReading)} {lastOutletReading(gate.status.lastPressureReading)}
</Box> */}
</Box> </Box>
</Box>
// <Typography variant="body2" color="textSecondary" sx={{ padding: 1 }}>
// </Typography>
) )
} }