update to the group setting for adding/removing devices
This commit is contained in:
csawatzky
parent
68ec1217c6
commit
acbd49b907
2 changed files with 118 additions and 28 deletions
|
|
@ -7,6 +7,7 @@ import {
|
|||
DialogTitle,
|
||||
Divider,
|
||||
Grid2,
|
||||
IconButton,
|
||||
lighten,
|
||||
List,
|
||||
ListItem,
|
||||
|
|
@ -36,12 +37,23 @@ import { useGlobalState } from "providers";
|
|||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import RemoveGroup from "./RemoveGroup";
|
||||
import { pond } from "protobuf-ts/pond";
|
||||
import { Add, Remove } from "@mui/icons-material";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
return ({
|
||||
deviceListContainer: {
|
||||
marginBottom: theme.spacing(1)
|
||||
},
|
||||
listTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 650
|
||||
},
|
||||
listButton: {
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
backgroundColor: lighten(theme.palette.background.default, 0.25)
|
||||
}
|
||||
},
|
||||
devicesList: {
|
||||
overflow: "auto",
|
||||
minHeight: "25vh",
|
||||
|
|
@ -87,6 +99,7 @@ export default function GroupSettings(props: Props) {
|
|||
const deviceAPI = useDeviceAPI();
|
||||
const snackbar = useSnackbar()
|
||||
const [devices, setDevices] = useState<Device[]>([]);
|
||||
const [nonGroupDevices, setNonGroupDevices] = useState<Device[]>([]);
|
||||
const [group, setGroup] = useState<Group>(initialGroup ? Group.clone(initialGroup) : new Group());
|
||||
const [isRemoveGroupOpen, setIsRemoveGroupOpen] = useState<boolean>(
|
||||
mode === "remove" ? true : false
|
||||
|
|
@ -109,13 +122,14 @@ export default function GroupSettings(props: Props) {
|
|||
|
||||
const loadDevices = useCallback(() => {
|
||||
setLoadingDevices(true);
|
||||
//this lists the devices for the user/team viewing
|
||||
deviceAPI
|
||||
.list(1000000, 0, "asc")
|
||||
.then((response: any) => {
|
||||
let rDevices: Device[] = response.data.devices
|
||||
? response.data.devices.map((device: any) => Device.any(device))
|
||||
: [];
|
||||
|
||||
//remove duplicates from the options
|
||||
setDevices(rDevices);
|
||||
})
|
||||
.catch((_error: any) => {
|
||||
|
|
@ -124,6 +138,16 @@ export default function GroupSettings(props: Props) {
|
|||
.finally(() => setLoadingDevices(false));
|
||||
}, [deviceAPI, as]);
|
||||
|
||||
useEffect(()=>{
|
||||
let ungrouped: Device[] = []
|
||||
devices.forEach(device => {
|
||||
if(!groupDeviceNumbers.includes(device.id())){
|
||||
ungrouped.push(device)
|
||||
}
|
||||
})
|
||||
setNonGroupDevices(ungrouped)
|
||||
},[groupDeviceNumbers, devices])
|
||||
|
||||
useEffect(() => {
|
||||
if (prevInitialGroup !== initialGroup) {
|
||||
setGroup(initialGroup ? Group.clone(initialGroup) : new Group());
|
||||
|
|
@ -317,27 +341,58 @@ export default function GroupSettings(props: Props) {
|
|||
</ListItem>
|
||||
</List>
|
||||
) : (
|
||||
<List dense className={classes.devicesList}>
|
||||
{filterDevices(deviceSearch, devices, [])
|
||||
.sort((a, b: Device) => a.name().localeCompare(b.name()))
|
||||
.map(device => {
|
||||
const label = `checkbox-list-secondary-label-${device.id()}`;
|
||||
return (
|
||||
<ListItem key={device.id()} onClick={() => changeDevices(device.id())}>
|
||||
<ListItemText id={label} primary={device.name()} />
|
||||
<ListItemSecondaryAction>
|
||||
<Checkbox
|
||||
edge="end"
|
||||
onChange={() => changeDevices(device.id())}
|
||||
checked={group.settings.devices.includes(device.id())}
|
||||
inputProps={{ "aria-labelledby": label }}
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
<React.Fragment>
|
||||
{groupDevices &&
|
||||
<List dense className={classes.devicesList}>
|
||||
{filterDevices(deviceSearch, groupDevices, [])
|
||||
.sort((a, b: Device) => a.name().localeCompare(b.name()))
|
||||
.map(device => {
|
||||
const label = `checkbox-list-secondary-label-${device.id()}`;
|
||||
return (
|
||||
<ListItem className={classes.listButton} key={device.id()} onClick={() => {
|
||||
removeDevice(device.id())
|
||||
}}>
|
||||
<ListItemText id={label} primary={device.name()} />
|
||||
<ListItemSecondaryAction>
|
||||
{/* <Checkbox
|
||||
edge="end"
|
||||
onChange={() => changeDevices(device.id())}
|
||||
checked={group.settings.devices.includes(device.id())}
|
||||
inputProps={{ "aria-labelledby": label }}
|
||||
disabled={!canEdit}
|
||||
/> */}
|
||||
-
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
}
|
||||
<List dense className={classes.devicesList}>
|
||||
{filterDevices(deviceSearch, nonGroupDevices, [])
|
||||
.sort((a, b: Device) => a.name().localeCompare(b.name()))
|
||||
.map(device => {
|
||||
const label = `checkbox-list-secondary-label-${device.id()}`;
|
||||
return (
|
||||
<ListItem className={classes.listButton} key={device.id()} onClick={() => {
|
||||
addDevice(device.id())
|
||||
}}>
|
||||
<ListItemText id={label} primary={device.name()} />
|
||||
<ListItemSecondaryAction>
|
||||
{/* <Checkbox
|
||||
edge="end"
|
||||
onChange={() => changeDevices(device.id())}
|
||||
checked={group.settings.devices.includes(device.id())}
|
||||
inputProps={{ "aria-labelledby": label }}
|
||||
disabled={!canEdit}
|
||||
/> */}
|
||||
+
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
|
|
@ -383,16 +438,49 @@ export default function GroupSettings(props: Props) {
|
|||
</ListItem>
|
||||
</List>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
{groupDevices &&
|
||||
<React.Fragment>
|
||||
<Typography className={classes.listTitle}>Grouped Devices</Typography>
|
||||
<List dense className={classes.devicesList}>
|
||||
{filterDevices(deviceSearch, groupDevices, [])
|
||||
.sort((a, b: Device) => a.name().localeCompare(b.name()))
|
||||
.map(device => {
|
||||
const label = `checkbox-list-secondary-label-${device.id()}`;
|
||||
return (
|
||||
<ListItem className={classes.listButton} key={device.id()} onClick={() => {
|
||||
removeDevice(device.id())
|
||||
}}>
|
||||
<ListItemText id={label} primary={device.name()} />
|
||||
<ListItemSecondaryAction>
|
||||
{/* <Checkbox
|
||||
edge="end"
|
||||
onChange={() => changeDevices(device.id())}
|
||||
checked={group.settings.devices.includes(device.id())}
|
||||
inputProps={{ "aria-labelledby": label }}
|
||||
disabled={!canEdit}
|
||||
/> */}
|
||||
<Remove />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</React.Fragment>
|
||||
}
|
||||
<Typography className={classes.listTitle}>Devices You Can Add</Typography>
|
||||
<List dense className={classes.devicesList}>
|
||||
{filterDevices(deviceSearch, devices, [])
|
||||
{filterDevices(deviceSearch, nonGroupDevices, [])
|
||||
.sort((a, b: Device) => a.name().localeCompare(b.name()))
|
||||
.map(device => {
|
||||
const label = `checkbox-list-secondary-label-${device.id()}`;
|
||||
return (
|
||||
<ListItem key={device.id()} onClick={() => changeDevices(device.id())}>
|
||||
<ListItem className={classes.listButton} key={device.id()} onClick={() => {
|
||||
addDevice(device.id())
|
||||
}}>
|
||||
<ListItemText id={label} primary={device.name()} />
|
||||
<ListItemSecondaryAction>
|
||||
<Checkbox
|
||||
{/* <Checkbox
|
||||
edge="end"
|
||||
onChange={(_, checked) => {
|
||||
if (checked) addDevice(device.id());
|
||||
|
|
@ -402,12 +490,14 @@ export default function GroupSettings(props: Props) {
|
|||
checked={groupDeviceNumbers.includes(device.id())}
|
||||
inputProps={{ "aria-labelledby": label }}
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
/> */}
|
||||
<Add />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue