finished some tweaks for the new bin page
This commit is contained in:
csawatzky
parent
87382dd5d8
commit
2cffc20daa
10 changed files with 225 additions and 130 deletions
|
|
@ -23,7 +23,6 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
headerCellStyle: {
|
||||
fontWeight: 650,
|
||||
backgroundColor: darken(theme.palette.background.paper, 0.2),
|
||||
fontSize: 15,
|
||||
textAlign: "center",
|
||||
borderTop: "1px solid black",
|
||||
borderLeft: "1px solid black",
|
||||
|
|
@ -32,6 +31,18 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
borderRight: "1px solid black",
|
||||
}
|
||||
},
|
||||
mobileHeaderCellStyle: {
|
||||
fontWeight: 650,
|
||||
backgroundColor: darken(theme.palette.background.paper, 0.2),
|
||||
textAlign: "center",
|
||||
borderTop: "1px solid black",
|
||||
borderLeft: "1px solid black",
|
||||
borderBottom: "1px solid black",
|
||||
"&:last-child": {
|
||||
borderRight: "1px solid black",
|
||||
},
|
||||
padding: 2
|
||||
},
|
||||
cellStyle: {
|
||||
padding: 2,
|
||||
fontWeight: 650,
|
||||
|
|
@ -164,9 +175,9 @@ export default function BinTableView(props: Props) {
|
|||
if(level.grainTemps.length > 0){
|
||||
lvlTemp = avg(level.grainTemps)
|
||||
//if the average temp is 5 degrees above the bins threshold
|
||||
if(lvlTemp > (bin.targetTemp() + 5)){
|
||||
if(lvlTemp > (bin.targetTemp() + 10)){
|
||||
tempColour = warning
|
||||
}else if(lvlTemp > bin.targetTemp()){
|
||||
}else if(lvlTemp > bin.targetTemp() + 5){
|
||||
//if the average temp is greater than 5 degrees over
|
||||
tempColour = caution
|
||||
}else {
|
||||
|
|
@ -179,7 +190,7 @@ export default function BinTableView(props: Props) {
|
|||
if(user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT){
|
||||
lvlTemp = celsiusToFahrenheit(lvlTemp)
|
||||
}
|
||||
tempDisplay = lvlTemp.toFixed(2) + (user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? " °F" : " °C")
|
||||
tempDisplay = lvlTemp.toFixed(2)
|
||||
}
|
||||
|
||||
//determine the moisture to show
|
||||
|
|
@ -187,8 +198,7 @@ export default function BinTableView(props: Props) {
|
|||
lvlMoisture = avg(level.grainMoistures)
|
||||
if(lvlMoisture > (bin.targetMoisture() + 1.5)){
|
||||
moistureColour = warning
|
||||
}else if(lvlMoisture > bin.targetMoisture()){
|
||||
//if the average temp is greater than 5 degrees over
|
||||
}else if(lvlMoisture > bin.targetMoisture() + 0.5){
|
||||
moistureColour = caution
|
||||
}else {
|
||||
moistureColour = inBounds
|
||||
|
|
@ -222,11 +232,11 @@ export default function BinTableView(props: Props) {
|
|||
}
|
||||
}
|
||||
|
||||
const tempThreshDisplay = () => {
|
||||
const tempThreshDisplay = (hideUnit?: boolean) => {
|
||||
if(user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT){
|
||||
return tempTarget.toFixed(2) + " °F"
|
||||
return tempTarget.toFixed(2) + (hideUnit ? "" : " °F")
|
||||
}
|
||||
return tempTarget.toFixed(2) + " °C"
|
||||
return tempTarget.toFixed(2) + (hideUnit ? "" : " °C")
|
||||
}
|
||||
|
||||
const LegendSwatch = ({ color }: { color: string }) => (
|
||||
|
|
@ -287,7 +297,7 @@ export default function BinTableView(props: Props) {
|
|||
|
||||
|
||||
return (
|
||||
<Box padding={2} sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
|
||||
<Box padding={2} sx={{ display: "flex", flexDirection: "column", height: isMobile ? "88%" : "100%" }}>
|
||||
{expandedTableDialog()}
|
||||
{/* Level Table */}
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
|
|
@ -311,80 +321,80 @@ export default function BinTableView(props: Props) {
|
|||
<Box sx={{ overflowY: "auto", flex: 1, minHeight: 0 }}>
|
||||
<Table className={classes.tableStyle}>
|
||||
<TableHead>
|
||||
<TableRow ref={headerRow1Ref}>
|
||||
<TableCell className={classes.headerCellStyle} sx={{ top: 0, position: "sticky", zIndex: 3 }}>
|
||||
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<GppGood />
|
||||
<Typography fontWeight={650}>
|
||||
Targets
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell className={classes.headerCellStyle} sx={{ top: 0, position: "sticky", zIndex: 3 }}>
|
||||
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<TemperatureIcon heightWidth={30}/>
|
||||
{enterTemp ?
|
||||
updateTempEntry()
|
||||
:
|
||||
<Typography fontWeight={650}>
|
||||
{tempThreshDisplay()}
|
||||
</Typography>
|
||||
}
|
||||
{enterTemp ?
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
setEnterTemp(false)
|
||||
//and update the bin with the new temp target
|
||||
update()
|
||||
}}
|
||||
>
|
||||
<Save />
|
||||
</IconButton>
|
||||
:
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
setEnterTemp(true)
|
||||
}}>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
}
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell className={classes.headerCellStyle} sx={{ top: 0, position: "sticky", zIndex: 3 }}>
|
||||
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<HumidityIcon height={30} width={20}/>
|
||||
{enterMoisture ?
|
||||
updateMoistureEntry()
|
||||
:
|
||||
<Typography fontWeight={650} sx={{marginLeft: "10px"}}>
|
||||
{bin.targetMoisture()}%
|
||||
</Typography>
|
||||
}
|
||||
{enterMoisture ?
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
setEnterMoisture(false)
|
||||
//and update the bin with the new temp target
|
||||
update()
|
||||
}}
|
||||
>
|
||||
<Save />
|
||||
</IconButton>
|
||||
:
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
setEnterMoisture(true)
|
||||
}}>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
}
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow ref={headerRow1Ref}>
|
||||
{/* "Targets" cell — hide on mobile when either field is being edited */}
|
||||
{!(isMobile && (enterTemp || enterMoisture)) && (
|
||||
<TableCell className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle} sx={{top: 0, position: "sticky", zIndex: 3 }}>
|
||||
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<GppGood />
|
||||
{!isMobile &&
|
||||
<Typography fontSize={16} fontWeight={650}>
|
||||
Targets
|
||||
</Typography>
|
||||
}
|
||||
</Box>
|
||||
</TableCell>
|
||||
)}
|
||||
|
||||
{/* Temperature cell */}
|
||||
{!(isMobile && enterMoisture) && (
|
||||
<TableCell
|
||||
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
|
||||
colSpan={isMobile && enterTemp ? 3 : 1}
|
||||
sx={{ top: 0, position: "sticky", zIndex: 3 }}
|
||||
>
|
||||
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<TemperatureIcon heightWidth={isMobile ? 25 : 30} />
|
||||
{enterTemp ? updateTempEntry() : (
|
||||
<Typography fontSize={isMobile ? 12 : 16} fontWeight={650}>
|
||||
{tempThreshDisplay(isMobile)}
|
||||
</Typography>
|
||||
)}
|
||||
{enterTemp ? (
|
||||
<IconButton onClick={() => { setEnterTemp(false); update(); }}>
|
||||
<Save />
|
||||
</IconButton>
|
||||
) : (
|
||||
<IconButton onClick={() => setEnterTemp(true)}>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
</TableCell>
|
||||
)}
|
||||
{/* Moisture cell — hide on mobile when temperature is being edited */}
|
||||
{!(isMobile && enterTemp) && (
|
||||
<TableCell
|
||||
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
|
||||
colSpan={isMobile && enterMoisture ? 3 : 1}
|
||||
sx={{ top: 0, position: "sticky", zIndex: 3 }}
|
||||
>
|
||||
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<HumidityIcon height={isMobile ? 25 : 30} width={20} />
|
||||
{enterMoisture ? updateMoistureEntry() : (
|
||||
<Typography fontSize={isMobile ? 12 : 16} fontWeight={650} sx={{ marginLeft: "10px" }}>
|
||||
{bin.targetMoisture()}%
|
||||
</Typography>
|
||||
)}
|
||||
{enterMoisture ? (
|
||||
<IconButton onClick={() => { setEnterMoisture(false); update(); }}>
|
||||
<Save />
|
||||
</IconButton>
|
||||
) : (
|
||||
<IconButton onClick={() => setEnterMoisture(true)}>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className={classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>Level</TableCell>
|
||||
<TableCell className={classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>Temperature</TableCell>
|
||||
<TableCell className={classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>Moisture</TableCell>
|
||||
<TableCell className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>Level</TableCell>
|
||||
<TableCell className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>
|
||||
{isMobile ? "T" : "Temperature"}{(user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? " (°F)" : " (°C)")}
|
||||
</TableCell>
|
||||
<TableCell className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>EMC (%)</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
|
|
@ -402,18 +412,17 @@ export default function BinTableView(props: Props) {
|
|||
<Box display="flex" alignItems="center" justifyContent="space-between" marginTop={2} sx={{ flexShrink: 0 }}>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<LegendSwatch color={inBounds} />
|
||||
<Typography sx={{fontWeight: 600, fontSize: 10}}>On or below target</Typography>
|
||||
<Typography sx={{fontWeight: 600, fontSize: 10}}>On target</Typography>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<LegendSwatch color={caution} />
|
||||
<Typography sx={{fontWeight: 600, fontSize: 10}}>{user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? "+10 °F" : "+5 °C"} above target</Typography>
|
||||
<Typography sx={{fontWeight: 600, fontSize: 10}}>{user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? "~10 °F" : "+5 °C"} (0.5%) above</Typography>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<LegendSwatch color={warning} />
|
||||
<Typography sx={{fontWeight: 600, fontSize: 10}}>{user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? "+20 °F" : "+10 °C"} above target</Typography>
|
||||
<Typography sx={{fontWeight: 600, fontSize: 10}}>{user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? "~20 °F" : "+10 °C"} (1.5%) above</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue