Frontend 2.3.6

Luligu · Jan 9, 2025 · b7379ca · b7379ca
1 parent b4502c9
commit b7379ca
Show file tree

Hide file tree

Showing 16 changed files with 103 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,10 +26,12 @@ It is possible to change the mode (Classic, Dark or Light) in Settings, Matterbr
 
 - [platform]: Added selectEntity to get the entity names from a list in the config editor.
 - [websocket]: Added api /api/select/entities.
+- [frontend]: Added the possibility to move up and down the items in the config editor lists.
+- [frontend]: Added custom error messages for ErrorListTemplate and FieldErrorTemplate in react-jsonschema-form.
 
 ### Changed
 
-- [frontend]: Frontend v.2.3.5
+- [frontend]: Frontend v.2.3.6
 - [package]: Update dependencies.
 
 ### Fixed

diff --git a/frontend/build/asset-manifest.json b/frontend/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "./static/css/main.b1a621ee.css",
-    "main.js": "./static/js/main.d83cd884.js",
+    "main.css": "./static/css/main.18f673b9.css",
+    "main.js": "./static/js/main.5ba27b97.js",
     "static/js/453.abd36b29.chunk.js": "./static/js/453.abd36b29.chunk.js",
     "static/media/roboto-latin-700-normal.woff2": "./static/media/roboto-latin-700-normal.4535474e1cf8598695ad.woff2",
     "static/media/roboto-latin-500-normal.woff2": "./static/media/roboto-latin-500-normal.7077203b1982951ecf76.woff2",
@@ -60,12 +60,12 @@
     "static/media/roboto-greek-ext-300-normal.woff": "./static/media/roboto-greek-ext-300-normal.b590dbe5c639944366d1.woff",
     "static/media/roboto-greek-ext-400-normal.woff": "./static/media/roboto-greek-ext-400-normal.16eb83b4a3b1ea994243.woff",
     "index.html": "./index.html",
-    "main.b1a621ee.css.map": "./static/css/main.b1a621ee.css.map",
-    "main.d83cd884.js.map": "./static/js/main.d83cd884.js.map",
+    "main.18f673b9.css.map": "./static/css/main.18f673b9.css.map",
+    "main.5ba27b97.js.map": "./static/js/main.5ba27b97.js.map",
     "453.abd36b29.chunk.js.map": "./static/js/453.abd36b29.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.b1a621ee.css",
-    "static/js/main.d83cd884.js"
+    "static/css/main.18f673b9.css",
+    "static/js/main.5ba27b97.js"
   ]
 }
diff --git a/frontend/build/index.html b/frontend/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.d83cd884.js"></script><link href="./static/css/main.b1a621ee.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.5ba27b97.js"></script><link href="./static/css/main.18f673b9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/frontend/build/static/css/main.b1a621ee.css → frontend/build/static/css/main.18f673b9.css b/frontend/build/static/css/main.b1a621ee.css → frontend/build/static/css/main.18f673b9.css
diff --git a/frontend/build/static/css/main.18f673b9.css.map b/frontend/build/static/css/main.18f673b9.css.map
diff --git a/frontend/build/static/css/main.b1a621ee.css.map b/frontend/build/static/css/main.b1a621ee.css.map
diff --git a/frontend/build/static/js/main.d83cd884.js → frontend/build/static/js/main.5ba27b97.js b/frontend/build/static/js/main.d83cd884.js → frontend/build/static/js/main.5ba27b97.js
diff --git a/...ld/static/js/main.d83cd884.js.LICENSE.txt → ...ld/static/js/main.5ba27b97.js.LICENSE.txt b/...ld/static/js/main.d83cd884.js.LICENSE.txt → ...ld/static/js/main.5ba27b97.js.LICENSE.txt
diff --git a/frontend/build/static/js/main.5ba27b97.js.map b/frontend/build/static/js/main.5ba27b97.js.map
diff --git a/frontend/build/static/js/main.d83cd884.js.map b/frontend/build/static/js/main.d83cd884.js.map
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "private": true,
   "homepage": "./",
   "scripts": {

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -174,6 +174,7 @@ html {
 .tooltip-container {
   position: relative;
   display: inline-block;
+  z-index: 10;
 }
 
 .tooltip-text {
@@ -345,6 +346,7 @@ thead th {
   color: var(--header-text-color);
   background: var(--header-bg-color);
   text-align: left;
+  z-index: 10;
 }
 
 tbody td {

diff --git a/frontend/src/components/Devices.js b/frontend/src/components/Devices.js
@@ -384,13 +384,7 @@ function Devices() {
     <div className="MbfPageDiv">
 
       {/* Devices Configure Columns Dialog */}
-      <Dialog open={dialogDevicesOpen} onClose={handleDialogDevicesToggle} 
-        PaperProps={{style: { 
-          color: 'var(--div-text-color)', 
-          backgroundColor: 'var(--div-bg-color)', 
-          border: "2px solid var(--div-border-color)", 
-          borderRadius: 'var(--div-border-radius)', 
-          boxShadow: '2px 2px 5px var(--div-shadow-color)'}}}>
+      <Dialog open={dialogDevicesOpen} onClose={handleDialogDevicesToggle}>
         <DialogTitle>Configure Devices Columns</DialogTitle>
         <DialogContent>
           <FormGroup>
@@ -435,13 +429,7 @@ function Devices() {
       </div>
 
       {/* Clusters Configure Columns Dialog */}
-      <Dialog open={dialogClustersOpen} onClose={handleDialogClustersToggle} 
-        PaperProps={{style: { 
-          color: 'var(--div-text-color)', 
-          backgroundColor: 'var(--div-bg-color)', 
-          border: "2px solid var(--div-border-color)", 
-          borderRadius: 'var(--div-border-radius)', 
-          boxShadow: '2px 2px 5px var(--div-shadow-color)'}}}>
+      <Dialog open={dialogClustersOpen} onClose={handleDialogClustersToggle}>
         <DialogTitle>Configure Clusters Columns</DialogTitle>
         <DialogContent>
           <FormGroup>

diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
@@ -46,7 +46,7 @@ import { Connecting } from './Connecting';
 import { SystemInfoTable } from './SystemInfoTable';
 import { MatterbridgeInfoTable } from './MatterbridgeInfoTable';
 import { ConfirmCancelForm } from './ConfirmCancelForm';
-import { configUiSchema, ArrayFieldTemplate, ObjectFieldTemplate, RemoveButton, CheckboxWidget, createConfigTheme, DescriptionFieldTemplate } from './configEditor';
+import { configUiSchema, ArrayFieldTemplate, ObjectFieldTemplate, ErrorListTemplate, FieldErrorTemplate, RemoveButton, CheckboxWidget, createConfigTheme, DescriptionFieldTemplate } from './configEditor';
 import { getCssVariable } from './muiTheme';
 import { debug } from '../App';
 
@@ -615,7 +615,7 @@ function DialogConfigPlugin( { config, schema, handleCloseConfig } ) {
           uiSchema={configUiSchema} 
           validator={validator} 
           widgets={{ CheckboxWidget: CheckboxWidget }} 
-          templates={{ ArrayFieldTemplate, ObjectFieldTemplate, DescriptionFieldTemplate, ButtonTemplates: { RemoveButton } }} 
+          templates={{ ArrayFieldTemplate, ObjectFieldTemplate, DescriptionFieldTemplate, FieldErrorTemplate, ErrorListTemplate, ButtonTemplates: { RemoveButton } }} 
           onSubmit={handleSaveChanges} />
       </div>
     </ThemeProvider>  

diff --git a/frontend/src/components/configEditor.js b/frontend/src/components/configEditor.js
@@ -13,6 +13,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ThemeProvider from '@mui/material/styles/ThemeProvider';
@@ -26,6 +27,9 @@ import ListIcon from '@mui/icons-material/List';
 import WifiIcon from '@mui/icons-material/Wifi'; // For selectDevice icon=wifi
 import BluetoothIcon from '@mui/icons-material/Bluetooth'; // For selectDevice icon=ble
 import HubIcon from '@mui/icons-material/Hub';  // For selectDevice icon=hub
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';  // For ErrorListTemplate
 
 // @rjsf
 import { Templates } from '@rjsf/mui';
@@ -143,6 +147,21 @@ export function createConfigTheme(primaryColor) {
           },
         },
       },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            padding: '0px',
+            margin: '0px',
+            '&.Mui-disabled': {
+              color: 'var(--main-label-color)',
+            },
+          },
+        },
+        defaultProps: {
+          size: 'small',
+          color: 'primary',
+        },
+      },
       MuiListItemIcon: {
         styleOverrides: {
           root: {
@@ -193,15 +212,15 @@ export function createConfigTheme(primaryColor) {
 }
 
 export function ArrayFieldTemplate(props) {
-  // console.log('ArrayFieldTemplate: title', title, 'description', schema.description);
+  const { canAdd, onAddClick, schema, title } = props;
+  // console.log('ArrayFieldTemplate: title', title, 'description', schema.description, 'items', props.items);
+
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogEntityOpen, setDialogEntityOpen] = useState(false);
 
   const primaryColor = useMemo(() => getCssVariable('--primary-color', '#009a00'), []);
   const theme = useMemo(() => createConfigTheme(primaryColor), []);
 
-  const { canAdd, onAddClick, schema, title } = props;
-
   const handleDialogToggle = () => {
     setDialogOpen(!dialogOpen);
   };
@@ -243,14 +262,14 @@ export function ArrayFieldTemplate(props) {
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0px', margin: '0px', marginBottom: '0px' }}>
               {schema.selectFrom && 
                 <Tooltip title="Add a device from the list">
-                  <IconButton onClick={handleDialogToggle} size="small" color="primary">
+                  <IconButton onClick={handleDialogToggle}>
                     <ListIcon />
                   </IconButton>
                 </Tooltip>
               }
               {schema.selectEntityFrom && 
                 <Tooltip title="Add an entity from the list">
-                  <IconButton onClick={handleDialogEntityToggle} size="small" color="primary">
+                  <IconButton onClick={handleDialogEntityToggle}>
                     <ListIcon />
                   </IconButton>
                 </Tooltip>
@@ -274,8 +293,14 @@ export function ArrayFieldTemplate(props) {
           <Box sx={{ flexGrow: 1 }}>
             {element.children}
           </Box>
+          <IconButton disabled={!element.hasMoveUp} onClick={element.onReorderClick(element.index, element.index-1)}>
+            <KeyboardDoubleArrowUpIcon />
+          </IconButton>
+          <IconButton disabled={!element.hasMoveDown} onClick={element.onReorderClick(element.index, element.index+1)}>
+            <KeyboardDoubleArrowDownIcon />
+          </IconButton>
           <Tooltip title="Remove the device">
-            <IconButton onClick={element.onDropIndexClick(element.index)} size="small" color="primary">
+            <IconButton onClick={element.onDropIndexClick(element.index)}>
               <DeleteForever />
             </IconButton>
           </Tooltip>
@@ -423,6 +448,39 @@ export function DescriptionFieldTemplate(props) {
   );
 }
 
+export function ErrorListTemplate({ errors }) {
+  return (
+    <Box sx={{ padding: '10px', margin: '10px', border: '1px solid grey' }}>
+      <Typography variant="h6" color="error" gutterBottom>
+        Please fix the following errors:
+      </Typography>
+      <List>
+        {errors.map((error, index) => (
+          <ListItem key={index}>
+            <ListItemIcon>
+              <ErrorOutlineIcon color="error" />
+            </ListItemIcon>
+            <ListItemText primary={error.stack} />
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+};
+
+export function FieldErrorTemplate({ errors }) {
+  if(!errors) return null;
+  return (
+    <Box sx={{ padding: '0px', margin: '0px', marginTop: '5px' }}>
+      {errors.map((error, index) => (
+        <Typography key={index} color="error" variant="body2" sx={{ marginLeft: 1 }}>
+          {error}
+        </Typography>
+      ))}
+    </Box>
+  );
+};
+
 export function RemoveButton(props) {
   const { ...otherProps } = props;
   return (
@@ -458,5 +516,5 @@ export const configUiSchema = {
     "norender": false,
     "submitText": "Save the changes to the config file",
   },
-  'ui:globalOptions': { orderable: false },
+  'ui:globalOptions': { orderable: true },
 };
diff --git a/frontend/src/components/muiTheme.js b/frontend/src/components/muiTheme.js
@@ -28,6 +28,17 @@ export function createMuiTheme(primaryColor) {
       MuiTypography: {
         fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
       },
+      MuiDialog: {
+        styleOverrides: {
+          paper: {
+            color: 'var(--div-text-color)',
+            backgroundColor: 'var(--div-bg-color)',
+            border: '2px solid var(--div-border-color)',
+            borderRadius: 'var(--div-border-radius)',
+            boxShadow: '2px 2px 5px var(--div-shadow-color)',
+          },
+        },
+      },
       MuiTooltip: {
         defaultProps: {
           placement: 'top-start',
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.d83cd884.js"></script><link href="./static/css/main.b1a621ee.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.5ba27b97.js"></script><link href="./static/css/main.18f673b9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>