add set all enabled button

This commit is contained in:
proddy
2022-04-17 20:52:24 +02:00
parent 3acb9c456e
commit 3c9cad2717
2 changed files with 66 additions and 35 deletions

View File

@@ -14,6 +14,7 @@ import {
ValidatedPasswordField, ValidatedPasswordField,
ValidatedTextField ValidatedTextField
} from '../../components'; } from '../../components';
import { APProvisionMode, APSettings } from '../../types'; import { APProvisionMode, APSettings } from '../../types';
import { numberValue, updateValue, useRest } from '../../utils'; import { numberValue, updateValue, useRest } from '../../utils';
import * as APApi from '../../api/ap'; import * as APApi from '../../api/ap';

View File

@@ -11,7 +11,8 @@ import {
DialogTitle, DialogTitle,
ToggleButton, ToggleButton,
ToggleButtonGroup, ToggleButtonGroup,
Tooltip Tooltip,
Grid
} from '@mui/material'; } from '@mui/material';
import { Table } from '@table-library/react-table-library/table'; import { Table } from '@table-library/react-table-library/table';
@@ -37,7 +38,7 @@ import * as EMSESP from './api';
import { extractErrorMessage } from '../utils'; import { extractErrorMessage } from '../utils';
import { DeviceShort, Devices, DeviceEntity } from './types'; import { DeviceShort, Devices, DeviceEntity, DeviceEntityMask } from './types';
const SettingsCustomization: FC = () => { const SettingsCustomization: FC = () => {
const { enqueueSnackbar } = useSnackbar(); const { enqueueSnackbar } = useSnackbar();
@@ -286,40 +287,69 @@ const SettingsCustomization: FC = () => {
return new_masks; return new_masks;
}; };
const maskDisabled = (set: boolean) => {
setDeviceEntities(
deviceEntities
.filter((de) => de.m & selectedFilters || !selectedFilters)
.map(({ m, ...entities }) => ({
...entities,
m: set
? m | (DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE)
: m & ~(DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE)
}))
);
};
return ( return (
<> <>
<Typography sx={{ pt: 1, pb: 1 }} variant="subtitle2" color="primary"> <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
Apply filter:&nbsp; <Grid item>
<ToggleButtonGroup <Typography sx={{ pt: 1, pb: 1 }} variant="subtitle2" color="primary">
size="small" Apply filter:&nbsp;
color="secondary" </Typography>
value={getMaskString(selectedFilters)} </Grid>
onChange={(event, mask) => { <Grid item>
setSelectedFilters(getMaskNumber(mask)); <ToggleButtonGroup
}} size="small"
> color="secondary"
<ToggleButton value="8"> value={getMaskString(selectedFilters)}
<Tooltip arrow placement="top" title="mark it as favorite to be listed at the top of the Dashboard"> onChange={(event, mask) => {
<StarIcon sx={{ fontSize: 14 }} /> setSelectedFilters(getMaskNumber(mask));
</Tooltip> }}
</ToggleButton> >
<ToggleButton value="4"> <ToggleButton value="8">
<Tooltip arrow placement="top" title="make it read-only, only if it has write operation available"> <Tooltip arrow placement="top" title="mark it as favorite to be listed at the top of the Dashboard">
<EditOffOutlinedIcon sx={{ fontSize: 14 }} /> <StarIcon sx={{ fontSize: 14 }} />
</Tooltip> </Tooltip>
</ToggleButton> </ToggleButton>
<ToggleButton value="2"> <ToggleButton value="4">
<Tooltip arrow placement="top" title="excluded it from MQTT and API outputs"> <Tooltip arrow placement="top" title="make it read-only, only if it has write operation available">
<CommentsDisabledOutlinedIcon sx={{ fontSize: 14 }} /> <EditOffOutlinedIcon sx={{ fontSize: 14 }} />
</Tooltip> </Tooltip>
</ToggleButton> </ToggleButton>
<ToggleButton value="1"> <ToggleButton value="2">
<Tooltip arrow placement="top" title="hide it from the Dashboard"> <Tooltip arrow placement="top" title="excluded it from MQTT and API outputs">
<VisibilityOffOutlinedIcon sx={{ fontSize: 14 }} /> <CommentsDisabledOutlinedIcon sx={{ fontSize: 14 }} />
</Tooltip> </Tooltip>
</ToggleButton> </ToggleButton>
</ToggleButtonGroup> <ToggleButton value="1">
</Typography> <Tooltip arrow placement="top" title="hide it from the Dashboard">
<VisibilityOffOutlinedIcon sx={{ fontSize: 14 }} />
</Tooltip>
</ToggleButton>
</ToggleButtonGroup>
</Grid>
<Grid item>
<Button size="small" variant="contained" color="primary" onClick={() => maskDisabled(true)}>
set all disabled
</Button>
</Grid>
<Grid item>
<Button size="small" variant="contained" color="primary" onClick={() => maskDisabled(false)}>
set all enabled
</Button>
</Grid>
</Grid>
<Table <Table
data={{ nodes: deviceEntities.filter((de) => de.m & selectedFilters || !selectedFilters) }} data={{ nodes: deviceEntities.filter((de) => de.m & selectedFilters || !selectedFilters) }}
theme={entities_theme} theme={entities_theme}
@@ -401,7 +431,7 @@ const SettingsCustomization: FC = () => {
<Dialog open={confirmReset} onClose={() => setConfirmReset(false)}> <Dialog open={confirmReset} onClose={() => setConfirmReset(false)}>
<DialogTitle>Reset</DialogTitle> <DialogTitle>Reset</DialogTitle>
<DialogContent dividers> <DialogContent dividers>
Are you sure you want remove all customizations? EMS-ESP will then restart. Are you sure you want remove all customizations including the settings of Temperature and Analog sensors?
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button startIcon={<CancelIcon />} variant="outlined" onClick={() => setConfirmReset(false)} color="secondary"> <Button startIcon={<CancelIcon />} variant="outlined" onClick={() => setConfirmReset(false)} color="secondary">