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

togglebutton

Browse Source
This commit is contained in:
proddy
2022-04-16 15:31:46 +02:00
parent 275044bd78
commit 9d7820d155
3 changed files with 128 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
interface/src/project/DashboardData.tsx
View File

@@ -661,7 +661,7 @@ const DashboardData: FC = () => {
<HeaderCell resize>TYPE</HeaderCell> <HeaderCell resize>TYPE</HeaderCell>
<HeaderCell resize>DESCRIPTION</HeaderCell> <HeaderCell resize>DESCRIPTION</HeaderCell>
<HeaderCell>ENTITIES</HeaderCell> <HeaderCell>ENTITIES</HeaderCell>
<HeaderCell /> <HeaderCell/>
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>
@@ -767,7 +767,7 @@ const DashboardData: FC = () => {
VALUE VALUE
</Button> </Button>
</HeaderCell> </HeaderCell>
<HeaderCell /> <HeaderCell/>
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>

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

@@ -10,6 +10,7 @@ import {
DialogContent, DialogContent,
DialogTitle, DialogTitle,
ToggleButton, ToggleButton,
IconButton,
ToggleButtonGroup ToggleButtonGroup
} from '@mui/material'; } from '@mui/material';
@@ -36,7 +37,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();
@@ -46,11 +47,15 @@ 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);
// eslint-disable-next-line // eslint-disable-next-line
const [masks, setMasks] = useState(() => ['']); const [masks, setMasks] = useState(() => ['']);
const entities_theme = useTheme({ const entities_theme = useTheme({
Table: `
height: 100%;
`,
BaseRow: ` BaseRow: `
font-size: 14px; font-size: 14px;
color: white; color: white;
@@ -94,8 +99,13 @@ const SettingsCustomization: FC = () => {
border-right: 1px solid transparent; border-right: 1px solid transparent;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
&:nth-of-type(1) { &:nth-of-type(1) {
min-width: 128px; width: 130px;
width: 128px; }
&:nth-of-type(2) {
flex: 1;
}
&:last-of-type {
text-align: right;
} }
` `
}); });
@@ -192,7 +202,7 @@ const SettingsCustomization: FC = () => {
<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' }}> <Typography mt={1} ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
<StarIcon color="warning" sx={{ fontSize: 13 }} /> <StarIcon color="secondary" sx={{ fontSize: 13 }} />
&nbsp;mark it as favorite to be listed at the top of the Dashboard &nbsp;mark it as favorite to be listed at the top of the Dashboard
</Typography> </Typography>
<Typography ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}> <Typography ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
@@ -263,10 +273,15 @@ const SettingsCustomization: FC = () => {
}; };
const renderDeviceData = () => { const renderDeviceData = () => {
if (devices?.devices.length === 0 || !deviceEntities) { if (devices?.devices.length === 0 || deviceEntities[0].id === '') {
return; return;
} }
const hasMask = (de: DeviceEntity) => {
return de.m & selectedFilters;
return (de.m & DeviceEntityMask.DV_FAVORITE) === DeviceEntityMask.DV_FAVORITE;
};
const setMask = (de: DeviceEntity, newMask: string[]) => { const setMask = (de: DeviceEntity, newMask: string[]) => {
var new_mask = 0; var new_mask = 0;
for (let entry of newMask) { for (let entry of newMask) {
@@ -295,7 +310,39 @@ const SettingsCustomization: FC = () => {
}; };
return ( return (
<Table data={{ nodes: deviceEntities }} theme={entities_theme} sort={entity_sort} layout={{ custom: true }}> <>
<IconButton size="small" onClick={() => setSelectedDevice(8)}>
<StarIcon color="info" sx={{ fontSize: 16, verticalAlign: 'middle' }} />
</IconButton>
<ToggleButtonGroup
size="small"
color="secondary"
// value={getMask(selectedFilters)}
onChange={(event, mask) => {
// setMask(de, mask);
}}
>
<ToggleButton value="8">
<StarIcon sx={{ fontSize: 14 }} />
</ToggleButton>
<ToggleButton value="4">
<EditOffOutlinedIcon sx={{ fontSize: 14 }} />
</ToggleButton>
<ToggleButton value="2">
<CommentsDisabledOutlinedIcon sx={{ fontSize: 14 }} />
</ToggleButton>
<ToggleButton value="1">
<VisibilityOffOutlinedIcon sx={{ fontSize: 14 }} />
</ToggleButton>
</ToggleButtonGroup>
<Table
data={{ nodes: deviceEntities.filter((de) => hasMask(de)) }}
theme={entities_theme}
sort={entity_sort}
layout={{ custom: true, horizontalScroll: true }}
>
{(tableList: any) => ( {(tableList: any) => (
<> <>
<Header> <Header>
@@ -311,7 +358,7 @@ const SettingsCustomization: FC = () => {
NAME NAME
</Button> </Button>
</HeaderCell> </HeaderCell>
<HeaderCell>VALUE</HeaderCell> <HeaderCell pinRight={true}>VALUE</HeaderCell>
<HeaderCell /> <HeaderCell />
</HeaderRow> </HeaderRow>
</Header> </Header>
@@ -327,7 +374,7 @@ const SettingsCustomization: FC = () => {
setMask(de, mask); setMask(de, mask);
}} }}
> >
<ToggleButton value="8" color="warning" disabled={(de.m & 1) !== 0 || de.id === ''}> <ToggleButton value="8" disabled={(de.m & 1) !== 0 || de.id === ''}>
<StarIcon sx={{ fontSize: 14 }} /> <StarIcon sx={{ fontSize: 14 }} />
</ToggleButton> </ToggleButton>
<ToggleButton value="4" disabled={!de.w}> <ToggleButton value="4" disabled={!de.w}>
@@ -351,6 +398,7 @@ const SettingsCustomization: FC = () => {
</> </>
)} )}
</Table> </Table>
</>
); );
}; };
@@ -390,12 +438,18 @@ 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>
@@ -416,7 +470,7 @@ const SettingsCustomization: FC = () => {
</ButtonRow> </ButtonRow>
</Box> </Box>
{renderResetDialog()} {renderResetDialog()}
</> </div>
); );
}; };

