Merge pull request #2423 from proddy/dev

add search to Devices webpage
emsesp · Feb 24, 2025 · 76a317b · 76a317b
2 parents 77ff610 + ec11ae2
commit 76a317b
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 114 deletions.
diff --git a/interface/package.json b/interface/package.json
@@ -36,7 +36,7 @@
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
     "react-router": "^7.2.0",
-    "react-toastify": "^11.0.3",
+    "react-toastify": "^11.0.5",
     "typesafe-i18n": "^5.26.2",
     "typescript": "^5.7.3"
   },
@@ -57,7 +57,7 @@
     "prettier": "^3.5.2",
     "rollup-plugin-visualizer": "^5.14.0",
     "terser": "^5.39.0",
-    "typescript-eslint": "8.24.1",
+    "typescript-eslint": "8.25.0",
     "vite": "^6.1.1",
     "vite-plugin-imagemin": "^0.6.1",
     "vite-tsconfig-paths": "^5.1.4"

diff --git a/interface/src/App.tsx b/interface/src/App.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Slide, ToastContainer } from 'react-toastify';
+import { ToastContainer, Zoom } from 'react-toastify';
 
 import AppRouting from 'AppRouting';
 import CustomTheme from 'CustomTheme';
@@ -43,17 +43,20 @@ const App = () => {
         <AppRouting />
         <ToastContainer
           position="bottom-left"
-          autoClose={2000}
+          autoClose={3000}
           hideProgressBar={false}
           newestOnTop={false}
-          closeOnClick={true}
+          closeOnClick
           rtl={false}
-          pauseOnFocusLoss={false}
+          pauseOnFocusLoss
           draggable={false}
           pauseOnHover={false}
-          transition={Slide}
+          transition={Zoom}
           closeButton={false}
-          theme="light"
+          theme="dark"
+          toastStyle={{
+            border: '1px solid #177ac9'
+          }}
         />
       </CustomTheme>
     </TypesafeI18n>

diff --git a/interface/src/app/main/Customizations.tsx b/interface/src/app/main/Customizations.tsx
@@ -593,7 +593,7 @@ const Customizations = () => {
             </Button>
           </Grid>
           <Grid>
-            <Typography variant="subtitle2" color="primary">
+            <Typography variant="subtitle2" color="grey">
               {LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}
               &nbsp;{LL.ENTITIES(deviceEntities.length)}
             </Typography>

diff --git 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