add search

interface/src/app/main/Devices.tsx

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