From ec11ae2ef777083e82643dc4e165f6c6c46f5001 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Mon, 24 Feb 2025 21:38:14 +0100
Subject: [PATCH] add search

---
 interface/src/app/main/Devices.tsx | 121 +++++++++++++++++++----------
 1 file changed, 79 insertions(+), 42 deletions(-)

diff --git a/interface/src/app/main/Devices.tsx b/interface/src/app/main/Devices.tsx
index 0e5dc71fe..8e5a2a8ad 100644
--- a/interface/src/app/main/Devices.tsx
+++ b/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,47 +624,11 @@ const Devices = () => {
           border: '1px solid #177ac9'
         }}
       >
-        <Box sx={{ border: '1px solid #177ac9' }}>
-          <Typography noWrap variant="subtitle1" color="warning.main" sx={{ ml: 1 }}>
-            {coreData.devices[deviceIndex].n}&nbsp;(
-            {coreData.devices[deviceIndex].tn})
-          </Typography>
-
+        <Box sx={{ p: 1 }}>
           <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)}
-              <ButtonTooltip title={LL.DEVICE_DETAILS()}>
-                <IconButton onClick={() => setShowDeviceInfo(true)}>
-                  <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                </IconButton>
-              </ButtonTooltip>
-              {me.admin && (
-                <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
-                  <IconButton onClick={customize}>
-                    <ConstructionIcon color="primary" sx={{ fontSize: 18 }} />
-                  </IconButton>
-                </ButtonTooltip>
-              )}
-              <ButtonTooltip title={LL.EXPORT()}>
-                <IconButton onClick={handleDownloadCsv}>
-                  <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
-                </IconButton>
-              </ButtonTooltip>
-              <ButtonTooltip title={LL.FAVORITES()}>
-                <IconButton onClick={() => setOnlyFav(!onlyFav)}>
-                  {onlyFav ? (
-                    <StarIcon color="primary" sx={{ fontSize: 18 }} />
-                  ) : (
-                    <StarBorderOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                  )}
-                </IconButton>
-              </ButtonTooltip>
+            <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()}>
@@ -665,6 +638,70 @@ const Devices = () => {
               </ButtonTooltip>
             </Grid>
           </Grid>
+
+          <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 }} />
+            </IconButton>
+          </ButtonTooltip>
+          {me.admin && (
+            <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
+              <IconButton onClick={customize}>
+                <ConstructionIcon color="primary" sx={{ fontSize: 18 }} />
+              </IconButton>
+            </ButtonTooltip>
+          )}
+          <ButtonTooltip title={LL.EXPORT()}>
+            <IconButton onClick={handleDownloadCsv}>
+              <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
+            </IconButton>
+          </ButtonTooltip>
+
+          <ButtonTooltip title={LL.FAVORITES()}>
+            <ToggleButton
+              value="1"
+              size="small"
+              selected={onlyFav}
+              onChange={() => {
+                setOnlyFav(!onlyFav);
+              }}
+            >
+              {onlyFav ? (
+                <StarIcon color="primary" sx={{ fontSize: 18 }} />
+              ) : (
+                <StarBorderOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+              )}{' '}
+            </ToggleButton>
+          </ButtonTooltip>
+
+          <span style={{ color: 'grey', fontSize: '12px' }}>
+            &nbsp;
+            {LL.SHOWING() +
+              ' ' +
+              shown_data.length +
+              '/' +
+              coreData.devices[deviceIndex].e +
+              ' ' +
+              LL.ENTITIES(shown_data.length)}
+          </span>
         </Box>
 
         <Table