andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 07:49:52 +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>DESCRIPTION</HeaderCell>
<HeaderCell>ENTITIES</HeaderCell>
<HeaderCell />
<HeaderCell/>
</HeaderRow>
</Header>
<Body>
@@ -767,7 +767,7 @@ const DashboardData: FC = () => {
VALUE
</Button>
</HeaderCell>
<HeaderCell />
<HeaderCell/>
</HeaderRow>
</Header>
<Body>

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

@@ -10,6 +10,7 @@ import {
DialogContent,
DialogTitle,
ToggleButton,
IconButton,
ToggleButtonGroup
} from '@mui/material';
@@ -36,7 +37,7 @@ import * as EMSESP from './api';
import { extractErrorMessage } from '../utils';
import { DeviceShort, Devices, DeviceEntity } from './types';
import { DeviceShort, Devices, DeviceEntity, DeviceEntityMask } from './types';
const SettingsCustomization: FC = () => {
const { enqueueSnackbar } = useSnackbar();
@@ -46,16 +47,20 @@ const SettingsCustomization: FC = () => {
const [errorMessage, setErrorMessage] = useState<string>();
const [selectedDevice, setSelectedDevice] = useState<number>(0);
const [confirmReset, setConfirmReset] = useState<boolean>(false);
const [selectedFilters, setSelectedFilters] = useState<number>(DeviceEntityMask.DV_FAVORITE);
// eslint-disable-next-line
const [masks, setMasks] = useState(() => ['']);
const entities_theme = useTheme({
Table: `
height: 100%;
`,
BaseRow: `
font-size: 14px;
color: white;
height: 32px;
`,
`,
HeaderRow: `
text-transform: uppercase;
background-color: black;
@@ -88,14 +93,19 @@ const SettingsCustomization: FC = () => {
border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9;
}
`,
`,
BaseCell: `
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
&:nth-of-type(1) {
min-width: 128px;
width: 128px;
width: 130px;
}
&:nth-of-type(2) {
flex: 1;
}
&:last-of-type {
text-align: right;
}
`
});
@@ -192,7 +202,7 @@ const SettingsCustomization: FC = () => {
<Box color="warning.main">
<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="warning" sx={{ fontSize: 13 }} />
<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' }}>
@@ -263,10 +273,15 @@ const SettingsCustomization: FC = () => {
};
const renderDeviceData = () => {
if (devices?.devices.length === 0 || !deviceEntities) {
if (devices?.devices.length === 0 || deviceEntities[0].id === '') {
return;
}
const hasMask = (de: DeviceEntity) => {
return de.m & selectedFilters;
return (de.m & DeviceEntityMask.DV_FAVORITE) === DeviceEntityMask.DV_FAVORITE;
};
const setMask = (de: DeviceEntity, newMask: string[]) => {
var new_mask = 0;
for (let entry of newMask) {
@@ -295,62 +310,95 @@ const SettingsCustomization: FC = () => {
};
return (
<Table data={{ nodes: deviceEntities }} theme={entities_theme} sort={entity_sort} layout={{ custom: true }}>
{(tableList: any) => (
<>
<Header>
<HeaderRow>
<HeaderCell>OPTIONS</HeaderCell>
<HeaderCell resize>
<Button
fullWidth
style={{ fontSize: '14px', justifyContent: 'flex-start' }}
endIcon={getSortIcon(entity_sort.state, 'NAME')}
onClick={() => entity_sort.fns.onToggleSort({ sortKey: 'NAME' })}
>
NAME
</Button>
</HeaderCell>
<HeaderCell>VALUE</HeaderCell>
<HeaderCell />
</HeaderRow>
</Header>
<Body>
{tableList.map((de: DeviceEntity) => (
<Row key={de.id} item={de}>
<Cell>
<ToggleButtonGroup
size="small"
color="secondary"
value={getMask(de)}
onChange={(event, mask) => {
setMask(de, mask);
}}
<>
<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) => (
<>
<Header>
<HeaderRow>
<HeaderCell>OPTIONS</HeaderCell>
<HeaderCell resize>
<Button
fullWidth
style={{ fontSize: '14px', justifyContent: 'flex-start' }}
endIcon={getSortIcon(entity_sort.state, 'NAME')}
onClick={() => entity_sort.fns.onToggleSort({ sortKey: 'NAME' })}
>
<ToggleButton value="8" color="warning" disabled={(de.m & 1) !== 0 || de.id === ''}>
<StarIcon sx={{ fontSize: 14 }} />
</ToggleButton>
<ToggleButton value="4" disabled={!de.w}>
<EditOffOutlinedIcon sx={{ fontSize: 14 }} />
</ToggleButton>
<ToggleButton value="2">
<CommentsDisabledOutlinedIcon sx={{ fontSize: 14 }} />
</ToggleButton>
<ToggleButton value="1">
<VisibilityOffOutlinedIcon sx={{ fontSize: 14 }} />
</ToggleButton>
</ToggleButtonGroup>
</Cell>
<Cell>
{de.id}&nbsp;({de.s})
</Cell>
<Cell>{formatValue(de.v)}</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
NAME
</Button>
</HeaderCell>
<HeaderCell pinRight={true}>VALUE</HeaderCell>
<HeaderCell />
</HeaderRow>
</Header>
<Body>
{tableList.map((de: DeviceEntity) => (
<Row key={de.id} item={de}>
<Cell>
<ToggleButtonGroup
size="small"
color="secondary"
value={getMask(de)}
onChange={(event, mask) => {
setMask(de, mask);
}}
>
<ToggleButton value="8" disabled={(de.m & 1) !== 0 || de.id === ''}>
<StarIcon sx={{ fontSize: 14 }} />
</ToggleButton>
<ToggleButton value="4" disabled={!de.w}>
<EditOffOutlinedIcon sx={{ fontSize: 14 }} />
</ToggleButton>
<ToggleButton value="2">
<CommentsDisabledOutlinedIcon sx={{ fontSize: 14 }} />
</ToggleButton>
<ToggleButton value="1">
<VisibilityOffOutlinedIcon sx={{ fontSize: 14 }} />
</ToggleButton>
</ToggleButtonGroup>
</Cell>
<Cell>
{de.id}&nbsp;({de.s})
</Cell>
<Cell>{formatValue(de.v)}</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
</>
);
};
@@ -390,12 +438,18 @@ const SettingsCustomization: FC = () => {
const content = () => {
return (
<>
<div style={{ height: '100vh' }}>
<Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
Device Entities
</Typography>
{renderDeviceList()}
{renderDeviceData()}
<div
style={{
height: '80%'
}}
>
{renderDeviceData()}
</div>
<Box display="flex" flexWrap="wrap">
<Box flexGrow={1}>
<ButtonRow>
@@ -416,7 +470,7 @@ const SettingsCustomization: FC = () => {
</ButtonRow>
</Box>
{renderResetDialog()}
</>
</div>
);
};

13
mock-api/server.js
View File

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