andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 15:59:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Proddy
2022-04-16 16:58:49 +02:00
parent 9d7820d155
commit 615e86d177
1 changed files with 52 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
interface/src/project/SettingsCustomization.tsx
View File

@@ -10,8 +10,8 @@ import {
DialogContent, DialogContent,
DialogTitle, DialogTitle,
ToggleButton, ToggleButton,
IconButton, ToggleButtonGroup,
ToggleButtonGroup Tooltip
} 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 +37,7 @@ import * as EMSESP from './api';
import { extractErrorMessage } from '../utils'; import { extractErrorMessage } from '../utils';
import { DeviceShort, Devices, DeviceEntity, DeviceEntityMask } from './types'; import { DeviceShort, Devices, DeviceEntity } from './types';
const SettingsCustomization: FC = () => { const SettingsCustomization: FC = () => {
const { enqueueSnackbar } = useSnackbar(); const { enqueueSnackbar } = useSnackbar();
@@ -47,7 +47,7 @@ const SettingsCustomization: FC = () => {
const [errorMessage, setErrorMessage] = useState<string>(); const [errorMessage, setErrorMessage] = useState<string>();
const [selectedDevice, setSelectedDevice] = useState<number>(0); const [selectedDevice, setSelectedDevice] = useState<number>(0);
const [confirmReset, setConfirmReset] = useState<boolean>(false); const [confirmReset, setConfirmReset] = useState<boolean>(false);
const [selectedFilters, setSelectedFilters] = useState<number>(DeviceEntityMask.DV_FAVORITE); const [selectedFilters, setSelectedFilters] = useState<number>(15);
// eslint-disable-next-line // eslint-disable-next-line
const [masks, setMasks] = useState(() => ['']); const [masks, setMasks] = useState(() => ['']);
@@ -200,23 +200,7 @@ const SettingsCustomization: FC = () => {
return ( return (
<> <>
<Box color="warning.main"> <Box color="warning.main">
<Typography variant="body2">Select a device and customize each of its entities using the options:</Typography> <Typography variant="body2">Select a device and customize each of its entities using the options.</Typography>
<Typography mt={1} ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
<StarIcon color="secondary" sx={{ fontSize: 13 }} />
&nbsp;mark it as favorite to be listed at the top of the Dashboard
</Typography>
<Typography ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
<EditOffOutlinedIcon color="secondary" sx={{ fontSize: 13 }} />
&nbsp;make it read-only, only if it has write operation available
</Typography>
<Typography ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
<CommentsDisabledOutlinedIcon color="secondary" sx={{ fontSize: 13 }} />
&nbsp;excluded it from MQTT and API outputs
</Typography>
<Typography ml={2} mb={1} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
<VisibilityOffOutlinedIcon color="secondary" sx={{ fontSize: 13 }} />
&nbsp;hide it from the Dashboard
</Typography>
</Box> </Box>
<ValidatedTextField <ValidatedTextField
name="device" name="device"
@@ -277,71 +261,71 @@ const SettingsCustomization: FC = () => {
return; return;
} }
const hasMask = (de: DeviceEntity) => { const getMaskNumber = (newMask: string[]) => {
return de.m & selectedFilters;
return (de.m & DeviceEntityMask.DV_FAVORITE) === DeviceEntityMask.DV_FAVORITE;
};
const setMask = (de: DeviceEntity, newMask: string[]) => {
var new_mask = 0; var new_mask = 0;
for (let entry of newMask) { for (let entry of newMask) {
new_mask |= Number(entry); new_mask |= Number(entry);
} }
de.m = new_mask; return new_mask;
setMasks(newMask);
}; };
const getMask = (de: DeviceEntity) => { const getMaskString = (m: number) => {
var new_masks = []; var new_masks = [];
if ((de.m & 1) === 1 || de.id === '') { if ((m & 1) === 1) {
new_masks.push('1'); new_masks.push('1');
} }
if ((de.m & 2) === 2) { if ((m & 2) === 2) {
new_masks.push('2'); new_masks.push('2');
} }
if ((de.m & 4) === 4 && de.w) { if ((m & 4) === 4) {
new_masks.push('4'); new_masks.push('4');
} }
if ((de.m & 8) === 8) { if ((m & 8) === 8) {
new_masks.push('8'); new_masks.push('8');
} }
return new_masks; return new_masks;
}; };
return ( return (
<> <>
<IconButton size="small" onClick={() => setSelectedDevice(8)}> <Box ml={2} mt={1} mb={1}>
<StarIcon color="info" sx={{ fontSize: 16, verticalAlign: 'middle' }} /> Apply filter:&nbsp;
</IconButton>
<ToggleButtonGroup <ToggleButtonGroup
size="small" size="small"
color="secondary" color="secondary"
// value={getMask(selectedFilters)} value={getMaskString(selectedFilters)}
onChange={(event, mask) => { onChange={(event, mask) => {
// setMask(de, mask); setSelectedFilters(getMaskNumber(mask));
}} }}
> >
<ToggleButton value="8"> <ToggleButton value="8">
<Tooltip arrow placement="top" title="mark it as favorite to be listed at the top of the Dashboard">
<StarIcon sx={{ fontSize: 14 }} /> <StarIcon sx={{ fontSize: 14 }} />
</Tooltip>
</ToggleButton> </ToggleButton>
<ToggleButton value="4"> <ToggleButton value="4">
<Tooltip arrow placement="top" title="make it read-only, only if it has write operation available">
<EditOffOutlinedIcon sx={{ fontSize: 14 }} /> <EditOffOutlinedIcon sx={{ fontSize: 14 }} />
</Tooltip>
</ToggleButton> </ToggleButton>
<ToggleButton value="2"> <ToggleButton value="2">
<Tooltip arrow placement="top" title="excluded it from MQTT and API outputs">
<CommentsDisabledOutlinedIcon sx={{ fontSize: 14 }} /> <CommentsDisabledOutlinedIcon sx={{ fontSize: 14 }} />
</Tooltip>
</ToggleButton> </ToggleButton>
<ToggleButton value="1"> <ToggleButton value="1">
<Tooltip arrow placement="top" title="hide it from the Dashboard">
<VisibilityOffOutlinedIcon sx={{ fontSize: 14 }} /> <VisibilityOffOutlinedIcon sx={{ fontSize: 14 }} />
</Tooltip>
</ToggleButton> </ToggleButton>
</ToggleButtonGroup> </ToggleButtonGroup>
</Box>
<Table <Table
data={{ nodes: deviceEntities.filter((de) => hasMask(de)) }} data={{ nodes: deviceEntities.filter((de) => de.m & selectedFilters || !selectedFilters) }}
theme={entities_theme} theme={entities_theme}
sort={entity_sort} sort={entity_sort}
layout={{ custom: true, horizontalScroll: true }} layout={{ custom: true }}
> >
{(tableList: any) => ( {(tableList: any) => (
<> <>
@@ -369,9 +353,10 @@ const SettingsCustomization: FC = () => {
<ToggleButtonGroup <ToggleButtonGroup
size="small" size="small"
color="secondary" color="secondary"
value={getMask(de)} value={getMaskString(de.m)}
onChange={(event, mask) => { onChange={(event, mask) => {
setMask(de, mask); de.m = getMaskNumber(mask);
setMasks(['']);
}} }}
> >
<ToggleButton value="8" disabled={(de.m & 1) !== 0 || de.id === ''}> <ToggleButton value="8" disabled={(de.m & 1) !== 0 || de.id === ''}>
@@ -438,18 +423,12 @@ const SettingsCustomization: FC = () => {
const content = () => { const content = () => {
return ( return (
<div style={{ height: '100vh' }}> <>
<Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary"> <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
Device Entities Device Entities
</Typography> </Typography>
{renderDeviceList()} {renderDeviceList()}
<div
style={{
height: '80%'
}}
>
{renderDeviceData()} {renderDeviceData()}
</div>
<Box display="flex" flexWrap="wrap"> <Box display="flex" flexWrap="wrap">
<Box flexGrow={1}> <Box flexGrow={1}>
<ButtonRow> <ButtonRow>
@@ -470,7 +449,7 @@ const SettingsCustomization: FC = () => {
</ButtonRow> </ButtonRow>
</Box> </Box>
{renderResetDialog()} {renderResetDialog()}
</div> </>
); );
}; };