more visual tweaks and design, fixed a coule bugs and removed some console logs
This commit is contained in:
csawatzky
parent
f04213af1e
commit
ea13f97c57
8 changed files with 257 additions and 293 deletions
|
|
@ -1,5 +1,5 @@
|
|||
import { Edit, GppGood, Info, Save } from "@mui/icons-material";
|
||||
import { Box, Button, darken, DialogActions, IconButton, Table, TableBody, TableCell, TableHead, TableRow, TextField, Theme, Tooltip, Typography } from "@mui/material";
|
||||
import { Box, Button, darken, DialogActions, IconButton, Table, TableBody, TableCell, TableHead, TableRow, TextField, Theme, Tooltip, Typography, useTheme } from "@mui/material";
|
||||
import { green, grey, orange, red, yellow } from "@mui/material/colors";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import ResponsiveDialog from "common/ResponsiveDialog";
|
||||
|
|
@ -22,34 +22,40 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
},
|
||||
headerCellStyle: {
|
||||
fontWeight: 650,
|
||||
backgroundColor: darken(theme.palette.background.paper, 0.2),
|
||||
backgroundColor: darken(theme.palette.background.paper, 0.3),
|
||||
textAlign: "center",
|
||||
borderTop: "1px solid black",
|
||||
borderLeft: "1px solid black",
|
||||
borderBottom: "1px solid black",
|
||||
"&:last-child": {
|
||||
borderRight: "1px solid black",
|
||||
}
|
||||
padding: 10
|
||||
},
|
||||
mobileHeaderCellStyle: {
|
||||
fontWeight: 650,
|
||||
backgroundColor: darken(theme.palette.background.paper, 0.2),
|
||||
backgroundColor: darken(theme.palette.background.paper, 0.3),
|
||||
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,
|
||||
fontSize: 17,
|
||||
targetCellStyle: {
|
||||
textAlign: "center",
|
||||
border: "1px solid black",
|
||||
|
||||
backgroundColor: theme.palette.background.paper
|
||||
},
|
||||
mobileTargetCellStyle: {
|
||||
textAlign: "center",
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
padding: 2
|
||||
},
|
||||
defaultCellStyle: {
|
||||
padding: 2,
|
||||
fontSize: 15,
|
||||
textAlign: "center",
|
||||
backgroundColor: darken(theme.palette.background.paper, 0.1),
|
||||
borderTop: "1px solid " + darken(theme.palette.background.paper, 0.4),
|
||||
borderBottom: "none"
|
||||
},
|
||||
colouredCellStyle: {
|
||||
padding: 2,
|
||||
borderTop: "1px solid " + darken(theme.palette.background.paper, 0.4),
|
||||
// fontWeight: 650,
|
||||
fontSize: 15,
|
||||
textAlign: "center",
|
||||
borderBottom: "none"
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
@ -71,6 +77,7 @@ export default function BinTableView(props: Props) {
|
|||
const classes = useStyles()
|
||||
const {bin, updateBinCallback} = props
|
||||
const [{user}] = useGlobalState()
|
||||
const theme = useTheme()
|
||||
const [enterTemp, setEnterTemp] = useState(false)
|
||||
const [enterMoisture, setEnterMoisture] = useState(false)
|
||||
const [tempTarget, setTempTarget] = useState(0)
|
||||
|
|
@ -163,13 +170,13 @@ export default function BinTableView(props: Props) {
|
|||
return levels
|
||||
},[bin])
|
||||
|
||||
const levelDisplay = (level: BinLevel) => {
|
||||
const levelDisplay = (level: BinLevel, lastRow?: boolean) => {
|
||||
let tempDisplay = "--"
|
||||
let moistureDisplay = "--"
|
||||
let lvlTemp
|
||||
let lvlMoisture
|
||||
let tempColour: string = ""
|
||||
let moistureColour: string = ""
|
||||
let tempColour: string = darken(theme.palette.background.paper, 0.1)
|
||||
let moistureColour: string = darken(theme.palette.background.paper, 0.1)
|
||||
|
||||
//determine the temp
|
||||
if(level.grainTemps.length > 0){
|
||||
|
|
@ -207,12 +214,12 @@ export default function BinTableView(props: Props) {
|
|||
lvlMoisture = avg(level.airMoistures)
|
||||
}
|
||||
if(lvlMoisture){
|
||||
moistureDisplay = lvlMoisture.toFixed(2) + "%"
|
||||
moistureDisplay = lvlMoisture.toFixed(2)
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableCell padding="none" className={classes.cellStyle} sx={{backgroundColor: tempColour}}>{tempDisplay}</TableCell>
|
||||
<TableCell padding="none" className={classes.cellStyle} sx={{backgroundColor: moistureColour}}>{moistureDisplay}</TableCell>
|
||||
<TableCell className={classes.colouredCellStyle} padding="none" sx={{backgroundColor: tempColour}}>{tempDisplay}</TableCell>
|
||||
<TableCell className={classes.colouredCellStyle} padding="none" sx={{backgroundColor: moistureColour, borderBottomRightRadius: lastRow ? 8 : 0}}>{moistureDisplay}</TableCell>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
|
@ -301,10 +308,11 @@ export default function BinTableView(props: Props) {
|
|||
{expandedTableDialog()}
|
||||
{/* Level Table */}
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Typography>Grain Table</Typography>
|
||||
<Typography fontWeight={650}>Grain Table</Typography>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{ background: theme.palette.background.default}}
|
||||
onClick={() => {
|
||||
setOpenExpandedCables(true)
|
||||
}}>
|
||||
|
|
@ -324,7 +332,7 @@ export default function BinTableView(props: Props) {
|
|||
<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 }}>
|
||||
<TableCell className={isMobile ? classes.mobileTargetCellStyle : classes.targetCellStyle} sx={{top: 0, position: "sticky", zIndex: 4, borderBottom: "none" }}>
|
||||
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<GppGood />
|
||||
{!isMobile &&
|
||||
|
|
@ -339,14 +347,14 @@ export default function BinTableView(props: Props) {
|
|||
{/* Temperature cell */}
|
||||
{!(isMobile && enterMoisture) && (
|
||||
<TableCell
|
||||
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
|
||||
className={isMobile ? classes.mobileTargetCellStyle : classes.targetCellStyle}
|
||||
colSpan={isMobile && enterTemp ? 3 : 1}
|
||||
sx={{ top: 0, position: "sticky", zIndex: 3 }}
|
||||
sx={{ top: 0, position: "sticky", zIndex: 4, borderBottom: "none" }}
|
||||
>
|
||||
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<TemperatureIcon heightWidth={isMobile ? 25 : 30} />
|
||||
{enterTemp ? updateTempEntry() : (
|
||||
<Typography fontSize={isMobile ? 12 : 16} fontWeight={650}>
|
||||
<Typography fontSize={isMobile ? 12 : 16}>
|
||||
{tempThreshDisplay(isMobile)}
|
||||
</Typography>
|
||||
)}
|
||||
|
|
@ -365,15 +373,15 @@ export default function BinTableView(props: Props) {
|
|||
{/* Moisture cell — hide on mobile when temperature is being edited */}
|
||||
{!(isMobile && enterTemp) && (
|
||||
<TableCell
|
||||
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
|
||||
className={isMobile ? classes.mobileTargetCellStyle : classes.targetCellStyle}
|
||||
colSpan={isMobile && enterMoisture ? 3 : 1}
|
||||
sx={{ top: 0, position: "sticky", zIndex: 3 }}
|
||||
sx={{ top: 0, position: "sticky", zIndex: 4, borderBottom: "none" }}
|
||||
>
|
||||
<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 fontSize={isMobile ? 12 : 16} sx={{ marginLeft: "10px" }}>
|
||||
{bin.targetMoisture()}
|
||||
</Typography>
|
||||
)}
|
||||
{enterMoisture ? (
|
||||
|
|
@ -390,19 +398,49 @@ export default function BinTableView(props: Props) {
|
|||
)}
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<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 }}>
|
||||
<TableCell
|
||||
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
|
||||
sx={{
|
||||
top: firstRowHeight,
|
||||
position: "sticky",
|
||||
zIndex: 3,
|
||||
borderBottom: "none",
|
||||
borderTopLeftRadius: 8,
|
||||
boxShadow: `-12px -12px 0px 4px ${theme.palette.background.paper}`
|
||||
}}>
|
||||
Level
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
|
||||
sx={{
|
||||
top: firstRowHeight,
|
||||
position: "sticky",
|
||||
zIndex: 3,
|
||||
borderBottom: "none"
|
||||
}}>
|
||||
{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>
|
||||
<TableCell
|
||||
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
|
||||
sx={{
|
||||
top: firstRowHeight,
|
||||
position: "sticky",
|
||||
zIndex: 3,
|
||||
borderBottom: "none",
|
||||
borderTopRightRadius: 8,
|
||||
// fills the transparent corner area with the target row's background colour
|
||||
boxShadow: `16px -16px 8px 12px ${theme.palette.background.paper}`
|
||||
}}>
|
||||
EMC (%)
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{binLevels.map((level, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell padding="none" className={classes.cellStyle}>{binLevels.length - i}</TableCell>
|
||||
{levelDisplay(level)}
|
||||
<TableCell sx={{borderBottomLeftRadius: (i === binLevels.length-1 ? 8 : 0)}} padding="none" className={classes.defaultCellStyle}>{binLevels.length - i}</TableCell>
|
||||
{levelDisplay(level, i === binLevels.length-1)}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue