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

added tooltip

Browse Source
This commit is contained in:
proddy
2022-03-27 22:12:49 +02:00
parent 821d7845f0
commit fe3e02cb2e
1 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,8 @@ import {
DialogContent, DialogContent,
DialogTitle, DialogTitle,
ToggleButton, ToggleButton,
ToggleButtonGroup ToggleButtonGroup,
Tooltip
} from '@mui/material'; } from '@mui/material';
import TableCell, { tableCellClasses } from '@mui/material/TableCell'; import TableCell, { tableCellClasses } from '@mui/material/TableCell';
@@ -29,7 +30,6 @@ import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined'; import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined';
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'; import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined'; import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore'; import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
import { ButtonRow, FormLoader, ValidatedTextField, SectionContent } from '../components'; import { ButtonRow, FormLoader, ValidatedTextField, SectionContent } from '../components';
@@ -59,7 +59,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 [masks, setMasks] = useState(() => ['fav', 'readonly', 'exclude_mqtt', 'exclude_web']); const [masks, setMasks] = useState(() => ['1']);
const fetchDevices = useCallback(async () => { const fetchDevices = useCallback(async () => {
try { try {
@@ -117,7 +117,8 @@ const SettingsCustomization: FC = () => {
<> <>
<Box color="warning.main"> <Box color="warning.main">
<Typography variant="body2"> <Typography variant="body2">
Customize which entities to exclude. This will have immediate effect on all services including MQTT and API. You can mark an entity as a favorite to be listed first in the Web Dashboard, or remove it from the
Dashboard, or disable it's write operation or exclude it from the MQTT and API outputs.
</Typography> </Typography>
</Box> </Box>
<ValidatedTextField <ValidatedTextField
@@ -171,16 +172,16 @@ const SettingsCustomization: FC = () => {
const setMask = (de: DeviceEntity, newMask: string[]) => { const setMask = (de: DeviceEntity, newMask: string[]) => {
var new_mask = 0; var new_mask = 0;
if (newMask.includes('exclude_web')) { if (newMask.includes('1')) {
new_mask |= 1; new_mask |= 1;
} }
if (newMask.includes('exclude_mqtt')) { if (newMask.includes('2')) {
new_mask |= 2; new_mask |= 2;
} }
if (newMask.includes('readonly')) { if (newMask.includes('4')) {
new_mask |= 4; new_mask |= 4;
} }
if (newMask.includes('fav')) { if (newMask.includes('8')) {
new_mask |= 8; new_mask |= 8;
} }
@@ -188,19 +189,19 @@ const SettingsCustomization: FC = () => {
setMasks(newMask); setMasks(newMask);
}; };
const getValue = (de: DeviceEntity) => { const getMask = (de: DeviceEntity) => {
var new_masks = []; var new_masks = [];
if ((de.m & 1) === 1) { if ((de.m & 1) === 1) {
new_masks.push('exclude_web'); new_masks.push('1');
} }
if ((de.m & 2) === 2) { if ((de.m & 2) === 2) {
new_masks.push('exclude_mqtt'); new_masks.push('2');
} }
if ((de.m & 4) === 4) { if ((de.m & 4) === 4) {
new_masks.push('readonly'); new_masks.push('4');
} }
if ((de.m & 8) === 8) { if ((de.m & 8) === 8) {
new_masks.push('fav'); new_masks.push('8');
} }
return new_masks; return new_masks;
@@ -222,22 +223,30 @@ const SettingsCustomization: FC = () => {
<ToggleButtonGroup <ToggleButtonGroup
size="small" size="small"
color="error" color="error"
value={getValue(de)} value={getMask(de)}
onChange={(event, mask) => { onChange={(event, mask) => {
setMask(de, mask); setMask(de, mask);
}} }}
> >
<ToggleButton value="fav" color="success"> <ToggleButton value="8" color="success" disabled={(de.m & 1) !== 0}>
<FavoriteBorderOutlinedIcon fontSize="small" /> <Tooltip title="Favorite">
<FavoriteBorderOutlinedIcon fontSize="small" />
</Tooltip>
</ToggleButton> </ToggleButton>
<ToggleButton value="readonly"> <ToggleButton value="4" disabled={!de.w}>
<EditOffOutlinedIcon fontSize="small" /> <Tooltip title="Force read-only">
<EditOffOutlinedIcon fontSize="small" />
</Tooltip>
</ToggleButton> </ToggleButton>
<ToggleButton value="exclude_mqtt"> <ToggleButton value="2">
<CommentsDisabledOutlinedIcon fontSize="small" /> <Tooltip title="Exclude in MQTT and API">
<CommentsDisabledOutlinedIcon fontSize="small" />
</Tooltip>
</ToggleButton> </ToggleButton>
<ToggleButton value="exclude_web"> <ToggleButton value="1">
<VisibilityOffOutlinedIcon fontSize="small" /> <Tooltip title="Don't show Web Dashboard">
<VisibilityOffOutlinedIcon fontSize="small" />
</Tooltip>
</ToggleButton> </ToggleButton>
</ToggleButtonGroup> </ToggleButtonGroup>
</StyledTableCell> </StyledTableCell>