andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2026-01-31 11:09:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

add search

Browse Source
This commit is contained in:
proddy
2025-02-24 21:38:14 +01:00
parent b857c6eb44
commit ec11ae2ef7
1 changed files with 79 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
interface/src/app/main/Devices.tsx
View File

@@ -19,6 +19,7 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined'; import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined'; import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import SearchIcon from '@mui/icons-material/Search';
import StarIcon from '@mui/icons-material/Star'; import StarIcon from '@mui/icons-material/Star';
import StarBorderOutlinedIcon from '@mui/icons-material/StarBorderOutlined'; import StarBorderOutlinedIcon from '@mui/icons-material/StarBorderOutlined';
import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined'; import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
@@ -32,9 +33,12 @@ import {
DialogTitle, DialogTitle,
Grid2 as Grid, Grid2 as Grid,
IconButton, IconButton,
InputAdornment,
List, List,
ListItem, ListItem,
ListItemText, ListItemText,
TextField,
ToggleButton,
Typography Typography
} from '@mui/material'; } from '@mui/material';
@@ -81,6 +85,7 @@ const Devices = () => {
const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false); const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false);
const [showDeviceInfo, setShowDeviceInfo] = useState(false); const [showDeviceInfo, setShowDeviceInfo] = useState(false);
const [selectedDevice, setSelectedDevice] = useState<number>(); const [selectedDevice, setSelectedDevice] = useState<number>();
const [search, setSearch] = useState('');
const navigate = useNavigate(); const navigate = useNavigate();
@@ -591,8 +596,12 @@ const Devices = () => {
); );
const shown_data = onlyFav const shown_data = onlyFav
? deviceData.nodes.filter((dv) => hasMask(dv.id, DeviceEntityMask.DV_FAVORITE)) ? deviceData.nodes.filter(
: deviceData.nodes; (dv) =>
hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) &&
dv.id.slice(2).includes(search)
)
: deviceData.nodes.filter((dv) => dv.id.slice(2).includes(search));
const deviceIndex = coreData.devices.findIndex( const deviceIndex = coreData.devices.findIndex(
(d) => d.id === device_select.state.id (d) => d.id === device_select.state.id
@@ -615,21 +624,39 @@ const Devices = () => {
border: '1px solid #177ac9' border: '1px solid #177ac9'
}} }}
> >
<Box sx={{ border: '1px solid #177ac9' }}> <Box sx={{ p: 1 }}>
<Typography noWrap variant="subtitle1" color="warning.main" sx={{ ml: 1 }}> <Grid container justifyContent="space-between">
<Typography noWrap variant="subtitle1" color="warning.main">
{coreData.devices[deviceIndex].n}&nbsp;( {coreData.devices[deviceIndex].n}&nbsp;(
{coreData.devices[deviceIndex].tn}) {coreData.devices[deviceIndex].tn})
</Typography> </Typography>
<Grid justifyContent="flex-end">
<ButtonTooltip title={LL.CLOSE()}>
<IconButton onClick={resetDeviceSelect}>
<HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
</IconButton>
</ButtonTooltip>
</Grid>
</Grid>
<Grid container justifyContent="space-between"> <TextField
<Typography sx={{ ml: 1 }} variant="subtitle2" color="grey"> size="small"
{LL.SHOWING() + variant="outlined"
' ' + sx={{ width: '22ch' }}
shown_data.length + placeholder={LL.SEARCH()}
'/' + onChange={(event) => {
coreData.devices[deviceIndex].e + setSearch(event.target.value);
' ' + }}
LL.ENTITIES(shown_data.length)} slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">
<SearchIcon color="primary" sx={{ fontSize: 16 }} />
</InputAdornment>
)
}
}}
/>
<ButtonTooltip title={LL.DEVICE_DETAILS()}> <ButtonTooltip title={LL.DEVICE_DETAILS()}>
<IconButton onClick={() => setShowDeviceInfo(true)}> <IconButton onClick={() => setShowDeviceInfo(true)}>
<InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} /> <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
@@ -647,24 +674,34 @@ const Devices = () => {
<DownloadIcon color="primary" sx={{ fontSize: 18 }} /> <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
</IconButton> </IconButton>
</ButtonTooltip> </ButtonTooltip>
<ButtonTooltip title={LL.FAVORITES()}> <ButtonTooltip title={LL.FAVORITES()}>
<IconButton onClick={() => setOnlyFav(!onlyFav)}> <ToggleButton
value="1"
size="small"
selected={onlyFav}
onChange={() => {
setOnlyFav(!onlyFav);
}}
>
{onlyFav ? ( {onlyFav ? (
<StarIcon color="primary" sx={{ fontSize: 18 }} /> <StarIcon color="primary" sx={{ fontSize: 18 }} />
) : ( ) : (
<StarBorderOutlinedIcon color="primary" sx={{ fontSize: 18 }} /> <StarBorderOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
)} )}{' '}
</IconButton> </ToggleButton>
</ButtonTooltip> </ButtonTooltip>
</Typography>
<Grid justifyContent="flex-end"> <span style={{ color: 'grey', fontSize: '12px' }}>
<ButtonTooltip title={LL.CLOSE()}> &nbsp;
<IconButton onClick={resetDeviceSelect}> {LL.SHOWING() +
<HighlightOffIcon color="primary" sx={{ fontSize: 18 }} /> ' ' +
</IconButton> shown_data.length +
</ButtonTooltip> '/' +
</Grid> coreData.devices[deviceIndex].e +
</Grid> ' ' +
LL.ENTITIES(shown_data.length)}
</span>
</Box> </Box>
<Table <Table