diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx index de23f1b..dea576a 100644 --- a/src/common/ResponsiveTable.tsx +++ b/src/common/ResponsiveTable.tsx @@ -92,6 +92,7 @@ interface Props { customElement?: JSX.Element //element that will be placed in the table head between the table actions and the column header rows mobileView?: boolean //can be used to force the table to use its mobile view for narrow containing elements ie, drawer hidePagination?: boolean //when passed in will hide the pagination at the bottom of the table + endTitleElement?: string | JSX.Element | (() => string | JSX.Element); } export default function ResponsiveTable(props: Props) { @@ -126,6 +127,7 @@ export default function ResponsiveTable(props: Props) { const columns = typeof(props.columns) === "function" ? props.columns() : props.columns const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle const title = typeof(props.title) === "function" ? props.title() : props.title + const endTitleElement = typeof(props.endTitleElement) === "function" ? props.endTitleElement() : props.endTitleElement const isMobile = useMobile() @@ -307,11 +309,13 @@ export default function ResponsiveTable(props: Props) { if (isMobile || mobileView) return ( + {renderTitle()} {renderSubtitle()} {setSearchText && searchBar()} + {rows.map((row, index) => { return ( onRowClick&&onRowClick(row)}> @@ -375,10 +379,9 @@ export default function ResponsiveTable(props: Props) { return ( - + - @@ -393,6 +396,9 @@ export default function ResponsiveTable(props: Props) { {actions && actions} + + {endTitleElement} + {setSearchText && {searchBar()} @@ -418,7 +424,6 @@ export default function ResponsiveTable(props: Props) { } - { rowSelect && } diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx index 21edc95..d4518fe 100644 --- a/src/pages/Devices.tsx +++ b/src/pages/Devices.tsx @@ -1,5 +1,5 @@ -import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material"; -import { Box, Chip, Grid2, IconButton, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material"; +import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon, Tune } from "@mui/icons-material"; +import { Box, Chip, Dialog, DialogTitle, Grid2, IconButton, Menu, MenuItem, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material"; import { blue, green, orange } from "@mui/material/colors"; import { makeStyles } from "@mui/styles"; import ResponsiveTable, { Column } from "common/ResponsiveTable"; @@ -125,6 +125,8 @@ export default function Devices() { const [fieldContains, setFieldContains] = useState>(new Map()) const [seperateDust, setSeperateDust] = useState(true) + const [preferencesAnchor, setPreferencesAnchor] = useState(null) + const [{ as }] = useGlobalState() const updateGroups = (newGroups: Group[]) => { @@ -282,7 +284,6 @@ export default function Devices() { function insertGroupContext(groupID: string, deviceID: string): string { const path = location.pathname - console.log(path) const segments = path.split('/').filter(Boolean); const deviceIndex = segments.findIndex(segment => segment === 'devices'); @@ -305,10 +306,7 @@ export default function Devices() { const toDevice = (device: Device) => { let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : "" - console.log(url) if (url.length < 1) url = device.id().toString() - // url = url + "/" + device.id() - // navigate(url, { replace: true, state: {device: device} }) navigate(url, { state: {device: device} }) }; @@ -527,6 +525,29 @@ export default function Devices() { ) } + const preferencesButton = () => { + return ( + setPreferencesAnchor(event.currentTarget)}> + + + ) + } + + const preferencesMenu = () => { + return ( + setPreferencesAnchor(null)} + disableAutoFocusItem> + + hi + + + ) + } + return( } + endTitleElement={preferencesButton} /> + {preferencesMenu()} ) } \ No newline at end of file