diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx index 8640347..eb3787e 100644 --- a/src/common/ResponsiveTable.tsx +++ b/src/common/ResponsiveTable.tsx @@ -92,6 +92,7 @@ interface Props { rowSelect?: (row: T, index: number, checked: boolean) => void; //row select function that passes the the row back up, when this function is passed in render a column of checkboxes selectedRows?: number[]; //which rows are selected will need to be controlled by the parent in order to keep track between page changes 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 } export default function ResponsiveTable(props: Props) { @@ -118,7 +119,8 @@ export default function ResponsiveTable(props: Props) { actions, rowSelect, selectedRows, - customElement + customElement, + mobileView } = props const classes = useStyles(); const columns = typeof(props.columns) === "function" ? props.columns() : props.columns @@ -303,7 +305,7 @@ export default function ResponsiveTable(props: Props) { } - if (isMobile) return ( + if (isMobile || mobileView) return ( {renderTitle()} @@ -472,7 +474,7 @@ export default function ResponsiveTable(props: Props) { transform: openGutters.includes(index) ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.3s ease', - marginRight: isMobile ? -1 : 0 + marginRight: (isMobile || mobileView) ? -1 : 0 }} onClick={(event) => handleCollapse(index, event)}> diff --git a/src/maps/mapDrawers/GroupDrawer.tsx b/src/maps/mapDrawers/GroupDrawer.tsx index 5a66125..8eae42d 100644 --- a/src/maps/mapDrawers/GroupDrawer.tsx +++ b/src/maps/mapDrawers/GroupDrawer.tsx @@ -1,10 +1,15 @@ -import { Box } from "@mui/material"; +import { Box, Grid2, Typography } from "@mui/material"; import DisplayDrawer from "common/DisplayDrawer"; +import ResponsiveTable from "common/ResponsiveTable"; //import DeviceCardList from "device/DeviceCardList"; import { useGroupAPI, useSnackbar } from "hooks"; import { Group } from "models"; +import moment from "moment"; +import { describePower } from "pbHelpers/Power"; +import BindaptIcon from "products/Bindapt/BindaptIcon"; import { pond } from "protobuf-ts/pond"; import React, { useEffect, useState, useCallback } from "react"; +import { useNavigate } from "react-router-dom"; import { or } from "utils"; interface Props { @@ -22,6 +27,9 @@ export default function GroupDrawer(props: Props) { const groupAPI = useGroupAPI(); const { openSnack } = useSnackbar(); const [grpDevs, setGrpDevs] = useState([]); + const navigate = useNavigate(); + const [tablePage, setTablePage] = useState(0) + const [pageSize, setPageSize] = useState(10) const loadDevs = useCallback(() => { groupAPI @@ -121,8 +129,69 @@ export default function GroupDrawer(props: Props) { }); }; + const toDevice = (comprehensiveDevice: pond.ComprehensiveDevice) => { + let device = comprehensiveDevice.device + if(device){ + let url = "/groups/" + selectedGroup + url = url + "/devices/" + device.settings?.deviceId + navigate(url, { replace: true, state: {device: device} }) + } + }; + + const mobile = (row: pond.ComprehensiveDevice) => { + return ( + + + + {/* {GetDeviceProductIcon(row)} */} + {/* {icon} */} + + + + + + {row.device?.settings?.name} + + + Last Active: {moment(row.device?.status?.lastActive).fromNow()} + + + + + {describePower(row.device?.status?.power).icon} + + + + ) + } + + const gutter = (row: pond.ComprehensiveDevice) => { + return ( + + {row.device?.settings?.description} + + ) + } + const drawerBody = () => { - return (Use the responsive table here) + // TODO: will need to update the rows and setPage functions if we decide to have the table only show a number of items matching its page size rether than everything passed in + return ( + + + page={tablePage} + pageSize={pageSize} + onRowClick={toDevice} + handleRowsPerPageChange={()=>{}} + setPage={()=>{}} + total={grpDevs.length} + rows={grpDevs} + renderMobile={mobile} + renderGutter={gutter} + gutterPadding={0} + mobileView + /> + + ) //return ; }; @@ -141,4 +210,4 @@ export default function GroupDrawer(props: Props) { /> ); -} +} \ No newline at end of file diff --git a/src/navigation/SideNavigator.tsx b/src/navigation/SideNavigator.tsx index f36458b..03ac6ec 100644 --- a/src/navigation/SideNavigator.tsx +++ b/src/navigation/SideNavigator.tsx @@ -26,12 +26,10 @@ import { useGlobalState } from "providers"; import { IsAdaptiveAgriculture, // hasTutorialPlaylist, - // IsAdaptiveAgriculture, - // IsAdCon, + IsAdCon, // isBXT, IsMiVent, IsOmniAir, - // IsOmniAir } from "services/whiteLabel"; import MiningIcon from "products/ventilation/MiningIcon"; import { useAuth0 } from "@auth0/auth0-react"; @@ -144,6 +142,7 @@ export default function SideNavigator(props: Props) { const isMiVent = IsMiVent(); const isAg = IsAdaptiveAgriculture() const isMiPCA = IsOmniAir() + const isAdCon = IsAdCon() return ( {(isAg || user.hasFeature("admin")) && ( @@ -238,7 +237,7 @@ export default function SideNavigator(props: Props) { )} - {(IsOmniAir() || user.hasFeature("admin")) && ( + {(isMiPCA || user.hasFeature("admin")) && ( - {open && } + {open && } + + + )} + {(isAdCon || user.hasFeature("admin")) && ( + + goTo("/constructionMap")} + classes={getClasses("/constructionMap")} + > + + + + {open && } )} diff --git a/src/pages/Device.tsx b/src/pages/Device.tsx index d04f440..9f966c9 100644 --- a/src/pages/Device.tsx +++ b/src/pages/Device.tsx @@ -51,6 +51,7 @@ export default function DevicePage() { const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false) const loadDevice = () => { + console.log("load device page data") if (loading) return setLoading(true) deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {