From 269417a3211bf86523500e5038209c2a78cee973 Mon Sep 17 00:00:00 2001 From: csawatzky Date: Mon, 12 May 2025 16:47:12 -0600 Subject: [PATCH] created new buttonGroup common component to replace the styled toggles since they don't seem to be styling the way we want anymore --- src/bin/BinVisualizerV2.tsx | 136 +++++++++++++++++++----------- src/common/ButtonGroup.tsx | 161 ++++++++++++++++++++++++++++++++++++ 2 files changed, 248 insertions(+), 49 deletions(-) create mode 100644 src/common/ButtonGroup.tsx diff --git a/src/bin/BinVisualizerV2.tsx b/src/bin/BinVisualizerV2.tsx index 8ab96b6..b18a7cd 100644 --- a/src/bin/BinVisualizerV2.tsx +++ b/src/bin/BinVisualizerV2.tsx @@ -71,6 +71,7 @@ import { ExtractMoisture } from "grain"; import SearchSelect, { Option } from "common/SearchSelect"; import Edit from "@mui/icons-material/Edit"; import { makeStyles, styled } from "@mui/styles"; +import ButtonGroup from "common/ButtonGroup"; const useStyles = makeStyles((theme: Theme) => { return ({ @@ -280,54 +281,54 @@ export default function BinVisualizer(props: Props) { const [storageDate, setStorageDate] = useState(moment().format("YYYY-MM-DD")); const [storageTime, setStorageTime] = useState(moment().format("HH:mm")); - const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({ - root: { - backgroundColor: "transparent", - overflow: "visible", - content: "content-box", - "&$selected": { - backgroundColor: "gold", - color: "black", - borderRadius: 24, - fontWeight: "bold" - }, - "&$selected:hover": { - backgroundColor: "rgb(255, 255, 0)", - color: "black", - borderRadius: 24 - } - }, - selected: {} - })); + // const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({ + // root: { + // backgroundColor: "transparent", + // overflow: "visible", + // content: "content-box", + // "&$selected": { + // backgroundColor: "gold", + // color: "black", + // borderRadius: 24, + // fontWeight: "bold" + // }, + // "&$selected:hover": { + // backgroundColor: "rgb(255, 255, 0)", + // color: "black", + // borderRadius: 24 + // } + // }, + // selected: {} + // })); - const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({ - grouped: { - margin: theme.spacing(-0.5), - border: "none", - padding: theme.spacing(1), - "&:not(:first-child):not(:last-child)": { - borderRadius: 24, - marginRight: theme.spacing(0.5), - marginLeft: theme.spacing(0.5) - }, - "&:first-child": { - borderRadius: 24, - marginLeft: theme.spacing(0.25) - }, - "&:last-child": { - borderRadius: 24, - marginRight: theme.spacing(0.25) - } - }, - root: { - backgroundColor: darken( - theme.palette.background.paper, - getThemeType() === "light" ? 0.05 : 0.25 - ), - borderRadius: 24, - content: "border-box" - } - })); + // const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({ + // grouped: { + // margin: theme.spacing(-0.5), + // border: "none", + // padding: theme.spacing(1), + // "&:not(:first-child):not(:last-child)": { + // borderRadius: 24, + // marginRight: theme.spacing(0.5), + // marginLeft: theme.spacing(0.5) + // }, + // "&:first-child": { + // borderRadius: 24, + // marginLeft: theme.spacing(0.25) + // }, + // "&:last-child": { + // borderRadius: 24, + // marginRight: theme.spacing(0.25) + // } + // }, + // root: { + // backgroundColor: darken( + // theme.palette.background.paper, + // getThemeType() === "light" ? 0.05 : 0.25 + // ), + // borderRadius: 24, + // content: "border-box" + // } + // })); useEffect(() => { setModeTime(moment(bin.status.lastModeChange)); @@ -1705,6 +1706,18 @@ export default function BinVisualizer(props: Props) { ); }; + const determineToggle = (binMode: pond.BinMode) => { + switch (binMode) { + case pond.BinMode.BIN_MODE_STORAGE: + return [0] + case pond.BinMode.BIN_MODE_COOLDOWN: + return [1] + case pond.BinMode.BIN_MODE_DRYING: + case pond.BinMode.BIN_MODE_HYDRATING: + return [2] + } + } + const binMode = () => { const mode = bin.settings.mode; return ( @@ -1720,7 +1733,31 @@ export default function BinVisualizer(props: Props) { Bin Mode - { + setModeStorage() + } + }, + { + title: "Cooldown", + function: () => { + setModeCooldown() + } + }, + { + title: bin.settings.inventory && bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? "Hydrating" : "Drying", + function: () => { + setShowInputMoisture(true) + } + } + ]} + toggledButtons={determineToggle(mode)} + toggle + /> + {/* )} - + */} ); }; @@ -2067,6 +2104,7 @@ export default function BinVisualizer(props: Props) { devices={devices} refreshCallback={success => { setShowInputMoisture(false); + setNewPreset(0) if (success) updateBin(); }} parentPreset={newPreset} diff --git a/src/common/ButtonGroup.tsx b/src/common/ButtonGroup.tsx new file mode 100644 index 0000000..132bfcc --- /dev/null +++ b/src/common/ButtonGroup.tsx @@ -0,0 +1,161 @@ +import { Box, Button, darken, Theme, Typography } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { cloneDeep } from "lodash"; +import { useEffect } from "react"; +import { useState } from "react"; +import { getSecondaryColour } from "services/whiteLabel"; +import { getThemeType } from "theme/themeType"; + +export interface ButtonData { + /** + * The title and description of the button + */ + title: string + /** + * An icon that would replace the text of the button + */ + icon?: JSX.Element + /** + * The function to run when the button is clicked or toggled on when toggle is true + */ + function: () => void +} + +interface Props { + /** + * The array of button data to be rendered by the group + */ + buttons: ButtonData[] + /** + * When true will track the toggle state of the buttons, false will just be basic buttons + * + * @default false + */ + toggle?: boolean + /** + * When true will allow multiple buttons to be toggled, false will untoggle the previous button when another is selected + * + * @default false + */ + multiToggle?: boolean + /** + * Can be used to control which buttons are toggled on from the parent by passing the indexes of the buttons to toggle on. + * If not passed in will default to toggle the first button and then be controlled internally + * + * @default undefined + */ + toggledButtons?: number[] + /** + * Numerical value for the size of the text for buttons that dont use the icon + */ + textSize?: number +} + +const useStyles = makeStyles((theme: Theme) => { + return ({ + container: { + backgroundColor: darken( + theme.palette.background.paper, + getThemeType() === "light" ? 0.10 : 0.05 + ), + borderRadius: 24, + content: "border-box", + border: "none", + //padding: theme.spacing(1), + }, + button: { + backgroundColor: "transparent", + color: theme.palette.text.primary, + overflow: "visible", + content: "content-box", + borderRadius: 24, + marginLeft: theme.spacing(0.05), + marginRight: theme.spacing(0.05), + "&:hover": { + //backgroundColor: getSecondaryColour(), + backgroundColor: "gold", + color: "black", + } + }, + buttonToggled: { + //backgroundColor: getSecondaryColour(), + backgroundColor: "gold", + color: "black", + borderRadius: 24, + fontWeight: "bold" + } + }) +}) + +export default function ButtonGroup(props: Props){ + const { buttons, toggle, toggledButtons, multiToggle, textSize } = props + const classes = useStyles() + const [currentToggle, setCurrentToggle] = useState([]) + + useEffect(()=>{ + //determine the default state of the button toggles if toggle is true + if(toggle){ + let toggled: number [] = [0] + if(toggledButtons){ + toggled = toggledButtons + } + setCurrentToggle(toggled) + } + },[toggle, toggledButtons]) + + const checkToggled = (index: number) => { + return currentToggle.includes(index) + } + + const toggleControl = (i: number) => { + let toggled = cloneDeep(currentToggle) + //is the button currently toggled + if(checkToggled(i)){ + //if the button is toggled + if(multiToggle){ + //un-toggle the button (remove it from the array) + console.log(toggled) + toggled.splice(currentToggle.indexOf(i), 1) + } + //and if it is single toggle do nothing + } else { + //if multiToggle is false + if(!multiToggle){ + //replace the currentToggle array + toggled = [i] + }else{ + //add it to the currentToggle array + toggled.push(i) + } + } + setCurrentToggle(toggled) + } + + return ( + + {buttons.map((b, i) => ( + + ))} + + ) +}