13
mock-api/server.js
View File

@@ -698,7 +698,7 @@ const emsesp_deviceentities_4 = [
v: 16, v: 16,
id: 'hc2 selected room temperature', id: 'hc2 selected room temperature',
s: 'hc2/seltemp', s: 'hc2/seltemp',
m: 0, m: 8,
w: true, w: true,
}, },
{ {
@@ -916,15 +916,15 @@ function updateMask(entity, de, dd) {
objIndex = de.findIndex((obj) => obj.s == name) objIndex = de.findIndex((obj) => obj.s == name)
if (objIndex !== -1) { if (objIndex !== -1) {
de[objIndex].m = new_mask de[objIndex].m = new_mask
const fullname = de[objIndex].n const fullname = de[objIndex].id
objIndex = dd.data.findIndex((obj) => obj.n.slice(2) == fullname) objIndex = dd.data.findIndex((obj) => obj.id.slice(2) == fullname)
if (objIndex !== -1) { if (objIndex !== -1) {
// see if the mask has changed // see if the mask has changed
const old_mask = parseInt(dd.data[objIndex].n.slice(0, 2), 16) const old_mask = parseInt(dd.data[objIndex].id.slice(0, 2), 16)
if (old_mask !== new_mask) { if (old_mask !== new_mask) {
const mask_hex = entity.slice(0, 2) const mask_hex = entity.slice(0, 2)
console.log('Updating ' + dd.data[objIndex].n + ' -> ' + mask_hex + fullname) console.log('Updating ' + dd.data[objIndex].id + ' -> ' + mask_hex + fullname)
dd.data[objIndex].n = mask_hex + fullname dd.data[objIndex].id = mask_hex + fullname
} }
} }
} else { } else {
@@ -934,6 +934,7 @@ function updateMask(entity, de, dd) {
rest_server.post(EMSESP_MASKED_ENTITIES_ENDPOINT, (req, res) => { rest_server.post(EMSESP_MASKED_ENTITIES_ENDPOINT, (req, res) => {
const id = req.body.id const id = req.body.id
console.log('customization id = ' + id)
console.log(req.body.entity_ids) console.log(req.body.entity_ids)
for (const entity of req.body.entity_ids) { for (const entity of req.body.entity_ids) {
if (id === 1) { if (id === 1) {